98 lines
2.4 KiB
Markdown
98 lines
2.4 KiB
Markdown
1. Home
|
|
2. Components
|
|
3. Simple Tree View
|
|
|
|
# SimpleTreeView
|
|
|
|
## Types
|
|
|
|
```typescript
|
|
interface TreeDataItem {
|
|
id: string;
|
|
name: string;
|
|
icon?: IconComponent;
|
|
selectedIcon?: IconComponent;
|
|
openIcon?: IconComponent;
|
|
children?: TreeDataItem[];
|
|
actions?: ReactNode;
|
|
onClick?: () => void;
|
|
draggable?: boolean;
|
|
droppable?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
type IconComponent = React.ComponentType<{ className?: string }>;
|
|
```
|
|
|
|
# Simple Tree View
|
|
|
|
## Props
|
|
|
|
### SimpleTreeView
|
|
|
|
| Prop | Type | Description |
|
|
| --- | --- | --- |
|
|
| data | `TreeDataItem[] | TreeDataItem` |
|
|
| initialSelectedItemId | string | Preselect an item and auto-expand ancestors |
|
|
| onSelectChange | (item?: TreeDataItem) => void | Callback when selection changes |
|
|
| expandAll | boolean | Expand all nodes initially |
|
|
| defaultNodeIcon | IconComponent | Default icon for nodes |
|
|
| defaultLeafIcon | IconComponent | Default icon for leaves |
|
|
| onDocumentDrag | (source: TreeDataItem, target: TreeDataItem) => void | Drag and drop callback |
|
|
|
|
### TreeDataItem
|
|
|
|
```ts
|
|
type TreeDataItem = {
|
|
id: string;
|
|
name: string;
|
|
icon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
openIcon?: ComponentType<SVGProps<SVGSVGElement>>;
|
|
children?: TreeDataItem[];
|
|
actions?: React.ReactNode;
|
|
onClick?: () => void;
|
|
draggable?: boolean;
|
|
droppable?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
```
|
|
|
|
- Item 1
|
|
- Item 2
|
|
- Item 3
|
|
|
|
```jsx
|
|
const data = [
|
|
{ id: '1', name: 'Item 1', icon: ArrowRight,
|
|
children: [
|
|
{ id: '2', name: 'Item 1.1', icon: AlarmClock,
|
|
children: [
|
|
{ id: '3', name: 'Item 1.1.1', icon: Ambulance },
|
|
{ id: '4', name: 'Item 1.1.2', icon: Angry },
|
|
],
|
|
},
|
|
{ id: '5', name: 'Item 1.2 (disabled)', icon: Album, disabled: true },
|
|
],
|
|
}, {
|
|
id: '6', name: 'Item 2',
|
|
children: [
|
|
{ id: '7', name: 'Item 2.1', icon: AlignCenterHorizontal },
|
|
{ id: '8', name: 'Item 2.2', icon: Blend,
|
|
children: [
|
|
{ id: '9', name: 'Item 2.2.1', icon: Bird },
|
|
{ id: '10', name: 'Item 2.2.2', icon: Biohazard,
|
|
children: [
|
|
{ id: '11', name: 'Item 2.2.2.1', icon: Cannabis },
|
|
{ id: '12', name: 'Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2 Item 2.2.2.2', icon: Cannabis }
|
|
]
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{ id: '13', name: 'Item 3' }
|
|
];
|
|
|
|
<SimpleTreeView data={treeData} className="w-[260px]" />
|
|
``` |