diff --git a/README.md b/README.md index e34a6829..17c55513 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,7 @@ export default class Tree extends Component { | Prop | Type |
Description
| | :----------------------------- | :------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | treeData
_(required)_ | object[] | Tree data with the following keys:
`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') }] }]` | -| 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`
| +| 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[], event: { changeActionType: 'move-iternal' \| 'move-external' \| 'expand' \| 'collapse' \| 'search' \| 'lazy-loaded' } ): void`
| | 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`](./src/utils/default-handlers.ts) by default, which returns the index in the tree (omitting hidden nodes).
`({ node: object, treeIndex: number }): string or number`
| | 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`
| | 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`
| diff --git a/src/react-sortable-tree.tsx b/src/react-sortable-tree.tsx index feaa90a8..20a51aa0 100644 --- a/src/react-sortable-tree.tsx +++ b/src/react-sortable-tree.tsx @@ -107,7 +107,7 @@ class ReactSortableTree extends Component { // Update the tree with data leaving all paths leading to matching nodes open if (expand) { newState.instanceProps.ignoreOneTreeUpdate = true // Prevents infinite loop - onChange(expandedTreeData) + onChange(expandedTreeData, { changeActionType: 'search' }) } if (searchFinishCallback) { @@ -168,7 +168,8 @@ class ReactSortableTree extends Component { } : oldNode, getNodeKey: props.getNodeKey, - }) + }), + { changeActionType: 'lazy-loaded' } ), }) } @@ -451,7 +452,7 @@ class ReactSortableTree extends Component { }) } - this.props.onChange(treeData) + this.props.onChange(treeData, { changeActionType: 'move-external' }) this.props.onMoveNode({ treeData, @@ -488,7 +489,7 @@ class ReactSortableTree extends Component { getNodeKey: this.props.getNodeKey, }) - this.props.onChange(treeData) + this.props.onChange(treeData, { changeActionType: 'expand' }) this.props.onVisibilityToggle({ treeData, @@ -519,7 +520,7 @@ class ReactSortableTree extends Component { getNodeKey: this.props.getNodeKey, }) - this.props.onChange(treeData) + this.props.onChange(treeData, { changeActionType: 'move-internal' }) this.props.onMoveNode({ treeData, @@ -768,6 +769,21 @@ type OnDragStateChangedParams = { draggedNode: any } +// Available actions for the tree +// move-internal: Move a node within the tree +// move-external: Move a node from outside the tree +// expand: Expand a node +// collapse: Collapse a node +// search: Search for nodes +// lazy-loaded: Load lazy-loaded nodes +type ChangeAction = + | 'move-iternal' + | 'move-external' + | 'expand' + | 'collapse' + | 'search' + | 'lazy-loaded' + export type ReactSortableTreeProps = { dragDropManager?: { getMonitor: () => unknown @@ -860,7 +876,7 @@ export type ReactSortableTreeProps = { // 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. - onChange: (treeData) => void + onChange: (treeData, event: { changeActionType: ChangeAction }) => void // Called after node move operation. onMoveNode?: (params: OnMoveNodeParams) => void