import { Layout, Playground, 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 operation = (actions, rowData) => {
    return <Button type="error" auto size="mini" onClick={() => actions.remove()}>移除行</Button>
  }
  const data = [
    { property: 'type', description: 'Content type', operation },
    { property: 'Component', description: 'DOM element to use', operation },
    { property: <Text b>bold</Text>, description: 'Bold style', operation },
  ]
  return (
    <Table data={data}>
      <Table.Column prop="property" label="property" />
      <Table.Column prop="description" label="description" />
      <Table.Column prop="operation" label="operation" width={150} />
    </Table>
  )
}
`}
/>

<Playground
  title="更新行"
  desc="你可以更新指定的行数据。"
  scope={{ Table, Text, Button }}
  code={`
() => {
// operation: TableOperation
  const operation = (actions, rowData) => {
    return <Button type="error" auto size="mini" onClick={() => actions.update({ property: 'updated', description:'updated' })}>Update</Button>
  }
  const data = [
    { property: 'type', description: 'Content type', operation },
    { property: 'Component', description: 'DOM element to use', operation },
    { property: <Text b>bold</Text>, description: 'Bold style', operation },
  ]
  return (
    <Table data={data}>
      <Table.Column prop="property" label="property" />
      <Table.Column prop="description" label="description" />
      <Table.Column prop="operation" label="operation" width={150} />
    </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>
  )
}
`}
/>

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

| 属性          | 描述                   | 类型                                                 | 推荐值                           | 默认   |
| ------------- | ---------------------- | ---------------------------------------------------- | -------------------------------- | ------ |
| **data**      | 数据源                 | `Array<TableDataSource<any>>`                        | -                                | -      |
| **emptyText** | 当数据为空时显示的文本 | `string`                                             | -                                | -      |
| **hover**     | 是否显示 hover 效果    | `boolean`                                            | -                                | `true` |
| **onRow**     | 行的点击事件           | `(row: any, index: number) => void`                  | -                                | -      |
| **onCell**    | 单元格的点击事件       | `(cell: any, index: number, colunm: number) => void` | -                                | -      |
| **onChange**  | 数据变化的事件         | `(data: any) => void`                                | -                                | -      |
| ...           | 原生属性               | `TableHTMLAttributes`                                | `'id', 'name', 'className', ...` | -      |

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

| 属性             | 描述             | 类型     | 推荐值 | 默认 |
| ---------------- | ---------------- | -------- | ------ | ---- |
| **prop**(必须的) | 列对应的数据属性 | `string` | -      | -    |
| **label**        | 每一列的标签文本 | `string` | -      | -    |
| **width**        | 指定宽度         | `number` | -      | -    |

</Attributes>

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