60 lines
4.2 KiB
Plaintext
60 lines
4.2 KiB
Plaintext
|
import { Story, ArgsTable, Canvas, Meta } from "@storybook/addon-docs/blocks";
|
||
|
|
import * as stories from "./tree-menu.stories.js";
|
||
|
|
|
||
|
|
import TreeMenu from "./";
|
||
|
|
import TreeNode from "./sub-components/tree-node.js";
|
||
|
|
|
||
|
|
<Meta
|
||
|
|
title="Components/TreeMenu"
|
||
|
|
component={TreeMenu}
|
||
|
|
subcomponents={{ TreeMenu, TreeNode }}
|
||
|
|
parameters={{
|
||
|
|
source: {
|
||
|
|
code: stories.basic,
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
argTypes={{
|
||
|
|
onSelect: { action: "onSelect" },
|
||
|
|
onLoad: { action: "onLoad" },
|
||
|
|
onCheck: { action: "onCheck" },
|
||
|
|
onRightClick: { action: "onRightClick" },
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
# TreeMenu
|
||
|
|
|
||
|
|
Tree menu description
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story story={stories.basic} name="Default" />
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
<ArgsTable story="Default" />
|
||
|
|
|
||
|
|
### Usage
|
||
|
|
|
||
|
|
```js
|
||
|
|
import TreeMenu from "@appserver/components/tree-menu";
|
||
|
|
```
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<TreeMenu data={data} />
|
||
|
|
```
|
||
|
|
|
||
|
|
### Properties TreeNode
|
||
|
|
|
||
|
|
| Props | Type | Required | Values | Default | Description |
|
||
|
|
| ----------------- | :----------------: | :------: | :----: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
|
|
| `checkable` | `bool` | - | - | - | control node checkable if Tree is checkable |
|
||
|
|
| `className` | `string` | - | - | - | additional class to treeNode |
|
||
|
|
| `disableCheckbox` | `bool` | - | - | `false` | whether disable the treeNode' checkbox |
|
||
|
|
| `disabled` | `bool` | - | - | `false` | whether disabled the treeNode |
|
||
|
|
| `icon` | `element`,`func` | - | - | `false` | customize icon. When you pass component, whose render will receive full TreeNode props as component props |
|
||
|
|
| `isLeaf` | `bool` | - | - | `false` | whether it's leaf node |
|
||
|
|
| `key` | `bool` | - | - | - | it's used with tree props's (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. you'd better to set it, and it must be unique in the tree's all treeNodes |
|
||
|
|
| `style` | `object` | - | - | - | set style to treeNode |
|
||
|
|
| `title` | `string`,`element` | - | - | - | tree/subTree's title |
|
||
|
|
| `newItems` | `number` | - | - | - | The number of new elements in the node |
|
||
|
|
| `onBadgeClick` | `func` | - | - | - | call when click on badge |
|
||
|
|
| `showBadge` | `bool` | - | - | - | to display the badge |
|