import { Layout, Playground, PlaygroundTitle, Attributes } from 'lib/components'
import { Table, Spacer, Code, Text, Button } from 'components'

export const meta = {
  title: '表格 Table',
  group: '数据展示',
}

## Table / 表格

以规则的表格显示数据集。

<Playground
  desc="显示规则化的行和列。"
  scope={{ Table }}
  code={`
() => {
  const data = [
    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },
    { property: 'Component', description: 'DOM element to use', type: 'string', default: '-' },
    { property: 'bold', description: 'Bold style', type: 'boolean', default: 'true' },
  ]
  return (
    <Table data={data}>
      <Table.Column prop="property" label="property" />
      <Table.Column prop="description" label="description" />
      <Table.Column prop="type" label="type" />
      <Table.Column prop="default" label="default" />
    </Table>
  )
}
`}
/>

<Playground
  title="组合"
  desc="在表格中显示其他组件。"
  scope={{ Table, Code, Text }}
  code={`
() => {
  const data = [
    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },
    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },
    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },
  ]
  return (
    <Table data={data}>
      <Table.Column prop="property" label="property" />
      <Table.Column prop="description" label="description" />
      <Table.Column prop="type" label="type" />
      <Table.Column prop="default" label="default" />
    </Table>
  )
}
`}
/>

<Playground
  title="宽度"
  desc="为任意列指定宽度，剩下列会自动适应。"
  scope={{ Table, Code, Text }}
  code={`
() => {
  const data = [
    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },
    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },
    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },
  ]
  return (
    <Table data={data}>
      <Table.Column prop="property" label="property" width={50} />
      <Table.Column prop="description" label="description" />
      <Table.Column prop="type" label="type" />
      <Table.Column prop="default" label="default" />
    </Table>
  )
}
`}
/>

<Playground
  title="操作"
  desc="显示自定义的按钮并操作数据，任何更改会立刻呈现。"
  scope={{ Table, Text, Button }}
  code={`
() => {
  const dataSource = [
    { property: 'type', description: 'Content type', operation: '' },
    { property: 'Component', description: 'DOM element to use', operation: '' },
    { property: <Text b>bold</Text>, description: 'Bold style', operation: '' },
  ]
  const [data, setData] = React.useState(dataSource)
  const renderAction = (value, rowData, index) => {
    const removeHandler = () => {
      setData(last => last.filter((_, dataIndex) => dataIndex !== index))
    }
    return (
      <Button type="error" auto scale={1/3} font="12px" onClick={removeHandler}>Remove</Button>
    )
  }
  return (
  <Table data={data} onChange={value => setData(value)}>
    <Table.Column prop="property" label="property" />
    <Table.Column prop="description" label="description" />
    <Table.Column prop="operation" label="operation" width={150} render={renderAction} />
  </Table>
  )
}
`}
/>

<Playground
  title="更新行"
  desc="你可以更新指定的行数据。"
  scope={{ Table, Text, Button }}
  code={`
() => {
  const dataSource = [
    { property: 'type', description: 'Content type', operation: '' },
    { property: 'Component', description: 'DOM element to use', operation: '' },
    { property: <Text b>bold</Text>, description: 'Bold style', operation: '' },
  ]
  const [data, setData] = React.useState(dataSource)
  const renderAction = (value, rowData, rowIndex) => {
    const updateHandler = () => {
      setData(last => {
        return last.map((item, dataIndex) => {
          if (dataIndex !== rowIndex) return item
          return {
            ...item,
            property: Math.random().toString(16).slice(-5)
          }
        })
      })
    }
    return (
      <Button type="secondary" auto scale={1/3} font="12px" onClick={updateHandler}>Update</Button>
    )
  }
  return (
    <Table data={data} onChange={value => setData(value)}>
      <Table.Column prop="property" label="property" />
      <Table.Column prop="description" label="description" />
      <Table.Column prop="operation" label="operation" width={150} render={renderAction} />
    </Table>
  )
}
`}
/>

