From eb03cceae6818e28248c795e3f4ff0c3fab452b9 Mon Sep 17 00:00:00 2001 From: Andrew Russell Date: Mon, 23 Jan 2017 15:16:23 -0500 Subject: [PATCH 1/4] fix: children elements in nested lists drag parent elements. --- src/.stories/Storybook.scss | 18 +++++++++++++++++ src/.stories/index.js | 35 +++++++++++++++++++++++++++++++++- src/SortableContainer/index.js | 6 +++++- src/SortableElement/index.js | 5 ++++- 4 files changed, 61 insertions(+), 3 deletions(-) diff --git a/src/.stories/Storybook.scss b/src/.stories/Storybook.scss index c4ecf6d29..3dd99d3a2 100644 --- a/src/.stories/Storybook.scss +++ b/src/.stories/Storybook.scss @@ -112,6 +112,24 @@ } } +// Nested +.category { + height: auto; + margin-bottom: 20px; + + .categoryHeader { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 10px; + 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..e03bccfbd 100644 --- a/src/.stories/index.js +++ b/src/.stories/index.js @@ -27,7 +27,7 @@ const Item = SortableElement((props) => {
- {props.shouldUseDragHandle && } + {props.shouldUseDragHandle && }
Item {props.value}
@@ -35,6 +35,18 @@ const Item = SortableElement((props) => { ) }); +const Category = SortableElement((props) => { + return ( +
+
+ + Category {props.value} +
+ +
+ ) +}); + class ListWrapper extends Component { constructor({items}) { super(); @@ -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..65d2eddbe 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..eb2c5fc59 100644 --- a/src/SortableElement/index.js +++ b/src/SortableElement/index.js @@ -58,7 +58,10 @@ 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); From f618b4d7159b9e933c4a874d7bf6f726fb7bbb91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= Date: Mon, 23 Jan 2017 15:44:00 -0500 Subject: [PATCH 2/4] nit: put object properties on a new line --- src/SortableElement/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/SortableElement/index.js b/src/SortableElement/index.js index eb2c5fc59..3c3ceef54 100644 --- a/src/SortableElement/index.js +++ b/src/SortableElement/index.js @@ -59,7 +59,8 @@ export default function sortableElement (WrappedComponent, config = {withRef: fa let node = this.node = findDOMNode(this); node.sortableInfo = { - index, collection, + index, + collection, manager: this.context.manager }; From 3549bbb60d5e78632bc6ed812041e6edfadeeafe Mon Sep 17 00:00:00 2001 From: Andrew Russell Date: Mon, 23 Jan 2017 19:03:46 -0500 Subject: [PATCH 3/4] nit: fixed indentation issues. --- src/.stories/Storybook.scss | 24 ++++++------- src/.stories/index.js | 64 +++++++++++++++++----------------- src/SortableContainer/index.js | 6 ++-- src/SortableElement/index.js | 6 ++-- 4 files changed, 50 insertions(+), 50 deletions(-) diff --git a/src/.stories/Storybook.scss b/src/.stories/Storybook.scss index 3dd99d3a2..1356af7d4 100644 --- a/src/.stories/Storybook.scss +++ b/src/.stories/Storybook.scss @@ -114,20 +114,20 @@ // Nested .category { - height: auto; - margin-bottom: 20px; + height: auto; + margin-bottom: 20px; - .categoryHeader { - display: flex; - flex-flow: row nowrap; - align-items: center; - padding: 10px; - border-bottom: 1px solid #EFEFEF; - } + .categoryHeader { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 10px; + border-bottom: 1px solid #EFEFEF; + } - .categoryList { - height: auto; - } + .categoryList { + height: auto; + } } // Divider diff --git a/src/.stories/index.js b/src/.stories/index.js index e03bccfbd..0139380f8 100644 --- a/src/.stories/index.js +++ b/src/.stories/index.js @@ -23,28 +23,28 @@ function getItems(count, height) { const Handle = SortableHandle(() =>
); const Item = SortableElement((props) => { - return ( -
- {props.shouldUseDragHandle && } + return ( +
+ {props.shouldUseDragHandle && }
- Item {props.value} + Item {props.value}
-
- ) +
+ ) }); const Category = SortableElement((props) => { - return ( -
-
- - Category {props.value} -
+ return ( +
+
+ + Category {props.value} +
-
- ) +
+ ) }); class ListWrapper extends Component { @@ -252,17 +252,17 @@ const ShrinkingSortableList = SortableContainer(({className, isSorting, items, i }); const NestedSortableList = SortableContainer(({className, items, isSorting, sortableHandlers}) => { - return ( -
- {items.map((value, index) => - - )} -
- ); + return ( +
+ {items.map((value, index) => + + )} +
+ ); }); storiesOf('Basic Configuration', module) @@ -310,11 +310,11 @@ storiesOf('Basic Configuration', module) ); }) .add('Nested Lists', () => { - return ( -
- -
- ); + return ( +
+ +
+ ); }) storiesOf('Advanced', module) diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js index 65d2eddbe..743ed2ce5 100644 --- a/src/SortableContainer/index.js +++ b/src/SortableContainer/index.js @@ -143,9 +143,9 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f } }; - nodeIsChild = node => { - return node.sortableInfo.manager == this.manager; - }; + 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 3c3ceef54..363d7f89b 100644 --- a/src/SortableElement/index.js +++ b/src/SortableElement/index.js @@ -59,9 +59,9 @@ export default function sortableElement (WrappedComponent, config = {withRef: fa let node = this.node = findDOMNode(this); node.sortableInfo = { - index, - collection, - manager: this.context.manager + index, + collection, + manager: this.context.manager }; this.ref = {node}; From fb09d273c6bc0c9f9b898e6816398ce913ae37f5 Mon Sep 17 00:00:00 2001 From: clauderic Date: Mon, 23 Jan 2017 22:14:01 -0500 Subject: [PATCH 4/4] nit: minor tweaks to storybook example --- src/.stories/Storybook.scss | 4 ++-- src/.stories/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/.stories/Storybook.scss b/src/.stories/Storybook.scss index 1356af7d4..84d8eb9ed 100644 --- a/src/.stories/Storybook.scss +++ b/src/.stories/Storybook.scss @@ -115,13 +115,13 @@ // Nested .category { height: auto; - margin-bottom: 20px; .categoryHeader { display: flex; flex-flow: row nowrap; align-items: center; - padding: 10px; + padding: 10px 14px; + background: #F9F9F9; border-bottom: 1px solid #EFEFEF; } diff --git a/src/.stories/index.js b/src/.stories/index.js index 0139380f8..edaf2b65b 100644 --- a/src/.stories/index.js +++ b/src/.stories/index.js @@ -42,7 +42,7 @@ const Category = SortableElement((props) => { Category {props.value} - + ) });