import { Layout, Playground, Attributes } from 'lib/components'
import { Select, Spacer, Code, Modal, useModal, Button } from 'components'

export const meta = {
  title: '选择器 Select',
  group: '数据录入',
}

## Select / 选择器

显示下拉列表选框。

<Playground
  scope={{ Select }}
  code={`
() => {
  const handler = val => console.log(val)
  return (
    <Select placeholder="选择工作方式" onChange={handler}>
      <Select.Option value="1">远程工作</Select.Option>
      <Select.Option value="2">线下工作</Select.Option>
    </Select>
  )
}
`}
/>

<Playground
  title="禁用"
  desc="禁用所有的交互。"
  scope={{ Select }}
  code={`
<Select placeholder="选择工作方式" disabled>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>
`}
/>

<Playground
  title="禁用选项"
  desc="禁用指定的选项。"
  scope={{ Select }}
  code={`
<Select placeholder="选择工作地点">
  <Select.Option value="1" disabled>北京</Select.Option>
  <Select.Option value="2">上海</Select.Option>
</Select>
`}
/>

<Playground
  title="无图标"
  desc="隐藏选择器右侧的图标。"
  scope={{ Select }}
  code={`
<Select placeholder="工作方式" pure>
  <Select.Option value="1">远程办公</Select.Option>
  <Select.Option value="2">线下工作</Select.Option>
</Select>
`}
/>

<Playground
  title="标签"
  desc="用标签将选项分组。"
  scope={{ Select }}
  code={`
<Select placeholder="选择框架">
  <Select.Option label>JavaScript</Select.Option>
  <Select.Option value="react">React</Select.Option>
  <Select.Option value="angular">Angular</Select.Option>
  <Select.Option label>Ruby</Select.Option>
  <Select.Option value="rails">Rails</Select.Option>
  <Select.Option value="sinatra">Sinatra</Select.Option>
</Select>
`}
/>

<Playground
  title="分割线"
  desc="在选项中加入修饰用的线条。"
  scope={{ Select }}
  code={`
<Select placeholder="选择框架">
  <Select.Option value="react">React</Select.Option>
  <Select.Option value="angular">Angular</Select.Option>
  <Select.Option divider />
  <Select.Option value="rails">Rails</Select.Option>
  <Select.Option value="sinatra">Sinatra</Select.Option>
</Select>
`}
/>

<Playground
  title="多选"
  desc="Select 组件支持同时选中多个值。"
  scope={{ Select }}
  code={`
<Select placeholder="选择框架" multiple width="200px" initialValue={['1', '3', '4', '6']}>
  <Select.Option value="1">React</Select.Option>
  <Select.Option value="2">Angular</Select.Option>
  <Select.Option value="3">Vue</Select.Option>
  <Select.Option divider />
  <Select.Option value="4">Rails</Select.Option>
  <Select.Option value="5">Sinatra</Select.Option>
  <Select.Option divider />
  <Select.Option value="6">Express</Select.Option>
  <Select.Option value="7">Koa</Select.Option>
</Select>
`}
/>

<Playground
  title="组合"
  desc="与其他组件组合使用。"
  scope={{ Select, Code }}
  code={`
<Select placeholder="选择语言" initialValue="1">
  <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
  <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
</Select>
`}
/>

<Playground
  title="超出宽度"
  desc="`Option` 可以自适应宽度以展示更多文本。"
  scope={{ Select, Spacer }}
  code={`
<>
  <Select placeholder="选择内容" value="1" width="150px">
    <Select.Option value="1">截断过程的文本内容当文本过长</Select.Option>
    <Select.Option value="2">选项 2</Select.Option>
  </Select>
  <Spacer y={.5} />
  <Select placeholder="选择内容" value="1" width="150px" disableMatchWidth>
    <Select.Option value="1">自动伸缩选项宽度以显示更多文本</Select.Option>
    <Select.Option value="2">选项 2</Select.Option>
  </Select>
</>
`}
/>

<Playground
  title="设置渲染容器"
  desc="你可以指定下拉框的元素渲染的容器。"
  scope={{ Select, Spacer, useModal, Modal, Button, Code }}
  code={`
() => {
  const { visible, setVisible, bindings } = useModal()
    return (
      <>
        <Button auto onClick={() => setVisible(true)}>显示选择器</Button>
        <Modal {...bindings}>
          <Modal.Title>Modal</Modal.Title>
          <Modal.Content id="customModalSelect">
            <Select placeholder="选择语言" initialValue="1"
              getPopupContainer={() => document.getElementById('customModalSelect')}>
              <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
              <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
            </Select>
            <p>滚动以查看下拉框的工作方式。(超出弹出层会被隐藏)</p>
            <div style={{ height: '1200px' }}></div>
            <p>滚动以查看下拉框的工作方式。</p>
          </Modal.Content>
          <Modal.Action passive onClick={() => setVisible(false)}>取消</Modal.Action>
        </Modal>
      </>
    )
}
`}
/>

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

| 属性                  | 描述                              | 类型                                                | 推荐值                            | 默认            |
| --------------------- | --------------------------------- | --------------------------------------------------- | --------------------------------- | --------------- |
| **value**             | 手动设置选择器的值                | `string`, `string[]`                                | -                                 | -               |
| **initialValue**      | 选择器初始值                      | `string`, `string[]`                                | -                                 | -               |
| **placeholder**       | 占位文本内容                      | `string`                                            | -                                 | -               |
| **width**             | 组件的 CSS 宽度值                 | `string`                                            | -                                 | `initial`       |
| **size**              | 选择器组件大小                    | `NormalSizes`                                       | [NormalSizes](#normalsizes)       | `medium`        |
| **icon**              | 右侧图标组件                      | `ComponentType`                                     | -                                 | `SVG Component` |
| **pure**              | 隐藏右侧图标组件                  | `boolean`                                           | -                                 | `false`         |
| **multiple**          | 是否支持多选                      | `boolean`                                           | -                                 | `false`         |
| **disabled**          | 禁用所有的交互                    | `boolean`                                           | -                                 | `false`         |
| **onChange**          | 选项被选中所触发的事件            | <Code>(val: string &#124; string[]) => void </Code> | -                                 | -               |
| **dropdownClassName** | 下拉框的自定义类名                | `string`                                            | -                                 | -               |
| **dropdownStyle**     | 下拉框的自定义样式                | `object`                                            | -                                 | -               |
| **disableMatchWidth** | 禁止 Option 跟随单选框的宽度      | `boolean`                                           | -                                 | `false`         |
| **getPopupContainer** | 下拉框渲染的父元素，默认是 `body` | `() => HTMLElement`                                 | -                                 | -               |
| ...                   | 原生属性                          | `HTMLAttributes`                                    | `'name', 'alt', 'className', ...` | -               |

<Attributes.Title>Select.Option.Props</Attributes.Title>

| 属性              | 描述         | 类型             | 推荐值                           | 默认    |
| ----------------- | ------------ | ---------------- | -------------------------------- | ------- |
| **value**(必须的) | 唯一鉴别值   | `string`         | -                                | -       |
| **disabled**      | 禁用当前选项 | `boolean`        | -                                | `false` |
| ...               | 原生属性     | `HTMLAttributes` | `'name', 'id', 'className', ...` | -       |

<Attributes.Title>NormalSizes</Attributes.Title>

```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```

</Attributes>

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