# PickerView 快速选择器

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/picker-view/freepass)
- 平台：PC
- 维护者：屈正巍
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[PickerView]

## 代码演示

### 基础用法

基础的pickerView组件

```jsx
import { Component } from "react";
import { constants, PickerView, PickerViewOptionGroupsType, PickerViewOptionType, PickerViewValueType, Button } from "@weapp/ui";
import { getLabel } from "@weapp/utils";

const { pickerViewClsPrefix } = constants;

const prefixCls = `${pickerViewClsPrefix}-demo-pickerView`;

type PickerViewProps = {}
type PickerViewState = {
  value: PickerViewValueType;
}

const hour: PickerViewOptionType[] = []
const minute: PickerViewOptionType[] = []

for (let i = 0; i < 24; i++) {
  const label = i + getLabel('59671', '时')
  hour.push({ value: i, label })
}

for (let i = 0; i < 60; i++) {
  const label = i + getLabel('35112', '分')
  minute.push({ value: i, label })
}

const optionGroups: PickerViewOptionGroupsType = { hour, minute }

export default class PickerViewDemo extends Component<PickerViewProps, PickerViewState> {

  constructor(props: PickerViewDemo) {
    super(props)
    this.state = { value: { hour: 10, minute: 55 } }
  }

  onChange = (value: PickerViewValueType) => {
    console.info('onChange', value)
    this.setState({ value })
  }

  handleChange = () => this.setState({ value: { hour: 1, minute: 19 } })

  handleChange2 = () => this.setState({ value: { hour: 4, minute: 16 } })

  render() {
    return (
      <div className={prefixCls}>
        <Button style={{ margin: '0 10px' }} onClick={this.handleChange}>点击切换到'1时19分'</Button>
        <Button onClick={this.handleChange2}>点击切换到'4时16分'</Button>
        <h4>基础用法</h4>
        <PickerView
          optionGroups={optionGroups}
          value={this.state.value}
          onChange={this.onChange}
        />
        <h4>初始化不滚动</h4>
        <PickerView
          optionGroups={optionGroups}
          value={this.state.value}
          onChange={this.onChange}
          initScroll={false}
        />
      </div>
    )
  }
}
```

### 自定义样式

可根据不同场景调整不同的样式

```jsx
import { Component } from "react";
import { PickerView, PickerViewOptionGroupsType, PickerViewOptionType, PickerViewValueType } from "@weapp/ui";
import { pickerViewClsPrefix } from '../../../../constants/index'
import { getLabel } from "@weapp/utils";

const prefixCls = `${pickerViewClsPrefix}-demo-pickerView`;

type PickerViewProps = {}
type PickerViewState = {
  value: PickerViewValueType;
}

const hour: PickerViewOptionType[] = []
const minute: PickerViewOptionType[] = []

for (let i = 0; i < 24; i++) {
  const label = i + getLabel('59671', '时')
  hour.push({ value: i, label })
}

for (let i = 0; i < 60; i++) {
  const label = i + getLabel('35112', '分')
  minute.push({ value: i, label })
}

const optionGroups: PickerViewOptionGroupsType = { hour, minute }

export default class PickerViewDemo extends Component<PickerViewProps, PickerViewState> {

  constructor(props: PickerViewDemo) {
    super(props)
    this.state = { value: { hour: 1, minute: 1 } }
  }

  onChange = (value: PickerViewValueType) => {
    console.info('onChange', value)
    this.setState({ value })
  }

  handleChange = () => this.setState({ value: { hour: 2, minute: 2 } })

  render() {
    return (
      <div className={prefixCls}>
        <button onClick={this.handleChange}>点击切换到'2时2分'</button>
        <PickerView
          optionGroups={optionGroups}
          style={{ width: 180, border: '1px solid #666666' }}
          columnHeight={224}
          itemHeight={32}
          value={this.state.value}
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

## API

### 类型说明：（请从@weapp/ui 中导出）

```typescript
1.每项数据类型
type PickerViewOptionType = {
  value: any;
  label: string,
  disabled?: boolean,
};
2.备选数据类型
type PickerViewOptionGroupsType = {
  [_: string]: PickerViewOptionType[];
};
3.选中/传入值类型
type PickerViewValueType = {
  [_: string]: any;
}
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| className | 自定义类名 | string | 否 |  |
| style | 自定义整个选择器的样式 | CSSProperties | 否 |  |
| hightLightStyle | 高亮框的样式 | CSSProperties | 否 |  |
| columnHeight | 每一列的高度 | number | 否 | 210 |
| itemHeight | 每一列中单个 item 的高度 | number | 否 | 30 |
| optionGroups | 备选值 | PickerViewOptionGroupsType | 是 |  |
| value | 选择器受控值 | PickerViewValueType | 否 |  |
| onChange | 选中值改变时的回调 | (value: PickerViewValueType, key?: any) => void | 否 |  |
| initScroll | 初始化是否滚动 | boolean | 否 |  |
