import { Layout, Playground, Attributes } from 'lib/components'
import { Tree, useToasts } from 'components'

export const meta = {
  title: '文件树 File Tree',
  group: '数据展示',
}

## File-Tree / 文件树

使用树结构展示文件与文件夹列表。

<Playground
  title="Basic"
  desc="所有的文件和文件夹都会被自动排序以便于浏览。"
  scope={{ Tree }}
  code={`
<Tree>
  <Tree.File name="package.json" />
  <Tree.Folder name="components">
    <Tree.File name="layout.js" />
    <Tree.Folder name="footer">
      <Tree.File name="footer.js" />
      <Tree.File name="footer-text.js" />
      <Tree.File name="footer-license.js" />
    </Tree.Folder>
    <Tree.File name="header.js" />
  </Tree.Folder>
  <Tree.File name="readme.md" />
</Tree>
`}
/>

<Playground
  title="命令式"
  desc="使用 `value` 属性渲染一组数据。"
  scope={{ Tree }}
  code={`
() => {
  const files = [{
    type: 'directory',
    name: 'bin',
    files: [{
      type: 'file',
      name: 'cs.js',
    }],
  }, {
    type: 'directory',
    name: 'docs',
    files: [{
      type: 'file',
      name: 'controllers.md',
    }, {
      type: 'file',
      name: 'es6.md',
    }, {
      type: 'file',
      name: 'production.md',
    }, {
      type: 'file',
      name: 'views.md',
    }],
  }]
  return <Tree value={files} />
}
`}
/>

<Playground
  title="额外信息"
  desc="在文件树中渲染额外的信息。"
  scope={{ Tree }}
  code={`
() => {
  const files = [{
    type: 'directory',
    name: 'controllers',
    extra: '1 file',
    files: [{
      type: 'file',
      name: 'cs.js',
      extra: '1kb',
    }],
  }, {
    type: 'directory',
    name: 'docs',
    extra: '2 files',
    files: [{
      type: 'file',
      name: 'controllers.md',
      extra: '2.5kb',
    }, {
      type: 'file',
      name: 'es6.md',
      extra: '2.9kb',
    }],
  }, {
     type: 'file',
     name: 'production.md',
     extra: '0.8kb',
   }, {
     type: 'file',
     name: 'views.md',
     extra: '8.1kb',
   }]
  return <Tree value={files} />
}
`}
/>

<Playground
  title="事件"
  desc="当文件被点击时会报告层级与路径。"
  scope={{ Tree, useToasts }}
  code={`
() => {
  const [_, setToast] = useToasts()
  const handler = path => setToast({ text: path })
  return (
    <Tree onClick={handler}>
      <Tree.Folder name="components">
        <Tree.File name="layout.js" />
        <Tree.File name="layout.js" />
        <Tree.Folder name="footer">
          <Tree.File name="footer.js" />
          <Tree.File name="footer-text.js" />
          <Tree.File name="footer-license.js" />
        </Tree.Folder>
      </Tree.Folder>
      <Tree.File name="package.json" />
      <Tree.File name="readme.md" />
    </Tree>
  )
}
`}
/>

<Attributes edit="/pages/zh-cn/components/file-tree.mdx">
<Attributes.Title>Tree.Props</Attributes.Title>

| 属性              | 描述           | 类型                                         | 推荐值                            | 默认    |
| ----------------- | -------------- | -------------------------------------------- | --------------------------------- | ------- |
| **value**         | 文件的集合数据 | [Array<FileTreeValue\>](#type-filetreevalue) | -                                 | -       |
| **initialExpand** | 默认是否展开   | `boolean`                                    | -                                 | `false` |
| **onClick**       | 文件点击事件   | `(path: string) => void`                     | -                                 | -       |
| ...               | 原生属性       | `HTMLAttributes`                             | `'id', 'title', 'className', ...` | -       |

<Attributes.Title>Tree.File.Props</Attributes.Title>

| 属性             | 描述         | 类型             | 推荐值                            | 默认 |
| ---------------- | ------------ | ---------------- | --------------------------------- | ---- |
| **name**(必须的) | 文件名       | `string`         | -                                 | -    |
| **extra**        | 额外文本信息 | `string`         | -                                 | -    |
| ...              | 原生属性     | `HTMLAttributes` | `'id', 'title', 'className', ...` | -    |

<Attributes.Title>Tree.Folder.Props</Attributes.Title>

| 属性             | 描述           | 类型             | 推荐值                            | 默认 |
| ---------------- | -------------- | ---------------- | --------------------------------- | ---- |
| **name**(必须的) | 文件夹名       | `string`         | -                                 | -    |
| **extra**        | 额外的文本信息 | `string`         | -                                 | -    |
| ...              | 原生属性       | `HTMLAttributes` | `'id', 'title', 'className', ...` | -    |

<Attributes.Title>type FileTreeValue</Attributes.Title>

```ts
type FileTreeValue = {
  type: 'directory' || 'file'
  name: string
  extra?: string
  files?: Array<FileTreeValue>
}
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
