`title` is the primary label for the node.
`subtitle` is a secondary label for the node.
`expanded` shows children of the node if true, or hides them if false. Defaults to false.
`children` is an array of child nodes belonging to the node.
**Example**: `[{title: 'main', subtitle: 'sub'}, { title: 'value2', expanded: true, children: [{ title: 'value3') }] }]` |
106 | | onChange
_(required)_ | func | Called whenever tree data changed. Just like with React input elements, you have to update your own component's data to see the changes reflected.
`( treeData: object[] ): void`
|
107 | | getNodeKey
_(recommended)_ | func | Specify the unique key used to identify each node and generate the `path` array passed in callbacks. With a setting of `getNodeKey={({ node }) => node.id}`, for example, in callbacks this will let you easily determine that the node with an `id` of `35` is (or has just become) a child of the node with an `id` of `12`, which is a child of ... and so on. It uses [`defaultGetNodeKey`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/default-handlers.js) by default, which returns the index in the tree (omitting hidden nodes).
`({ node: object, treeIndex: number }): string or number`
|
108 | | 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.
`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): object`
|
109 | | onMoveNode | func | Called after node move operation.
`({ treeData: object[], node: object, nextParentNode: object, prevPath: number[] or string[], prevTreeIndex: number, nextPath: number[] or string[], nextTreeIndex: number }): void`
|
110 | | onVisibilityToggle | func | Called after children nodes collapsed or expanded.
`({ treeData: object[], node: object, expanded: bool, path: number[] or string[] }): void`
|
111 | | onDragStateChanged | func | Called when a drag is initiated or ended.
`({ isDragging: bool, draggedNode: object }): void`
|
112 | | maxDepth | number | Maximum depth nodes can be inserted at. Defaults to infinite. |
113 | | rowDirection | string | Adds row direction support if set to `'rtl'` Defaults to `'ltr'`. |
114 | | 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`.
`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): bool`
|
115 | | canDrop | func | Return false to prevent node from dropping in the given location.
`({ node: object, prevPath: number[] or string[], prevParent: object, prevTreeIndex: number, nextPath: number[] or string[], nextParent: object, nextTreeIndex: number }): bool`
|
116 | | canNodeHaveChildren | func | Function to determine whether a node can have children, useful for preventing hover preview when you have a `canDrop` condition. Default is set to a function that returns `true`. Functions should be of type `(node): bool`. |
117 | | theme | object | Set an all-in-one packaged appearance for the tree. See the [Themes](#themes) section for more information. |
118 | | searchMethod | func | The method used to search nodes. Defaults to [`defaultSearchMethod`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/default-handlers.js), which uses the `searchQuery` string to search for nodes with matching `title` or `subtitle` values. NOTE: Changing `searchMethod` will not update the search, but changing the `searchQuery` will.
`({ node: object, path: number[] or string[], treeIndex: number, searchQuery: any }): bool`
|
119 | | searchQuery | string or any | Used by the `searchMethod` to highlight and scroll to matched nodes. Should be a string for the default `searchMethod`, but can be anything when using a custom search. Defaults to `null`. |
120 | | searchFocusOffset | number | Outline the <`searchFocusOffset`>th node and scroll to it. |
121 | | onlyExpandSearchedNodes | boolean | Only expand the nodes that match searches. Collapses all other nodes. Defaults to `false`. |
122 | | searchFinishCallback | func | Get the nodes that match the search criteria. Used for counting total matches, etc.
`(matches: { node: object, path: number[] or string[], treeIndex: number }[]): void`
|
123 | | dndType | string | String value used by [react-dnd](https://react-dnd.github.io/react-dnd/about) (see overview at the link) for dropTargets and dragSources types. If not set explicitly, a default value is applied by react-sortable-tree for you for its internal use. **NOTE:** Must be explicitly set and the same value used in order for correct functioning of external nodes |
124 | | shouldCopyOnOutsideDrop | func or bool | Return true, or a callback returning true, and dropping nodes to react-dnd drop targets outside of the tree will not remove them from the tree. Defaults to `false`.
`({ node: object, prevPath: number[] or string[], prevTreeIndex: number, }): bool`
|
125 | | reactVirtualizedListProps | object | Custom properties to hand to the internal [react-virtualized List](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types) |
126 | | style | object | Style applied to the container wrapping the tree (style defaults to `{height: '100%'}`) |
127 | | innerStyle | object | Style applied to the inner, scrollable container (for padding, etc.) |
128 | | className | string | Class name for the container wrapping the tree |
129 | | 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` |
130 | | slideRegionSize | number | Size in px of the region near the edges that initiates scrolling on dragover. Defaults to `100`. |
131 | | scaffoldBlockPxWidth | number | The width of the blocks containing the lines representing the structure of the tree. Defaults to `44`. |
132 | | isVirtualized | bool | Set to false to disable virtualization. Defaults to `true`. **NOTE**: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled. |
133 | | 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. |
134 | | 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. |
135 |
136 | ## Data Helper Functions
137 |
138 | Need a hand turning your flat data into nested tree data?
139 | Want to perform add/remove operations on the tree data without creating your own recursive function?
140 | Check out the helper functions exported from [`tree-data-utils.js`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js).
141 |
142 | - **`getTreeFromFlatData`**: Convert flat data (like that from a database) into nested tree data.
143 | - **`getFlatDataFromTree`**: Convert tree data back to flat data.
144 | - **`addNodeUnderParent`**: Add a node under the parent node at the given path.
145 | - **`removeNode`**: For a given path, get the node at that path, treeIndex, and the treeData with that node removed.
146 | - **`removeNodeAtPath`**: For a given path, remove the node and return the treeData.
147 | - **`changeNodeAtPath`**: Modify the node object at the given path.
148 | - **`map`**: Perform a change on every node in the tree.
149 | - **`walk`**: Visit every node in the tree in order.
150 | - **`getDescendantCount`**: Count how many descendants this node has.
151 | - **`getVisibleNodeCount`**: Count how many visible descendants this node has.
152 | - **`getVisibleNodeInfoAtIndex`**: Get the
th visible node in the tree data.
153 | - **`toggleExpandedForAll`**: Expand or close every node in the tree.
154 | - **`getNodeAtPath`**: Get the node at the input path.
155 | - **`insertNode`**: Insert the input node at the specified depth and minimumTreeIndex.
156 | - **`find`**: Find nodes matching a search query in the tree.
157 | - **`isDescendant`**: Check if a node is a descendant of another node.
158 | - **`getDepth`**: Get the longest path in the tree.
159 |
160 | ## Themes
161 |
162 | Using the `theme` prop along with an imported theme module, you can easily override the default appearance with another standard one.
163 |
164 | ### Featured themes
165 |
166 | |  |
9 | {props.children({
10 | height: 99999,
11 | width: 200,
12 | })}
13 |
;
14 | /* eslint-enable react/prop-types */
15 |
16 | reactVirtualized.AutoSizer = MockAutoSizer;
17 |
18 | module.exports = reactVirtualized;
19 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-sortable-tree",
3 | "version": "2.8.0",
4 | "description": "Drag-and-drop sortable component for nested data and hierarchies",
5 | "scripts": {
6 | "prebuild": "yarn run lint && yarn run clean",
7 | "build": "rollup -c",
8 | "build:storybook": "build-storybook -o build",
9 | "clean": "rimraf dist",
10 | "clean:storybook": "rimraf build",
11 | "lint": "eslint src",
12 | "prettier": "prettier --write \"{src,example/src,stories}/**/*.{js,css,md}\"",
13 | "prepublishOnly": "yarn run test && yarn run build",
14 | "release": "standard-version",
15 | "test": "jest",
16 | "test:watch": "jest --watchAll",
17 | "storybook": "start-storybook -p ${PORT:-3001} -h 0.0.0.0",
18 | "deploy": "gh-pages -d build"
19 | },
20 | "main": "dist/index.cjs.js",
21 | "module": "dist/index.esm.js",
22 | "files": [
23 | "dist",
24 | "style.css"
25 | ],
26 | "repository": {
27 | "type": "git",
28 | "url": "https://github.com/frontend-collective/react-sortable-tree"
29 | },
30 | "homepage": "https://frontend-collective.github.io/react-sortable-tree/",
31 | "bugs": "https://github.com/frontend-collective/react-sortable-tree/issues",
32 | "authors": [
33 | "Chris Fritz"
34 | ],
35 | "license": "MIT",
36 | "jest": {
37 | "setupFilesAfterEnv": [
38 | "./node_modules/jest-enzyme/lib/index.js"
39 | ],
40 | "setupFiles": [
41 | "./test-config/shim.js",
42 | "./test-config/test-setup.js"
43 | ],
44 | "moduleFileExtensions": [
45 | "js",
46 | "jsx",
47 | "json"
48 | ],
49 | "moduleDirectories": [
50 | "node_modules"
51 | ],
52 | "moduleNameMapper": {
53 | "\\.(css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
54 | "^dnd-core$": "dnd-core/dist/cjs",
55 | "^react-dnd$": "react-dnd/dist/cjs",
56 | "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
57 | "^react-dnd-touch-backend$": "react-dnd-touch-backend/dist/cjs",
58 | "^react-dnd-test-backend$": "react-dnd-test-backend/dist/cjs",
59 | "^react-dnd-test-utils$": "react-dnd-test-utils/dist/cjs"
60 | }
61 | },
62 | "browserslist": [
63 | "IE 11",
64 | "last 2 versions",
65 | "> 1%"
66 | ],
67 | "dependencies": {
68 | "frontend-collective-react-dnd-scrollzone": "^1.0.2",
69 | "lodash.isequal": "^4.5.0",
70 | "prop-types": "^15.6.1",
71 | "react-dnd": "^11.1.3",
72 | "react-dnd-html5-backend": "^11.1.3",
73 | "react-lifecycles-compat": "^3.0.4",
74 | "react-virtualized": "^9.21.2"
75 | },
76 | "peerDependencies": {
77 | "react": "^16.3.0",
78 | "react-dnd": "^7.3.0",
79 | "react-dom": "^16.3.0"
80 | },
81 | "devDependencies": {
82 | "@babel/cli": "^7.7.0",
83 | "@babel/core": "^7.7.2",
84 | "@babel/plugin-transform-modules-commonjs": "^7.1.0",
85 | "@babel/preset-env": "^7.7.1",
86 | "@babel/preset-react": "^7.7.0",
87 | "@storybook/addon-storyshots": "^5.2.6",
88 | "@storybook/addons": "^5.3.17",
89 | "@storybook/react": "^5.2.6",
90 | "@storybook/theming": "^5.3.17",
91 | "autoprefixer": "^9.7.1",
92 | "babel-core": "^7.0.0-bridge.0",
93 | "babel-eslint": "^10.0.3",
94 | "babel-jest": "^24.9.0",
95 | "babel-loader": "^8.0.4",
96 | "codesandbox": "~2.1.10",
97 | "coveralls": "^3.0.1",
98 | "cross-env": "^6.0.3",
99 | "enzyme": "^3.10.0",
100 | "enzyme-adapter-react-16": "^1.14.0",
101 | "eslint": "^6.6.0",
102 | "eslint-config-airbnb": "^18.0.1",
103 | "eslint-config-prettier": "^6.5.0",
104 | "eslint-plugin-import": "^2.18.2",
105 | "eslint-plugin-jsx-a11y": "^6.2.3",
106 | "eslint-plugin-react": "^7.16.0",
107 | "gh-pages": "^2.1.1",
108 | "jest": "^24.9.0",
109 | "jest-enzyme": "^7.1.2",
110 | "parcel-bundler": "^1.12.4",
111 | "prettier": "^1.19.1",
112 | "react": "^16.11.0",
113 | "react-addons-shallow-compare": "^15.6.2",
114 | "react-dnd-test-backend": "^11.1.3",
115 | "react-dnd-touch-backend": "^9.4.0",
116 | "react-dom": "^16.11.0",
117 | "react-hot-loader": "^4.12.17",
118 | "react-sortable-tree-theme-file-explorer": "^2.0.0",
119 | "react-test-renderer": "^16.11.0",
120 | "rimraf": "^3.0.0",
121 | "rollup": "^1.27.0",
122 | "rollup-plugin-babel": "^4.0.3",
123 | "rollup-plugin-commonjs": "^10.1.0",
124 | "rollup-plugin-node-resolve": "^5.2.0",
125 | "rollup-plugin-postcss": "^2.0.3",
126 | "standard-version": "^8.0.1"
127 | },
128 | "keywords": [
129 | "react",
130 | "react-component"
131 | ]
132 | }
133 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import nodeResolve from 'rollup-plugin-node-resolve';
2 | import commonjs from 'rollup-plugin-commonjs';
3 | import babel from 'rollup-plugin-babel';
4 | import postcss from 'rollup-plugin-postcss';
5 |
6 | import pkg from './package.json';
7 |
8 | export default {
9 | input: './src/index.js',
10 | output: [
11 | {
12 | file: pkg.main,
13 | format: 'cjs',
14 | exports: 'named',
15 | },
16 | {
17 | file: pkg.module,
18 | format: 'esm',
19 | exports: 'named',
20 | },
21 | ],
22 | external: [
23 | 'react',
24 | 'react-dom',
25 | 'react-dnd',
26 | 'prop-types',
27 | 'react-dnd-html5-backend',
28 | 'frontend-collective-react-dnd-scrollzone',
29 | 'react-virtualized',
30 | 'lodash.isequal',
31 | ],
32 | plugins: [
33 | nodeResolve(),
34 | postcss({ extract: './style.css' }),
35 | commonjs({
36 | include: 'node_modules/**',
37 | }),
38 | babel({
39 | exclude: 'node_modules/**',
40 | }),
41 | ],
42 | };
43 |
--------------------------------------------------------------------------------
/src/__snapshots__/react-sortable-tree.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
12 |
13 |
34 |
49 |
61 |
69 |
77 |
84 |
87 |
95 |
98 |
101 |
104 |
108 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
46 |
47 | {[...new Array(12)].map((_, index) => (
48 |
56 | ))}
57 |
58 |
, {
63 | dropEffect: 'copy',
64 | });
65 | }
66 | }
67 |
68 | const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
69 | const isLandingPadActive = !didDrop && isDragging;
70 |
71 | let buttonStyle = { left: -0.5 * scaffoldBlockPxWidth };
72 | if (rowDirection === 'rtl') {
73 | buttonStyle = { right: -0.5 * scaffoldBlockPxWidth };
74 | }
75 |
76 | return (
77 |
78 | {toggleChildrenVisibility &&
79 | node.children &&
80 | (node.children.length > 0 || typeof node.children === 'function') && (
81 |
82 |
91 | toggleChildrenVisibility({
92 | node,
93 | path,
94 | treeIndex,
95 | })
96 | }
97 | />
98 |
99 | {node.expanded && !isDragging && (
100 |
104 | )}
105 |
106 | )}
107 |
108 |
109 | {/* Set the row preview to be used during drag and drop */}
110 | {connectDragPreview(
111 |
126 | {handle}
127 |
128 |
135 |
136 |
142 | {typeof nodeTitle === 'function'
143 | ? nodeTitle({
144 | node,
145 | path,
146 | treeIndex,
147 | })
148 | : nodeTitle}
149 |
150 |
151 | {nodeSubtitle && (
152 |
153 | {typeof nodeSubtitle === 'function'
154 | ? nodeSubtitle({
155 | node,
156 | path,
157 | treeIndex,
158 | })
159 | : nodeSubtitle}
160 |
161 | )}
162 |
163 |
164 |
165 | {buttons.map((btn, index) => (
166 |
170 | {btn}
171 |
172 | ))}
173 |
174 |
175 |
176 | )}
177 |
178 |
14 | );
15 |
16 | PlaceholderRendererDefault.defaultProps = {
17 | isOver: false,
18 | canDrop: false,
19 | };
20 |
21 | PlaceholderRendererDefault.propTypes = {
22 | isOver: PropTypes.bool,
23 | canDrop: PropTypes.bool,
24 | };
25 |
26 | export default PlaceholderRendererDefault;
27 |
--------------------------------------------------------------------------------
/src/react-sortable-tree.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Extra class applied to VirtualScroll through className prop
3 | */
4 | .rst__virtualScrollOverride {
5 | overflow: auto !important;
6 | }
7 | .rst__virtualScrollOverride * {
8 | box-sizing: border-box;
9 | }
10 |
11 | .ReactVirtualized__Grid__innerScrollContainer {
12 | overflow: visible !important;
13 | }
14 |
15 | .rst__rtl .ReactVirtualized__Grid__innerScrollContainer {
16 | direction: rtl;
17 | }
18 |
19 | .ReactVirtualized__Grid {
20 | outline: none;
21 | }
22 |
--------------------------------------------------------------------------------
/src/react-sortable-tree.js:
--------------------------------------------------------------------------------
1 | import withScrolling, {
2 | createHorizontalStrength,
3 | createScrollingComponent,
4 | createVerticalStrength,
5 | } from 'frontend-collective-react-dnd-scrollzone';
6 | import isEqual from 'lodash.isequal';
7 | import PropTypes from 'prop-types';
8 | import React, { Component } from 'react';
9 | import { DndContext, DndProvider } from 'react-dnd';
10 | import { HTML5Backend } from 'react-dnd-html5-backend';
11 | import { polyfill } from 'react-lifecycles-compat';
12 | import { AutoSizer, List } from 'react-virtualized';
13 | import 'react-virtualized/styles.css';
14 | import NodeRendererDefault from './node-renderer-default';
15 | import PlaceholderRendererDefault from './placeholder-renderer-default';
16 | import './react-sortable-tree.css';
17 | import TreeNode from './tree-node';
18 | import TreePlaceholder from './tree-placeholder';
19 | import classnames from './utils/classnames';
20 | import {
21 | defaultGetNodeKey,
22 | defaultSearchMethod,
23 | } from './utils/default-handlers';
24 | import DndManager from './utils/dnd-manager';
25 | import { slideRows } from './utils/generic-utils';
26 | import {
27 | memoizedGetDescendantCount,
28 | memoizedGetFlatDataFromTree,
29 | memoizedInsertNode,
30 | } from './utils/memoized-tree-data-utils';
31 | import {
32 | changeNodeAtPath,
33 | find,
34 | insertNode,
35 | removeNode,
36 | toggleExpandedForAll,
37 | walk,
38 | } from './utils/tree-data-utils';
39 |
40 | let treeIdCounter = 1;
41 |
42 | const mergeTheme = props => {
43 | const merged = {
44 | ...props,
45 | style: { ...props.theme.style, ...props.style },
46 | innerStyle: { ...props.theme.innerStyle, ...props.innerStyle },
47 | reactVirtualizedListProps: {
48 | ...props.theme.reactVirtualizedListProps,
49 | ...props.reactVirtualizedListProps,
50 | },
51 | };
52 |
53 | const overridableDefaults = {
54 | nodeContentRenderer: NodeRendererDefault,
55 | placeholderRenderer: PlaceholderRendererDefault,
56 | rowHeight: 62,
57 | scaffoldBlockPxWidth: 44,
58 | slideRegionSize: 100,
59 | treeNodeRenderer: TreeNode,
60 | };
61 | Object.keys(overridableDefaults).forEach(propKey => {
62 | // If prop has been specified, do not change it
63 | // If prop is specified in theme, use the theme setting
64 | // If all else fails, fall back to the default
65 | if (props[propKey] === null) {
66 | merged[propKey] =
67 | typeof props.theme[propKey] !== 'undefined'
68 | ? props.theme[propKey]
69 | : overridableDefaults[propKey];
70 | }
71 | });
72 |
73 | return merged;
74 | };
75 |
76 | class ReactSortableTree extends Component {
77 | constructor(props) {
78 | super(props);
79 |
80 | const {
81 | dndType,
82 | nodeContentRenderer,
83 | treeNodeRenderer,
84 | isVirtualized,
85 | slideRegionSize,
86 | } = mergeTheme(props);
87 |
88 | this.dndManager = new DndManager(this);
89 |
90 | // Wrapping classes for use with react-dnd
91 | this.treeId = `rst__${treeIdCounter}`;
92 | treeIdCounter += 1;
93 | this.dndType = dndType || this.treeId;
94 | this.nodeContentRenderer = this.dndManager.wrapSource(nodeContentRenderer);
95 | this.treePlaceholderRenderer = this.dndManager.wrapPlaceholder(
96 | TreePlaceholder
97 | );
98 | this.treeNodeRenderer = this.dndManager.wrapTarget(treeNodeRenderer);
99 |
100 | // Prepare scroll-on-drag options for this list
101 | if (isVirtualized) {
102 | this.scrollZoneVirtualList = (createScrollingComponent || withScrolling)(
103 | List
104 | );
105 | this.vStrength = createVerticalStrength(slideRegionSize);
106 | this.hStrength = createHorizontalStrength(slideRegionSize);
107 | }
108 |
109 | this.state = {
110 | draggingTreeData: null,
111 | draggedNode: null,
112 | draggedMinimumTreeIndex: null,
113 | draggedDepth: null,
114 | searchMatches: [],
115 | searchFocusTreeIndex: null,
116 | dragging: false,
117 |
118 | // props that need to be used in gDSFP or static functions will be stored here
119 | instanceProps: {
120 | treeData: [],
121 | ignoreOneTreeUpdate: false,
122 | searchQuery: null,
123 | searchFocusOffset: null,
124 | },
125 | };
126 |
127 | this.toggleChildrenVisibility = this.toggleChildrenVisibility.bind(this);
128 | this.moveNode = this.moveNode.bind(this);
129 | this.startDrag = this.startDrag.bind(this);
130 | this.dragHover = this.dragHover.bind(this);
131 | this.endDrag = this.endDrag.bind(this);
132 | this.drop = this.drop.bind(this);
133 | this.handleDndMonitorChange = this.handleDndMonitorChange.bind(this);
134 | }
135 |
136 | componentDidMount() {
137 | ReactSortableTree.loadLazyChildren(this.props, this.state);
138 | const stateUpdate = ReactSortableTree.search(
139 | this.props,
140 | this.state,
141 | true,
142 | true,
143 | false
144 | );
145 | this.setState(stateUpdate);
146 |
147 | // Hook into react-dnd state changes to detect when the drag ends
148 | // TODO: This is very brittle, so it needs to be replaced if react-dnd
149 | // offers a more official way to detect when a drag ends
150 | this.clearMonitorSubscription = this.props.dragDropManager
151 | .getMonitor()
152 | .subscribeToStateChange(this.handleDndMonitorChange);
153 | }
154 |
155 | static getDerivedStateFromProps(nextProps, prevState) {
156 | const { instanceProps } = prevState;
157 | const newState = {};
158 |
159 | const isTreeDataEqual = isEqual(instanceProps.treeData, nextProps.treeData);
160 |
161 | // make sure we have the most recent version of treeData
162 | instanceProps.treeData = nextProps.treeData;
163 |
164 | if (!isTreeDataEqual) {
165 | if (instanceProps.ignoreOneTreeUpdate) {
166 | instanceProps.ignoreOneTreeUpdate = false;
167 | } else {
168 | newState.searchFocusTreeIndex = null;
169 | ReactSortableTree.loadLazyChildren(nextProps, prevState);
170 | Object.assign(
171 | newState,
172 | ReactSortableTree.search(nextProps, prevState, false, false, false)
173 | );
174 | }
175 |
176 | newState.draggingTreeData = null;
177 | newState.draggedNode = null;
178 | newState.draggedMinimumTreeIndex = null;
179 | newState.draggedDepth = null;
180 | newState.dragging = false;
181 | } else if (!isEqual(instanceProps.searchQuery, nextProps.searchQuery)) {
182 | Object.assign(
183 | newState,
184 | ReactSortableTree.search(nextProps, prevState, true, true, false)
185 | );
186 | } else if (
187 | instanceProps.searchFocusOffset !== nextProps.searchFocusOffset
188 | ) {
189 | Object.assign(
190 | newState,
191 | ReactSortableTree.search(nextProps, prevState, true, true, true)
192 | );
193 | }
194 |
195 | instanceProps.searchQuery = nextProps.searchQuery;
196 | instanceProps.searchFocusOffset = nextProps.searchFocusOffset;
197 | newState.instanceProps = {...instanceProps, ...newState.instanceProps };
198 |
199 | return newState;
200 | }
201 |
202 | // listen to dragging
203 | componentDidUpdate(prevProps, prevState) {
204 | // if it is not the same then call the onDragStateChanged
205 | if (this.state.dragging !== prevState.dragging) {
206 | if (this.props.onDragStateChanged) {
207 | this.props.onDragStateChanged({
208 | isDragging: this.state.dragging,
209 | draggedNode: this.state.draggedNode,
210 | });
211 | }
212 | }
213 | }
214 |
215 | componentWillUnmount() {
216 | this.clearMonitorSubscription();
217 | }
218 |
219 | getRows(treeData) {
220 | return memoizedGetFlatDataFromTree({
221 | ignoreCollapsed: true,
222 | getNodeKey: this.props.getNodeKey,
223 | treeData,
224 | });
225 | }
226 |
227 | handleDndMonitorChange() {
228 | const monitor = this.props.dragDropManager.getMonitor();
229 | // If the drag ends and the tree is still in a mid-drag state,
230 | // it means that the drag was canceled or the dragSource dropped
231 | // elsewhere, and we should reset the state of this tree
232 | if (!monitor.isDragging() && this.state.draggingTreeData) {
233 | setTimeout(() => {this.endDrag()});
234 | }
235 | }
236 |
237 | toggleChildrenVisibility({ node: targetNode, path }) {
238 | const { instanceProps } = this.state;
239 |
240 | const treeData = changeNodeAtPath({
241 | treeData: instanceProps.treeData,
242 | path,
243 | newNode: ({ node }) => ({ ...node, expanded: !node.expanded }),
244 | getNodeKey: this.props.getNodeKey,
245 | });
246 |
247 | this.props.onChange(treeData);
248 |
249 | this.props.onVisibilityToggle({
250 | treeData,
251 | node: targetNode,
252 | expanded: !targetNode.expanded,
253 | path,
254 | });
255 | }
256 |
257 | moveNode({
258 | node,
259 | path: prevPath,
260 | treeIndex: prevTreeIndex,
261 | depth,
262 | minimumTreeIndex,
263 | }) {
264 | const {
265 | treeData,
266 | treeIndex,
267 | path,
268 | parentNode: nextParentNode,
269 | } = insertNode({
270 | treeData: this.state.draggingTreeData,
271 | newNode: node,
272 | depth,
273 | minimumTreeIndex,
274 | expandParent: true,
275 | getNodeKey: this.props.getNodeKey,
276 | });
277 |
278 | this.props.onChange(treeData);
279 |
280 | this.props.onMoveNode({
281 | treeData,
282 | node,
283 | treeIndex,
284 | path,
285 | nextPath: path,
286 | nextTreeIndex: treeIndex,
287 | prevPath,
288 | prevTreeIndex,
289 | nextParentNode,
290 | });
291 | }
292 |
293 | // returns the new state after search
294 | static search(props, state, seekIndex, expand, singleSearch) {
295 | const {
296 | onChange,
297 | getNodeKey,
298 | searchFinishCallback,
299 | searchQuery,
300 | searchMethod,
301 | searchFocusOffset,
302 | onlyExpandSearchedNodes,
303 | } = props;
304 |
305 | const { instanceProps } = state;
306 |
307 | // Skip search if no conditions are specified
308 | if (!searchQuery && !searchMethod) {
309 | if (searchFinishCallback) {
310 | searchFinishCallback([]);
311 | }
312 |
313 | return { searchMatches: [] };
314 | }
315 |
316 | const newState = { instanceProps: {} };
317 |
318 | // if onlyExpandSearchedNodes collapse the tree and search
319 | const { treeData: expandedTreeData, matches: searchMatches } = find({
320 | getNodeKey,
321 | treeData: onlyExpandSearchedNodes
322 | ? toggleExpandedForAll({
323 | treeData: instanceProps.treeData,
324 | expanded: false,
325 | })
326 | : instanceProps.treeData,
327 | searchQuery,
328 | searchMethod: searchMethod || defaultSearchMethod,
329 | searchFocusOffset,
330 | expandAllMatchPaths: expand && !singleSearch,
331 | expandFocusMatchPaths: !!expand,
332 | });
333 |
334 | // Update the tree with data leaving all paths leading to matching nodes open
335 | if (expand) {
336 | newState.instanceProps.ignoreOneTreeUpdate = true; // Prevents infinite loop
337 | onChange(expandedTreeData);
338 | }
339 |
340 | if (searchFinishCallback) {
341 | searchFinishCallback(searchMatches);
342 | }
343 |
344 | let searchFocusTreeIndex = null;
345 | if (
346 | seekIndex &&
347 | searchFocusOffset !== null &&
348 | searchFocusOffset < searchMatches.length
349 | ) {
350 | searchFocusTreeIndex = searchMatches[searchFocusOffset].treeIndex;
351 | }
352 |
353 | newState.searchMatches = searchMatches;
354 | newState.searchFocusTreeIndex = searchFocusTreeIndex;
355 |
356 | return newState;
357 | }
358 |
359 | startDrag({ path }) {
360 | this.setState(prevState => {
361 | const {
362 | treeData: draggingTreeData,
363 | node: draggedNode,
364 | treeIndex: draggedMinimumTreeIndex,
365 | } = removeNode({
366 | treeData: prevState.instanceProps.treeData,
367 | path,
368 | getNodeKey: this.props.getNodeKey,
369 | });
370 |
371 | return {
372 | draggingTreeData,
373 | draggedNode,
374 | draggedDepth: path.length - 1,
375 | draggedMinimumTreeIndex,
376 | dragging: true,
377 | };
378 | });
379 | }
380 |
381 | dragHover({
382 | node: draggedNode,
383 | depth: draggedDepth,
384 | minimumTreeIndex: draggedMinimumTreeIndex,
385 | }) {
386 | // Ignore this hover if it is at the same position as the last hover
387 | if (
388 | this.state.draggedDepth === draggedDepth &&
389 | this.state.draggedMinimumTreeIndex === draggedMinimumTreeIndex
390 | ) {
391 | return;
392 | }
393 |
394 | this.setState(({ draggingTreeData, instanceProps }) => {
395 | // Fall back to the tree data if something is being dragged in from
396 | // an external element
397 | const newDraggingTreeData = draggingTreeData || instanceProps.treeData;
398 |
399 | const addedResult = memoizedInsertNode({
400 | treeData: newDraggingTreeData,
401 | newNode: draggedNode,
402 | depth: draggedDepth,
403 | minimumTreeIndex: draggedMinimumTreeIndex,
404 | expandParent: true,
405 | getNodeKey: this.props.getNodeKey,
406 | });
407 |
408 | const rows = this.getRows(addedResult.treeData);
409 | const expandedParentPath = rows[addedResult.treeIndex].path;
410 |
411 | return {
412 | draggedNode,
413 | draggedDepth,
414 | draggedMinimumTreeIndex,
415 | draggingTreeData: changeNodeAtPath({
416 | treeData: newDraggingTreeData,
417 | path: expandedParentPath.slice(0, -1),
418 | newNode: ({ node }) => ({ ...node, expanded: true }),
419 | getNodeKey: this.props.getNodeKey,
420 | }),
421 | // reset the scroll focus so it doesn't jump back
422 | // to a search result while dragging
423 | searchFocusTreeIndex: null,
424 | dragging: true,
425 | };
426 | });
427 | }
428 |
429 | endDrag(dropResult) {
430 | const { instanceProps } = this.state;
431 |
432 | const resetTree = () =>
433 | this.setState({
434 | draggingTreeData: null,
435 | draggedNode: null,
436 | draggedMinimumTreeIndex: null,
437 | draggedDepth: null,
438 | dragging: false,
439 | });
440 |
441 | // Drop was cancelled
442 | if (!dropResult) {
443 | resetTree();
444 | } else if (dropResult.treeId !== this.treeId) {
445 | // The node was dropped in an external drop target or tree
446 | const { node, path, treeIndex } = dropResult;
447 | let shouldCopy = this.props.shouldCopyOnOutsideDrop;
448 | if (typeof shouldCopy === 'function') {
449 | shouldCopy = shouldCopy({
450 | node,
451 | prevTreeIndex: treeIndex,
452 | prevPath: path,
453 | });
454 | }
455 |
456 | let treeData = this.state.draggingTreeData || instanceProps.treeData;
457 |
458 | // If copying is enabled, a drop outside leaves behind a copy in the
459 | // source tree
460 | if (shouldCopy) {
461 | treeData = changeNodeAtPath({
462 | treeData: instanceProps.treeData, // use treeData unaltered by the drag operation
463 | path,
464 | newNode: ({ node: copyNode }) => ({ ...copyNode }), // create a shallow copy of the node
465 | getNodeKey: this.props.getNodeKey,
466 | });
467 | }
468 |
469 | this.props.onChange(treeData);
470 |
471 | this.props.onMoveNode({
472 | treeData,
473 | node,
474 | treeIndex: null,
475 | path: null,
476 | nextPath: null,
477 | nextTreeIndex: null,
478 | prevPath: path,
479 | prevTreeIndex: treeIndex,
480 | });
481 | }
482 | }
483 |
484 | drop(dropResult) {
485 | this.moveNode(dropResult);
486 | }
487 |
488 | canNodeHaveChildren(node) {
489 | const { canNodeHaveChildren } = this.props;
490 | if (canNodeHaveChildren) {
491 | return canNodeHaveChildren(node);
492 | }
493 | return true;
494 | }
495 |
496 | // Load any children in the tree that are given by a function
497 | // calls the onChange callback on the new treeData
498 | static loadLazyChildren(props, state) {
499 | const { instanceProps } = state;
500 |
501 | walk({
502 | treeData: instanceProps.treeData,
503 | getNodeKey: props.getNodeKey,
504 | callback: ({ node, path, lowerSiblingCounts, treeIndex }) => {
505 | // If the node has children defined by a function, and is either expanded
506 | // or set to load even before expansion, run the function.
507 | if (
508 | node.children &&
509 | typeof node.children === 'function' &&
510 | (node.expanded || props.loadCollapsedLazyChildren)
511 | ) {
512 | // Call the children fetching function
513 | node.children({
514 | node,
515 | path,
516 | lowerSiblingCounts,
517 | treeIndex,
518 |
519 | // Provide a helper to append the new data when it is received
520 | done: childrenArray =>
521 | props.onChange(
522 | changeNodeAtPath({
523 | treeData: instanceProps.treeData,
524 | path,
525 | newNode: ({ node: oldNode }) =>
526 | // Only replace the old node if it's the one we set off to find children
527 | // for in the first place
528 | oldNode === node
529 | ? {
530 | ...oldNode,
531 | children: childrenArray,
532 | }
533 | : oldNode,
534 | getNodeKey: props.getNodeKey,
535 | })
536 | ),
537 | });
538 | }
539 | },
540 | });
541 | }
542 |
543 | renderRow(
544 | row,
545 | { listIndex, style, getPrevRow, matchKeys, swapFrom, swapDepth, swapLength }
546 | ) {
547 | const { node, parentNode, path, lowerSiblingCounts, treeIndex } = row;
548 |
549 | const {
550 | canDrag,
551 | generateNodeProps,
552 | scaffoldBlockPxWidth,
553 | searchFocusOffset,
554 | rowDirection,
555 | } = mergeTheme(this.props);
556 | const TreeNodeRenderer = this.treeNodeRenderer;
557 | const NodeContentRenderer = this.nodeContentRenderer;
558 | const nodeKey = path[path.length - 1];
559 | const isSearchMatch = nodeKey in matchKeys;
560 | const isSearchFocus =
561 | isSearchMatch && matchKeys[nodeKey] === searchFocusOffset;
562 | const callbackParams = {
563 | node,
564 | parentNode,
565 | path,
566 | lowerSiblingCounts,
567 | treeIndex,
568 | isSearchMatch,
569 | isSearchFocus,
570 | };
571 | const nodeProps = !generateNodeProps
572 | ? {}
573 | : generateNodeProps(callbackParams);
574 | const rowCanDrag =
575 | typeof canDrag !== 'function' ? canDrag : canDrag(callbackParams);
576 |
577 | const sharedProps = {
578 | treeIndex,
579 | scaffoldBlockPxWidth,
580 | node,
581 | path,
582 | treeId: this.treeId,
583 | rowDirection,
584 | };
585 |
586 | return (
587 |
598 |
608 | );
609 | }
610 |
611 | render() {
612 | const {
613 | dragDropManager,
614 | style,
615 | className,
616 | innerStyle,
617 | rowHeight,
618 | isVirtualized,
619 | placeholderRenderer,
620 | reactVirtualizedListProps,
621 | getNodeKey,
622 | rowDirection,
623 | } = mergeTheme(this.props);
624 | const {
625 | searchMatches,
626 | searchFocusTreeIndex,
627 | draggedNode,
628 | draggedDepth,
629 | draggedMinimumTreeIndex,
630 | instanceProps,
631 | } = this.state;
632 |
633 | const treeData = this.state.draggingTreeData || instanceProps.treeData;
634 | const rowDirectionClass = rowDirection === 'rtl' ? 'rst__rtl' : null;
635 |
636 | let rows;
637 | let swapFrom = null;
638 | let swapLength = null;
639 | if (draggedNode && draggedMinimumTreeIndex !== null) {
640 | const addedResult = memoizedInsertNode({
641 | treeData,
642 | newNode: draggedNode,
643 | depth: draggedDepth,
644 | minimumTreeIndex: draggedMinimumTreeIndex,
645 | expandParent: true,
646 | getNodeKey,
647 | });
648 |
649 | const swapTo = draggedMinimumTreeIndex;
650 | swapFrom = addedResult.treeIndex;
651 | swapLength = 1 + memoizedGetDescendantCount({ node: draggedNode });
652 | rows = slideRows(
653 | this.getRows(addedResult.treeData),
654 | swapFrom,
655 | swapTo,
656 | swapLength
657 | );
658 | } else {
659 | rows = this.getRows(treeData);
660 | }
661 |
662 | // Get indices for rows that match the search conditions
663 | const matchKeys = {};
664 | searchMatches.forEach(({ path }, i) => {
665 | matchKeys[path[path.length - 1]] = i;
666 | });
667 |
668 | // Seek to the focused search result if there is one specified
669 | const scrollToInfo =
670 | searchFocusTreeIndex !== null
671 | ? { scrollToIndex: searchFocusTreeIndex }
672 | : {};
673 |
674 | let containerStyle = style;
675 | let list;
676 | if (rows.length < 1) {
677 | const Placeholder = this.treePlaceholderRenderer;
678 | const PlaceholderContent = placeholderRenderer;
679 | list = (
680 |
681 |
683 | );
684 | } else if (isVirtualized) {
685 | containerStyle = { height: '100%', ...containerStyle };
686 |
687 | const ScrollZoneVirtualList = this.scrollZoneVirtualList;
688 | // Render list with react-virtualized
689 | list = (
690 |
691 | {({ height, width }) => (
692 | {
702 | this.scrollTop = scrollTop;
703 | }}
704 | height={height}
705 | style={innerStyle}
706 | rowCount={rows.length}
707 | estimatedRowSize={
708 | typeof rowHeight !== 'function' ? rowHeight : undefined
709 | }
710 | rowHeight={
711 | typeof rowHeight !== 'function'
712 | ? rowHeight
713 | : ({ index }) =>
714 | rowHeight({
715 | index,
716 | treeIndex: index,
717 | node: rows[index].node,
718 | path: rows[index].path,
719 | })
720 | }
721 | rowRenderer={({ index, style: rowStyle }) =>
722 | this.renderRow(rows[index], {
723 | listIndex: index,
724 | style: rowStyle,
725 | getPrevRow: () => rows[index - 1] || null,
726 | matchKeys,
727 | swapFrom,
728 | swapDepth: draggedDepth,
729 | swapLength,
730 | })
731 | }
732 | {...reactVirtualizedListProps}
733 | />
734 | )}
735 |
736 | );
737 | } else {
738 | // Render list without react-virtualized
739 | list = rows.map((row, index) =>
740 | this.renderRow(row, {
741 | listIndex: index,
742 | style: {
743 | height:
744 | typeof rowHeight !== 'function'
745 | ? rowHeight
746 | : rowHeight({
747 | index,
748 | treeIndex: index,
749 | node: row.node,
750 | path: row.path,
751 | }),
752 | },
753 | getPrevRow: () => rows[index - 1] || null,
754 | matchKeys,
755 | swapFrom,
756 | swapDepth: draggedDepth,
757 | swapLength,
758 | })
759 | );
760 | }
761 |
762 | return (
763 |
767 | {list}
768 |
769 | );
770 | }
771 | }
772 |
773 | ReactSortableTree.propTypes = {
774 | dragDropManager: PropTypes.shape({
775 | getMonitor: PropTypes.func,
776 | }).isRequired,
777 |
778 | // Tree data in the following format:
779 | // [{title: 'main', subtitle: 'sub'}, { title: 'value2', expanded: true, children: [{ title: 'value3') }] }]
780 | // `title` is the primary label for the node
781 | // `subtitle` is a secondary label for the node
782 | // `expanded` shows children of the node if true, or hides them if false. Defaults to false.
783 | // `children` is an array of child nodes belonging to the node.
784 | treeData: PropTypes.arrayOf(PropTypes.object).isRequired,
785 |
786 | // Style applied to the container wrapping the tree (style defaults to {height: '100%'})
787 | style: PropTypes.shape({}),
788 |
789 | // Class name for the container wrapping the tree
790 | className: PropTypes.string,
791 |
792 | // Style applied to the inner, scrollable container (for padding, etc.)
793 | innerStyle: PropTypes.shape({}),
794 |
795 | // Used by react-virtualized
796 | // Either a fixed row height (number) or a function that returns the
797 | // height of a row given its index: `({ index: number }): number`
798 | rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
799 |
800 | // Size in px of the region near the edges that initiates scrolling on dragover
801 | slideRegionSize: PropTypes.number,
802 |
803 | // Custom properties to hand to the react-virtualized list
804 | // https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types
805 | reactVirtualizedListProps: PropTypes.shape({}),
806 |
807 | // The width of the blocks containing the lines representing the structure of the tree.
808 | scaffoldBlockPxWidth: PropTypes.number,
809 |
810 | // Maximum depth nodes can be inserted at. Defaults to infinite.
811 | maxDepth: PropTypes.number,
812 |
813 | // The method used to search nodes.
814 | // Defaults to a function that uses the `searchQuery` string to search for nodes with
815 | // matching `title` or `subtitle` values.
816 | // NOTE: Changing `searchMethod` will not update the search, but changing the `searchQuery` will.
817 | searchMethod: PropTypes.func,
818 |
819 | // Used by the `searchMethod` to highlight and scroll to matched nodes.
820 | // Should be a string for the default `searchMethod`, but can be anything when using a custom search.
821 | searchQuery: PropTypes.any, // eslint-disable-line react/forbid-prop-types
822 |
823 | // Outline the <`searchFocusOffset`>th node and scroll to it.
824 | searchFocusOffset: PropTypes.number,
825 |
826 | // Get the nodes that match the search criteria. Used for counting total matches, etc.
827 | searchFinishCallback: PropTypes.func,
828 |
829 | // Generate an object with additional props to be passed to the node renderer.
830 | // Use this for adding buttons via the `buttons` key,
831 | // or additional `style` / `className` settings.
832 | generateNodeProps: PropTypes.func,
833 |
834 | // Set to false to disable virtualization.
835 | // NOTE: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.
836 | isVirtualized: PropTypes.bool,
837 |
838 | treeNodeRenderer: PropTypes.func,
839 |
840 | // Override the default component for rendering nodes (but keep the scaffolding generator)
841 | // This is an advanced option for complete customization of the appearance.
842 | // It is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.
843 | nodeContentRenderer: PropTypes.func,
844 |
845 | // Override the default component for rendering an empty tree
846 | // This is an advanced option for complete customization of the appearance.
847 | // It is best to copy the component in `placeholder-renderer-default.js` to use as a base,
848 | // and customize as needed.
849 | placeholderRenderer: PropTypes.func,
850 |
851 | theme: PropTypes.shape({
852 | style: PropTypes.shape({}),
853 | innerStyle: PropTypes.shape({}),
854 | reactVirtualizedListProps: PropTypes.shape({}),
855 | scaffoldBlockPxWidth: PropTypes.number,
856 | slideRegionSize: PropTypes.number,
857 | rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
858 | treeNodeRenderer: PropTypes.func,
859 | nodeContentRenderer: PropTypes.func,
860 | placeholderRenderer: PropTypes.func,
861 | }),
862 |
863 | // Determine the unique key used to identify each node and
864 | // generate the `path` array passed in callbacks.
865 | // By default, returns the index in the tree (omitting hidden nodes).
866 | getNodeKey: PropTypes.func,
867 |
868 | // Called whenever tree data changed.
869 | // Just like with React input elements, you have to update your
870 | // own component's data to see the changes reflected.
871 | onChange: PropTypes.func.isRequired,
872 |
873 | // Called after node move operation.
874 | onMoveNode: PropTypes.func,
875 |
876 | // Determine whether a node can be dragged. Set to false to disable dragging on all nodes.
877 | canDrag: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
878 |
879 | // Determine whether a node can be dropped based on its path and parents'.
880 | canDrop: PropTypes.func,
881 |
882 | // Determine whether a node can have children
883 | canNodeHaveChildren: PropTypes.func,
884 |
885 | // When true, or a callback returning true, dropping nodes to react-dnd
886 | // drop targets outside of this tree will not remove them from this tree
887 | shouldCopyOnOutsideDrop: PropTypes.oneOfType([
888 | PropTypes.func,
889 | PropTypes.bool,
890 | ]),
891 |
892 | // Called after children nodes collapsed or expanded.
893 | onVisibilityToggle: PropTypes.func,
894 |
895 | dndType: PropTypes.string,
896 |
897 | // Called to track between dropped and dragging
898 | onDragStateChanged: PropTypes.func,
899 |
900 | // Specify that nodes that do not match search will be collapsed
901 | onlyExpandSearchedNodes: PropTypes.bool,
902 |
903 | // rtl support
904 | rowDirection: PropTypes.string,
905 | };
906 |
907 | ReactSortableTree.defaultProps = {
908 | canDrag: true,
909 | canDrop: null,
910 | canNodeHaveChildren: () => true,
911 | className: '',
912 | dndType: null,
913 | generateNodeProps: null,
914 | getNodeKey: defaultGetNodeKey,
915 | innerStyle: {},
916 | isVirtualized: true,
917 | maxDepth: null,
918 | treeNodeRenderer: null,
919 | nodeContentRenderer: null,
920 | onMoveNode: () => {},
921 | onVisibilityToggle: () => {},
922 | placeholderRenderer: null,
923 | reactVirtualizedListProps: {},
924 | rowHeight: null,
925 | scaffoldBlockPxWidth: null,
926 | searchFinishCallback: null,
927 | searchFocusOffset: null,
928 | searchMethod: null,
929 | searchQuery: null,
930 | shouldCopyOnOutsideDrop: false,
931 | slideRegionSize: null,
932 | style: {},
933 | theme: {},
934 | onDragStateChanged: () => {},
935 | onlyExpandSearchedNodes: false,
936 | rowDirection: 'ltr',
937 | };
938 |
939 | polyfill(ReactSortableTree);
940 |
941 | const SortableTreeWithoutDndContext = props => (
942 |
943 | {({ dragDropManager }) =>
944 | dragDropManager === undefined ? null : (
945 |
949 | );
950 |
951 | const SortableTree = props => (
952 |
953 |
955 | );
956 |
957 | // Export the tree component without the react-dnd DragDropContext,
958 | // for when component is used with other components using react-dnd.
959 | // see: https://github.com/gaearon/react-dnd/issues/186
960 | export { SortableTreeWithoutDndContext };
961 |
962 | export default SortableTree;
963 |
--------------------------------------------------------------------------------
/src/react-sortable-tree.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-multi-comp */
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 | import renderer from 'react-test-renderer';
5 | import { mount } from 'enzyme';
6 | import { List } from 'react-virtualized';
7 | import { DndProvider, DndContext } from 'react-dnd';
8 | import TestBackend from 'react-dnd-test-backend';
9 | import HTML5Backend from 'react-dnd-html5-backend';
10 | import TouchBackend from 'react-dnd-touch-backend';
11 | import SortableTree, {
12 | SortableTreeWithoutDndContext,
13 | } from './react-sortable-tree';
14 | import TreeNode from './tree-node';
15 | import DefaultNodeRenderer from './node-renderer-default';
16 |
17 | describe(' {}} />, {
21 | createNodeMock: () => ({}),
22 | })
23 | .toJSON();
24 |
25 | expect(tree).toMatchSnapshot();
26 | });
27 |
28 | it('should render nodes for flat data', () => {
29 | let wrapper;
30 |
31 | // No nodes
32 | wrapper = mount( {}} />);
33 | expect(wrapper.find(TreeNode).length).toEqual(0);
34 |
35 | // Single node
36 | wrapper = mount( {}} />);
37 | expect(wrapper.find(TreeNode).length).toEqual(1);
38 |
39 | // Two nodes
40 | wrapper = mount( {}} />);
41 | expect(wrapper.find(TreeNode).length).toEqual(2);
42 | });
43 |
44 | it('should render nodes for nested, expanded data', () => {
45 | let wrapper;
46 |
47 | // Single Nested
48 | wrapper = mount(
49 | {}}
52 | />
53 | );
54 | expect(wrapper.find(TreeNode).length).toEqual(2);
55 |
56 | // Double Nested
57 | wrapper = mount(
58 | {}}
63 | />
64 | );
65 | expect(wrapper.find(TreeNode).length).toEqual(3);
66 |
67 | // 2x Double Nested Siblings
68 | wrapper = mount(
69 | {}}
75 | />
76 | );
77 | expect(wrapper.find(TreeNode).length).toEqual(6);
78 | });
79 |
80 | it('should render nodes for nested, collapsed data', () => {
81 | let wrapper;
82 |
83 | // Single Nested
84 | wrapper = mount(
85 | {}}
88 | />
89 | );
90 | expect(wrapper.find(TreeNode).length).toEqual(1);
91 |
92 | // Double Nested
93 | wrapper = mount(
94 | {}}
99 | />
100 | );
101 | expect(wrapper.find(TreeNode).length).toEqual(1);
102 |
103 | // 2x Double Nested Siblings, top level of first expanded
104 | wrapper = mount(
105 | {}}
111 | />
112 | );
113 | expect(wrapper.find(TreeNode).length).toEqual(3);
114 | });
115 |
116 | it('should reveal hidden nodes when visibility toggled', () => {
117 | const wrapper = mount(
118 | wrapper.setProps({ treeData })}
121 | />
122 | );
123 |
124 | // Check nodes in collapsed state
125 | expect(wrapper.find(TreeNode).length).toEqual(1);
126 |
127 | // Expand node and check for the existence of the revealed child
128 | wrapper
129 | .find('.rst__expandButton')
130 | .first()
131 | .simulate('click');
132 | expect(wrapper.find(TreeNode).length).toEqual(2);
133 |
134 | // Collapse node and make sure the child has been hidden
135 | wrapper
136 | .find('.rst__collapseButton')
137 | .first()
138 | .simulate('click');
139 | expect(wrapper.find(TreeNode).length).toEqual(1);
140 | });
141 |
142 | it('should change outer wrapper style via `style` and `className` props', () => {
143 | const wrapper = mount(
144 | {}}
147 | style={{ borderWidth: 42 }}
148 | className="extra-classy"
149 | />
150 | );
151 |
152 | expect(wrapper.find('.rst__tree')).toHaveStyle('borderWidth', 42);
153 | expect(wrapper.find('.rst__tree')).toHaveClassName('extra-classy');
154 | });
155 |
156 | it('should change style of scroll container with `innerStyle` prop', () => {
157 | const wrapper = mount(
158 | {}}
161 | innerStyle={{ borderWidth: 42 }}
162 | />
163 | );
164 |
165 | expect(wrapper.find('.rst__virtualScrollOverride').first()).toHaveStyle(
166 | 'borderWidth',
167 | 42
168 | );
169 | });
170 |
171 | it('should change height according to rowHeight prop', () => {
172 | const wrapper = mount(
173 | {}}
176 | rowHeight={12}
177 | />
178 | );
179 |
180 | // Works with static value
181 | expect(wrapper.find(TreeNode).first()).toHaveStyle('height', 12);
182 |
183 | // Works with function callback
184 | wrapper.setProps({ rowHeight: ({ node }) => 42 + (node.extraHeight || 0) });
185 | expect(wrapper.find(TreeNode).first()).toHaveStyle('height', 42);
186 | expect(wrapper.find(TreeNode).last()).toHaveStyle('height', 44);
187 | });
188 |
189 | it('should toggle virtualization according to isVirtualized prop', () => {
190 | const virtualized = mount(
191 | {}}
194 | isVirtualized
195 | />
196 | );
197 |
198 | expect(virtualized.find(List).length).toEqual(1);
199 |
200 | const notVirtualized = mount(
201 | {}}
204 | isVirtualized={false}
205 | />
206 | );
207 |
208 | expect(notVirtualized.find(List).length).toEqual(0);
209 | });
210 |
211 | it('should change scaffold width according to scaffoldBlockPxWidth prop', () => {
212 | const wrapper = mount(
213 | {}}
216 | scaffoldBlockPxWidth={12}
217 | />
218 | );
219 |
220 | expect(wrapper.find('.rst__lineBlock')).toHaveStyle('width', 12);
221 | });
222 |
223 | it('should pass props to the node renderer from `generateNodeProps`', () => {
224 | const title = 42;
225 | const wrapper = mount(
226 | {}}
229 | generateNodeProps={({ node }) => ({ buttons: [node.title] })}
230 | />
231 | );
232 |
233 | expect(wrapper.find(DefaultNodeRenderer)).toHaveProp('buttons', [title]);
234 | });
235 |
236 | it('should call the callback in `onVisibilityToggle` when visibility toggled', () => {
237 | let out = null;
238 |
239 | const wrapper = mount(
240 | wrapper.setProps({ treeData })}
243 | onVisibilityToggle={({ expanded }) => {
244 | out = expanded ? 'expanded' : 'collapsed';
245 | }}
246 | />
247 | );
248 |
249 | wrapper
250 | .find('.rst__expandButton')
251 | .first()
252 | .simulate('click');
253 | expect(out).toEqual('expanded');
254 | wrapper
255 | .find('.rst__collapseButton')
256 | .first()
257 | .simulate('click');
258 | expect(out).toEqual('collapsed');
259 | });
260 |
261 | it('should render with a custom `nodeContentRenderer`', () => {
262 | class FakeNode extends Component {
263 | render() {
264 | return {this.props.node.title}
;
265 | }
266 | }
267 | FakeNode.propTypes = {
268 | node: PropTypes.shape({ title: PropTypes.string }).isRequired,
269 | };
270 |
271 | const wrapper = mount(
272 | {}}
275 | nodeContentRenderer={FakeNode}
276 | />
277 | );
278 |
279 | expect(wrapper.find(FakeNode).length).toEqual(1);
280 | });
281 |
282 | it('search should call searchFinishCallback', () => {
283 | const searchFinishCallback = jest.fn();
284 | mount(
285 | {}}
291 | />
292 | );
293 |
294 | expect(searchFinishCallback).toHaveBeenCalledWith([
295 | // Node should be found expanded
296 | { node: { title: 'b' }, path: [0, 1], treeIndex: 1 },
297 | ]);
298 | });
299 |
300 | it('search should expand all matches and seek out the focus offset', () => {
301 | const wrapper = mount(
302 | {}}
309 | />
310 | );
311 |
312 | const tree = wrapper.find('ReactSortableTree').instance();
313 | expect(tree.state.searchMatches).toEqual([
314 | { node: { title: 'b' }, path: [0, 1], treeIndex: 1 },
315 | { node: { title: 'be' }, path: [2, 3], treeIndex: 3 },
316 | ]);
317 | expect(tree.state.searchFocusTreeIndex).toEqual(null);
318 |
319 | wrapper.setProps({ searchFocusOffset: 0 });
320 | expect(tree.state.searchFocusTreeIndex).toEqual(1);
321 |
322 | wrapper.setProps({ searchFocusOffset: 1 });
323 | // As the empty `onChange` we use here doesn't actually change
324 | // the tree, the expansion of all nodes doesn't get preserved
325 | // after the first mount, and this change in searchFocusOffset
326 | // only triggers the opening of a single path.
327 | // Therefore it's 2 instead of 3.
328 | expect(tree.state.searchFocusTreeIndex).toEqual(2);
329 | });
330 |
331 | it('search onlyExpandSearchedNodes should collapse all nodes except matches', () => {
332 | const wrapper = mount(
333 | wrapper.setProps({ treeData })}
349 | onlyExpandSearchedNodes
350 | />
351 | );
352 | wrapper.setProps({ searchQuery: 'be' });
353 | expect(wrapper.prop('treeData')).toEqual([
354 | {
355 | title: 'a',
356 | children: [
357 | {
358 | title: 'b',
359 | children: [
360 | {
361 | title: 'c',
362 | expanded: false,
363 | },
364 | ],
365 | expanded: false,
366 | },
367 | ],
368 | expanded: false,
369 | },
370 | {
371 | title: 'b',
372 | children: [
373 | {
374 | title: 'd',
375 | children: [
376 | {
377 | title: 'be',
378 | expanded: false,
379 | },
380 | ],
381 | expanded: true,
382 | },
383 | ],
384 | expanded: true,
385 | },
386 | {
387 | title: 'c',
388 | children: [
389 | {
390 | title: 'f',
391 | children: [
392 | {
393 | title: 'dd',
394 | expanded: false,
395 | },
396 | ],
397 | expanded: false,
398 | },
399 | ],
400 | expanded: false,
401 | },
402 | ]);
403 | });
404 |
405 | it('loads using SortableTreeWithoutDndContext', () => {
406 | expect(
407 | mount(
408 |
409 | {}}
412 | />
413 |
414 | )
415 | ).toBeDefined();
416 | expect(
417 | mount(
418 |
419 | {}}
422 | />
423 |
424 | )
425 | ).toBeDefined();
426 | });
427 |
428 | it('loads using SortableTreeWithoutDndContext', () => {
429 | const onDragStateChanged = jest.fn();
430 | const treeData = [{ title: 'a' }, { title: 'b' }];
431 | let manager = null;
432 |
433 | const wrapper = mount(
434 |
435 |
436 | {({ dragDropManager }) => {
437 | manager = dragDropManager;
438 | }}
439 |
440 | {}}
444 | />
445 |
446 | );
447 |
448 | // Obtain a reference to the backend
449 | const backend = manager.getBackend();
450 |
451 | // Retrieve our DnD-wrapped node component type
452 | const wrappedNodeType = wrapper.find('ReactSortableTree').instance()
453 | .nodeContentRenderer;
454 |
455 | // And get the first such component
456 | const nodeInstance = wrapper
457 | .find(wrappedNodeType)
458 | .first()
459 | .instance();
460 |
461 | backend.simulateBeginDrag([nodeInstance.getHandlerId()]);
462 |
463 | expect(onDragStateChanged).toHaveBeenCalledWith({
464 | isDragging: true,
465 | draggedNode: treeData[0],
466 | });
467 |
468 | backend.simulateEndDrag([nodeInstance.getHandlerId()]);
469 |
470 | expect(onDragStateChanged).toHaveBeenCalledWith({
471 | isDragging: false,
472 | draggedNode: null,
473 | });
474 | expect(onDragStateChanged).toHaveBeenCalledTimes(2);
475 | });
476 | });
477 |
--------------------------------------------------------------------------------
/src/tests.js:
--------------------------------------------------------------------------------
1 | // Reference: https://github.com/webpack/karma-webpack#alternative-usage
2 | const tests = require.context('.', true, /\.test\.(js|jsx)$/);
3 | tests.keys().forEach(tests);
4 |
--------------------------------------------------------------------------------
/src/tree-node.css:
--------------------------------------------------------------------------------
1 | .rst__node {
2 | min-width: 100%;
3 | white-space: nowrap;
4 | position: relative;
5 | text-align: left;
6 | }
7 |
8 | .rst__node.rst__rtl {
9 | text-align: right;
10 | }
11 |
12 | .rst__nodeContent {
13 | position: absolute;
14 | top: 0;
15 | bottom: 0;
16 | }
17 |
18 | /* ==========================================================================
19 | Scaffold
20 |
21 | Line-overlaid blocks used for showing the tree structure
22 | ========================================================================== */
23 | .rst__lineBlock,
24 | .rst__absoluteLineBlock {
25 | height: 100%;
26 | position: relative;
27 | display: inline-block;
28 | }
29 |
30 | .rst__absoluteLineBlock {
31 | position: absolute;
32 | top: 0;
33 | }
34 |
35 | .rst__lineHalfHorizontalRight::before,
36 | .rst__lineFullVertical::after,
37 | .rst__lineHalfVerticalTop::after,
38 | .rst__lineHalfVerticalBottom::after {
39 | position: absolute;
40 | content: '';
41 | background-color: black;
42 | }
43 |
44 | /**
45 | * +-----+
46 | * | |
47 | * | +--+
48 | * | |
49 | * +-----+
50 | */
51 | .rst__lineHalfHorizontalRight::before {
52 | height: 1px;
53 | top: 50%;
54 | right: 0;
55 | width: 50%;
56 | }
57 |
58 | .rst__rtl.rst__lineHalfHorizontalRight::before {
59 | left: 0;
60 | right: initial;
61 | }
62 |
63 | /**
64 | * +--+--+
65 | * | | |
66 | * | | |
67 | * | | |
68 | * +--+--+
69 | */
70 | .rst__lineFullVertical::after,
71 | .rst__lineHalfVerticalTop::after,
72 | .rst__lineHalfVerticalBottom::after {
73 | width: 1px;
74 | left: 50%;
75 | top: 0;
76 | height: 100%;
77 | }
78 |
79 | /**
80 | * +--+--+
81 | * | | |
82 | * | | |
83 | * | | |
84 | * +--+--+
85 | */
86 | .rst__rtl.rst__lineFullVertical::after,
87 | .rst__rtl.rst__lineHalfVerticalTop::after,
88 | .rst__rtl.rst__lineHalfVerticalBottom::after {
89 | right: 50%;
90 | left: initial;
91 | }
92 |
93 | /**
94 | * +-----+
95 | * | | |
96 | * | + |
97 | * | |
98 | * +-----+
99 | */
100 | .rst__lineHalfVerticalTop::after {
101 | height: 50%;
102 | }
103 |
104 | /**
105 | * +-----+
106 | * | |
107 | * | + |
108 | * | | |
109 | * +-----+
110 | */
111 | .rst__lineHalfVerticalBottom::after {
112 | top: auto;
113 | bottom: 0;
114 | height: 50%;
115 | }
116 |
117 | /* Highlight line for pointing to dragged row destination
118 | ========================================================================== */
119 | /**
120 | * +--+--+
121 | * | | |
122 | * | | |
123 | * | | |
124 | * +--+--+
125 | */
126 | .rst__highlightLineVertical {
127 | z-index: 3;
128 | }
129 | .rst__highlightLineVertical::before {
130 | position: absolute;
131 | content: '';
132 | background-color: #36c2f6;
133 | width: 8px;
134 | margin-left: -4px;
135 | left: 50%;
136 | top: 0;
137 | height: 100%;
138 | }
139 |
140 | .rst__rtl.rst__highlightLineVertical::before {
141 | margin-left: initial;
142 | margin-right: -4px;
143 | left: initial;
144 | right: 50%;
145 | }
146 |
147 | @keyframes arrow-pulse {
148 | 0% {
149 | transform: translate(0, 0);
150 | opacity: 0;
151 | }
152 | 30% {
153 | transform: translate(0, 300%);
154 | opacity: 1;
155 | }
156 | 70% {
157 | transform: translate(0, 700%);
158 | opacity: 1;
159 | }
160 | 100% {
161 | transform: translate(0, 1000%);
162 | opacity: 0;
163 | }
164 | }
165 | .rst__highlightLineVertical::after {
166 | content: '';
167 | position: absolute;
168 | height: 0;
169 | margin-left: -4px;
170 | left: 50%;
171 | top: 0;
172 | border-left: 4px solid transparent;
173 | border-right: 4px solid transparent;
174 | border-top: 4px solid white;
175 | animation: arrow-pulse 1s infinite linear both;
176 | }
177 |
178 | .rst__rtl.rst__highlightLineVertical::after {
179 | margin-left: initial;
180 | margin-right: -4px;
181 | right: 50%;
182 | left: initial;
183 | }
184 |
185 | /**
186 | * +-----+
187 | * | |
188 | * | +--+
189 | * | | |
190 | * +--+--+
191 | */
192 | .rst__highlightTopLeftCorner::before {
193 | z-index: 3;
194 | content: '';
195 | position: absolute;
196 | border-top: solid 8px #36c2f6;
197 | border-left: solid 8px #36c2f6;
198 | box-sizing: border-box;
199 | height: calc(50% + 4px);
200 | top: 50%;
201 | margin-top: -4px;
202 | right: 0;
203 | width: calc(50% + 4px);
204 | }
205 |
206 | .rst__rtl.rst__highlightTopLeftCorner::before {
207 | border-right: solid 8px #36c2f6;
208 | border-left: none;
209 | left: 0;
210 | right: initial;
211 | }
212 |
213 | /**
214 | * +--+--+
215 | * | | |
216 | * | | |
217 | * | +->|
218 | * +-----+
219 | */
220 | .rst__highlightBottomLeftCorner {
221 | z-index: 3;
222 | }
223 | .rst__highlightBottomLeftCorner::before {
224 | content: '';
225 | position: absolute;
226 | border-bottom: solid 8px #36c2f6;
227 | border-left: solid 8px #36c2f6;
228 | box-sizing: border-box;
229 | height: calc(100% + 4px);
230 | top: 0;
231 | right: 12px;
232 | width: calc(50% - 8px);
233 | }
234 |
235 | .rst__rtl.rst__highlightBottomLeftCorner::before {
236 | border-right: solid 8px #36c2f6;
237 | border-left: none;
238 | left: 12px;
239 | right: initial;
240 | }
241 |
242 | .rst__highlightBottomLeftCorner::after {
243 | content: '';
244 | position: absolute;
245 | height: 0;
246 | right: 0;
247 | top: 100%;
248 | margin-top: -12px;
249 | border-top: 12px solid transparent;
250 | border-bottom: 12px solid transparent;
251 | border-left: 12px solid #36c2f6;
252 | }
253 |
254 | .rst__rtl.rst__highlightBottomLeftCorner::after {
255 | left: 0;
256 | right: initial;
257 | border-right: 12px solid #36c2f6;
258 | border-left: none;
259 | }
260 |
--------------------------------------------------------------------------------
/src/tree-node.js:
--------------------------------------------------------------------------------
1 | import React, { Component, Children, cloneElement } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from './utils/classnames';
4 | import './tree-node.css';
5 |
6 | class TreeNode extends Component {
7 | render() {
8 | const {
9 | children,
10 | listIndex,
11 | swapFrom,
12 | swapLength,
13 | swapDepth,
14 | scaffoldBlockPxWidth,
15 | lowerSiblingCounts,
16 | connectDropTarget,
17 | isOver,
18 | draggedNode,
19 | canDrop,
20 | treeIndex,
21 | treeId, // Delete from otherProps
22 | getPrevRow, // Delete from otherProps
23 | node, // Delete from otherProps
24 | path, // Delete from otherProps
25 | rowDirection,
26 | ...otherProps
27 | } = this.props;
28 |
29 | const rowDirectionClass = rowDirection === 'rtl' ? 'rst__rtl' : null;
30 |
31 | // Construct the scaffold representing the structure of the tree
32 | const scaffoldBlockCount = lowerSiblingCounts.length;
33 | const scaffold = [];
34 | lowerSiblingCounts.forEach((lowerSiblingCount, i) => {
35 | let lineClass = '';
36 | if (lowerSiblingCount > 0) {
37 | // At this level in the tree, the nodes had sibling nodes further down
38 |
39 | if (listIndex === 0) {
40 | // Top-left corner of the tree
41 | // +-----+
42 | // | |
43 | // | +--+
44 | // | | |
45 | // +--+--+
46 | lineClass =
47 | 'rst__lineHalfHorizontalRight rst__lineHalfVerticalBottom';
48 | } else if (i === scaffoldBlockCount - 1) {
49 | // Last scaffold block in the row, right before the row content
50 | // +--+--+
51 | // | | |
52 | // | +--+
53 | // | | |
54 | // +--+--+
55 | lineClass = 'rst__lineHalfHorizontalRight rst__lineFullVertical';
56 | } else {
57 | // Simply connecting the line extending down to the next sibling on this level
58 | // +--+--+
59 | // | | |
60 | // | | |
61 | // | | |
62 | // +--+--+
63 | lineClass = 'rst__lineFullVertical';
64 | }
65 | } else if (listIndex === 0) {
66 | // Top-left corner of the tree, but has no siblings
67 | // +-----+
68 | // | |
69 | // | +--+
70 | // | |
71 | // +-----+
72 | lineClass = 'rst__lineHalfHorizontalRight';
73 | } else if (i === scaffoldBlockCount - 1) {
74 | // The last or only node in this level of the tree
75 | // +--+--+
76 | // | | |
77 | // | +--+
78 | // | |
79 | // +-----+
80 | lineClass = 'rst__lineHalfVerticalTop rst__lineHalfHorizontalRight';
81 | }
82 |
83 | scaffold.push(
84 |
89 | );
90 |
91 | if (treeIndex !== listIndex && i === swapDepth) {
92 | // This row has been shifted, and is at the depth of
93 | // the line pointing to the new destination
94 | let highlightLineClass = '';
95 |
96 | if (listIndex === swapFrom + swapLength - 1) {
97 | // This block is on the bottom (target) line
98 | // This block points at the target block (where the row will go when released)
99 | highlightLineClass = 'rst__highlightBottomLeftCorner';
100 | } else if (treeIndex === swapFrom) {
101 | // This block is on the top (source) line
102 | highlightLineClass = 'rst__highlightTopLeftCorner';
103 | } else {
104 | // This block is between the bottom and top
105 | highlightLineClass = 'rst__highlightLineVertical';
106 | }
107 |
108 | let style;
109 | if (rowDirection === 'rtl') {
110 | style = {
111 | width: scaffoldBlockPxWidth,
112 | right: scaffoldBlockPxWidth * i,
113 | };
114 | } else {
115 | // Default ltr
116 | style = {
117 | width: scaffoldBlockPxWidth,
118 | left: scaffoldBlockPxWidth * i,
119 | };
120 | }
121 |
122 | scaffold.push(
123 |
133 | );
134 | }
135 | });
136 |
137 | let style;
138 | if (rowDirection === 'rtl') {
139 | style = { right: scaffoldBlockPxWidth * scaffoldBlockCount };
140 | } else {
141 | // Default ltr
142 | style = { left: scaffoldBlockPxWidth * scaffoldBlockCount };
143 | }
144 |
145 | return connectDropTarget(
146 |
150 | {scaffold}
151 |
152 |
153 | {Children.map(children, child =>
154 | cloneElement(child, {
155 | isOver,
156 | canDrop,
157 | draggedNode,
158 | })
159 | )}
160 |
161 |
15 | {Children.map(children, child =>
16 | cloneElement(child, {
17 | ...otherProps,
18 | })
19 | )}
20 |
21 | );
22 | }
23 | }
24 |
25 | TreePlaceholder.defaultProps = {
26 | canDrop: false,
27 | draggedNode: null,
28 | };
29 |
30 | TreePlaceholder.propTypes = {
31 | children: PropTypes.node.isRequired,
32 |
33 | // Drop target
34 | connectDropTarget: PropTypes.func.isRequired,
35 | isOver: PropTypes.bool.isRequired,
36 | canDrop: PropTypes.bool,
37 | draggedNode: PropTypes.shape({}),
38 | treeId: PropTypes.string.isRequired,
39 | drop: PropTypes.func.isRequired,
40 | };
41 |
42 | export default TreePlaceholder;
43 |
--------------------------------------------------------------------------------
/src/utils/classnames.js:
--------------------------------------------------------------------------------
1 | // very simple className utility for creating a classname string...
2 | // Falsy arguments are ignored:
3 | //
4 | // const active = true
5 | // const className = classnames(
6 | // "class1",
7 | // !active && "class2",
8 | // active && "class3"
9 | // ); // returns -> class1 class3";
10 | //
11 | export default function classnames(...classes) {
12 | // Use Boolean constructor as a filter callback
13 | // Allows for loose type truthy/falsey checks
14 | // Boolean("") === false;
15 | // Boolean(false) === false;
16 | // Boolean(undefined) === false;
17 | // Boolean(null) === false;
18 | // Boolean(0) === false;
19 | // Boolean("classname") === true;
20 | return classes.filter(Boolean).join(' ');
21 | }
22 |
--------------------------------------------------------------------------------
/src/utils/default-handlers.js:
--------------------------------------------------------------------------------
1 | export function defaultGetNodeKey({ treeIndex }) {
2 | return treeIndex;
3 | }
4 |
5 | // Cheap hack to get the text of a react object
6 | function getReactElementText(parent) {
7 | if (typeof parent === 'string') {
8 | return parent;
9 | }
10 |
11 | if (
12 | parent === null ||
13 | typeof parent !== 'object' ||
14 | !parent.props ||
15 | !parent.props.children ||
16 | (typeof parent.props.children !== 'string' &&
17 | typeof parent.props.children !== 'object')
18 | ) {
19 | return '';
20 | }
21 |
22 | if (typeof parent.props.children === 'string') {
23 | return parent.props.children;
24 | }
25 |
26 | return parent.props.children
27 | .map(child => getReactElementText(child))
28 | .join('');
29 | }
30 |
31 | // Search for a query string inside a node property
32 | function stringSearch(key, searchQuery, node, path, treeIndex) {
33 | if (typeof node[key] === 'function') {
34 | // Search within text after calling its function to generate the text
35 | return (
36 | String(node[key]({ node, path, treeIndex })).indexOf(searchQuery) > -1
37 | );
38 | }
39 | if (typeof node[key] === 'object') {
40 | // Search within text inside react elements
41 | return getReactElementText(node[key]).indexOf(searchQuery) > -1;
42 | }
43 |
44 | // Search within string
45 | return node[key] && String(node[key]).indexOf(searchQuery) > -1;
46 | }
47 |
48 | export function defaultSearchMethod({ node, path, treeIndex, searchQuery }) {
49 | return (
50 | stringSearch('title', searchQuery, node, path, treeIndex) ||
51 | stringSearch('subtitle', searchQuery, node, path, treeIndex)
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/utils/dnd-manager.js:
--------------------------------------------------------------------------------
1 | import { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';
2 | import { findDOMNode } from 'react-dom';
3 | import { getDepth } from './tree-data-utils';
4 | import { memoizedInsertNode } from './memoized-tree-data-utils';
5 |
6 | export default class DndManager {
7 | constructor(treeRef) {
8 | this.treeRef = treeRef;
9 | }
10 |
11 | get startDrag() {
12 | return this.treeRef.startDrag;
13 | }
14 |
15 | get dragHover() {
16 | return this.treeRef.dragHover;
17 | }
18 |
19 | get endDrag() {
20 | return this.treeRef.endDrag;
21 | }
22 |
23 | get drop() {
24 | return this.treeRef.drop;
25 | }
26 |
27 | get treeId() {
28 | return this.treeRef.treeId;
29 | }
30 |
31 | get dndType() {
32 | return this.treeRef.dndType;
33 | }
34 |
35 | get treeData() {
36 | return this.treeRef.state.draggingTreeData || this.treeRef.props.treeData;
37 | }
38 |
39 | get getNodeKey() {
40 | return this.treeRef.props.getNodeKey;
41 | }
42 |
43 | get customCanDrop() {
44 | return this.treeRef.props.canDrop;
45 | }
46 |
47 | get maxDepth() {
48 | return this.treeRef.props.maxDepth;
49 | }
50 |
51 | getTargetDepth(dropTargetProps, monitor, component) {
52 | let dropTargetDepth = 0;
53 |
54 | const rowAbove = dropTargetProps.getPrevRow();
55 | if (rowAbove) {
56 | let { path } = rowAbove;
57 | const aboveNodeCannotHaveChildren = !this.treeRef.canNodeHaveChildren(
58 | rowAbove.node
59 | );
60 | if (aboveNodeCannotHaveChildren) {
61 | path = path.slice(0, path.length - 1);
62 | }
63 |
64 | // Limit the length of the path to the deepest possible
65 | dropTargetDepth = Math.min(path.length, dropTargetProps.path.length);
66 | }
67 |
68 | let blocksOffset;
69 | let dragSourceInitialDepth = (monitor.getItem().path || []).length;
70 |
71 | // When adding node from external source
72 | if (monitor.getItem().treeId !== this.treeId) {
73 | // Ignore the tree depth of the source, if it had any to begin with
74 | dragSourceInitialDepth = 0;
75 |
76 | if (component) {
77 | const relativePosition = findDOMNode(component).getBoundingClientRect(); // eslint-disable-line react/no-find-dom-node
78 | const leftShift =
79 | monitor.getSourceClientOffset().x - relativePosition.left;
80 | blocksOffset = Math.round(
81 | leftShift / dropTargetProps.scaffoldBlockPxWidth
82 | );
83 | } else {
84 | blocksOffset = dropTargetProps.path.length;
85 | }
86 | } else {
87 | // handle row direction support
88 | const direction = dropTargetProps.rowDirection === 'rtl' ? -1 : 1;
89 |
90 | blocksOffset = Math.round(
91 | (direction * monitor.getDifferenceFromInitialOffset().x) /
92 | dropTargetProps.scaffoldBlockPxWidth
93 | );
94 | }
95 |
96 | let targetDepth = Math.min(
97 | dropTargetDepth,
98 | Math.max(0, dragSourceInitialDepth + blocksOffset - 1)
99 | );
100 |
101 | // If a maxDepth is defined, constrain the target depth
102 | if (typeof this.maxDepth !== 'undefined' && this.maxDepth !== null) {
103 | const draggedNode = monitor.getItem().node;
104 | const draggedChildDepth = getDepth(draggedNode);
105 |
106 | targetDepth = Math.max(
107 | 0,
108 | Math.min(targetDepth, this.maxDepth - draggedChildDepth - 1)
109 | );
110 | }
111 |
112 | return targetDepth;
113 | }
114 |
115 | canDrop(dropTargetProps, monitor) {
116 | if (!monitor.isOver()) {
117 | return false;
118 | }
119 |
120 | const rowAbove = dropTargetProps.getPrevRow();
121 | const abovePath = rowAbove ? rowAbove.path : [];
122 | const aboveNode = rowAbove ? rowAbove.node : {};
123 | const targetDepth = this.getTargetDepth(dropTargetProps, monitor, null);
124 |
125 | // Cannot drop if we're adding to the children of the row above and
126 | // the row above is a function
127 | if (
128 | targetDepth >= abovePath.length &&
129 | typeof aboveNode.children === 'function'
130 | ) {
131 | return false;
132 | }
133 |
134 | if (typeof this.customCanDrop === 'function') {
135 | const { node } = monitor.getItem();
136 | const addedResult = memoizedInsertNode({
137 | treeData: this.treeData,
138 | newNode: node,
139 | depth: targetDepth,
140 | getNodeKey: this.getNodeKey,
141 | minimumTreeIndex: dropTargetProps.listIndex,
142 | expandParent: true,
143 | });
144 |
145 | return this.customCanDrop({
146 | node,
147 | prevPath: monitor.getItem().path,
148 | prevParent: monitor.getItem().parentNode,
149 | prevTreeIndex: monitor.getItem().treeIndex, // Equals -1 when dragged from external tree
150 | nextPath: addedResult.path,
151 | nextParent: addedResult.parentNode,
152 | nextTreeIndex: addedResult.treeIndex,
153 | });
154 | }
155 |
156 | return true;
157 | }
158 |
159 | wrapSource(el) {
160 | const nodeDragSource = {
161 | beginDrag: props => {
162 | this.startDrag(props);
163 |
164 | return {
165 | node: props.node,
166 | parentNode: props.parentNode,
167 | path: props.path,
168 | treeIndex: props.treeIndex,
169 | treeId: props.treeId,
170 | };
171 | },
172 |
173 | endDrag: (props, monitor) => {
174 | this.endDrag(monitor.getDropResult());
175 | },
176 |
177 | isDragging: (props, monitor) => {
178 | const dropTargetNode = monitor.getItem().node;
179 | const draggedNode = props.node;
180 |
181 | return draggedNode === dropTargetNode;
182 | },
183 | };
184 |
185 | function nodeDragSourcePropInjection(connect, monitor) {
186 | return {
187 | connectDragSource: connect.dragSource(),
188 | connectDragPreview: connect.dragPreview(),
189 | isDragging: monitor.isDragging(),
190 | didDrop: monitor.didDrop(),
191 | };
192 | }
193 |
194 | return dragSource(
195 | this.dndType,
196 | nodeDragSource,
197 | nodeDragSourcePropInjection
198 | )(el);
199 | }
200 |
201 | wrapTarget(el) {
202 | const nodeDropTarget = {
203 | drop: (dropTargetProps, monitor, component) => {
204 | const result = {
205 | node: monitor.getItem().node,
206 | path: monitor.getItem().path,
207 | treeIndex: monitor.getItem().treeIndex,
208 | treeId: this.treeId,
209 | minimumTreeIndex: dropTargetProps.treeIndex,
210 | depth: this.getTargetDepth(dropTargetProps, monitor, component),
211 | };
212 |
213 | this.drop(result);
214 |
215 | return result;
216 | },
217 |
218 | hover: (dropTargetProps, monitor, component) => {
219 | const targetDepth = this.getTargetDepth(
220 | dropTargetProps,
221 | monitor,
222 | component
223 | );
224 | const draggedNode = monitor.getItem().node;
225 | const needsRedraw =
226 | // Redraw if hovered above different nodes
227 | dropTargetProps.node !== draggedNode ||
228 | // Or hovered above the same node but at a different depth
229 | targetDepth !== dropTargetProps.path.length - 1;
230 |
231 | if (!needsRedraw) {
232 | return;
233 | }
234 |
235 | // throttle `dragHover` work to available animation frames
236 | cancelAnimationFrame(this.rafId);
237 | this.rafId = requestAnimationFrame(() => {
238 | this.dragHover({
239 | node: draggedNode,
240 | path: monitor.getItem().path,
241 | minimumTreeIndex: dropTargetProps.listIndex,
242 | depth: targetDepth,
243 | });
244 | });
245 | },
246 |
247 | canDrop: this.canDrop.bind(this),
248 | };
249 |
250 | function nodeDropTargetPropInjection(connect, monitor) {
251 | const dragged = monitor.getItem();
252 | return {
253 | connectDropTarget: connect.dropTarget(),
254 | isOver: monitor.isOver(),
255 | canDrop: monitor.canDrop(),
256 | draggedNode: dragged ? dragged.node : null,
257 | };
258 | }
259 |
260 | return dropTarget(
261 | this.dndType,
262 | nodeDropTarget,
263 | nodeDropTargetPropInjection
264 | )(el);
265 | }
266 |
267 | wrapPlaceholder(el) {
268 | const placeholderDropTarget = {
269 | drop: (dropTargetProps, monitor) => {
270 | const { node, path, treeIndex } = monitor.getItem();
271 | const result = {
272 | node,
273 | path,
274 | treeIndex,
275 | treeId: this.treeId,
276 | minimumTreeIndex: 0,
277 | depth: 0,
278 | };
279 |
280 | this.drop(result);
281 |
282 | return result;
283 | },
284 | };
285 |
286 | function placeholderPropInjection(connect, monitor) {
287 | const dragged = monitor.getItem();
288 | return {
289 | connectDropTarget: connect.dropTarget(),
290 | isOver: monitor.isOver(),
291 | canDrop: monitor.canDrop(),
292 | draggedNode: dragged ? dragged.node : null,
293 | };
294 | }
295 |
296 | return dropTarget(
297 | this.dndType,
298 | placeholderDropTarget,
299 | placeholderPropInjection
300 | )(el);
301 | }
302 | }
303 |
--------------------------------------------------------------------------------
/src/utils/generic-utils.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/prefer-default-export */
2 |
3 | export function slideRows(rows, fromIndex, toIndex, count = 1) {
4 | const rowsWithoutMoved = [
5 | ...rows.slice(0, fromIndex),
6 | ...rows.slice(fromIndex + count),
7 | ];
8 |
9 | return [
10 | ...rowsWithoutMoved.slice(0, toIndex),
11 | ...rows.slice(fromIndex, fromIndex + count),
12 | ...rowsWithoutMoved.slice(toIndex),
13 | ];
14 | }
15 |
--------------------------------------------------------------------------------
/src/utils/generic-utils.test.js:
--------------------------------------------------------------------------------
1 | import { slideRows } from './generic-utils';
2 |
3 | describe('slideRows', () => {
4 | it('should handle empty slide', () => {
5 | expect(slideRows([0, 1, 2], 1, 2, 0)).toEqual([0, 1, 2]);
6 | expect(slideRows([0, 1, 2], 1, 0, 0)).toEqual([0, 1, 2]);
7 | expect(slideRows([0, 1, 2], 1, 1, 0)).toEqual([0, 1, 2]);
8 | });
9 |
10 | it('should handle single slides', () => {
11 | expect(slideRows([0, 1, 2], 1, 1, 1)).toEqual([0, 1, 2]);
12 | expect(slideRows([0, 1, 2], 1, 2, 1)).toEqual([0, 2, 1]);
13 | expect(slideRows([0, 1, 2], 1, 0, 1)).toEqual([1, 0, 2]);
14 | expect(slideRows([0, 1, 2], 0, 2, 1)).toEqual([1, 2, 0]);
15 | });
16 |
17 | it('should handle multi slides', () => {
18 | expect(slideRows([0, 1, 2], 1, 0, 2)).toEqual([1, 2, 0]);
19 | expect(slideRows([0, 1, 2, 3], 0, 2, 2)).toEqual([2, 3, 0, 1]);
20 | expect(slideRows([0, 1, 2, 3], 3, 0, 2)).toEqual([3, 0, 1, 2]);
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/src/utils/memoized-tree-data-utils.js:
--------------------------------------------------------------------------------
1 | import {
2 | insertNode,
3 | getDescendantCount,
4 | getFlatDataFromTree,
5 | } from './tree-data-utils';
6 |
7 | const memoize = f => {
8 | let savedArgsArray = [];
9 | let savedKeysArray = [];
10 | let savedResult = null;
11 |
12 | return args => {
13 | const keysArray = Object.keys(args).sort();
14 | const argsArray = keysArray.map(key => args[key]);
15 |
16 | // If the arguments for the last insert operation are different than this time,
17 | // recalculate the result
18 | if (
19 | argsArray.length !== savedArgsArray.length ||
20 | argsArray.some((arg, index) => arg !== savedArgsArray[index]) ||
21 | keysArray.some((key, index) => key !== savedKeysArray[index])
22 | ) {
23 | savedArgsArray = argsArray;
24 | savedKeysArray = keysArray;
25 | savedResult = f(args);
26 | }
27 |
28 | return savedResult;
29 | };
30 | };
31 |
32 | export const memoizedInsertNode = memoize(insertNode);
33 | export const memoizedGetFlatDataFromTree = memoize(getFlatDataFromTree);
34 | export const memoizedGetDescendantCount = memoize(getDescendantCount);
35 |
--------------------------------------------------------------------------------
/src/utils/memoized-tree-data-utils.test.js:
--------------------------------------------------------------------------------
1 | import { insertNode } from './tree-data-utils';
2 |
3 | import { memoizedInsertNode } from './memoized-tree-data-utils';
4 |
5 | describe('insertNode', () => {
6 | it('should handle empty data', () => {
7 | const params = {
8 | treeData: [],
9 | depth: 0,
10 | minimumTreeIndex: 0,
11 | newNode: {},
12 | getNodeKey: ({ treeIndex }) => treeIndex,
13 | };
14 |
15 | let firstCall = insertNode(params);
16 | let secondCall = insertNode(params);
17 | expect(firstCall === secondCall).toEqual(false);
18 |
19 | firstCall = memoizedInsertNode(params);
20 | secondCall = memoizedInsertNode(params);
21 | expect(firstCall === secondCall).toEqual(true);
22 |
23 | expect(
24 | memoizedInsertNode(params) ===
25 | memoizedInsertNode({ ...params, treeData: [{}] })
26 | ).toEqual(false);
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/stories/add-remove.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SortableTree, { addNodeUnderParent, removeNodeAtPath } from '../src';
3 | // In your own app, you would need to use import styles once in the app
4 | // import 'react-sortable-tree/styles.css';
5 |
6 | const firstNames = [
7 | 'Abraham',
8 | 'Adam',
9 | 'Agnar',
10 | 'Albert',
11 | 'Albin',
12 | 'Albrecht',
13 | 'Alexander',
14 | 'Alfred',
15 | 'Alvar',
16 | 'Ander',
17 | 'Andrea',
18 | 'Arthur',
19 | 'Axel',
20 | 'Bengt',
21 | 'Bernhard',
22 | 'Carl',
23 | 'Daniel',
24 | 'Einar',
25 | 'Elmer',
26 | 'Eric',
27 | 'Erik',
28 | 'Gerhard',
29 | 'Gunnar',
30 | 'Gustaf',
31 | 'Harald',
32 | 'Herbert',
33 | 'Herman',
34 | 'Johan',
35 | 'John',
36 | 'Karl',
37 | 'Leif',
38 | 'Leonard',
39 | 'Martin',
40 | 'Matt',
41 | 'Mikael',
42 | 'Nikla',
43 | 'Norman',
44 | 'Oliver',
45 | 'Olof',
46 | 'Olvir',
47 | 'Otto',
48 | 'Patrik',
49 | 'Peter',
50 | 'Petter',
51 | 'Robert',
52 | 'Rupert',
53 | 'Sigurd',
54 | 'Simon',
55 | ];
56 |
57 | export default class App extends Component {
58 | constructor(props) {
59 | super(props);
60 |
61 | this.state = {
62 | treeData: [{ title: 'Peter Olofsson' }, { title: 'Karl Johansson' }],
63 | addAsFirstChild: false,
64 | };
65 | }
66 |
67 | render() {
68 | const getNodeKey = ({ treeIndex }) => treeIndex;
69 | const getRandomName = () =>
70 | firstNames[Math.floor(Math.random() * firstNames.length)];
71 | return (
72 |
73 |
74 | this.setState({ treeData })}
77 | generateNodeProps={({ node, path }) => ({
78 | buttons: [
79 |
81 | this.setState(state => ({
82 | treeData: addNodeUnderParent({
83 | treeData: state.treeData,
84 | parentKey: path[path.length - 1],
85 | expandParent: true,
86 | getNodeKey,
87 | newNode: {
88 | title: `${getRandomName()} ${
89 | node.title.split(' ')[0]
90 | }sson`,
91 | },
92 | addAsFirstChild: state.addAsFirstChild,
93 | }).treeData,
94 | }))
95 | }
96 | >
97 | Add Child
98 | ,
99 |
101 | this.setState(state => ({
102 | treeData: removeNodeAtPath({
103 | treeData: state.treeData,
104 | path,
105 | getNodeKey,
106 | }),
107 | }))
108 | }
109 | >
110 | Remove
111 | ,
112 | ],
113 | })}
114 | />
115 |
116 |
117 |
119 | this.setState(state => ({
120 | treeData: state.treeData.concat({
121 | title: `${getRandomName()} ${getRandomName()}sson`,
122 | }),
123 | }))
124 | }
125 | >
126 | Add more
127 |
128 |
129 |
130 | Add new nodes at start
131 |
142 |
22 |
23 | this.setState({ treeData })}
26 | />
27 |
28 |
29 | );
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/stories/barebones.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SortableTree from '../src';
3 | // In your own app, you would need to use import styles once in the app
4 | // import 'react-sortable-tree/styles.css';
5 |
6 | export default class App extends Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.state = {
11 | treeData: [
12 | { title: 'Chicken', expanded: true, children: [{ title: 'Egg' }] },
13 | ],
14 | };
15 | }
16 |
17 | render() {
18 | return (
19 |
20 | this.setState({ treeData })}
23 | />
24 |
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/stories/callbacks.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SortableTree from '../src';
3 | // In your own app, you would need to use import styles once in the app
4 | // import 'react-sortable-tree/styles.css';
5 |
6 | export default class App extends Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.state = {
11 | treeData: [
12 | { title: 'A', expanded: true, children: [{ title: 'B' }] },
13 | { title: 'C' },
14 | ],
15 | lastMovePrevPath: null,
16 | lastMoveNextPath: null,
17 | lastMoveNode: null,
18 | };
19 | }
20 |
21 | render() {
22 | const { lastMovePrevPath, lastMoveNextPath, lastMoveNode } = this.state;
23 |
24 | const recordCall = (name, args) => {
25 | // eslint-disable-next-line no-console
26 | console.log(`${name} called with arguments:`, args);
27 | };
28 |
29 | return (
30 |
31 | Open your console to see callback parameter info
32 |
33 | this.setState({ treeData })}
36 | // Need to set getNodeKey to get meaningful ids in paths
37 | getNodeKey={({ node }) => `node${node.title}`}
38 | onVisibilityToggle={args => recordCall('onVisibilityToggle', args)}
39 | onMoveNode={args => {
40 | recordCall('onMoveNode', args);
41 | const { prevPath, nextPath, node } = args;
42 | this.setState({
43 | lastMovePrevPath: prevPath,
44 | lastMoveNextPath: nextPath,
45 | lastMoveNode: node,
46 | });
47 | }}
48 | onDragStateChanged={args => recordCall('onDragStateChanged', args)}
49 | />
50 |
51 | {lastMoveNode && (
52 |
53 | Node "{lastMoveNode.title}" moved from path [
54 | {lastMovePrevPath.join(',')}] to path [{lastMoveNextPath.join(',')}
55 | ].
56 |
57 | )}
58 |
62 | node.id}
67 | onChange={treeData => this.setState({ treeData })}
68 | />
69 |
70 | );
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/stories/childless-nodes.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SortableTree from '../src';
3 | // In your own app, you would need to use import styles once in the app
4 | // import 'react-sortable-tree/styles.css';
5 |
6 | export default class App extends Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.state = {
11 | treeData: [
12 | {
13 | title: 'Managers',
14 | expanded: true,
15 | children: [
16 | {
17 | title: 'Rob',
18 | children: [],
19 | isPerson: true,
20 | },
21 | {
22 | title: 'Joe',
23 | children: [],
24 | isPerson: true,
25 | },
26 | ],
27 | },
28 | {
29 | title: 'Clerks',
30 | expanded: true,
31 | children: [
32 | {
33 | title: 'Bertha',
34 | children: [],
35 | isPerson: true,
36 | },
37 | {
38 | title: 'Billy',
39 | children: [],
40 | isPerson: true,
41 | },
42 | ],
43 | },
44 | ],
45 | };
46 | }
47 |
48 | render() {
49 | return (
50 |
51 |
52 | !node.isPerson}
55 | onChange={treeData => this.setState({ treeData })}
56 | />
57 |
58 |
41 | {children}
42 |
43 | );
44 | }
45 | }
46 | trashAreaBaseComponent.propTypes = {
47 | connectDropTarget: PropTypes.func.isRequired,
48 | children: PropTypes.node.isRequired,
49 | isOver: PropTypes.bool.isRequired,
50 | };
51 | const TrashAreaComponent = DropTarget(
52 | trashAreaType,
53 | trashAreaSpec,
54 | trashAreaCollect
55 | )(trashAreaBaseComponent);
56 |
57 | class App extends Component {
58 | constructor(props) {
59 | super(props);
60 |
61 | this.state = {
62 | treeData: [
63 | { title: '1' },
64 | { title: '2' },
65 | { title: '3' },
66 | { title: '4', expanded: true, children: [{ title: '5' }] },
67 | ],
68 | };
69 | }
70 |
71 | render() {
72 | return (
73 |
74 |
75 |
76 |
77 | this.setState({ treeData })}
80 | dndType={trashAreaType}
81 | />
82 |
83 |
84 |
86 | );
87 | }
88 | }
89 |
90 | export default App;
91 |
--------------------------------------------------------------------------------
/stories/external-node.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-multi-comp */
2 | import PropTypes from 'prop-types';
3 | import React, { Component } from 'react';
4 | import { DndProvider, DragSource } from 'react-dnd';
5 | import { HTML5Backend } from 'react-dnd-html5-backend';
6 | import { SortableTreeWithoutDndContext as SortableTree } from '../src';
7 | // In your own app, you would need to use import styles once in the app
8 | // import 'react-sortable-tree/styles.css';
9 |
10 | // -------------------------
11 | // Create an drag source component that can be dragged into the tree
12 | // https://react-dnd.github.io/react-dnd/docs-drag-source.html
13 | // -------------------------
14 | // This type must be assigned to the tree via the `dndType` prop as well
15 | const externalNodeType = 'yourNodeType';
16 | const externalNodeSpec = {
17 | // This needs to return an object with a property `node` in it.
18 | // Object rest spread is recommended to avoid side effects of
19 | // referencing the same object in different trees.
20 | beginDrag: componentProps => ({ node: { ...componentProps.node } }),
21 | };
22 | const externalNodeCollect = (connect /* , monitor */) => ({
23 | connectDragSource: connect.dragSource(),
24 | // Add props via react-dnd APIs to enable more visual
25 | // customization of your component
26 | // isDragging: monitor.isDragging(),
27 | // didDrop: monitor.didDrop(),
28 | });
29 | class externalNodeBaseComponent extends Component {
30 | render() {
31 | const { connectDragSource, node } = this.props;
32 |
33 | return connectDragSource(
34 |
42 | {node.title}
43 |
,
44 | { dropEffect: 'copy' }
45 | );
46 | }
47 | }
48 | externalNodeBaseComponent.propTypes = {
49 | node: PropTypes.shape({ title: PropTypes.string }).isRequired,
50 | connectDragSource: PropTypes.func.isRequired,
51 | };
52 | const YourExternalNodeComponent = DragSource(
53 | externalNodeType,
54 | externalNodeSpec,
55 | externalNodeCollect
56 | )(externalNodeBaseComponent);
57 |
58 | class App extends Component {
59 | constructor(props) {
60 | super(props);
61 |
62 | this.state = {
63 | treeData: [{ title: 'Mama Rabbit' }, { title: 'Papa Rabbit' }],
64 | };
65 | }
66 |
67 | render() {
68 | return (
69 |
70 |
71 |
72 | this.setState({ treeData })}
75 | dndType={externalNodeType}
76 | />
77 |
78 |
← drag
79 | this
80 |
82 | );
83 | }
84 | }
85 |
86 | export default App;
87 |
--------------------------------------------------------------------------------
/stories/generate-node-props.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SortableTree, { changeNodeAtPath } from '../src';
3 | // In your own app, you would need to use import styles once in the app
4 | // import 'react-sortable-tree/styles.css';
5 |
6 | export default class App extends Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.state = {
11 | treeData: [
12 | { id: 1, position: 'Goalkeeper' },
13 | { id: 2, position: 'Wing-back' },
14 | {
15 | id: 3,
16 | position: 'Striker',
17 | children: [{ id: 4, position: 'Full-back' }],
18 | },
19 | ],
20 | };
21 | }
22 |
23 | render() {
24 | const TEAM_COLORS = ['Red', 'Black', 'Green', 'Blue'];
25 | const getNodeKey = ({ node: { id } }) => id;
26 | return (
27 |
28 |
29 | this.setState({ treeData })}
32 | getNodeKey={getNodeKey}
33 | generateNodeProps={({ node, path }) => {
34 | const rootLevelIndex =
35 | this.state.treeData.reduce((acc, n, index) => {
36 | if (acc !== null) {
37 | return acc;
38 | }
39 | if (path[0] === n.id) {
40 | return index;
41 | }
42 | return null;
43 | }, null) || 0;
44 | const playerColor = TEAM_COLORS[rootLevelIndex];
45 |
46 | return {
47 | style: {
48 | boxShadow: `0 0 0 4px ${playerColor.toLowerCase()}`,
49 | textShadow:
50 | path.length === 1
51 | ? `1px 1px 1px ${playerColor.toLowerCase()}`
52 | : 'none',
53 | },
54 | title: `${playerColor} ${
55 | path.length === 1 ? 'Captain' : node.position
56 | }`,
57 | onClick: () => {
58 | this.setState(state => ({
59 | treeData: changeNodeAtPath({
60 | treeData: state.treeData,
61 | path,
62 | getNodeKey,
63 | newNode: { ...node, expanded: !node.expanded },
64 | }),
65 | }));
66 | },
67 | };
68 | }}
69 | />
70 |
71 |
26 |
27 | this.setState({ treeData })}
30 | generateNodeProps={({ node, path }) => ({
31 | title: (
32 |
52 |
81 |
Find the needle!
82 |
122 |
123 |
124 | this.setState({ treeData })}
127 | //
128 | // Custom comparison for matching during search.
129 | // This is optional, and defaults to a case sensitive search of
130 | // the title and subtitle values.
131 | // see `defaultSearchMethod` in https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/default-handlers.js
132 | searchMethod={customSearchMethod}
133 | //
134 | // The query string used in the search. This is required for searching.
135 | searchQuery={searchString}
136 | //
137 | // When matches are found, this property lets you highlight a specific
138 | // match and scroll to it. This is optional.
139 | searchFocusOffset={searchFocusIndex}
140 | //
141 | // This callback returns the matches from the search,
142 | // including their `node`s, `treeIndex`es, and `path`s
143 | // Here I just use it to note how many matches were found.
144 | // This is optional, but without it, the only thing searches
145 | // do natively is outline the matching nodes.
146 | searchFinishCallback={matches =>
147 | this.setState({
148 | searchFoundCount: matches.length,
149 | searchFocusIndex:
150 | matches.length > 0 ? searchFocusIndex % matches.length : 0,
151 | })
152 | }
153 | //
154 | // This prop only expands the nodes that are seached.
155 | onlyExpandSearchedNodes
156 | />
157 |
158 |
31 | this.setState({ treeData })}
35 | />
36 |
37 | );
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/stories/search.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SortableTree from '../src';
3 | // In your own app, you would need to use import styles once in the app
4 | // import 'react-sortable-tree/styles.css';
5 |
6 | export default class App extends Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | const title = 'Hay';
11 |
12 | // For generating a haystack (you probably won't need to do this)
13 | const getStack = (left, hasNeedle = false) => {
14 | if (left === 0) {
15 | return hasNeedle ? { title: 'Needle' } : { title };
16 | }
17 |
18 | return {
19 | title,
20 | children: [
21 | {
22 | title,
23 | children: [getStack(left - 1, hasNeedle && left % 2), { title }],
24 | },
25 | { title },
26 | {
27 | title,
28 | children: [
29 | { title },
30 | getStack(left - 1, hasNeedle && (left + 1) % 2),
31 | ],
32 | },
33 | ],
34 | };
35 | };
36 |
37 | this.state = {
38 | searchString: '',
39 | searchFocusIndex: 0,
40 | searchFoundCount: null,
41 | treeData: [
42 | {
43 | title: 'Haystack',
44 | children: [
45 | getStack(3, true),
46 | getStack(3),
47 | { title },
48 | getStack(2, true),
49 | ],
50 | },
51 | ],
52 | };
53 | }
54 |
55 | render() {
56 | const { searchString, searchFocusIndex, searchFoundCount } = this.state;
57 |
58 | // Case insensitive search of `node.title`
59 | const customSearchMethod = ({ node, searchQuery }) =>
60 | searchQuery &&
61 | node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
62 |
63 | const selectPrevMatch = () =>
64 | this.setState({
65 | searchFocusIndex:
66 | searchFocusIndex !== null
67 | ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
68 | : searchFoundCount - 1,
69 | });
70 |
71 | const selectNextMatch = () =>
72 | this.setState({
73 | searchFocusIndex:
74 | searchFocusIndex !== null
75 | ? (searchFocusIndex + 1) % searchFoundCount
76 | : 0,
77 | });
78 |
79 | return (
80 |
81 |
Find the needle!
82 |
122 |
123 |
124 | this.setState({ treeData })}
127 | //
128 | // Custom comparison for matching during search.
129 | // This is optional, and defaults to a case sensitive search of
130 | // the title and subtitle values.
131 | // see `defaultSearchMethod` in https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/default-handlers.js
132 | searchMethod={customSearchMethod}
133 | //
134 | // The query string used in the search. This is required for searching.
135 | searchQuery={searchString}
136 | //
137 | // When matches are found, this property lets you highlight a specific
138 | // match and scroll to it. This is optional.
139 | searchFocusOffset={searchFocusIndex}
140 | //
141 | // This callback returns the matches from the search,
142 | // including their `node`s, `treeIndex`es, and `path`s
143 | // Here I just use it to note how many matches were found.
144 | // This is optional, but without it, the only thing searches
145 | // do natively is outline the matching nodes.
146 | searchFinishCallback={matches =>
147 | this.setState({
148 | searchFoundCount: matches.length,
149 | searchFocusIndex:
150 | matches.length > 0 ? searchFocusIndex % matches.length : 0,
151 | })
152 | }
153 | />
154 |
155 |
40 | Simply set it to the theme prop and you’re
41 | done!
42 |
43 | ),
44 | },
45 | ],
46 | };
47 | }
48 |
49 | render() {
50 | return (
51 |
52 | this.setState({ treeData })}
56 | />
57 |
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/stories/touch-support.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import React, { Component } from 'react';
3 | import { DndProvider } from 'react-dnd';
4 | import { HTML5Backend } from 'react-dnd-html5-backend';
5 | import TouchBackend from 'react-dnd-touch-backend';
6 | import { SortableTreeWithoutDndContext as SortableTree } from '../src';
7 | // In your own app, you would need to use import styles once in the app
8 | // import 'react-sortable-tree/styles.css';
9 |
10 | // https://stackoverflow.com/a/4819886/1601953
11 | const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);
12 | const dndBackend = isTouchDevice ? TouchBackend : HTML5Backend;
13 |
14 | class App extends Component {
15 | constructor(props) {
16 | super(props);
17 |
18 | this.state = {
19 | treeData: [
20 | { title: 'Chicken', expanded: true, children: [{ title: 'Egg' }] },
21 | ],
22 | };
23 | }
24 |
25 | render() {
26 | return (
27 |
28 |
29 |
30 | This is {!isTouchDevice && 'not '}a touch-supporting browser
31 |
32 |
33 |
34 | this.setState({ treeData })}
37 | />
38 |
39 |
41 | );
42 | }
43 | }
44 |
45 | export default App;
46 |
--------------------------------------------------------------------------------
/stories/tree-data-io.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SortableTree, { getFlatDataFromTree, getTreeFromFlatData } from '../src';
3 | // In your own app, you would need to use import styles once in the app
4 | // import 'react-sortable-tree/styles.css';
5 |
6 | const initialData = [
7 | { id: '1', name: 'N1', parent: null },
8 | { id: '2', name: 'N2', parent: null },
9 | { id: '3', name: 'N3', parent: 2 },
10 | { id: '4', name: 'N4', parent: 3 },
11 | ];
12 |
13 | export default class App extends Component {
14 | constructor(props) {
15 | super(props);
16 |
17 | this.state = {
18 | treeData: getTreeFromFlatData({
19 | flatData: initialData.map(node => ({ ...node, title: node.name })),
20 | getKey: node => node.id, // resolve a node's key
21 | getParentKey: node => node.parent, // resolve a node's parent's key
22 | rootKey: null, // The value of the parent key when there is no parent (i.e., at root level)
23 | }),
24 | };
25 | }
26 |
27 | render() {
28 | const flatData = getFlatDataFromTree({
29 | treeData: this.state.treeData,
30 | getNodeKey: ({ node }) => node.id, // This ensures your "id" properties are exported in the path
31 | ignoreCollapsed: false, // Makes sure you traverse every node in the tree, not just the visible ones
32 | }).map(({ node, path }) => ({
33 | id: node.id,
34 | name: node.name,
35 |
36 | // The last entry in the path is this node's key
37 | // The second to last entry (accessed here) is the parent node's key
38 | parent: path.length > 1 ? path[path.length - 2] : null,
39 | }));
40 |
41 | return (
42 |
43 | ↓treeData for this tree was generated from flat data similar to DB rows↓
44 |
45 | this.setState({ treeData })}
48 | />
49 |
50 |
51 | ↓This flat data is generated from the modified tree data↓
52 |
53 | {flatData.map(({ id, name, parent }) => (
54 |
55 | id: {id}, name: {name}, parent: {parent || 'null'}
56 |
57 | ))}
58 |
59 |
27 |
35 | this.setState({ treeData1 })}
38 | dndType={externalNodeType}
39 | shouldCopyOnOutsideDrop={shouldCopyOnOutsideDrop}
40 | />
41 |
42 |
43 |
51 | this.setState({ treeData2 })}
54 | dndType={externalNodeType}
55 | shouldCopyOnOutsideDrop={shouldCopyOnOutsideDrop}
56 | />
57 |
58 |
59 |
60 |
61 |
62 |
63 | Enable node copy via shouldCopyOnOutsideDrop :
64 |
75 |
76 |
7 | 
23 | 
| 
|
167 | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: |
168 | | **File Explorer** | **Full Node Drag** | **Minimalistic theme inspired from MATERIAL UI** |
169 | | react-sortable-tree-theme-file-explorer | react-sortable-tree-theme-full-node-drag | react-sortable-tree-theme-minimal |
170 | | [Github](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-file-explorer) | [Github](https://github.com/frontend-collective/react-sortable-tree-theme-full-node-drag) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-full-node-drag) | [Github](https://github.com/lifejuggler/react-sortable-tree-theme-minimal) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-minimal) |
171 |
172 | **Help Wanted** - As the themes feature has just been enabled, there are very few (only _two_ at the time of this writing) theme modules available. If you've customized the appearance of your tree to be especially cool or easy to use, I would be happy to feature it in this readme with a link to the Github repo and NPM page if you convert it to a theme. You can use my [file explorer theme repo](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer) as a template to plug in your own stuff.
173 |
174 | ## Browser Compatibility
175 |
176 | | Browser | Works? |
177 | | :------ | :----- |
178 | | Chrome | Yes |
179 | | Firefox | Yes |
180 | | Safari | Yes |
181 | | IE 11 | Yes |
182 |
183 | ## Troubleshooting
184 |
185 | ### If it throws "TypeError: fn is not a function" errors in production
186 |
187 | This issue may be related to an ongoing incompatibility between UglifyJS and Webpack's behavior. See an explanation at [create-react-app#2376](https://github.com/facebookincubator/create-react-app/issues/2376).
188 |
189 | The simplest way to mitigate this issue is by adding `comparisons: false` to your Uglify config as seen here: https://github.com/facebookincubator/create-react-app/pull/2379/files
190 |
191 | ### If it doesn't work with other components that use react-dnd
192 |
193 | react-dnd only allows for one DragDropContext at a time (see: https://github.com/gaearon/react-dnd/issues/186). To get around this, you can import the context-less tree component via `SortableTreeWithoutDndContext`.
194 |
195 | ```js
196 | // before
197 | import SortableTree from 'react-sortable-tree';
198 |
199 | // after
200 | import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';
201 | ```
202 |
203 | ## Contributing
204 |
205 | Please read the [Code of Conduct](CODE_OF_CONDUCT.md). I actively welcome pull requests :)
206 |
207 | After cloning the repository and running `yarn install` inside, you can use the following commands to develop and build the project.
208 |
209 | ```sh
210 | # Starts a webpack dev server that hosts a demo page with the component.
211 | # It uses react-hot-loader so changes are reflected on save.
212 | yarn start
213 |
214 | # Start the storybook, which has several different examples to play with.
215 | # Also hot-reloaded.
216 | yarn run storybook
217 |
218 | # Runs the library tests
219 | yarn test
220 |
221 | # Lints the code with eslint
222 | yarn run lint
223 |
224 | # Lints and builds the code, placing the result in the dist directory.
225 | # This build is necessary to reflect changes if you're
226 | # `npm link`-ed to this repository from another local project.
227 | yarn run build
228 | ```
229 |
230 | Pull requests are welcome!
231 |
232 | ## License
233 |
234 | MIT
235 |
--------------------------------------------------------------------------------
/__mocks__/fileMock.js:
--------------------------------------------------------------------------------
1 | module.exports = 'test-file-stub';
2 |
--------------------------------------------------------------------------------
/__mocks__/react-dnd-html5-backend.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import { TestBackend } from 'react-dnd-test-backend';
3 |
4 | module.exports = { HTML5Backend: TestBackend };
5 |
--------------------------------------------------------------------------------
/__mocks__/react-dnd-scrollzone.js:
--------------------------------------------------------------------------------
1 | module.exports = el => el;
2 | module.exports.createVerticalStrength = () => {};
3 | module.exports.createHorizontalStrength = () => {};
4 |
--------------------------------------------------------------------------------
/__mocks__/react-virtualized.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // eslint-disable-next-line global-require
4 | const reactVirtualized = { ...require('react-virtualized') };
5 |
6 | /* eslint-disable react/prop-types */
7 | const MockAutoSizer = props =>
8 |