react-arborist 1.0.3 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +108 -84
- package/dist/components/default-drop-cursor.d.ts +3 -0
- package/dist/components/list-outer-element.d.ts +2 -0
- package/dist/components/list.d.ts +4 -0
- package/dist/components/outer-drop.d.ts +4 -0
- package/dist/components/row.d.ts +2 -1
- package/dist/context.d.ts +5 -18
- package/dist/index.d.ts +2 -2
- package/dist/index.js +836 -853
- package/dist/index.js.map +1 -1
- package/dist/module.js +839 -856
- package/dist/module.js.map +1 -1
- package/dist/provider.d.ts +2 -2
- package/dist/selection/selection-hook.d.ts +2 -1
- package/dist/tree-api.d.ts +24 -8
- package/dist/types.d.ts +28 -34
- package/package.json +3 -2
- package/src/components/default-drop-cursor.tsx +41 -0
- package/src/components/drop-cursor.tsx +7 -42
- package/src/components/list-outer-element.tsx +34 -0
- package/src/components/list.tsx +25 -0
- package/src/components/outer-drop.ts +7 -0
- package/src/components/preview.tsx +6 -6
- package/src/components/row.tsx +26 -28
- package/src/components/tree.tsx +10 -76
- package/src/context.tsx +9 -48
- package/src/dnd/drag-hook.ts +5 -6
- package/src/dnd/drop-hook.ts +5 -5
- package/src/dnd/outer-drop-hook.ts +5 -5
- package/src/index.ts +16 -2
- package/src/provider.tsx +29 -49
- package/src/selection/selection-hook.ts +2 -1
- package/src/tree-api.ts +95 -21
- package/src/types.ts +30 -33
- package/dist/tree-api-hook.d.ts +0 -6
- package/src/tree-api-hook.ts +0 -34
package/README.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<h1>React Arborist</h1>
|
|
4
|
+
|
|
5
|
+
A full-featured tree component for React.
|
|
6
|
+
|
|
7
|
+
Demo: https://react-arborist.netlify.app/
|
|
4
8
|
|
|
5
9
|
The tree UI is ubiquitous in software applications. There are many tree component libraries for React, but none were full-featured enough to stand on their own.
|
|
6
10
|
|
|
@@ -24,37 +28,37 @@ Render the tree data structure.
|
|
|
24
28
|
|
|
25
29
|
```jsx
|
|
26
30
|
const data = {
|
|
27
|
-
id: "
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
id: "A",
|
|
32
|
+
name: "Root",
|
|
33
|
+
children: [
|
|
34
|
+
{ id: "B", name: "Node 1" },
|
|
35
|
+
{ id: "C", name: "Node 2" },
|
|
36
|
+
],
|
|
37
|
+
};
|
|
30
38
|
|
|
31
39
|
function App() {
|
|
32
|
-
return
|
|
33
|
-
<Tree data={data}>
|
|
34
|
-
{Node}
|
|
35
|
-
</Tree>
|
|
36
|
-
);
|
|
40
|
+
return <Tree data={data}>{Node}</Tree>;
|
|
37
41
|
}
|
|
38
42
|
|
|
39
|
-
function Node({ ref, styles, data}) {
|
|
43
|
+
function Node({ ref, styles, data }) {
|
|
40
44
|
return (
|
|
41
45
|
<div ref={ref} style={styles.row}>
|
|
42
|
-
<div style={styles.indent}>
|
|
43
|
-
{data.name}
|
|
44
|
-
</div>
|
|
46
|
+
<div style={styles.indent}>{data.name}</div>
|
|
45
47
|
</div>
|
|
46
|
-
)
|
|
48
|
+
);
|
|
47
49
|
}
|
|
48
50
|
```
|
|
49
51
|
|
|
50
52
|
#### Contents
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
|
|
54
|
+
- [Expected Data Structure](#expected-data-structure)
|
|
55
|
+
- [Tree Component API](#tree-component)
|
|
56
|
+
- [Node Renderer API](#node-renderer-component)
|
|
57
|
+
- [Styles Prop](#styles-prop)
|
|
58
|
+
- [State Prop](#state-prop)
|
|
59
|
+
- [Handlers Prop](#handlers-prop)
|
|
60
|
+
- [Tree Prop](#tree-prop)
|
|
61
|
+
- [Accessing the Tree Api from the Parent](#accessing-the-tree-api-from-the-parent)
|
|
58
62
|
|
|
59
63
|
## Expected Data Structure
|
|
60
64
|
|
|
@@ -65,36 +69,39 @@ type Data = {
|
|
|
65
69
|
id: string, /* Required */
|
|
66
70
|
children?: Data[]
|
|
67
71
|
isOpen?: boolean
|
|
72
|
+
...rest /* Any other data you wish to provide */
|
|
68
73
|
}
|
|
69
74
|
```
|
|
70
75
|
|
|
71
76
|
If your data does not look like this, you can provide a `childrenAccessor` prop. You can also provide `isOpenAccessor`. The value can be a string or a function.
|
|
72
77
|
|
|
73
78
|
```ts
|
|
74
|
-
<Tree childrenAccessor="items" ...
|
|
75
|
-
// Or
|
|
76
|
-
<Tree childrenAccessor={(node) => node.items} ...
|
|
79
|
+
<Tree childrenAccessor="items" ...
|
|
80
|
+
// Or
|
|
81
|
+
<Tree childrenAccessor={(node) => node.items} ...
|
|
77
82
|
```
|
|
78
83
|
|
|
79
84
|
## Tree Component
|
|
80
85
|
|
|
81
86
|
Unlike other Tree Components, react-arborist is designed as a [controlled component](https://reactjs.org/docs/forms.html#controlled-components). This means the consumer will provide the tree data and the handlers to update it. The only state managed internally is for drag and drop, selection, and editing.
|
|
82
87
|
|
|
83
|
-
| Prop
|
|
84
|
-
|
|
|
85
|
-
| data
|
|
86
|
-
| width
|
|
87
|
-
| height
|
|
88
|
-
| rowHeight
|
|
89
|
-
| indent
|
|
90
|
-
| hideRoot
|
|
91
|
-
| onToggle
|
|
92
|
-
| onMove
|
|
93
|
-
| onEdit
|
|
94
|
-
| childrenAccessor | "children"
|
|
95
|
-
| isOpenAccessor
|
|
96
|
-
| openByDefault
|
|
97
|
-
| className
|
|
88
|
+
| Prop | Default | Description |
|
|
89
|
+
| ---------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
90
|
+
| data | (required) | The tree data structure to render as described above. |
|
|
91
|
+
| width | 300 | The width of the tree. |
|
|
92
|
+
| height | 500 | The height of the tree. To dynamically fill it's container, use a [hook](https://github.com/ZeeCoder/use-resize-observer) or [component](https://github.com/bvaughn/react-virtualized-auto-sizer) to gather the width and height of the Tree's parent. |
|
|
93
|
+
| rowHeight | 24 | The height of each row. |
|
|
94
|
+
| indent | 24 | The number of pixels to indent child nodes. |
|
|
95
|
+
| hideRoot | false | Hide the root node so that the first set of children appear as the roots. |
|
|
96
|
+
| onToggle | noop | Handler called when a node is opened or closed. This and the subsequent functions should update the `data` prop for the tree to re-render. |
|
|
97
|
+
| onMove | noop | Handler called when a user moves one or more nodes by dragging and dropping. |
|
|
98
|
+
| onEdit | noop | Handler called when a user performs an inline edit of the node. |
|
|
99
|
+
| childrenAccessor | "children" | Used to get a node's children if they exist on a property other than "children". |
|
|
100
|
+
| isOpenAccessor | "isOpen" | Used to get a node's openness state if it exists on a property other than "isOpen". |
|
|
101
|
+
| openByDefault | true | Choose if the node should be open or closed when it has an undefined openness state. |
|
|
102
|
+
| className | undefined | Adds a class to the containing div. |
|
|
103
|
+
| dndRootElement | undefined | The element for react-dnd to bind it's events to. Defaults to window. See https://github.com/brimdata/react-arborist/pull/33 |
|
|
104
|
+
| dropCursor | ({top, left, indent}) => ReactElement | Provide a custom render function for the drop cursor (the line you see as you drag an item around the tree). It recieves props {left, top, indent} which are all numbers. See the [DefaultDropCursor](https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/src/components/default-drop-cursor.tsx) for an example of how to create a custom one. |
|
|
98
105
|
|
|
99
106
|
The only child of the Tree Component must be a NodeRenderer function as described below.
|
|
100
107
|
|
|
@@ -103,7 +110,7 @@ const NodeRenderer = ({
|
|
|
103
110
|
innerRef, data, styles, handlers, state, tree
|
|
104
111
|
}) => ...
|
|
105
112
|
|
|
106
|
-
const MyApp = () =>
|
|
113
|
+
const MyApp = () =>
|
|
107
114
|
<Tree>
|
|
108
115
|
{NodeRenderer}
|
|
109
116
|
</Tree>
|
|
@@ -116,72 +123,64 @@ The Node Renderer is where you get to make the tree your own. You completely own
|
|
|
116
123
|
The most basic node renderer will look like this:
|
|
117
124
|
|
|
118
125
|
```jsx
|
|
119
|
-
function NodeRenderer({
|
|
120
|
-
innerRef,
|
|
121
|
-
styles,
|
|
122
|
-
data,
|
|
123
|
-
state,
|
|
124
|
-
handlers,
|
|
125
|
-
tree
|
|
126
|
-
}) {
|
|
126
|
+
function NodeRenderer({ innerRef, styles, data, state, handlers, tree }) {
|
|
127
127
|
return (
|
|
128
128
|
<div ref={innerRef} style={styles.row}>
|
|
129
129
|
<div style={styles.indent}>{data.id}</div>
|
|
130
130
|
</div>
|
|
131
|
-
)
|
|
131
|
+
);
|
|
132
132
|
}
|
|
133
133
|
```
|
|
134
134
|
|
|
135
135
|
The function above is passed data for this individual node, the DOM ref used for drag and drop, the styles to position the row in the virtualized list and the styles to indent the current node according to its level in the tree.
|
|
136
136
|
|
|
137
|
-
| Prop
|
|
138
|
-
|
|
|
139
|
-
| data
|
|
140
|
-
| innerRef
|
|
141
|
-
| [styles](#styles-prop)
|
|
142
|
-
| [state](#state-prop)
|
|
143
|
-
| [handlers](#handlers-prop) | object
|
|
144
|
-
| [tree](#tree-prop)
|
|
137
|
+
| Prop | Type | Description |
|
|
138
|
+
| -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
139
|
+
| data | Node | A single node from the tree data structure provided. |
|
|
140
|
+
| innerRef | Ref | Must be attached to the root element returned by the NodeRenderer. This is needed for drag and drop to work. |
|
|
141
|
+
| [styles](#styles-prop) | object | This is an object that contains styles for the position of the row, and the level of indentation. Each key is described below. |
|
|
142
|
+
| [state](#state-prop) | object | An handful of boolean values that indicate the current state of this node. See below for details. |
|
|
143
|
+
| [handlers](#handlers-prop) | object | A collection of handlers to attach to the DOM, that provide selectable and toggle-able behaviors. Each handler is described below. |
|
|
144
|
+
| [tree](#tree-prop) | TreeMonitor | This object can be used to get at the internal state of the whole tree component. For example, `tree.getSelectedNodes()`. All the methods are listed below in the Tree Prop section. |
|
|
145
145
|
|
|
146
146
|
### Styles Prop
|
|
147
147
|
|
|
148
148
|
These are the properties on the styles object passed to the NodeRenderer.
|
|
149
149
|
|
|
150
|
-
| Name
|
|
151
|
-
|
|
|
152
|
-
| row
|
|
153
|
-
| indent | CSSProperties | This is simply a left padding set to the level of the tree multiplied by the tree indent prop.
|
|
150
|
+
| Name | Type | Description |
|
|
151
|
+
| ------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
152
|
+
| row | CSSProperties | Since the tree only renders the rows that are currently visible, all the rows are absolutely positioned with a fixed top and left. Those styles are in this property. |
|
|
153
|
+
| indent | CSSProperties | This is simply a left padding set to the level of the tree multiplied by the tree indent prop. |
|
|
154
154
|
|
|
155
155
|
### State Prop
|
|
156
156
|
|
|
157
157
|
These are the properties on the state object passed to the NodeRenderer.
|
|
158
158
|
|
|
159
|
-
| Name
|
|
160
|
-
|
|
|
161
|
-
| isOpen
|
|
162
|
-
| isSelected
|
|
163
|
-
| isHoveringOverChild | boolean | True if the user is dragging n node, and the node is hovering over one of this node's direct children. This can be used to indicate which folder the user is dragging an item into.
|
|
164
|
-
| isDragging
|
|
165
|
-
| isSelectedStart
|
|
166
|
-
| isSelectedEnd
|
|
167
|
-
| isEditing
|
|
168
|
-
|
|
159
|
+
| Name | Type | Description |
|
|
160
|
+
| ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
161
|
+
| isOpen | boolean | True if this node has children and the children are visible. Use this to display some type a open or closed icon. |
|
|
162
|
+
| isSelected | boolean | True if this node is selected. Use this to show a "selected" state. Maybe a different background? |
|
|
163
|
+
| isHoveringOverChild | boolean | True if the user is dragging n node, and the node is hovering over one of this node's direct children. This can be used to indicate which folder the user is dragging an item into. |
|
|
164
|
+
| isDragging | boolean | True if this node is being dragged. |
|
|
165
|
+
| isSelectedStart | boolean | True if this is the first of a contiguous group of selected rows. This can be used to tastefully style a group of selected items. Maybe a different border radius on the first and last rows? |
|
|
166
|
+
| isSelectedEnd | boolean | True if this is the last of a contiguous group of selected rows. |
|
|
167
|
+
| isEditing | boolean | True if this row is being edited. When true, the renderer should return some type of form input. |
|
|
169
168
|
|
|
170
169
|
### Handlers Prop
|
|
171
170
|
|
|
172
171
|
These are the properties on the handlers object passed to the NodeRenderer.
|
|
173
172
|
|
|
174
|
-
| Name
|
|
175
|
-
|
|
|
176
|
-
| select | MouseEventHandler
|
|
177
|
-
| toggle | MouseEventHandler
|
|
178
|
-
| edit
|
|
179
|
-
| submit | `(update: string) => void` | Sends the update to the `onEdit` handler in the Tree component, and sets the `state.isEditing` prop to `false`.
|
|
180
|
-
| reset
|
|
173
|
+
| Name | Type | Description |
|
|
174
|
+
| ------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
175
|
+
| select | MouseEventHandler | Attach this to the element that tiggers selection. Maybe you want to add it to the outermost div. <br /> `<div onClick={handlers.select}>` |
|
|
176
|
+
| toggle | MouseEventHandler | Attach this to the element that opens and closes the node. Maybe you want to add it to the `+`/`-` icon. <br />`<icon onClick={handlers.toggle}>` |
|
|
177
|
+
| edit | `() => void` | Makes this node editable. This will re-render the Node with the `state.isEditing` prop set to `true`. |
|
|
178
|
+
| submit | `(update: string) => void` | Sends the update to the `onEdit` handler in the Tree component, and sets the `state.isEditing` prop to `false`. |
|
|
179
|
+
| reset | `() => void` | Re-renders with the `state.isEditing` prop set to `false`. |
|
|
181
180
|
|
|
182
181
|
### Tree Prop
|
|
183
182
|
|
|
184
|
-
The tree monitor provides methods to get the tree's internal state. A use case might be in a right click menu.
|
|
183
|
+
The tree monitor provides methods to get and change the tree's internal state. A use case might be in a right click menu.
|
|
185
184
|
|
|
186
185
|
```jsx
|
|
187
186
|
// In your node renderer
|
|
@@ -191,7 +190,32 @@ onContextMenu={() => {
|
|
|
191
190
|
}}
|
|
192
191
|
```
|
|
193
192
|
|
|
194
|
-
| Methods
|
|
195
|
-
|
|
|
196
|
-
| `getSelectedIds()`
|
|
197
|
-
| `edit(id: string)`
|
|
193
|
+
| Methods | Returns | Description |
|
|
194
|
+
| ----------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
195
|
+
| `getSelectedIds()` | `string[]` | Get the the ids of all currently selected nodes. |
|
|
196
|
+
| `edit(id: string)` | `Promise<{cancelled: boolean, value: string \| undefined}>` | Edit a node programatically. Resolves when the edit is finished or cancelled. |
|
|
197
|
+
| `submit(id: string, value: string)` | void | Submit the edit. |
|
|
198
|
+
| `reset(id: string)` | void | Cancel the edit. |
|
|
199
|
+
| `select(index: number, meta = false, shift = false)` | `void` | Select a node by it's visible index in the tree. The meta flag, when true, will allow multiple items to be selected. The shift flag, when true, will select all nodes between the last one selected, and this one. |
|
|
200
|
+
| `selectById(id: string, meta = false, shift = false)` | `void` | Same as above but selects by id. If the id is not present (in a collapsed folder), nothing will happen. First use the `scrollToId` function which will open all the parents and scroll to the id. |
|
|
201
|
+
| `scrollToId(id: string)` | void | Scroll to the id opening all it's parents if needed. |
|
|
202
|
+
|
|
203
|
+
[Full Tree API Implementation](https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/src/tree-api.ts)
|
|
204
|
+
|
|
205
|
+
### Accessing the Tree API from the Parent
|
|
206
|
+
|
|
207
|
+
You may need to access the tree from the parent component. This can be done by passing a ref.
|
|
208
|
+
|
|
209
|
+
```jsx
|
|
210
|
+
function MySection() {
|
|
211
|
+
const tree = useRef(null)
|
|
212
|
+
|
|
213
|
+
useEffect(() => {
|
|
214
|
+
tree.current.scrollToId("B")
|
|
215
|
+
}, [])
|
|
216
|
+
|
|
217
|
+
return <Tree ref={ref} ... />
|
|
218
|
+
}
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
Authored by [James Kerr](https://twitter.com/specialCaseDev)
|
package/dist/components/row.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { IdObj } from "../types";
|
|
2
3
|
declare type Props = {
|
|
3
4
|
style: React.CSSProperties;
|
|
4
5
|
index: number;
|
|
5
6
|
};
|
|
6
|
-
export declare const Row: React.
|
|
7
|
+
export declare const Row: React.MemoExoticComponent<(<T extends IdObj>({ index, style, }: Props) => JSX.Element)>;
|
|
7
8
|
export {};
|
package/dist/context.d.ts
CHANGED
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { IdObj
|
|
4
|
-
export declare const
|
|
5
|
-
export declare function
|
|
6
|
-
export declare const IsCursorOverFolder: import("react").Context<boolean>;
|
|
7
|
-
export declare function useIsCursorOverFolder(): boolean;
|
|
8
|
-
export declare const CursorLocationContext: import("react").Context<Cursor | null>;
|
|
9
|
-
export declare function useCursorLocation(): Cursor | null;
|
|
10
|
-
export declare const Static: import("react").Context<StaticContext<IdObj> | null>;
|
|
11
|
-
export declare function useStaticContext(): StaticContext<IdObj>;
|
|
12
|
-
export declare const DispatchContext: import("react").Context<null>;
|
|
13
|
-
export declare function useDispatch(): never;
|
|
14
|
-
export declare const SelectionContext: import("react").Context<SelectionState | null>;
|
|
15
|
-
export declare function useSelectedIds(): string[];
|
|
16
|
-
export declare function useIsSelected(): (index: number | null) => boolean;
|
|
17
|
-
export declare const EditingIdContext: import("react").Context<string | null>;
|
|
18
|
-
export declare function useEditingId(): string | null;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TreeApi } from "./tree-api";
|
|
3
|
+
import { IdObj } from "./types";
|
|
4
|
+
export declare const TreeApiContext: React.Context<TreeApi<any> | null>;
|
|
5
|
+
export declare function useTreeApi<T extends IdObj>(): TreeApi<T>;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { Tree } from "./components/tree";
|
|
2
2
|
import { TreeApi } from "./tree-api";
|
|
3
|
-
import type { NodeRenderer, NodeState, NodeHandlers } from "./types";
|
|
4
|
-
export { Tree, TreeApi, NodeRenderer, NodeState, NodeHandlers };
|
|
3
|
+
import type { NodeRenderer, NodeState, NodeHandlers, NodeRendererProps, DropCursorProps } from "./types";
|
|
4
|
+
export { Tree, TreeApi, NodeRenderer, NodeState, NodeHandlers, NodeRendererProps, DropCursorProps, };
|