Skip to content

Commit 4e38304

Browse files
phphephphe
committed
docs: demo
1 parent 76583cf commit 4e38304

File tree

5 files changed

+73
-189
lines changed

5 files changed

+73
-189
lines changed

‎src/App.tsx

Lines changed: 1 addition & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,174 +1 @@
1-
import React, { lazy, Suspense } from 'react';
2-
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
3-
4-
5-
function App() {
6-
// const [flatData, setflatData] = useState(() => {
7-
// const list: (typeof example_data)[] = [];
8-
// for (const { node, skip, } of traverseTreeData(example_data, 'children')) {
9-
// node.id = Math.random()
10-
// // @ts-ignore
11-
// list.push(node);
12-
// }
13-
// return list
14-
// });
15-
const [flatData, setflatData] = useImmer(() => sortFlatData([
16-
{ "id": 1, "pid": null, "name": "Root Category" },
17-
{ "id": 2, "pid": 1, "name": "Technology" },
18-
{ "id": 5, "pid": 2, "name": "Hardware" },
19-
{ "id": 10, "pid": 5, "name": "Computer Components" },
20-
{ "id": 3, "pid": 1, "name": "Science" },
21-
{ "id": 7, "pid": 3, "name": "Biology" },
22-
{ "id": 4, "pid": 2, "name": "Programming" },
23-
{ "id": 6, "pid": 3, "name": "Physics" },
24-
{ "id": 8, "pid": 4, "name": "Python" },
25-
{ "id": 9, "pid": 4, "name": "Java" },
26-
{ "id": 11, "pid": 5, "name": "Networking" },
27-
{ "id": 12, "pid": 6, "name": "Classical Mechanics" },
28-
{ "id": 13, "pid": 6, "name": "Quantum Mechanics" },
29-
{ "id": 14, "pid": 7, "name": "Genetics" },
30-
{ "id": 15, "pid": 7, "name": "Ecology" },
31-
{ "id": 16, "pid": 8, "name": "Django" },
32-
{ "id": 17, "pid": 8, "name": "JavaScript" },
33-
{ "id": 18, "pid": 9, "name": "Spring" },
34-
{ "id": 19, "pid": 9, "name": "C++" },
35-
{ "id": 20, "pid": 10, "name": "CPU" },
36-
{ "id": 21, "pid": 10, "name": "RAM" },
37-
{ "id": 22, "pid": 11, "name": "Wireless Networking" },
38-
{ "id": 23, "pid": 11, "name": "Routing" },
39-
{ "id": 24, "pid": 12, "name": "Newtonian Mechanics" },
40-
{ "id": 25, "pid": 12, "name": "Relativity" },
41-
{ "id": 26, "pid": 13, "name": "Quantum Field Theory" },
42-
{ "id": 27, "pid": 13, "name": "String Theory" },
43-
{ "id": 28, "pid": 14, "name": "DNA Structure" },
44-
{ "id": 29, "pid": 14, "name": "Gene Expression" },
45-
{ "id": 30, "pid": 15, "name": "Ecosystems" },
46-
{ "id": 31, "pid": 15, "name": "Biodiversity" },
47-
{ "id": 32, "pid": 16, "name": "Flask" },
48-
{ "id": 33, "pid": 16, "name": "React" },
49-
{ "id": 34, "pid": 17, "name": "Node.js" },
50-
{ "id": 35, "pid": 17, "name": "Angular" },
51-
{ "id": 36, "pid": 18, "name": "Maven" },
52-
{ "id": 37, "pid": 18, "name": "Hibernate" },
53-
{ "id": 38, "pid": 19, "name": "Object-Oriented Programming" },
54-
{ "id": 39, "pid": 19, "name": "Data Structures" },
55-
{ "id": 40, "pid": 20, "name": "GPU" },
56-
{ "id": 41, "pid": 20, "name": "Motherboard" },
57-
{ "id": 42, "pid": 21, "name": "DDR4" },
58-
{ "id": 43, "pid": 21, "name": "DDR5" },
59-
{ "id": 44, "pid": 22, "name": "Wi-Fi" },
60-
{ "id": 45, "pid": 22, "name": "Bluetooth" },
61-
{ "id": 46, "pid": 23, "name": "IP Addressing" },
62-
{ "id": 47, "pid": 23, "name": "Firewall" },
63-
{ "id": 48, "pid": 24, "name": "Gravitation" },
64-
{ "id": 49, "pid": 24, "name": "Orbital Mechanics" },
65-
{ "id": 50, "pid": 25, "name": "General Relativity" },
66-
{ "id": 51, "pid": 25, "name": "Special Relativity" },
67-
{ "id": 52, "pid": 26, "name": "Quantum Entanglement" },
68-
{ "id": 53, "pid": 26, "name": "Quantum Superposition" },
69-
{ "id": 54, "pid": 27, "name": "Quantum Strings" },
70-
{ "id": 55, "pid": 27, "name": "Superstring Theory" },
71-
{ "id": 56, "pid": 28, "name": "RNA Structure" },
72-
{ "id": 57, "pid": 28, "name": "Mutation" },
73-
{ "id": 58, "pid": 29, "name": "Genome Mapping" },
74-
{ "id": 59, "pid": 29, "name": "Genetic Engineering" },
75-
{ "id": 60, "pid": 30, "name": "Forest Ecosystems" },
76-
{ "id": 61, "pid": 30, "name": "Desert Ecosystems" },
77-
{ "id": 62, "pid": 31, "name": "Species Richness" },
78-
{ "id": 63, "pid": 31, "name": "Ecological Succession" },
79-
{ "id": 64, "pid": 32, "name": "API Development" },
80-
{ "id": 65, "pid": 32, "name": "Web Development" },
81-
{ "id": 66, "pid": 33, "name": "React Native" },
82-
{ "id": 67, "pid": 33, "name": "Vue.js" },
83-
{ "id": 68, "pid": 34, "name": "Express.js" },
84-
{ "id": 69, "pid": 34, "name": "Sails.js" },
85-
{ "id": 70, "pid": 35, "name": "RxJS" },
86-
{ "id": 71, "pid": 35, "name": "Dart" },
87-
{ "id": 72, "pid": 36, "name": "Ant" },
88-
{ "id": 73, "pid": 36, "name": "Gradle" },
89-
{ "id": 74, "pid": 37, "name": "JPA" },
90-
{ "id": 75, "pid": 37, "name": "MyBatis" },
91-
{ "id": 76, "pid": 38, "name": "Inheritance" },
92-
{ "id": 77, "pid": 38, "name": "Polymorphism" },
93-
{ "id": 78, "pid": 39, "name": "Arrays" },
94-
{ "id": 79, "pid": 39, "name": "Linked Lists" },
95-
{ "id": 80, "pid": 40, "name": "Graphics Card" },
96-
{ "id": 81, "pid": 40, "name": "CUDA" },
97-
{ "id": 82, "pid": 41, "name": "ATX" },
98-
{ "id": 83, "pid": 41, "name": "ITX" },
99-
{ "id": 84, "pid": 42, "name": "Latency" },
100-
{ "id": 85, "pid": 42, "name": "Bandwidth" },
101-
{ "id": 86, "pid": 43, "name": "DDR5X" },
102-
{ "id": 87, "pid": 43, "name": "GDDR6" },
103-
{ "id": 88, "pid": 44, "name": "5G" },
104-
{ "id": 89, "pid": 44, "name": "Mesh Networking" },
105-
{ "id": 90, "pid": 45, "name": "Wireless Mouse" },
106-
{ "id": 91, "pid": 45, "name": "Wireless Keyboard" },
107-
{ "id": 92, "pid": 46, "name": "IPv4" },
108-
{ "id": 93, "pid": 46, "name": "IPv6" },
109-
{ "id": 94, "pid": 47, "name": "Network Firewall" },
110-
{ "id": 95, "pid": 47, "name": "Application Firewall" },
111-
{ "id": 96, "pid": 48, "name": "Kepler's Laws" },
112-
{ "id": 97, "pid": 48, "name": "Newton's Law of Universal Gravitation" },
113-
{ "id": 98, "pid": 49, "name": "Hohmann Transfer Orbit" },
114-
{ "id": 99, "pid": 49, "name": "Geostationary Orbit" },
115-
{ "id": 100, "pid": 50, "name": "Black Holes" },
116-
{ "id": 101, "pid": 50, "name": "Wormholes" }
117-
], 'id', 'pid'));
118-
const updateOpen = (id, open) => {
119-
let ids = [...openIds];
120-
if (open) {
121-
ids.push(id)
122-
} else {
123-
ids.splice(ids.indexOf(id), 1)
124-
}
125-
setopenIds(ids)
126-
}
127-
const toggleCheck = (id, checked) => {
128-
let newIds = updateCheckedInFlatData(flatData, checkedIds, id, checked, { parentIdKey: 'pid' })[0];
129-
setcheckedIds(newIds)
130-
}
131-
const [openIds, setopenIds] = useState([1, 2, 4]);
132-
const [checkedIds, setcheckedIds] = useState([4]);
133-
const t = useHeTree({
134-
data: flatData,
135-
dataType: 'flat',
136-
renderNode: ({ id, node, open, checked }) => <div>
137-
<button onClick={() => { updateOpen(id, !open) }}>{open ? '-' : '+'}</button>
138-
<input type="checkbox" checked={Boolean(checked)} onChange={() => { toggleCheck(id, !checked) }} />
139-
{node?.name}
140-
</div>,
141-
onChange: setflatData,
142-
parentIdKey: 'pid',
143-
openIds,
144-
checkedIds,
145-
})
146-
147-
// const renderNode = ({ node, dragOvering, setOpen, setChecked, draggable, onDragStart }) => <div>
148-
// <div>
149-
// <button draggable={draggable} onDragStart={onDragStart}>x</button>
150-
// <button onClick={() => setOpen(!node.open)}>{node.open ? '-' : '+'}</button>
151-
// <input type="checkbox" checked={node.checked || false} onChange={(e) => setChecked(e.target.checked)} />
152-
// {node.text}
153-
// </div>
154-
// </div>
155-
return (
156-
<>
157-
<div className='text-center'>
158-
<b>@he-tree/react</b>
159-
<a className='ml-10' href="https://github.com/phphe/he-tree-react">Github</a>
160-
</div>
161-
<div className='grid grid-cols-3 gap-4'>
162-
<div>
163-
{t.renderHeTree()}
164-
</div>
165-
<div>
166-
</div>
167-
<div>
168-
</div>
169-
</div >
170-
</>
171-
)
172-
}
173-
174-
export default App
1+
// this file is not used

