Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add prop onSortOver on SortableContainer #278

Merged
merged 7 commits into from
May 17, 2018
Merged

Add prop onSortOver on SortableContainer #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e35b431
Define prop onSortOver
SamyPesse Sep 21, 2017
2f277ea
Emit onSortOver when dragging over a new item
SamyPesse Sep 21, 2017
939acff
Fix call to onSortOver
SamyPesse Sep 21, 2017
a5e66e9
Improve compute of newIndex and oldIndex
SamyPesse Sep 30, 2017
266f8f4
Merge branch 'master' into onsortover
May 17, 2018
ad48a67
nit: add missing space
May 17, 2018
9ca04de
Fix missing argument in documentation
May 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
| shouldCancelStart | Function | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48) | This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`. |
| onSortStart | Function | | Callback that is invoked when sorting begins. `function({node, index, collection}, event)` |
| onSortMove | Function | | Callback that is invoked during sorting as the cursor moves. `function(event)` |
| onSortOver | Function | | Callback that get's invoked when moving over an item. `function({index, oldIndex, newIndex, collection}, e)` |
| onSortEnd | Function | | Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection}, e)` |
| useDragHandle | Boolean | `false` | If you're using the `SortableHandle` HOC, set this to `true` |
| useWindowAsScrollContainer | Boolean | `false` | If you want, you can set the `window` as the scrolling container |
Expand Down Expand Up @@ -156,11 +157,11 @@ const SortableList = SortableContainer(({items}) => {
return (
<ul>
{items.map((value, index) => (
<SortableItem
<SortableItem
key={`item-${index}`}
index={index}
sortIndex={index}
value={value}
value={value}
/>
))}
</ul>
Expand Down
13 changes: 12 additions & 1 deletion src/SortableContainer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
contentWindow: PropTypes.any,
onSortStart: PropTypes.func,
onSortMove: PropTypes.func,
onSortOver: PropTypes.func,
onSortEnd: PropTypes.func,
shouldCancelStart: PropTypes.func,
pressDelay: PropTypes.number,
Expand Down Expand Up @@ -565,7 +566,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
}

animateNodes() {
const {transitionDuration, hideSortableGhost} = this.props;
const {transitionDuration, hideSortableGhost, onSortOver} = this.props;
const nodes = this.manager.getOrderedRefs();
const deltaScroll = {
left: this.scrollContainer.scrollLeft - this.initialScroll.left,
Expand All @@ -579,6 +580,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
top: (window.pageYOffset - this.initialWindowScroll.top),
left: (window.pageXOffset - this.initialWindowScroll.left),
};
const prevIndex = this.newIndex;
this.newIndex = null;

for (let i = 0, len = nodes.length; i < len; i++) {
Expand Down Expand Up @@ -723,6 +725,15 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
if (this.newIndex == null) {
this.newIndex = this.index;
}

if (onSortOver && this.newIndex !== prevIndex) {
onSortOver({
newIndex: this.newIndex,
oldIndex: prevIndex,
index: this.index,
collection: this.manager.active.collection,
});
}
}

autoscroll = () => {
Expand Down