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 |
`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