# MPicker 弹出选择器

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

## 代码演示

### 基本用法

在一组预设数据中进行选择

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

const { mPickerClsPrefix } = constantsM;

const prefixCls = `${mPickerClsPrefix}-demo-picker`;

type PickerProps = {}
type PickerState = {
  pickerVisible: boolean;
  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 PickerDemo extends Component<PickerProps, PickerState> {

  constructor(props: PickerDemo) {
    super(props)
    this.state = {
      pickerVisible: false,
      value: {
        hour: 22,
        minute: 22
      }
    }
  }

  onOpen = () => { this.setState({ pickerVisible: true }) }
  onClose = () => { this.setState({ pickerVisible: false }) }
  onChange = (value: PickerViewValueType) => { this.setState({ value }) }
  onConfirm = () => {
    console.log(this.state.value)
    this.onClose()
  }

  render() {
    return (
      <div className={prefixCls}>
        <Button onClick={this.onOpen}>底部弹出框</Button>
        <MPicker
          {...this.props}
         
          visible={this.state.pickerVisible}
          optionGroups={optionGroups}
          value={this.state.value}
          onChange={this.onChange}
          onClose={this.onClose}
          onClickRight={this.onConfirm}
          onClickLeft={this.onClose}
        />
      </div>
    )
  }
}
```

### 自定义功能

picker组件主要是基于pickerView与diaLog组件进行开发

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

const { mPickerClsPrefix } = constantsM;

const prefixCls = `${mPickerClsPrefix}-demo-picker`;

type PickerProps = {}
type PickerState = {
  pickerVisible: boolean;
  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
}

const style: React.CSSProperties = {
  border: '1px solid red',
}
export default class PickerDemo extends Component<PickerProps, PickerState> {

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

  onOpen = () => { this.setState({ pickerVisible: true }) }
  onClose = () => { this.setState({ pickerVisible: false }) }
  onChange = (value: PickerViewValueType) => { this.setState({ value }) }
  onConfirm = () => {
    console.log(this.state.value)
    this.onClose()
  }

  render() {
    return (
      <div className={prefixCls}>
        <Button onClick={this.onOpen}>侧边弹出框</Button>
        <MPicker
          style={style}
          hightLightStyle={{ border: '1px solid pink' }}
          navStyle={{ height: '60px', border: '1px solid green' }}
          contentStyle={{ border: '1px solid yellow' }}
          columnHeight={325}
          title={'我是标题'}
          visible={this.state.pickerVisible}
          optionGroups={optionGroups}
          value={this.state.value}
          onChange={this.onChange}
          onClose={this.onClose}
          onClickRight={this.onConfirm}
          onClickLeft={this.onClose}
          placement={'right'}
        />
      </div>
    )
  }
}
```

## API

### 注意：

```
1.picker组件主要是基于pickerView与diaLog组件进行开发,如有疑问请参照这两个组件的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 | 否 |  |
| navClassName | 头部导航框的类名 | string | 否 |  |
| navStyle | 头部导航框的自定义样式 | CSSPropertie | 否 |  |
| contentClassName | 内容的类名 | string | 否 |  |
| contentStyle | 内容的自定义样式 | CSSPropertie | 否 |  |
| hightLightStyle | 高亮框的样式 | CSSProperties | 否 |  |
| columnHeight | 每一列的高度 | number | 否 | 216 |
| itemHeight | 每一列中单个 item 的高度 | number | 否 | 36 |
| title | 标题内容 | string | 否 |  |
| leftTitle | 左侧按钮内容 | string | 否 |  |
| onClickLeft | 点击左侧按钮回调 | () => void | 否 |  |
| rightTitle | 右侧按钮内容 | string | 否 |  |
| onClickRight | 点击右侧按钮回调 | () => void | 否 |  |
| optionGroups | 备选值 | PickerViewOptionGroupsType | 是 |  |
| value | 选择器受控值 | PickerViewValueType | 否 |  |
| onChange | 选中值改变时的回调 | (value: PickerViewValueType) => void | 否 |  |
