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

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

## Select / 选择器

显示下拉列表选框。

对话框组件包含额外的 Hooks，详情请参阅 [useModal](/zh-cn/hooks/use-modal) 小节。

<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, Spacer }}
  code={`
() => (
  <>
    <Select placeholder="Default" type="default">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="success" initialValue="1">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="warning" initialValue="2">
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
    <Spacer h={.5} />
    <Select type="error" initialValue="1">
      <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 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="`Select` 支持不携带移除图标的多选控件。"
  scope={{ Select }}
  code={`
<Select placeholder="选择框架" multiple width="200px" clearable={false} 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 h={.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`       |
| **icon**                    | 右侧图标组件                      | `ComponentType`                                     | -                       | `SVG Component` |
| **pure**                    | 隐藏右侧图标组件                  | `boolean`                                           | -                       | `false`         |
| **multiple**                | 是否支持多选                      | `boolean`                                           | -                       | `false`         |
| **clearable**               | 多选时是否展示移除图标            | `boolean`                                           | -                       | `true`          |
| **disabled**                | 禁用所有的交互                    | `boolean`                                           | -                       | `false`         |
| **onChange**                | 选项被选中所触发的事件            | <Code>(val: string &#124; string[]) => void </Code> | -                       | -               |
| **dropdownClassName**       | 下拉框的自定义类名                | `string`                                            | -                       | -               |
| **dropdownStyle**           | 下拉框的自定义样式                | `object`                                            | -                       | -               |
| **disableMatchWidth**       | 禁止 Option 跟随单选框的宽度      | `boolean`                                           | -                       | `false`         |
| **getPopupContainer**       | 下拉框渲染的父元素，默认是 `body` | `() => HTMLElement`                                 | -                       | -               |
| **onDropdownVisibleChange** | 下拉框可见性变化事件              | `(visible: boolean) => void`                        | -                       | -               |
| **ref**                     | 转发的 Ref                        | `SelectRef`                                         | [SelectRef](#selectref) | -               |
| ...                         | 原生属性                          | `HTMLAttributes`                                    | `'name', 'alt', ...`    | -               |

<Attributes.Title>SelectRef</Attributes.Title>

```ts
type SelectRef = {
  focus: () => void
  blur: () => void
  scrollTo?: (options?: ScrollToOptions) => void
}
```

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

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

</Attributes>

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