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);