Skip to content

Commit 356922b

Browse files
fritz-cfritz-c
authored
Merge pull request frontend-collective#75 from fritz-c/disable-dragging
`canDrag` API - disable dragging on a per-node basis
2 parents 3d38826 + 01b6726 commit 356922b

File tree

5 files changed

+76
-44
lines changed

5 files changed

+76
-44
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ generateNodeProps | func | | | Ge
5858
getNodeKey | func | defaultGetNodeKey | | Determine the unique key used to identify each node and generate the `path` array passed in callbacks. By default, returns the index in the tree (omitting hidden nodes).<div>`({ node: object, treeIndex: number }): string or number`</div>
5959
onMoveNode | func | | | Called after node move operation. <div>`({ treeData: object[], node: object, treeIndex: number, path: number[] or string[] }): void`</div>
6060
onVisibilityToggle | func | | | Called after children nodes collapsed or expanded. <div>`({ treeData: object[], node: object, expanded: bool }): void`</div>
61+
canDrag | func or bool | `true` | | Return false from callback to prevent node from dragging, by hiding the drag handle. Set prop to `false` to disable dragging on all nodes. <div>`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): bool`</div>
6162
canDrop | func | | | Return false to prevent node from dropping in the given location. <div>`({ node: object, prevPath: number[] or string[], prevParent: object, nextPath: number[] or string[], nextParent: object}): bool`</div>
6263
reactVirtualizedListProps | object | | | Custom properties to hand to the [react-virtualized list](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types)
6364
rowHeight | number or func | `62` | | Used by react-virtualized. Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`

‎src/examples/basicExample/app.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,11 @@ class App extends Component {
124124
},
125125
],
126126
},
127+
{
128+
title: 'Disable dragging on a per-node basis with the `canDrag` prop',
129+
subtitle: 'Or set it to false to disable all dragging.',
130+
noDragging: true,
131+
},
127132
{
128133
title: 'You cannot give this children',
129134
subtitle: 'Dropping is prevented via the `canDrop` API using `nextParent`',
@@ -287,6 +292,7 @@ class App extends Component {
287292
maxDepth={maxDepth}
288293
searchQuery={searchString}
289294
searchFocusOffset={searchFocusIndex}
295+
canDrag={({ node }) => !node.noDragging}
290296
canDrop={({ nextParent }) => !nextParent || !nextParent.noChildren}
291297
searchFinishCallback={matches =>
292298
this.setState({

‎src/node-renderer-default.js‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ class NodeRendererDefault extends Component {
2424
connectDragSource,
2525
isDragging,
2626
canDrop,
27+
canDrag,
2728
node,
2829
draggedNode,
2930
path,
@@ -42,32 +43,34 @@ class NodeRendererDefault extends Component {
4243
} = this.props;
4344

4445
let handle;
45-
if (typeof node.children === 'function' && node.expanded) {
46-
// Show a loading symbol on the handle when the children are expanded
47-
// and yet still defined by a function (a callback to fetch the children)
48-
handle = (
49-
<div className={styles.loadingHandle}>
50-
<div className={styles.loadingCircle}>
51-
<div className={styles.loadingCirclePoint} />
52-
<div className={styles.loadingCirclePoint} />
53-
<div className={styles.loadingCirclePoint} />
54-
<div className={styles.loadingCirclePoint} />
55-
<div className={styles.loadingCirclePoint} />
56-
<div className={styles.loadingCirclePoint} />
57-
<div className={styles.loadingCirclePoint} />
58-
<div className={styles.loadingCirclePoint} />
59-
<div className={styles.loadingCirclePoint} />
60-
<div className={styles.loadingCirclePoint} />
61-
<div className={styles.loadingCirclePoint} />
62-
<div className={styles.loadingCirclePoint} />
46+
if (canDrag) {
47+
if (typeof node.children === 'function' && node.expanded) {
48+
// Show a loading symbol on the handle when the children are expanded
49+
// and yet still defined by a function (a callback to fetch the children)
50+
handle = (
51+
<div className={styles.loadingHandle}>
52+
<div className={styles.loadingCircle}>
53+
<div className={styles.loadingCirclePoint} />
54+
<div className={styles.loadingCirclePoint} />
55+
<div className={styles.loadingCirclePoint} />
56+
<div className={styles.loadingCirclePoint} />
57+
<div className={styles.loadingCirclePoint} />
58+
<div className={styles.loadingCirclePoint} />
59+
<div className={styles.loadingCirclePoint} />
60+
<div className={styles.loadingCirclePoint} />
61+
<div className={styles.loadingCirclePoint} />
62+
<div className={styles.loadingCirclePoint} />
63+
<div className={styles.loadingCirclePoint} />
64+
<div className={styles.loadingCirclePoint} />
65+
</div>
6366
</div>
64-
</div>
65-
);
66-
} else {
67-
// Show the handle used to initiate a drag-and-drop
68-
handle = connectDragSource((
69-
<div className={styles.moveHandle} />
70-
), { dropEffect: 'copy' });
67+
);
68+
} else {
69+
// Show the handle used to initiate a drag-and-drop
70+
handle = connectDragSource((
71+
<div className={styles.moveHandle} />
72+
), { dropEffect: 'copy' });
73+
}
7174
}
7275

7376
const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
@@ -114,7 +117,11 @@ class NodeRendererDefault extends Component {
114117
>
115118
{handle}
116119

117-
<div className={styles.rowContents}>
120+
<div
121+
className={styles.rowContents +
122+
(!canDrag ? ` ${styles.rowContentsDragDisabled}` : '')
123+
}
124+
>
118125
<div className={styles.rowLabel}>
119126
<span
120127
className={styles.rowTitle +
@@ -154,17 +161,17 @@ class NodeRendererDefault extends Component {
154161
}
155162

156163
NodeRendererDefault.propTypes = {
157-
node: PropTypes.object.isRequired,
158-
path: PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])).isRequired,
159-
treeIndex: PropTypes.number.isRequired,
164+
node: PropTypes.object.isRequired,
165+
path: PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])).isRequired,
166+
treeIndex: PropTypes.number.isRequired,
160167
isSearchMatch: PropTypes.bool,
161168
isSearchFocus: PropTypes.bool,
162-
163-
scaffoldBlockPxWidth: PropTypes.number.isRequired,
169+
canDrag: PropTypes.bool,
170+
scaffoldBlockPxWidth: PropTypes.number.isRequired,
164171
toggleChildrenVisibility: PropTypes.func,
165-
buttons: PropTypes.arrayOf(PropTypes.node),
166-
className: PropTypes.string,
167-
style: PropTypes.object,
172+
buttons: PropTypes.arrayOf(PropTypes.node),
173+
className: PropTypes.string,
174+
style: PropTypes.object,
168175

169176
// Drag and drop API functions
170177
// Drag source

‎src/node-renderer-default.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ $row-padding: 10px;
8888
background-color: white;
8989
}
9090

91+
.rowContentsDragDisabled {
92+
border-left: solid #BBB 1px;
93+
}
94+
9195
.rowLabel {
9296
@extend %rowItem;
9397
flex: 0 1 auto;

‎src/react-sortable-tree.js‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -409,22 +409,31 @@ class ReactSortableTree extends Component {
409409
getPrevRow,
410410
matchKeys
411411
) {
412+
const {
413+
canDrag,
414+
canDrop,
415+
generateNodeProps,
416+
getNodeKey,
417+
maxDepth,
418+
scaffoldBlockPxWidth,
419+
searchFocusOffset,
420+
} = this.props;
412421
const TreeNodeRenderer = this.treeNodeRenderer;
413422
const NodeContentRenderer = this.nodeContentRenderer;
414423
const nodeKey = path[path.length - 1];
415424
const isSearchMatch = nodeKey in matchKeys;
416-
const isSearchFocus = isSearchMatch &&
417-
matchKeys[nodeKey] === this.props.searchFocusOffset;
418-
419-
const nodeProps = !this.props.generateNodeProps ? {} : this.props.generateNodeProps({
425+
const isSearchFocus = isSearchMatch && matchKeys[nodeKey] === searchFocusOffset;
426+
const callbackParams = {
420427
node,
421428
parentNode,
422429
path,
423430
lowerSiblingCounts,
424431
treeIndex,
425432
isSearchMatch,
426433
isSearchFocus,
427-
});
434+
};
435+
const nodeProps = !generateNodeProps ? {} : generateNodeProps(callbackParams);
436+
const rowCanDrag = typeof canDrag !== 'function' ? canDrag : canDrag(callbackParams);
428437

429438
return (
430439
<TreeNodeRenderer
@@ -434,16 +443,16 @@ class ReactSortableTree extends Component {
434443
listIndex={listIndex}
435444
getPrevRow={getPrevRow}
436445
treeData={this.state.draggingTreeData || this.state.treeData}
437-
getNodeKey={this.props.getNodeKey}
438-
customCanDrop={this.props.canDrop}
446+
getNodeKey={getNodeKey}
447+
customCanDrop={canDrop}
439448
node={node}
440449
path={path}
441450
lowerSiblingCounts={lowerSiblingCounts}
442-
scaffoldBlockPxWidth={this.props.scaffoldBlockPxWidth}
451+
scaffoldBlockPxWidth={scaffoldBlockPxWidth}
443452
swapFrom={this.state.swapFrom}
444453
swapLength={this.state.swapLength}
445454
swapDepth={this.state.swapDepth}
446-
maxDepth={this.props.maxDepth}
455+
maxDepth={maxDepth}
447456
dragHover={this.dragHover}
448457
>
449458
<NodeContentRenderer
@@ -455,8 +464,9 @@ class ReactSortableTree extends Component {
455464
treeIndex={treeIndex}
456465
startDrag={this.startDrag}
457466
endDrag={this.endDrag}
467+
canDrag={rowCanDrag}
458468
toggleChildrenVisibility={this.toggleChildrenVisibility}
459-
scaffoldBlockPxWidth={this.props.scaffoldBlockPxWidth}
469+
scaffoldBlockPxWidth={scaffoldBlockPxWidth}
460470
{...nodeProps}
461471
/>
462472
</TreeNodeRenderer>
@@ -543,6 +553,9 @@ ReactSortableTree.propTypes = {
543553
// Called after node move operation.
544554
onMoveNode: PropTypes.func,
545555

556+
// Determine whether a node can be dragged. Set to false to disable dragging on all nodes.
557+
canDrag: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
558+
546559
// Determine whether a node can be dropped based on its path and parents'.
547560
canDrop: PropTypes.func,
548561

@@ -562,6 +575,7 @@ ReactSortableTree.defaultProps = {
562575
innerStyle: {},
563576
searchQuery: null,
564577
isVirtualized: true,
578+
canDrag: true,
565579
};
566580

567581
// Export the tree component without the react-dnd DragDropContext,

0 commit comments

Comments
 (0)