import { Story, ArgsTable, Canvas, Meta } from "@storybook/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 "@docspace/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                                                                                                                                                        |