From 7a15e611855f16507b32b35c2ed92575576cd287 Mon Sep 17 00:00:00 2001 From: pkiranmai Date: Fri, 20 Jul 2018 10:38:05 -0400 Subject: [PATCH 1/5] changes --- src/react-sortable-tree.js | 48 +++++++++++++++++++++++++++++++--- src/utils/dnd-manager.js | 30 +++++++++++++-------- stories/barebones.js | 53 ++++++++++++++++++++++++++++++++++++-- 3 files changed, 115 insertions(+), 16 deletions(-) diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js index 9d200429..8d4b6a79 100644 --- a/src/react-sortable-tree.js +++ b/src/react-sortable-tree.js @@ -109,6 +109,9 @@ class ReactSortableTree extends Component { searchMatches: [], searchFocusTreeIndex: null, dragging: false, + parentBeforeDrag: null, + temp: false, + tempo: 'kiran', // props that need to be used in gDSFP or static functions will be stored here instanceProps: { @@ -254,6 +257,9 @@ class ReactSortableTree extends Component { depth, minimumTreeIndex, }) { + console.log(this.temp); + if(!this.temp) + return; const { treeData, treeIndex, @@ -360,7 +366,19 @@ class ReactSortableTree extends Component { path, getNodeKey: this.props.getNodeKey, }); - + const addedResult = memoizedInsertNode({ + treeData: draggingTreeData, + newNode: draggedNode, + depth: path.length -1, + minimumTreeIndex: draggedMinimumTreeIndex, + expandParent: true, + getNodeKey: this.props.getNodeKey, + }); + const rows = this.getRows(addedResult.treeData); + const expandedParentPath = rows[addedResult.treeIndex].path; + /* const rows = this.getRows(draggingTreeData); + const expandedParentPath = rows[draggedMinimumTreeIndex].path;*/ + this.parentBeforeDrag = expandedParentPath; return { draggingTreeData, draggedNode, @@ -399,10 +417,26 @@ class ReactSortableTree extends Component { expandParent: true, getNodeKey: this.props.getNodeKey, }); - const rows = this.getRows(addedResult.treeData); const expandedParentPath = rows[addedResult.treeIndex].path; - + const toParent = rows[addedResult.treeIndex].parentNode || '_root_'; + //console.log(expandedParentPath); + // console.log(this.parentBeforeDrag); + if(expandedParentPath.length === this.parentBeforeDrag.length) { + //console.log('same depth'); + this.isParentNodeFixed = true; + let temp3 = 0; + const temp1 = expandedParentPath;//.slice(0,expandedParentPath.length -1); + const temp2 = this.parentBeforeDrag;//.slice(0,this.parentBeforeDrag.length -1); + for(let i=0;i {}, onlyExpandSearchedNodes: false, + isNodeDepthFixed: false, + isParentNodeFixed: false, rowDirection: 'ltr', }; diff --git a/src/utils/dnd-manager.js b/src/utils/dnd-manager.js index ea8f4562..fd7ab3ae 100644 --- a/src/utils/dnd-manager.js +++ b/src/utils/dnd-manager.js @@ -57,6 +57,13 @@ export default class DndManager { return this.treeRef.props.maxDepth; } + get isNodeDepthFixed(){ + return this.treeRef.props.isNodeDepthFixed; + } + get tempo(){ + return this.treeRef.state.tempo; + } + getTargetDepth(dropTargetProps, monitor, component) { let dropTargetDepth = 0; @@ -125,7 +132,8 @@ export default class DndManager { const abovePath = rowAbove ? rowAbove.path : []; const aboveNode = rowAbove ? rowAbove.node : {}; const targetDepth = this.getTargetDepth(dropTargetProps, monitor, null); - + if(monitor.getItem().path.length -1 !== targetDepth && this.isNodeDepthFixed) + return false; // Cannot drop if we're adding to the children of the row above and // the row above is a function if ( @@ -134,7 +142,6 @@ export default class DndManager { ) { return false; } - if (typeof this.customCanDrop === 'function') { const { node } = monitor.getItem(); const addedResult = memoizedInsertNode({ @@ -164,7 +171,6 @@ export default class DndManager { const nodeDragSource = { beginDrag: props => { this.startDrag(props); - return { node: props.node, parentNode: props.parentNode, @@ -219,7 +225,7 @@ export default class DndManager { return result; }, - hover: (dropTargetProps, monitor, component) => { + hover: (dropTargetProps, monitor, component, props) => { const targetDepth = this.getTargetDepth( dropTargetProps, monitor, @@ -235,13 +241,15 @@ export default class DndManager { if (!needsRedraw) { return; } - - this.dragHover({ - node: draggedNode, - path: monitor.getItem().path, - minimumTreeIndex: dropTargetProps.listIndex, - depth: targetDepth, - }); + console.log(this.tempo); + if((targetDepth === monitor.getItem().path.length-1 && this.isNodeDepthFixed) || !this.isNodeDepthFixed) { + this.dragHover({ + node: draggedNode, + path: monitor.getItem().path, + minimumTreeIndex: dropTargetProps.listIndex, + depth: targetDepth, + }); + } }, canDrop: this.canDrop.bind(this), diff --git a/stories/barebones.js b/stories/barebones.js index 40e2f1fc..4b164ca9 100644 --- a/stories/barebones.js +++ b/stories/barebones.js @@ -9,16 +9,65 @@ export default class App extends Component { this.state = { treeData: [ - { title: 'Chicken', expanded: true, children: [{ title: 'Egg' }] }, + { title: 'Chicken', + expanded: false, + children: [ + { title: 'Egg' , expanded: false}, + { title: 'eggfry' , expanded: false}, + { title: 'Eggnog', expanded: false, + children: [ + { title: 'liquid' , expanded: false}, + { title: 'juice' , expanded: false}, + { title: 'water' , expanded: false} + ]}, + { title: 'lettuce' , expanded: false, + children: [ + { title: 'liquid2' , expanded: false}, + { title: 'juic32e' , expanded: false}, + { title: 'wat123er' , expanded: false} + ]}, + { title: 'greens' , expanded: false}, + { title: 'chick', expanded: false }, + { title: 'omlete', expanded: false }, + { title: 'yolo ' , expanded: false, + children: [ + { title: 'liquidwater' , expanded: false}, + { title: 'juiceorgane' , expanded: false}, + { title: 'waterice' , expanded: false} + ]}, + { title: 'watermelon', expanded: false }, + { title: 'apple0', expanded: false }, + { title: 'banana', expanded: false }, + { title: 'mango', expanded: false }, + { title: 'berry' , expanded: false}, + { title: 'fruit' , expanded: false}, + { title: 'muskmelon', expanded: false } + ] }, + {title: 'hen'}, + {title: 'bird'}, + {title: 'ostrich'}, + {title: 'peacock'}, + {title: 'sparrow'}, + {title: 'brocolli'}, + {title: 'road '}, + {title: 'lane '}, + + {title: 'river '}, + {title: 'lifeguard '}, + {title: 'mansion '}, + {title: 'boat '}, + ], }; } render() { return ( -
+
this.setState({ treeData })} />
From 739e5dd471c77378a2a1dadee5a7d3ecf5c96a48 Mon Sep 17 00:00:00 2001 From: pkiranmai Date: Fri, 20 Jul 2018 11:47:28 -0400 Subject: [PATCH 2/5] variable names changed --- src/react-sortable-tree.js | 66 ++++++++++++++++++-------------------- src/utils/dnd-manager.js | 7 ++-- stories/barebones.js | 6 ++-- 3 files changed, 37 insertions(+), 42 deletions(-) diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js index 8d4b6a79..ebf23d63 100644 --- a/src/react-sortable-tree.js +++ b/src/react-sortable-tree.js @@ -110,8 +110,7 @@ class ReactSortableTree extends Component { searchFocusTreeIndex: null, dragging: false, parentBeforeDrag: null, - temp: false, - tempo: 'kiran', + sameParent: false, // props that need to be used in gDSFP or static functions will be stored here instanceProps: { @@ -257,8 +256,7 @@ class ReactSortableTree extends Component { depth, minimumTreeIndex, }) { - console.log(this.temp); - if(!this.temp) + if(this.props.isParentNodeFixed && !this.sameParent) return; const { treeData, @@ -366,19 +364,18 @@ class ReactSortableTree extends Component { path, getNodeKey: this.props.getNodeKey, }); - const addedResult = memoizedInsertNode({ - treeData: draggingTreeData, - newNode: draggedNode, - depth: path.length -1, - minimumTreeIndex: draggedMinimumTreeIndex, - expandParent: true, - getNodeKey: this.props.getNodeKey, - }); - const rows = this.getRows(addedResult.treeData); - const expandedParentPath = rows[addedResult.treeIndex].path; - /* const rows = this.getRows(draggingTreeData); - const expandedParentPath = rows[draggedMinimumTreeIndex].path;*/ - this.parentBeforeDrag = expandedParentPath; + if(this.props.isParentNodeFixed) { + const addedResult = memoizedInsertNode({ + treeData: draggingTreeData, + newNode: draggedNode, + depth: path.length -1, + minimumTreeIndex: draggedMinimumTreeIndex, + expandParent: true, + getNodeKey: this.props.getNodeKey, + }); + const rows = this.getRows(addedResult.treeData); + this.parentBeforeDrag = rows[addedResult.treeIndex].path; + } return { draggingTreeData, draggedNode, @@ -419,24 +416,25 @@ class ReactSortableTree extends Component { }); const rows = this.getRows(addedResult.treeData); const expandedParentPath = rows[addedResult.treeIndex].path; - const toParent = rows[addedResult.treeIndex].parentNode || '_root_'; - //console.log(expandedParentPath); - // console.log(this.parentBeforeDrag); - if(expandedParentPath.length === this.parentBeforeDrag.length) { - //console.log('same depth'); - this.isParentNodeFixed = true; - let temp3 = 0; - const temp1 = expandedParentPath;//.slice(0,expandedParentPath.length -1); - const temp2 = this.parentBeforeDrag;//.slice(0,this.parentBeforeDrag.length -1); - for(let i=0;i - + this.setState({ treeData })} />
From ee28fee31cf3ccb6958a2854c42f06428b388d24 Mon Sep 17 00:00:00 2001 From: pkiranmai Date: Fri, 20 Jul 2018 14:14:28 -0400 Subject: [PATCH 3/5] last commit --- src/react-sortable-tree.js | 2 ++ stories/barebones.js | 55 +++----------------------------------- 2 files changed, 5 insertions(+), 52 deletions(-) diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js index ebf23d63..d9220bee 100644 --- a/src/react-sortable-tree.js +++ b/src/react-sortable-tree.js @@ -364,6 +364,7 @@ class ReactSortableTree extends Component { path, getNodeKey: this.props.getNodeKey, }); + if(this.props.isParentNodeFixed) { const addedResult = memoizedInsertNode({ treeData: draggingTreeData, @@ -373,6 +374,7 @@ class ReactSortableTree extends Component { expandParent: true, getNodeKey: this.props.getNodeKey, }); + const rows = this.getRows(addedResult.treeData); this.parentBeforeDrag = rows[addedResult.treeIndex].path; } diff --git a/stories/barebones.js b/stories/barebones.js index f8d45faa..40e2f1fc 100644 --- a/stories/barebones.js +++ b/stories/barebones.js @@ -9,65 +9,16 @@ export default class App extends Component { this.state = { treeData: [ - { title: 'Chicken', - expanded: false, - children: [ - { title: 'Egg' , expanded: false}, - { title: 'eggfry' , expanded: false}, - { title: 'Eggnog', expanded: false, - children: [ - { title: 'liquid' , expanded: false}, - { title: 'juice' , expanded: false}, - { title: 'water' , expanded: false} - ]}, - { title: 'lettuce' , expanded: false, - children: [ - { title: 'liquid2' , expanded: false}, - { title: 'juic32e' , expanded: false}, - { title: 'wat123er' , expanded: false} - ]}, - { title: 'greens' , expanded: false}, - { title: 'chick', expanded: false }, - { title: 'omlete', expanded: false }, - { title: 'yolo ' , expanded: false, - children: [ - { title: 'liquidwater' , expanded: false}, - { title: 'juiceorgane' , expanded: false}, - { title: 'waterice' , expanded: false} - ]}, - { title: 'watermelon', expanded: false }, - { title: 'apple0', expanded: false }, - { title: 'banana', expanded: false }, - { title: 'mango', expanded: false }, - { title: 'berry' , expanded: false}, - { title: 'fruit' , expanded: false}, - { title: 'muskmelon', expanded: false } - ] }, - {title: 'hen'}, - {title: 'bird'}, - {title: 'ostrich'}, - {title: 'peacock'}, - {title: 'sparrow'}, - {title: 'brocolli'}, - {title: 'road '}, - {title: 'lane '}, - - {title: 'river '}, - {title: 'lifeguard '}, - {title: 'mansion '}, - {title: 'boat '}, - + { title: 'Chicken', expanded: true, children: [{ title: 'Egg' }] }, ], }; } render() { return ( -
- + this.setState({ treeData })} />
From cd6f19d2aa1fbe2214ca6e2a69ed1a18f444e395 Mon Sep 17 00:00:00 2001 From: pkiranmai Date: Fri, 20 Jul 2018 14:35:33 -0400 Subject: [PATCH 4/5] small changes --- src/react-sortable-tree.js | 6 +----- src/utils/dnd-manager.js | 5 +++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js index d9220bee..88200158 100644 --- a/src/react-sortable-tree.js +++ b/src/react-sortable-tree.js @@ -419,14 +419,10 @@ class ReactSortableTree extends Component { const rows = this.getRows(addedResult.treeData); const expandedParentPath = rows[addedResult.treeIndex].path; if(this.props.isParentNodeFixed) { - const toParent = rows[addedResult.treeIndex].parentNode || '_root_'; if(expandedParentPath.length === this.parentBeforeDrag.length) { - this.isParentNodeFixed = true; - let flag = 0; - for(let i=0;i { + hover: (dropTargetProps, monitor, component) => { const targetDepth = this.getTargetDepth( dropTargetProps, monitor, @@ -239,6 +239,7 @@ export default class DndManager { if (!needsRedraw) { return; } + if((targetDepth === monitor.getItem().path.length-1 && this.isNodeDepthFixed) || !this.isNodeDepthFixed) { this.dragHover({ node: draggedNode, From 77e674eda210d8022315c41e4d646dbefd570ec8 Mon Sep 17 00:00:00 2001 From: pkiranmai Date: Mon, 23 Jul 2018 14:41:24 -0400 Subject: [PATCH 5/5] README updated --- README.md | 4 +++- src/react-sortable-tree.js | 17 +++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index e5d23a3d..7670a2b7 100644 --- a/README.md +++ b/README.md @@ -121,7 +121,9 @@ export default class Tree extends Component { | rowHeight | number or func | Used by react-sortable-tree. Defaults to `62`. Either a fixed row height (number) or a function that returns the height of a row given its index: `({ treeIndex: number, node: object, path: number[] or string[] }): number` | | slideRegionSize | number | Size in px of the region near the edges that initiates scrolling on dragover. Defaults to `100`. | | scaffoldBlockPxWidth | number | The width of the blocks containing the lines representing the structure of the tree. Defaults to `44`. | -| isVirtualized | bool | Set to false to disable virtualization. Defaults to `true`. **NOTE**: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled. | +| isVirtualized | bool | Set to false to disable virtualization. Defaults to `true`. **NOTE**: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled. +| isNodeDepthFixed | bool | Set to true to restrict drag and drop operation of every node to its original depth without allowing auto expand on drag for any node. Defaults to `false`. +| isParentNodeFixed | bool | Set to true to restrict drag and drop operation of every node to its parent without allowing auto expand on drag for any node. Defaults to `false`. `false`. | | nodeContentRenderer | any | Override the default component ([`NodeRendererDefault`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/node-renderer-default.js)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps`, a `theme` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed. | | placeholderRenderer | any | Override the default placeholder component ([`PlaceholderRendererDefault`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/placeholder-renderer-default.js)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a `theme` or custom CSS instead. | diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js index 88200158..f8dd2b2d 100644 --- a/src/react-sortable-tree.js +++ b/src/react-sortable-tree.js @@ -843,6 +843,13 @@ ReactSortableTree.propTypes = { // Set to false to disable virtualization. // NOTE: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled. + + // fixes the depth of the node such that the children do not expand on drag + isNodeDepthFixed: PropTypes.bool, + + // restricts node to parent + isParentNodeFixed: PropTypes.bool, + isVirtualized: PropTypes.bool, treeNodeRenderer: PropTypes.func, @@ -907,12 +914,6 @@ ReactSortableTree.propTypes = { // Specify that nodes that do not match search will be collapsed onlyExpandSearchedNodes: PropTypes.bool, - // fixes the depth of the node such that the children do not expand on drag - isNodeDepthFixed: PropTypes.bool, - - // restricts node to parent - isParentNodeFixed: PropTypes.bool, - // rtl support rowDirection: PropTypes.string, }; @@ -925,6 +926,8 @@ ReactSortableTree.defaultProps = { generateNodeProps: null, getNodeKey: defaultGetNodeKey, innerStyle: {}, + isNodeDepthFixed: false, + isParentNodeFixed: false, isVirtualized: true, maxDepth: null, treeNodeRenderer: null, @@ -945,8 +948,6 @@ ReactSortableTree.defaultProps = { theme: {}, onDragStateChanged: () => {}, onlyExpandSearchedNodes: false, - isNodeDepthFixed: false, - isParentNodeFixed: false, rowDirection: 'ltr', };