@particle-academy/react-fancy 1.8.2 → 1.9.1
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/dist/index.cjs +11 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +11 -3
- package/dist/index.js.map +1 -1
- package/docs/TreeNav.md +43 -0
- package/package.json +1 -1
package/docs/TreeNav.md
CHANGED
|
@@ -48,6 +48,7 @@ const files: TreeNodeData[] = [
|
|
|
48
48
|
| nodes | `TreeNodeData[]` | - | Tree data (required) |
|
|
49
49
|
| selectedId | `string` | - | Currently selected node ID |
|
|
50
50
|
| onSelect | `(id: string, node: TreeNodeData) => void` | - | Selection callback |
|
|
51
|
+
| onNodeContextMenu | `(e: React.MouseEvent, node: TreeNodeData) => void` | - | Right-click callback per node |
|
|
51
52
|
| expandedIds | `string[]` | - | Controlled expanded node IDs |
|
|
52
53
|
| defaultExpandedIds | `string[]` | - | Initial expanded nodes (uncontrolled) |
|
|
53
54
|
| onExpandedChange | `(ids: string[]) => void` | - | Callback when expanded state changes |
|
|
@@ -141,6 +142,48 @@ Override with the `icon` field on any node:
|
|
|
141
142
|
{ id: "special", label: "config", icon: <GearIcon /> }
|
|
142
143
|
```
|
|
143
144
|
|
|
145
|
+
## Context Menu
|
|
146
|
+
|
|
147
|
+
Use `onNodeContextMenu` with the `ContextMenu` component to add right-click menus per node:
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
import { TreeNav, ContextMenu } from "@particle-academy/react-fancy";
|
|
151
|
+
|
|
152
|
+
const [ctxNode, setCtxNode] = useState<TreeNodeData | null>(null);
|
|
153
|
+
|
|
154
|
+
<ContextMenu>
|
|
155
|
+
<ContextMenu.Trigger>
|
|
156
|
+
<TreeNav
|
|
157
|
+
nodes={files}
|
|
158
|
+
selectedId={selectedFile}
|
|
159
|
+
onSelect={handleSelect}
|
|
160
|
+
onNodeContextMenu={(e, node) => setCtxNode(node)}
|
|
161
|
+
/>
|
|
162
|
+
</ContextMenu.Trigger>
|
|
163
|
+
<ContextMenu.Content>
|
|
164
|
+
{ctxNode?.type === "folder" ? (
|
|
165
|
+
<>
|
|
166
|
+
<ContextMenu.Item>New File</ContextMenu.Item>
|
|
167
|
+
<ContextMenu.Item>New Folder</ContextMenu.Item>
|
|
168
|
+
</>
|
|
169
|
+
) : (
|
|
170
|
+
<>
|
|
171
|
+
<ContextMenu.Item onClick={() => openFile(ctxNode)}>
|
|
172
|
+
Open File
|
|
173
|
+
</ContextMenu.Item>
|
|
174
|
+
<ContextMenu.Item onClick={() => copyName(ctxNode)}>
|
|
175
|
+
Copy File Name
|
|
176
|
+
</ContextMenu.Item>
|
|
177
|
+
<ContextMenu.Separator />
|
|
178
|
+
<ContextMenu.Item danger>Delete</ContextMenu.Item>
|
|
179
|
+
</>
|
|
180
|
+
)}
|
|
181
|
+
</ContextMenu.Content>
|
|
182
|
+
</ContextMenu>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
The `onNodeContextMenu` callback fires with the mouse event and the node data. Wrap TreeNav in `ContextMenu.Trigger` to let the ContextMenu handle positioning and open/close — the callback just tracks which node was right-clicked so you can render different menu items for files vs folders.
|
|
186
|
+
|
|
144
187
|
## IDE Layout Example
|
|
145
188
|
|
|
146
189
|
Pair with `@particle-academy/fancy-code` for a full IDE:
|
package/package.json
CHANGED