Comments (3)
I solved this problem for me. But I don't know how to add my solution to the original repository.
My solution is:
- Install
react-selectable
from my repository (branch:add-support-for-external-scrolling
):
npm install git://github.com/danilvalov/react-selectable.git#add-support-for-external-scrolling --save
- Use the following example:
class ExampleWithHorizontalScrolling extends Component {
constructor () {
super();
this._isSelecting = false; // state of selection: active or not
this._scrollingTimer = null; // scrolling setTimeout
this._startingScrollLeft = 0; // starting container scrollLeft (when we start to select items)
this.onBeginSelection = this.onBeginSelection.bind(this);
this.onEndSelection = this.onEndSelection.bind(this);
this.startScrollingTimer = this.startScrollingTimer.bind(this);
this.stopScrollingTimer = this.stopScrollingTimer.bind(this);
this.updateScrollLeft = this.updateScrollLeft.bind(this);
this.handleSelection = this.handleSelection.bind(this);
}
scrollToDirection (direction) {
const {container, selectable} = this.refs;
if (container.scrollLeft >= container.scrollWidth) {
this.stopScrollingTimer();
return;
}
container.scrollLeft = container.scrollLeft + (5 * direction); // '5' is a scrolling step
selectable.changeScrollOffsets(container.scrollLeft - this._startingScrollLeft);
}
onBeginSelection () {
const {container} = this.refs;
this._isSelecting = true;
this._startingScrollLeft = container.scrollLeft;
}
onEndSelection () {
if (!this._scrollingTimer) {
return;
}
this._isSelecting = false;
this._startingScrollLeft = 0;
setTimeout(() => {
this.stopScrollingTimer();
});
}
startScrollingTimer (direction) {
if (!this._isSelecting) {
return;
}
this._scrollingTimer = setTimeout(() => {
requestAnimationFrame(() => {
this.startScrollingTimer(direction);
});
this.scrollToDirection(direction);
}, 50);
}
stopScrollingTimer () {
if (!this._scrollingTimer) {
return;
}
clearTimeout(this._scrollingTimer);
this._scrollingTimer = 0; // fix for IE
}
updateScrollLeft (e) {
// when we change `scrollLeftShift` in the `react-scrollable`
// we don't have `event` variable and we just need to ignore the action
if (typeof e === 'undefined') {
return;
}
// stop prevous scrolling setTimeout
this.stopScrollingTimer();
const {container} = this.refs;
const containerPosition = container.getBoundingClientRect();
const mousePositionX = e.pageX;
const canScrollLeft = container.scrollLeft > 0;
const canScrollRight = container.scrollWidth - container.clientWidth() > container.scrollLeft;
if (
(
containerPosition.left < mousePositionX || // if mouse isn't outside of container (left side)
!canScrollLeft // if we can't scroll to left (scrollLeft is not '0')
) &&
(
containerPosition.right > mousePositionX || // if mouse isn't outside of container (right side)
!canScrollRight // if we can't scroll to right
)
) {
return;
}
// detect scrolling direction
const direction =
containerPosition.right < mousePositionX &&
canScrollRight
? 1
: -1;
this.scrollToDirection(direction); // do one step to direction
this.startScrollingTimer(direction); // start scrolling timer
}
handleSelection (selectedKeys, e) {
this.updateScrollLeft(e);
// selectedKeys handling
}
render () {
return (
<div
ref='container'
style={{
width: '600px',
overflowX: 'auto',
whiteSpace: 'nowrap' // or `float: left` for every <Item>
}}
>
<SelectableGroup
ref='selectable'
onBeginSelection={this.onBeginSelection}
onEndSelection={this.onEndSelection}
onSelection={this.handleSelection}
>
{
this.props.items.map((item, index) => (
<Item
key={index}
data={item}
/>
))
}
</SelectableGroup>
</div>
);
}
}
from react-selectable.
I'll reopen the issue again. Maybe someone has the best solution.
from react-selectable.
is this auto scrolling feature added to master?
from react-selectable.
Related Issues (20)
- ES7 decorator example request HOT 3
- Single selection click
- Item of the selection start
- A way to select selectable Items with enzyme
- Switch component prop blacklist to a whitelist HOT 1
- Quick question about click position on selection HOT 2
- Ignore dist folder HOT 1
- Ability to specify modifier key to activate select - feature request HOT 2
- Add `selectingClassName` option for `<SelectableGroup />` component HOT 4
- wrong calculations when fixedPosition=true HOT 2
- Click events within selectable component HOT 5
- Not make selection when the start is on a SelectableComponent
- selectableKey => selectablekey?
- React legacy lifecycle method deprecation HOT 3
- persists the event onClick HOT 1
- Can it be used with tables? HOT 1
- [Suggestion] Make Component Work With SVG
- Not able to understand how to use and customize
- Legacy context API
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-selectable.