Skip to content
This repository was archived by the owner on Sep 19, 2024. It is now read-only.

Add action type to onchange callback #78

Open
wants to merge 3 commits into
base: stable
Choose a base branch
from
Open

Add action type to onchange callback #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8981e0d
Add event object to onChange props
PatrykRudzinski May 6, 2024
ea622da
Update readme description
PatrykRudzinski May 6, 2024
418e57a
Update readme description
PatrykRudzinski May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default class Tree extends Component {
| Prop | Type | <div style="width: 400px;">Description</div> |
| :----------------------------- | :------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| treeData<br/>_(required)_ | object[] | Tree data with the following keys: <div>`title` is the primary label for the node.</div><div>`subtitle` is a secondary label for the node.</div><div>`expanded` shows children of the node if true, or hides them if false. Defaults to false.</div><div>`children` is an array of child nodes belonging to the node.</div><div>**Example**: `[{title: 'main', subtitle: 'sub'}, { title: 'value2', expanded: true, children: [{ title: 'value3') }] }]` |
| onChange<br/>_(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.<div>`( treeData: object[] ): void`</div> |
| onChange<br/>_(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.<div>`( treeData: object[], event: { changeActionType: 'move-iternal' \| 'move-external' \| 'expand' \| 'collapse' \| 'search' \| 'lazy-loaded' } ): void`</div> |
| getNodeKey<br/>_(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).<div>`({ node: object, treeIndex: number }): string or number`</div> |
| generateNodeProps | func | Generate an object with additional props to be passed to the node renderer. Use this for adding buttons via the `buttons` key, or additional `style` / `className` settings.<div>`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): object`</div> |
| onMoveNode | func | Called after node move operation. <div>`({ treeData: object[], node: object, nextParentNode: object, prevPath: number[] or string[], prevTreeIndex: number, nextPath: number[] or string[], nextTreeIndex: number }): void`</div> |
Expand Down
28 changes: 22 additions & 6 deletions src/react-sortable-tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -168,7 +168,8 @@ class ReactSortableTree extends Component {
}
: oldNode,
getNodeKey: props.getNodeKey,
})
}),
{ changeActionType: 'lazy-loaded' }
),
})
}
Expand Down Expand Up @@ -451,7 +452,7 @@ class ReactSortableTree extends Component {
})
}

this.props.onChange(treeData)
this.props.onChange(treeData, { changeActionType: 'move-external' })

this.props.onMoveNode({
treeData,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down