‎src/PageLayout.tsx

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,34 @@
1-
import React from "react";
2-
export default function PageLayout(props: { children: React.ReactNode }) {
1+
import React, { useState } from "react";
2+
import { useRoutes, Link, NavLink, Outlet } from "react-router-dom";
3+
export default function PageLayout(props: {}) {
4+
const [menu, setmenu] = useState(() => [
5+
{
6+
title: 'Home',
7+
path: '/',
8+
},
9+
{
10+
title: 'Base Tree with Tree Data',
11+
path: '/base_tree_data',
12+
},
13+
{
14+
title: 'Base Tree with Flat Data',
15+
path: '/base_flat_data',
16+
},
17+
]);
18+
319
return <div className="page-layout">
4-
{props.children}
20+
<Outlet />
21+
<div className="main-menu fixed top-1 right-2 px-4 py-4 bg-gray-200 text-right max-sm:hidden">
22+
{menu.map((item, index) => <div key={index} className="menu-item py-1">
23+
<NavLink to={item.path}>{item.title}</NavLink>
24+
</div>
25+
)}
26+
</div>
527
<style>{`
628
body{
729
margin: 0;
830
background-color: #fff9e6;
9-
}
31+
}
1032
`}</style>
1133
</div>
1234
}

‎src/main.tsx

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,35 @@ import PageLayout from './PageLayout.tsx';
1010
// router
1111
const Pages = {
1212
home: lazy(() => import("./pages/index.tsx")),
13-
base_tree_data: lazy(() => import("./pages/base_tree_data.tsx"))
13+
base_tree_data: lazy(() => import("./pages/base_tree_data.tsx")),
14+
base_flat_data: lazy(() => import("./pages/base_flat_data.tsx"))
1415
}
1516
const router = createHashRouter([
1617
{
1718
path: "/",
18-
element: <Pages.home />,
19-
},
20-
{
21-
path: "/base_tree_data",
22-
element: <Pages.base_tree_data />,
19+
element: <PageLayout />,
20+
children: [
21+
{
22+
path: "/",
23+
element: <Pages.home />
24+
},
25+
{
26+
path: "/base_tree_data",
27+
element: <Pages.base_tree_data />,
28+
},
29+
{
30+
path: "/base_flat_data",
31+
element: <Pages.base_flat_data />,
32+
}
33+
]
2334
},
2435
]);
2536

2637
ReactDOM.createRoot(document.getElementById('root')!).render(
2738
<React.StrictMode>
2839
{/* <App /> */}
29-
<PageLayout>
30-
<Suspense fallback={<span>loading</span>}>
31-
<RouterProvider router={router} />
32-
</Suspense>
33-
</PageLayout>
40+
<Suspense fallback={<span>loading</span>}>
41+
<RouterProvider router={router} />
42+
</Suspense>
3443
</React.StrictMode>,
3544
)

‎src/pages/base_flat_data.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createFlatData } from './_data'
2+
import { useHeTree, sortFlatData } from "../../lib/index";
3+
import { useState } from 'react';
4+
5+
export default function BasePage() {
6+
const [data, setdata] = useState(() => sortFlatData(createFlatData()));
7+
const { renderHeTree } = useHeTree({
8+
data,
9+
dataType: 'flat',
10+
idKey: 'id',
11+
parentIdKey: 'parent_id',
12+
onChange: setdata,
13+
renderNode: ({ id, node, open, checked }) => <div>
14+
{node.name}
15+
</div>,
16+
})
17+
return <div>
18+
{renderHeTree()}
19+
</div>
20+
}

‎uno.config.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,10 @@ import { presetWind } from "unocss";
33

44
export default defineConfig({
55
presets: [presetWind()],
6+
rules: [
7+
[/^top-([\.\d]+)$/, ([_, num]) => ({ top: `${num}px` })],
8+
[/^right-([\.\d]+)$/, ([_, num]) => ({ right: `${num}px` })],
9+
[/^bottom-([\.\d]+)$/, ([_, num]) => ({ bottom: `${num}px` })],
10+
[/^left-([\.\d]+)$/, ([_, num]) => ({ left: `${num}px` })],
11+
],
612
});

0 commit comments

Comments
 (0)