diff --git a/src/.stories/Storybook.scss b/src/.stories/Storybook.scss index c4ecf6d29..84d8eb9ed 100644 --- a/src/.stories/Storybook.scss +++ b/src/.stories/Storybook.scss @@ -112,6 +112,24 @@ } } +// Nested +.category { + height: auto; + + .categoryHeader { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 10px 14px; + background: #F9F9F9; + border-bottom: 1px solid #EFEFEF; + } + + .categoryList { + height: auto; + } +} + // Divider .divider { padding: 10px 20px; diff --git a/src/.stories/index.js b/src/.stories/index.js index 9b3dfb4e7..edaf2b65b 100644 --- a/src/.stories/index.js +++ b/src/.stories/index.js @@ -23,16 +23,28 @@ function getItems(count, height) { const Handle = SortableHandle(() =>
); const Item = SortableElement((props) => { - return ( -
+ return ( +
{props.shouldUseDragHandle && }
- Item {props.value} + Item {props.value} +
+
+ ) +}); + +const Category = SortableElement((props) => { + return ( +
+
+ + Category {props.value}
-
- ) + +
+ ) }); class ListWrapper extends Component { @@ -239,6 +251,20 @@ const ShrinkingSortableList = SortableContainer(({className, isSorting, items, i ); }); +const NestedSortableList = SortableContainer(({className, items, isSorting, sortableHandlers}) => { + return ( +
+ {items.map((value, index) => + + )} +
+ ); +}); + storiesOf('Basic Configuration', module) .add('Basic usage', () => { return ( @@ -283,6 +309,13 @@ storiesOf('Basic Configuration', module) ); }) +.add('Nested Lists', () => { + return ( +
+ +
+ ); +}) storiesOf('Advanced', module) .add('Press delay (200ms)', () => { diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js index 230748714..743ed2ce5 100644 --- a/src/SortableContainer/index.js +++ b/src/SortableContainer/index.js @@ -116,7 +116,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f const node = closest(e.target, (el) => el.sortableInfo != null); - if (node && node.sortableInfo && !this.state.sorting) { + if (node && node.sortableInfo && this.nodeIsChild(node) && !this.state.sorting) { const {useDragHandle} = this.props; const {index, collection} = node.sortableInfo; @@ -143,6 +143,10 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f } }; + nodeIsChild = node => { + return node.sortableInfo.manager == this.manager; + }; + handleMove = (e) => { const {distance} = this.props; diff --git a/src/SortableElement/index.js b/src/SortableElement/index.js index 71c05c86f..363d7f89b 100644 --- a/src/SortableElement/index.js +++ b/src/SortableElement/index.js @@ -58,7 +58,11 @@ export default function sortableElement (WrappedComponent, config = {withRef: fa setDraggable(collection, index){ let node = this.node = findDOMNode(this); - node.sortableInfo = {index, collection}; + node.sortableInfo = { + index, + collection, + manager: this.context.manager + }; this.ref = {node}; this.context.manager.add(collection, this.ref);