You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> A React component for Drag-and-drop sortable representation of hierarchical data. Checkout the [demo](https://react-sortable-tree.surge.sh/) for a demonstration of some basic features. Checkout the [storybook](https://react-sortable-tree.surge.sh/storybook/index.html) for advanced usage. Play with the code on [CodeSandbox.io](https://codesandbox.io/s/wkxvy3z15w).
14
+
> A React component for Drag-and-drop sortable representation of hierarchical data. Checkout the [demo](https://react-sortable-tree.surge.sh/) for a demonstration of some basic features. Checkout the [storybook](https://frontend-collective.github.io/react-sortable-tree/) for advanced usage. Play with the code on [CodeSandbox.io](https://codesandbox.io/s/wkxvy3z15w).
@@ -114,18 +130,23 @@ Need a hand turning your flat data into nested tree data?
114
130
Want to perform add/remove operations on the tree data without creating your own recursive function?
115
131
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).
116
132
117
-
Notable among the available functions:
118
-
119
-
-**`getTreeFromFlatData`**: Convert flat data (like that from a database) into nested tree data
120
-
-**`getFlatDataFromTree`**: Convert tree data back to flat data
121
-
-**`addNodeUnderParent`**: Add a node under the parent node at the given path
122
-
-**`removeNode`**: For a given path, get the node at that path and the treeData with that node removed.
123
-
-**`changeNodeAtPath`**: Modify the node object at the given path
124
-
-**`map`**: Perform a change on every node in the tree
125
-
-**`walk`**: Visit every node in the tree in order
126
-
127
-
Documentation for each method is only available in the code at this time. You can also refer to the tests for simple usage examples.
128
-
If your hobbies happen to include writing documentation, by all means submit a pull request. It would really help out.
133
+
-[**`getTreeFromFlatData`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L972): Convert flat data (like that from a database) into nested tree data.
134
+
-[**`getFlatDataFromTree`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L939): Convert tree data back to flat data.
135
+
-[**`addNodeUnderParent`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L612): Add a node under the parent node at the given path.
136
+
-[**`removeNode`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L533): For a given path, get the node at that path, treeIndex, and the treeData with that node removed.
137
+
-[**`removeNodeAtPath`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L505): For a given path, remove the node and return the treeData.
138
+
-[**`changeNodeAtPath`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L409): Modify the node object at the given path.
139
+
-[**`map`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L359): Perform a change on every node in the tree.
140
+
-[**`walk`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L326): Visit every node in the tree in order.
141
+
-[**`getDescendantCount`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L60): Count how many descendants this node has.
142
+
-[**`getVisibleNodeCount`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L248): Count how many visible descendants this node has.
143
+
-[**`getVisibleNodeInfoAtIndex`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L286): Get the <targetIndex>th visible node in the tree data.
144
+
-[**`toggleExpandedForAll`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L389): Expand or close every node in the tree.
145
+
-[**`getNodeAtPath`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L572): Get the node at the input path.
146
+
-[**`insertNode`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L878): Insert the input node at the specified depth and minimumTreeIndex.
147
+
-[**`find`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L1070): Find nodes matching a search query in the tree.
148
+
-[**`isDescendant`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L1020): Check if a node is a descendant of another node.
149
+
-[**`getDepth`**](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/tree-data-utils.js#L1038): Get the longest path in the tree.
129
150
130
151
## Themes
131
152
@@ -172,7 +193,7 @@ import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tr
172
193
173
194
## Contributing
174
195
175
-
Please read the [Code of Conduct](CODE_OF_CONDUCT.md).
196
+
Please read the [Code of Conduct](CODE_OF_CONDUCT.md). I actively welcome pull requests :)
176
197
177
198
After cloning the repository and running `npm install` inside, you can use the following commands to develop and build the project.
0 commit comments