Skip to content

Commit 2ec6f58

Browse files
segunadebayosegunadebayo
committed
docs: add tree lazy mount example
1 parent 743db13 commit 2ec6f58

File tree

16 files changed

+686
-315
lines changed

16 files changed

+686
-315
lines changed

‎packages/react/src/components/tree-view/examples/basic.tsx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,6 @@
11
import { TreeView, createTreeCollection } from '@ark-ui/react/tree-view'
22
import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-react'
33

4-
interface Node {
5-
id: string
6-
name: string
7-
children?: Node[] | undefined
8-
}
9-
10-
const collection = createTreeCollection<Node>({
11-
nodeToValue: (node) => node.id,
12-
nodeToString: (node) => node.name,
13-
rootNode: {
14-
id: 'ROOT',
15-
name: '',
16-
children: [
17-
{
18-
id: 'node_modules',
19-
name: 'node_modules',
20-
children: [
21-
{ id: 'node_modules/zag-js', name: 'zag-js' },
22-
{ id: 'node_modules/pandacss', name: 'panda' },
23-
{
24-
id: 'node_modules/@types',
25-
name: '@types',
26-
children: [
27-
{ id: 'node_modules/@types/react', name: 'react' },
28-
{ id: 'node_modules/@types/react-dom', name: 'react-dom' },
29-
],
30-
},
31-
],
32-
},
33-
{
34-
id: 'src',
35-
name: 'src',
36-
children: [
37-
{ id: 'src/app.tsx', name: 'app.tsx' },
38-
{ id: 'src/index.ts', name: 'index.ts' },
39-
],
40-
},
41-
{ id: 'panda.config', name: 'panda.config.ts' },
42-
{ id: 'package.json', name: 'package.json' },
43-
{ id: 'renovate.json', name: 'renovate.json' },
44-
{ id: 'readme.md', name: 'README.md' },
45-
],
46-
},
47-
})
48-
494
export const Basic = () => {
505
return (
516
<TreeView.Root collection={collection}>
@@ -92,3 +47,48 @@ const TreeNode = (props: TreeView.NodeProviderProps<Node>) => {
9247
</TreeView.NodeProvider>
9348
)
9449
}
50+
51+
interface Node {
52+
id: string
53+
name: string
54+
children?: Node[] | undefined
55+
}
56+
57+
const collection = createTreeCollection<Node>({
58+
nodeToValue: (node) => node.id,
59+
nodeToString: (node) => node.name,
60+
rootNode: {
61+
id: 'ROOT',
62+
name: '',
63+
children: [
64+
{
65+
id: 'node_modules',
66+
name: 'node_modules',
67+
children: [
68+
{ id: 'node_modules/zag-js', name: 'zag-js' },
69+
{ id: 'node_modules/pandacss', name: 'panda' },
70+
{
71+
id: 'node_modules/@types',
72+
name: '@types',
73+
children: [
74+
{ id: 'node_modules/@types/react', name: 'react' },
75+
{ id: 'node_modules/@types/react-dom', name: 'react-dom' },
76+
],
77+
},
78+
],
79+
},
80+
{
81+
id: 'src',
82+
name: 'src',
83+
children: [
84+
{ id: 'src/app.tsx', name: 'app.tsx' },
85+
{ id: 'src/index.ts', name: 'index.ts' },
86+
],
87+
},
88+
{ id: 'panda.config', name: 'panda.config.ts' },
89+
{ id: 'package.json', name: 'package.json' },
90+
{ id: 'renovate.json', name: 'renovate.json' },
91+
{ id: 'readme.md', name: 'README.md' },
92+
],
93+
},
94+
})

‎packages/react/src/components/tree-view/examples/lazy-mount.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { TreeView, createTreeCollection } from '@ark-ui/react/tree-view'
2+
import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-react'
3+
4+
export const LazyMount = () => {
5+
return (
6+
<TreeView.Root collection={collection} lazyMount unmountOnExit>
7+
<TreeView.Label>Tree</TreeView.Label>
8+
<TreeView.Tree>
9+
{collection.rootNode.children?.map((node, index) => <TreeNode key={node.id} node={node} indexPath={[index]} />)}
10+
</TreeView.Tree>
11+
</TreeView.Root>
12+
)
13+
}
14+
15+
const TreeNode = (props: TreeView.NodeProviderProps<Node>) => {
16+
const { node, indexPath } = props
17+
return (
18+
<TreeView.NodeProvider key={node.id} node={node} indexPath={indexPath}>
19+
{node.children ? (
20+
<TreeView.Branch>
21+
<TreeView.BranchControl>
22+
<TreeView.BranchText>
23+
<FolderIcon /> {node.name}
24+
</TreeView.BranchText>
25+
<TreeView.BranchIndicator>
26+
<ChevronRightIcon />
27+
</TreeView.BranchIndicator>
28+
</TreeView.BranchControl>
29+
<TreeView.BranchContent>
30+
<TreeView.BranchIndentGuide />
31+
{node.children.map((child, index) => (
32+
<TreeNode key={child.id} node={child} indexPath={[...indexPath, index]} />
33+
))}
34+
</TreeView.BranchContent>
35+
</TreeView.Branch>
36+
) : (
37+
<TreeView.Item>
38+
<TreeView.ItemIndicator>
39+
<CheckSquareIcon />
40+
</TreeView.ItemIndicator>
41+
<TreeView.ItemText>
42+
<FileIcon />
43+
{node.name}
44+
</TreeView.ItemText>
45+
</TreeView.Item>
46+
)}
47+
</TreeView.NodeProvider>
48+
)
49+
}
50+
51+
interface Node {
52+
id: string
53+
name: string
54+
children?: Node[] | undefined
55+
}
56+
57+
const collection = createTreeCollection<Node>({
58+
nodeToValue: (node) => node.id,
59+
nodeToString: (node) => node.name,
60+
rootNode: {
61+
id: 'ROOT',
62+
name: '',
63+
children: [
64+
{
65+
id: 'node_modules',
66+
name: 'node_modules',
67+
children: [
68+
{ id: 'node_modules/zag-js', name: 'zag-js' },
69+
{ id: 'node_modules/pandacss', name: 'panda' },
70+
{
71+
id: 'node_modules/@types',
72+
name: '@types',
73+
children: [
74+
{ id: 'node_modules/@types/react', name: 'react' },
75+
{ id: 'node_modules/@types/react-dom', name: 'react-dom' },
76+
],
77+
},
78+
],
79+
},
80+
{
81+
id: 'src',
82+
name: 'src',
83+
children: [
84+
{ id: 'src/app.tsx', name: 'app.tsx' },
85+
{ id: 'src/index.ts', name: 'index.ts' },
86+
],
87+
},
88+
{ id: 'panda.config', name: 'panda.config.ts' },
89+
{ id: 'package.json', name: 'package.json' },
90+
{ id: 'renovate.json', name: 'renovate.json' },
91+
{ id: 'readme.md', name: 'README.md' },
92+
],
93+
},
94+
})

‎packages/react/src/components/tree-view/examples/root-provider.tsx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,6 @@
11
import { TreeView, createTreeCollection, useTreeView } from '@ark-ui/react/tree-view'
22
import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-react'
33

4-
interface Node {
5-
id: string
6-
name: string
7-
children?: Node[] | undefined
8-
}
9-
10-
const collection = createTreeCollection<Node>({
11-
nodeToValue: (node) => node.id,
12-
nodeToString: (node) => node.name,
13-
rootNode: {
14-
id: 'ROOT',
15-
name: '',
16-
children: [
17-
{
18-
id: 'node_modules',
19-
name: 'node_modules',
20-
children: [
21-
{ id: 'node_modules/zag-js', name: 'zag-js' },
22-
{ id: 'node_modules/pandacss', name: 'panda' },
23-
{
24-
id: 'node_modules/@types',
25-
name: '@types',
26-
children: [
27-
{ id: 'node_modules/@types/react', name: 'react' },
28-
{ id: 'node_modules/@types/react-dom', name: 'react-dom' },
29-
],
30-
},
31-
],
32-
},
33-
{
34-
id: 'src',
35-
name: 'src',
36-
children: [
37-
{ id: 'src/app.tsx', name: 'app.tsx' },
38-
{ id: 'src/index.ts', name: 'index.ts' },
39-
],
40-
},
41-
{ id: 'panda.config', name: 'panda.config.ts' },
42-
{ id: 'package.json', name: 'package.json' },
43-
{ id: 'renovate.json', name: 'renovate.json' },
44-
{ id: 'readme.md', name: 'README.md' },
45-
],
46-
},
47-
})
48-
494
export const RootProvider = () => {
505
const treeView = useTreeView({ collection })
516

@@ -94,3 +49,48 @@ const TreeNode = (props: TreeView.NodeProviderProps<Node>) => {
9449
</TreeView.NodeProvider>
9550
)
9651
}
52+
53+
interface Node {
54+
id: string
55+
name: string
56+
children?: Node[] | undefined
57+
}
58+
59+
const collection = createTreeCollection<Node>({
60+
nodeToValue: (node) => node.id,
61+
nodeToString: (node) => node.name,
62+
rootNode: {
63+
id: 'ROOT',
64+
name: '',
65+
children: [
66+
{
67+
id: 'node_modules',
68+
name: 'node_modules',
69+
children: [
70+
{ id: 'node_modules/zag-js', name: 'zag-js' },
71+
{ id: 'node_modules/pandacss', name: 'panda' },
72+
{
73+
id: 'node_modules/@types',
74+
name: '@types',
75+
children: [
76+
{ id: 'node_modules/@types/react', name: 'react' },
77+
{ id: 'node_modules/@types/react-dom', name: 'react-dom' },
78+
],
79+
},
80+
],
81+
},
82+
{
83+
id: 'src',
84+
name: 'src',
85+
children: [
86+
{ id: 'src/app.tsx', name: 'app.tsx' },
87+
{ id: 'src/index.ts', name: 'index.ts' },
88+
],
89+
},
90+
{ id: 'panda.config', name: 'panda.config.ts' },
91+
{ id: 'package.json', name: 'package.json' },
92+
{ id: 'renovate.json', name: 'renovate.json' },
93+
{ id: 'readme.md', name: 'README.md' },
94+
],
95+
},
96+
})

‎packages/react/src/components/tree-view/tree-view.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export { CheckboxTree } from './examples/checkbox-tree'
1212
export { ControlledExpanded } from './examples/controlled-expanded'
1313
export { ControlledSelected } from './examples/controlled-selected'
1414
export { Filtering } from './examples/filtering'
15+
export { LazyMount } from './examples/lazy-mount'
1516
export { Mutation } from './examples/mutation'
1617
export { RenameNode } from './examples/rename-node'
1718
export { RootProvider } from './examples/root-provider'

0 commit comments

Comments
 (0)