Skip to content

Commit

Permalink
Merge pull request #102 from kpustakhod/node-select
Browse files Browse the repository at this point in the history 
Add onNodeSelect callback that triggers on manual node interaction
  • Loading branch information
@mellis481
mellis481 authored May 9, 2023
2 parents 89886af + 8baad32 commit 9791bfa
Show file tree
Hide file tree
Showing 12 changed files with 917 additions and 456 deletions.
30 changes: 18 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ A react component that implements the treeview pattern as described by the [WAI-
| `data` | `array[node]` | `required` | Tree data |
| `nodeRenderer` | `func` | `required` | Render prop for the node (see below for more details) |
| `onSelect` | `func` | `noop` | Function called when a node changes its selected state |
| `onNodeSelect` | `func` | `noop` | Function called when a node was manually selected/deselected |
| `onExpand` | `func` | `noop` | Function called when a node changes its expanded state |
| `className` | `string` | `""` | className to add to the outermost dom element, al `ul` with `role = "tree"` |
| `multiSelect` | `bool` | `false` | Allows multiple nodes to be selected |
Expand Down Expand Up @@ -72,7 +73,7 @@ const data = [
];
```

The array can also be generated from a nested object using the `flattenTree` helper (see the examples below).
The array can also be generated from a nested object using the `flattenTree` helper (see the examples below).

Data supports non-sequential ids provided by user.

Expand Down Expand Up @@ -106,6 +107,10 @@ Data supports non-sequential ids provided by user.
- _Arguments_: `onSelect({element, isBranch, isExpanded, isSelected, isHalfSelected, isDisabled, treeState })`
Note: the function uses the state _after_ the selection.

## onNodeSelect

- _Arguments_: `onNodeSelect({element, isBranch, isSelected, treeState })`
Note: the function uses the state right _after_ the selection before propagation.
## onExpand

- _Arguments_: `onExpand({element, isExpanded, isSelected, isHalfSelected, isDisabled, treeState})`
Expand All @@ -114,7 +119,7 @@ Data supports non-sequential ids provided by user.
## onLoadData

- _Arguments_: `onLoadData({element, isExpanded, isSelected, isHalfSelected, isDisabled, treeState})`
Note: the function uses the state _after_ inital data is loaded and on expansion .
Note: the function uses the state _after_ inital data is loaded and on expansion.
<br/> <br/>

## Keyboard Navigation
Expand Down Expand Up @@ -162,13 +167,14 @@ Follows the same conventions described in https://www.w3.org/TR/wai-aria-practic

The internal state of the component.

| Property | Type | Default | Description |
| ------------------ | ---------------- | ----------------------------- | ---------------------------------------- |
| selectedIds | `Set` | `new Set(defaultSelectedIds)` | Set of the ids of the selected nodes |
| tabbableId | `number` | `data[0].children[0]` | Id of the node with tabindex = 0 |
| isFocused | `bool` | `false` | Whether the tree has focus |
| expandedIds | `Set` | `new Set(defaultExpandedIds)` | Set of the ids of the expanded nodes |
| halfSelectedIds | `Set` | `new Set()` | Set of the ids of the selected nodes |
| lastUserSelect | `number` | `data[0].children[0]` | Last selection made directly by the user |
| lastInteractedWith | `number or null` | `null` | Last node interacted with |
| disabledIds | `Set` | `new Set(defaultDisabledIds)` | Set of the ids of the selected nodes |
| Property | Type | Default | Description |
| ------------------- | ---------------- | ----------------------------- | ----------------------------------------------- |
| selectedIds | `Set` | `new Set(defaultSelectedIds)` | Set of the ids of the selected nodes |
| tabbableId | `number` | `data[0].children[0]` | Id of the node with tabindex = 0 |
| isFocused | `bool` | `false` | Whether the tree has focus |
| expandedIds | `Set` | `new Set(defaultExpandedIds)` | Set of the ids of the expanded nodes |
| halfSelectedIds | `Set` | `new Set()` | Set of the ids of the selected nodes |
| lastUserSelect | `number` | `data[0].children[0]` | Last selection made directly by the user |
| lastInteractedWith | `number or null` | `null` | Last node interacted with |
| lastManuallyToggled | `number or null` | `null` | Last node that was manually selected/deselected |
| disabledIds | `Set` | `new Set(defaultDisabledIds)` | Set of the ids of the selected nodes |
8 changes: 7 additions & 1 deletion src/TreeView/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ A react component that implements the treeview pattern as described by the [WAI-
| `data` | `array[node]` | `required` | Tree data |
| `nodeRenderer` | `func` | `required` | Render prop for the node (see below for more details) |
| `onSelect` | `func` | `noop` | Function called when a node changes its selected state |
| `onNodeSelect` | `func` | `noop` | Function called when a node was manually selected/deselected |
| `onExpand` | `func` | `noop` | Function called when a node changes its expanded state |
| `className` | `string` | `""` | className to add to the outermost dom element, al `ul` with `role = "tree"` |
| `multiSelect` | `bool` | `false` | Allows multiple nodes to be selected |
Expand Down Expand Up @@ -65,7 +66,7 @@ const data = [
];
```

The array can also be generated from a nested object using the <code>flattenTree</code> helper (see the examples below).
The array can also be generated from a nested object using the <code>flattenTree</code> helper (see the examples below).

Data supports non-sequential ids provided by user.

Expand Down Expand Up @@ -99,6 +100,11 @@ Data supports non-sequential ids provided by user.
- _Arguments_: `onSelect({element, isBranch, isExpanded, isSelected, isHalfSelected, isDisabled, treeState })`
Note: the function uses the state _after_ the selection.

## onNodeSelect

- _Arguments_: `onNodeSelect({element, isBranch, isSelected, treeState })`
Note: the function uses the state right _after_ the selection before propagation.

### onExpand

- _Arguments_: `onExpand({element, isExpanded, isSelected, isHalfSelected, isDisabled, treeState})`
Expand Down
24 changes: 24 additions & 0 deletions src/TreeView/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
export const baseClassNames = {
root: "tree",
node: "tree-node",
branch: "tree-node__branch",
branchWrapper: "tree-branch-wrapper",
leafListItem: "tree-leaf-list-item",
leaf: "tree-node__leaf",
nodeGroup: "tree-node-group",
} as const;

export const clickActions = {
select: "SELECT",
focus: "FOCUS",
exclusiveSelect: "EXCLUSIVE_SELECT",
} as const;

export const CLICK_ACTIONS = Object.freeze(Object.values(clickActions));

export const nodeActions = {
check: "check",
select: "select",
} as const;

export const NODE_ACTIONS = Object.freeze(Object.values(nodeActions));
Loading

0 comments on commit 9791bfa

Please sign in to comment.