<Playground
  title="定制头"
  scope={{ Table, Code, Text }}
  code={`
() => {
  const data = [
    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },
    { property: 'Component', description: 'DOM element to use', type: <Code>string</Code>, default: '-' },
    { property: <Text b>bold</Text>, description: 'Bold style', type: <Code>boolean</Code>, default: <Code>true</Code> },
  ]
  return (
    <Table data={data}>
      <Table.Column prop="property" label="property" />
      <Table.Column prop="description" label="description" />
      <Table.Column prop="type">
        <Code>type</Code>
      </Table.Column>
      <Table.Column prop="default">
        <Text b>default</Text>
      </Table.Column>
    </Table>
  )
}
`}
/>

<PlaygroundTitle title="TypeScript 示例" desc="在 TS 中通过指定泛型获得更好的体验。" />

```tsx
type User = {
  name: string
  role: string
  records: Array<{ date: string }>
}
const renderHandler: TableColumnRender<User> = (value, rowData, index) => {
  return <div>{rowData.date}</div>
}
const data: Array<User> = [
  { name: 'witt', role: 'admin', records: [{ date: '2021-05-01' }] },
]

const MyComponent = () => (
  <Table<User> data={data}>
    <Table.Column<User> prop="name" label="用户名" />
    <Table.Column<User> prop="role" label="角色" />
    <Table.Column<User> prop="records" label="记录" render={renderHandler} />
  </Table>
)
```

<Attributes edit="/pages/zh-cn/components/table.mdx">
<Attributes.Title>Table.Props</Attributes.Title>

| 属性             | 描述                   | 类型                                                  | 推荐值              | 默认   |
| ---------------- | ---------------------- | ----------------------------------------------------- | ------------------- | ------ |
| **data**         | 数据源                 | `Array<T>`                                            | -                   | -      |
| **initialData**  | 初始数据               | `Array<T>`                                            | -                   | `[]`   |
| **emptyText**    | 当数据为空时显示的文本 | `string`                                              | -                   | -      |
| **hover**        | 是否显示 hover 效果    | `boolean`                                             | -                   | `true` |
| **onRow**        | 行的点击事件           | [TableOnRowClick](#tableonrowclick)                   | -                   | -      |
| **onCell**       | 单元格的点击事件       | [TableOnCellClick](#tableoncellclick)                 | -                   | -      |
| **onChange**     | 数据变化的事件         | `(data: T) => void`                                   | -                   | -      |
| **rowClassName** | 为每一行设置类名       | [TableRowClassNameHandler](#tablerowclassnamehandler) | -                   | -      |
| ...              | 原生属性               | `TableHTMLAttributes`                                 | `'id', 'name', ...` | -      |

<Attributes.Title>Table.Column.Props</Attributes.Title>

| 属性             | 描述                       | 类型                                    | 推荐值 | 默认 |
| ---------------- | -------------------------- | --------------------------------------- | ------ | ---- |
| **prop**(必须的) | 列对应的数据属性           | `string`                                | -      | -    |
| **label**        | 每一列的标签文本           | `string`                                | -      | -    |
| **width**        | 指定宽度                   | `number`                                | -      | -    |
| **className**    | 指定当前列的类名           | `string`                                | -      | -    |
| **render**       | 为所有列渲染函数返回的数据 | [TableColumnRender](#tablecolumnrender) | -      | -    |

<Attributes.Title>TableOnRowClick</Attributes.Title>

```ts
type TableOnRowClick<T> = (rowData: T, rowIndex: number) => void
```

<Attributes.Title>TableOnCellClick</Attributes.Title>

```ts
type TableOnCellClick<T> = (
  value: T[keyof T],
  rowIndex: number,
  colunmIndex: number,
) => void
```

<Attributes.Title>TableRowClassNameHandler</Attributes.Title>

```ts
type TableRowClassNameHandler<T> = (rowData: T, rowIndex: number) => string
```

<Attributes.Title>TableColumnRender</Attributes.Title>

```ts
type TableColumnRender<T extends Record> = (
  value: T[keyof T],
  rowData: T,
  rowIndex: number,
) => JSX.Element | void
```

</Attributes>

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