Skip to content

Commit

Permalink
feat: add onDragStateChanged callback
Browse files Browse the repository at this point in the history 
Thanks to @wuweiweiwu for the contribution!
onDragStateChanged is called when dragging begins and ends,
so you can easily track the current state of dragging.
  • Loading branch information
@fritz-c
fritz-c committed Jan 16, 2018
2 parents 006ea08 + 588a95f commit 2caa9d1
Show file tree
Hide file tree
Showing 6 changed files with 446 additions and 1 deletion.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ getNodeKey<br/>_(recommended)_ | func | Specify the unique key used to iden
generateNodeProps | func | Generate an object with additional props to be passed to the node renderer. Use this for adding buttons via the `buttons` key, or additional `style` / `className` settings.<div>`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): object`</div>
onMoveNode | func | Called after node move operation. <div>`({ treeData: object[], node: object, prevPath: number[] or string[], prevTreeIndex: number, nextPath: number[] or string[], nextTreeIndex: number }): void`</div>
onVisibilityToggle | func | Called after children nodes collapsed or expanded. <div>`({ treeData: object[], node: object, expanded: bool, path: number[] or string[] }): void`</div>
onDragStateChanged | func | Called when a drag is initiated or ended. <div>`({ isDragging: bool, draggedNode: object }): void`</div>
maxDepth | number | Maximum depth nodes can be inserted at. Defaults to infinite.
canDrag | func or bool | Return false from callback to prevent node from dragging, by hiding the drag handle. Set prop to `false` to disable dragging on all nodes. Defaults to `true`. <div>`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): bool`</div>
canDrop | func | Return false to prevent node from dropping in the given location. <div>`({ node: object, prevPath: number[] or string[], prevParent: object, prevTreeIndex: number, nextPath: number[] or string[], nextParent: object, nextTreeIndex: number }): bool`</div>
Expand Down
314 changes: 314 additions & 0 deletions examples/storybooks/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1961,6 +1961,320 @@ exports[`Storyshots Basics Add and remove nodes programmatically 1`] = `
</div>
`;

exports[`Storyshots Basics Callbacks 1`] = `
<div>
<div>
Open your console to see callback parameter info
<div
style={
Object {
"height": 300,
}
}
>
<div
className="tree"
style={
Object {
"height": "100%",
}
}
>
<div>
<div
aria-label="grid"
aria-readonly={true}
className="ReactVirtualized__Grid ReactVirtualized__List virtualScrollOverride"
id={undefined}
onScroll={[Function]}
role="grid"
style={
Object {
"WebkitOverflowScrolling": "touch",
"boxSizing": "border-box",
"direction": "ltr",
"height": 99999,
"overflowX": "hidden",
"overflowY": "hidden",
"position": "relative",
"width": 200,
"willChange": "transform",
}
}
tabIndex={0}
>
<div
className="ReactVirtualized__Grid__innerScrollContainer"
role="rowgroup"
style={
Object {
"height": 186,
"maxHeight": 186,
"maxWidth": 200,
"overflow": "hidden",
"pointerEvents": "",
"position": "relative",
"width": "auto",
}
}
>
<div
className="node"
style={
Object {
"height": 62,
"left": 0,
"position": "absolute",
"top": 0,
"width": "100%",
}
}
>
<div
className="lineBlock lineHalfHorizontalRight lineHalfVerticalBottom"
style={
Object {
"width": 44,
}
}
/>
<div
className="nodeContent"
style={
Object {
"left": 44,
}
}
>
<div
style={
Object {
"height": "100%",
}
}
>
<div>
<button
aria-label="Collapse"
className="collapseButton"
onClick={[Function]}
style={
Object {
"left": -22,
}
}
type="button"
/>
<div
className="lineChildren"
style={
Object {
"width": 44,
}
}
/>
</div>
<div
className="rowWrapper"
>
<div
className="row"
style={
Object {
"opacity": 1,
}
}
>
<div
className="moveHandle"
/>
<div
className="rowContents"
>
<div
className="rowLabel"
>
<span
className="rowTitle"
>
A
</span>
</div>
<div
className="rowToolbar"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="node"
style={
Object {
"height": 62,
"left": 0,
"position": "absolute",
"top": 62,
"width": "100%",
}
}
>
<div
className="lineBlock lineFullVertical"
style={
Object {
"width": 44,
}
}
/>
<div
className="lineBlock lineHalfVerticalTop lineHalfHorizontalRight"
style={
Object {
"width": 44,
}
}
/>
<div
className="nodeContent"
style={
Object {
"left": 88,
}
}
>
<div
style={
Object {
"height": "100%",
}
}
>
<div
className="rowWrapper"
>
<div
className="row"
style={
Object {
"opacity": 1,
}
}
>
<div
className="moveHandle"
/>
<div
className="rowContents"
>
<div
className="rowLabel"
>
<span
className="rowTitle"
>
B
</span>
</div>
<div
className="rowToolbar"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="node"
style={
Object {
"height": 62,
"left": 0,
"position": "absolute",
"top": 124,
"width": "100%",
}
}
>
<div
className="lineBlock lineHalfVerticalTop lineHalfHorizontalRight"
style={
Object {
"width": 44,
}
}
/>
<div
className="nodeContent"
style={
Object {
"left": 44,
}
}
>
<div
style={
Object {
"height": "100%",
}
}
>
<div
className="rowWrapper"
>
<div
className="row"
style={
Object {
"opacity": 1,
}
}
>
<div
className="moveHandle"
/>
<div
className="rowContents"
>
<div
className="rowLabel"
>
<span
className="rowTitle"
>
C
</span>
</div>
<div
className="rowToolbar"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<a
className="sourceLink"
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/callbacks.js"
rel="noopener noreferrer"
target="_top"
>
VIEW SOURCE →
</a>
</div>
`;

exports[`Storyshots Basics Minimal implementation 1`] = `
<div>
<div
Expand Down
59 changes: 59 additions & 0 deletions examples/storybooks/callbacks.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React, { Component } from 'react';
import SortableTree from '../../src';

export default class App extends Component {
constructor(props) {
super(props);

this.state = {
treeData: [
{ title: 'A', expanded: true, children: [{ title: 'B' }] },
{ title: 'C' },
],
lastMovePrevPath: null,
lastMoveNextPath: null,
lastMoveNode: null,
};
}

render() {
const { lastMovePrevPath, lastMoveNextPath, lastMoveNode } = this.state;

const recordCall = (name, args) => {
// eslint-disable-next-line no-console
console.log(`${name} called with arguments:`, args);
};

return (
<div>
Open your console to see callback parameter info
<div style={{ height: 300 }}>
<SortableTree
treeData={this.state.treeData}
onChange={treeData => this.setState({ treeData })}
// Need to set getNodeKey to get meaningful ids in paths
getNodeKey={({ node }) => `node${node.title}`}
onVisibilityToggle={args => recordCall('onVisibilityToggle', args)}
onMoveNode={args => {
recordCall('onMoveNode', args);
const { prevPath, nextPath, node } = args;
this.setState({
lastMovePrevPath: prevPath,
lastMoveNextPath: nextPath,
lastMoveNode: node,
});
}}
onDragStateChanged={args => recordCall('onDragStateChanged', args)}
/>
</div>
{lastMoveNode && (
<div>
Node &quot;{lastMoveNode.title}&quot; moved from path [{lastMovePrevPath.join(
','
)}] to path [{lastMoveNextPath.join(',')}].
</div>
)}
</div>
);
}
}
Loading

0 comments on commit 2caa9d1

Please sign in to comment.