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.

<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="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="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 y={.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`       |
| **size**              | select component size                                 | `NormalSizes`                                       | [NormalSizes](#normalsizes)       | `medium`        |
| **icon**              | icon component                                        | `ComponentType`                                     | -                                 | `SVG Component` |
| **pure**              | remove icon component                                 | `boolean`                                           | -                                 | `false`         |
| **multiple**          | support multiple selection                            | `boolean`                                           | -                                 | `false`         |
| **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`                                 | -                                 | -               |
| ...                   | native props                                          | `HTMLAttributes`                                    | `'name', 'alt', 'className', ...` | -               |

<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` |
| ...                 | native props           | `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>
