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

export const meta = {
  title: 'Select',
  group: 'Data Entry',
}

## Select

Display a dropdown list of items.

The Select contain an additional Hooks, see subsection [useModal](/en-us/hooks/use-modal) for details.

<Playground
  desc="Basic usage."
  scope={{ Select }}
  code={`
() => {
  const handler = val => console.log(val)
  return (
    <Select placeholder="Choose one" onChange={handler}>
      <Select.Option value="1">Option 1</Select.Option>
      <Select.Option value="2">Option 2</Select.Option>
    </Select>
  )
}
`}
/>

<Playground
  title="Type"
  desc="Differentiate states by color."
  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="Disabled"
  desc="Disable all options."
  scope={{ Select }}
  code={`
<Select placeholder="Choose one" disabled>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>
`}
/>

<Playground
  title="Disabled Option"
  desc="disable specified options."
  scope={{ Select }}
  code={`
<Select placeholder="Choose one">
  <Select.Option value="1" disabled>Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>
`}
/>

<Playground
  title="Without Icon"
  desc="Hide icon on right."
  scope={{ Select }}
  code={`
<Select placeholder="Choose one" pure>
  <Select.Option value="1">Option 1</Select.Option>
  <Select.Option value="2">Option 2</Select.Option>
</Select>
`}
/>

<Playground
  title="Labels"
  desc="show data as a group."
  scope={{ Select }}
  code={`
<Select placeholder="Frameworks">
  <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="Divider"
  scope={{ Select }}
  code={`
<Select placeholder="Frameworks">
  <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="Multiple"
  desc="`Select` supports multiple values to be selected."
  scope={{ Select }}
  code={`
<Select placeholder="Frameworks" 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="Multiple without clear"
  desc="`Select` supports multiple values to be selected without the clear icon."
  scope={{ Select }}
  code={`
<Select placeholder="Frameworks" 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="Compose"
  desc="Use with other components."
  scope={{ Select, Code }}
  code={`
<Select placeholder="Choose one" initialValue="1">
  <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
  <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
</Select>
`}
/>

<Playground
  title="Over width"
  desc="`Option` to show more text with adaptive width."
  scope={{ Select, Spacer }}
  code={`
<>
  <Select placeholder="Choose one" value="1" width="150px">
    <Select.Option value="1">Truncate an overly long string</Select.Option>
    <Select.Option value="2">Option 2</Select.Option>
  </Select>
  <Spacer h={.5} />
  <Select placeholder="Choose one" value="1" width="150px" disableMatchWidth>
    <Select.Option value="1">Autoscale option width when text is too long</Select.Option>
    <Select.Option value="2">Option 2</Select.Option>
  </Select>
</>
`}
/>

<Playground
  title="Set parent element"
  desc="you can specify the container for drop-down box rendering."
  scope={{ Select, Spacer, useModal, Modal, Button, Code }}
  code={`
() => {
  const { visible, setVisible, bindings } = useModal()
  return (
    <>
      <Button auto onClick={() => setVisible(true)}>Show Select</Button>
      <Modal {...bindings}>
        <Modal.Title>Modal</Modal.Title>
        <Modal.Content id="customModalSelect">
          <Select placeholder="Choose one" 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>Scroll through the content to see the changes.</p>
          <div style={{ height: '1200px' }}></div>
          <p>Scroll through the content to see the changes.</p>
        </Modal.Content>
        <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
      </Modal>
    </>
  )
}`}
/>

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

| Attribute                   | Description                                              | Type                                                | Accepted values             | Default         |
| --------------------------- | -------------------------------------------------------- | --------------------------------------------------- | --------------------------- | --------------- |
| **value**                   | selected value                                           | `string`, `string[]`                                | -                           | -               |
| **initialValue**            | initial value                                            | `string`, `string[]`                                | -                           | -               |
| **placeholder**             | placeholder string                                       | `string`                                            | -                           | -               |
| **width**                   | css width value of select                                | `string`                                            | -                           | `initial`       |
| **type**                    | current type                                             | `SelectTypes`                                       | [SelectTypes](#selecttypes) | `default`       |
| **icon**                    | icon component                                           | `ComponentType`                                     | -                           | `SVG Component` |
| **pure**                    | remove icon component                                    | `boolean`                                           | -                           | `false`         |
| **multiple**                | support multiple selection                               | `boolean`                                           | -                           | `false`         |
| **clearable**               | add clear icon on multiple selection (ignored otherwise) | `boolean`                                           | -                           | `true`          |
| **disabled**                | disable current radio                                    | `boolean`                                           | -                           | `false`         |
| **onChange**                | selected value                                           | <Code>(val: string &#124; string[]) => void </Code> | -                           | -               |
| **dropdownClassName**       | className of dropdown menu                               | `string`                                            | -                           | -               |
| **dropdownStyle**           | style of dropdown menu                                   | `object`                                            | -                           | -               |
| **disableMatchWidth**       | disable Option from follow Select width                  | `boolean`                                           | -                           | `false`         |
| **getPopupContainer**       | dropdown render parent element, the default is `body`    | `() => HTMLElement`                                 | -                           | -               |
| **onDropdownVisibleChange** | dropdown change events                                   | `(visible: boolean) => void`                        | -                           | -               |
| **ref**                     | forwardRef                                               | `SelectRef`                                         | [SelectRef](#selectref)     | -               |
| ...                         | native props                                             | `HTMLAttributes`                                    | `'name', 'alt', ...`        | -               |

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

| Attribute           | Description            | Type             | Accepted values     | Default |
| ------------------- | ---------------------- | ---------------- | ------------------- | ------- |
| **value**(required) | unique ident value     | `string`         | -                   | -       |
| **disabled**        | disable current option | `boolean`        | -                   | `false` |
| **divider**         | display a line         | `boolean`        | -                   | `false` |
| **label**           | display a group title  | `boolean`        | -                   | `false` |
| ...                 | native props           | `HTMLAttributes` | `'name', 'id', ...` | -       |

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

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

<Attributes.Title>SelectTypes</Attributes.Title>

```ts
type SelectTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```

</Attributes>

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