import { Layout, Playground, Attributes } from 'lib/components'
import GitIcon from '@geist-ui/icons/github'
import { Input, Spacer, Button, Code, Text, Dot } from 'components'

export const meta = {
  title: '输入框 Input',
  group: '数据录入',
}

## Input / 输入框

处理用户的输入数据。

输入框组件包含额外的 Hooks，详情请参阅 [useInput](/zh-cn/hooks/use-input) 小节。

<Playground
  desc="基础的输入字段。"
  scope={{ Input }}
  code={`
<Input placeholder="一个基础示例" />
`}
/>

<Playground
  title="大小"
  desc="不同大小的输入框。"
  scope={{ Input, Spacer }}
  code={`
<>
  <Input scale={1/3} placeholder="Scale 1/3" /> <Spacer h={.5} />
  <Input scale={2/3} placeholder="Scale 2/3" /> <Spacer h={.5} />
  <Input placeholder="Scale 1" /> <Spacer h={.5} />
  <Input scale={4/3} placeholder="Scale 4/3" />
</>
`}
/>

<Playground
  title="宽度"
  desc="手动地设置宽度，或其他样式。"
  scope={{ Input }}
  code={`
<Input placeholder="一个基础示例" width="100%" />
`}
/>

<Playground
  title="不可交互地"
  desc="禁用输入框地所有交互效果。"
  scope={{ Input, Spacer }}
  code={`
<>
  <Input disabled placeholder="禁用" />
  <Spacer h={.5} />
  <Input readOnly initialValue="只读" />
</>
`}
/>

<Playground
  title="行内标签"
  desc="在输入框内显示短小地行内文本。"
  scope={{ Input, Spacer }}
  code={`
<>
  <Input label="用户名" placeholder="一个基础示例" />
  <Spacer h={.5} />
  <Input labelRight=".com" placeholder="https://github" />
</>
`}
/>

<Playground
  title="块级标签"
  desc="为标签自定义更多样式。"
  scope={{ Input, Spacer, Text, Code, Dot }}
  code={`
<>
  <Input placeholder="小维特">
    用户名
  </Input>
  <Spacer />
  <Input placeholder="文章标题" width="50%">
    <Text h3>标题</Text>
  </Input>
  <Spacer />
  <Input placeholder="GitHub Actions" width="50%">
    <Dot type="warning">
      <Text small><Code>部署</Code> 问题详情</Text>
    </Dot>
  </Input>
</>
`}
/>

<Playground
  title="状态"
  desc="用色彩区分不同的状态。"
  scope={{ Input, Spacer }}
  code={`
<>
  <Input type="secondary" initialValue="次要" />
  <Spacer h={.5} />
  <Input type="success" initialValue="成功" />
  <Spacer h={.5} />
  <Input type="warning" initialValue="警告" />
  <Spacer h={.5} />
  <Input type="error" initialValue="包含错误" />
</>
`}
/>

<Playground
  title="图标"
  desc="指定一个图标组件。"
  scope={{ Input, GitIcon, Spacer }}
  code={`
<>
  <Input icon={<GitIcon />} placeholder="输入 Git 地址" />
  <Spacer h={.5} />
  <Input iconRight={<GitIcon />} placeholder="输入 Git 地址" />
</>
`}
/>

<Playground
  title="密码"
  desc="显示或隐藏密码文本。"
  scope={{ Input }}
  code={`
<Input.Password initialValue="123456abc" />
`}
/>

<Playground
  title="清除按钮"
  desc="在输入框内增加一个用于清除文本的按钮。"
  scope={{ Input }}
  code={`
<>
  <Input clearable initialValue="示例文字" placeholder="输入文本" />
</>
`}
/>

<Playground
  title="变化事件"
  desc="捕获输入框的文本变化。"
  scope={{ Input }}
  code={`
() => {
  const [value, setValue] = React.useState()
  const handler = (e) => {
    setValue(e.target.value)
    console.log(e.target.value)
  }
  return (
    <Input value={value} onChange={handler} placeholder="一个基础示例" />
  )
}
`}
/>

<Playground
  title="命令式 API"
  desc="使用非受控方式更新组件。"
  scope={{ Input, Spacer, Button }}
  code={`
() => {
  const ref = React.useRef(null)
  const setChange = () => {
    ref && (ref.current.value = Math.random().toString(32))
  }
  return (
    <>
      <Input initialValue="Hello" onChange={e => console.log(e.target.value)} ref={ref} />
      <Spacer h={.5} />
      <Button auto type="secondary" scale={1/3} onClick={setChange}>设置值</Button>
    </>
  )
}
`}
/>

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

| 属性              | 描述                  | 类型                                           | 推荐值                    | 默认      |
| ----------------- | --------------------- | ---------------------------------------------- | ------------------------- | --------- |
| **value**         | 命令式设定输入框的值  | `string`                                       | -                         | -         |
| **initialValue**  | 初始值                | `string`                                       | -                         | -         |
| **placeholder**   | 占位文本              | `string`                                       | -                         | -         |
| **type**          | 输入框状态            | `InputTypes`                                   | [InputTypes](#inputtypes) | `default` |
| **htmlType**      | 原生 HTML `type` 属性 | `string`                                       | -                         | `text`    |
| **readOnly**      | 是否设置输入框为只读  | `boolean`                                      | -                         | `false`   |
| **disabled**      | 是否禁用输入框        | `boolean`                                      | -                         | `false`   |
| **clearable**     | 是否展示清除按钮      | `boolean`                                      | -                         | `false`   |
| **label**         | 文本标签              | `string`                                       | -                         | -         |
| **icon**          | 输入框图标            | `React.ReactNode`                              | -                         | -         |
| **labelRight**    | 居于右侧的文本标签    | `string`                                       | -                         | -         |
| **iconRight**     | 居于右侧的图标        | `React.ReactNode`                              | -                         | -         |
| **iconClickable** | 图标是否可点击        | `boolean`                                      | -                         | `false`   |
| **onIconClick**   | 图标点击事件          | `(e: React.ChangeEvent) => void`               | -                         | -         |
| **onChange**      | 输入框变化事件        | `(e: React.ChangeEvent) => void`               | -                         | -         |
| **onClearClick**  | 清除按钮的点击事件    | `(e: React.MouseEvent) => void`                | -                         | -         |
| **ref**           | 转发的原生输入框 Ref  | <Code>Ref<HTMLInputElement &#124; null></Code> | -                         | -         |
| ...               | 原生属性              | `InputHTMLAttributes`                          | `'id', 'className', ...`  | -         |

<Attributes.Title>Input.Password.Props</Attributes.Title>

| 属性           | 描述               | 类型          | 推荐值                      | 默认    |
| -------------- | ------------------ | ------------- | --------------------------- | ------- |
| **hideToggle** | 隐藏切换密码的按钮 | `boolean`     | -                           | `false` |
| ...            | 输入框组件属性     | `Input.Props` | [Input.Props](#input.props) | -       |

<Attributes.Title>InputTypes</Attributes.Title>

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

</Attributes>

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