# MColorPicker 拾色器

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

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from "react";
import { MColorPicker, constantsM } from "@weapp/ui";

const prefixCls = `${constantsM.uiMClsPrefix}-demo-colorpicker`;
export default class ColorPickerDemo extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: '#333333',
      alpha: 100
    }
  }

  onChange = (value: any) => {
    this.setState({ value: value.hex,  alpha: value.alpha * 100 })
  }

  render() {
    const { value, alpha } = this.state
    return (
      <div className={prefixCls}>
        <MColorPicker
         
          value={value}
          alpha={alpha}
          onChange={this.onChange}
        />
      </div>
    );
  }
}
```

### 路由层使用

直接引入组件进行使用

```jsx
import React from "react";
import { MColorPicker } from "@weapp/ui";

export default class ColorPickerDemo extends React.Component {
  state={
    color : ''
  }
  changeColor = (value: any) =>{
    this.setState({color:value.hex})
  }
  render() {
    return (
      <MColorPicker
       
        showHeader={false}
        isRouteLayout={true}
        value={this.state.color}
        onChange={this.changeColor}
      />
    );
  }
}
```

### 开启主题色

直接引入组件进行使用

```jsx
import React, { ReactText } from "react";
import { Input, MColorPicker, Switch, constantsM } from "@weapp/ui";

const prefixCls = `${constantsM.uiMClsPrefix}-demo-colorpicker`;
export default class ColorPickerDemo extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            color: "#e71717",
            //isPrimary: true,
            opacity: 0.63,
            alpha: 10,
            colorValue: '#e71717',
            enablePrimary: true
        }
    }
    onChange = (color: any, otherParams: any) => {
        const { isPrimary, opacity } = otherParams
        this.setState({ color: color.hex, alpha: Math.round(color.alpha * 100), isPrimary, opacity, colorValue: color.hex })
    }
    onColorBlur = (value: ReactText) => {
        this.setState({ color: String(value) })
    }
    onInputChange = (value: ReactText) => {
        this.setState({ colorValue: String(value) })
    }
    onPrimaryChange = (value: boolean) => {
        this.setState({ isPrimary: value })
    }
    onAlphaChange = (value: ReactText) => {
        this.setState({ alpha: value as number })
    }
    onOpacityChange = (value: ReactText) => {
        this.setState({ opacity: value as number })
    }
    onEnablePrimaryChange = (value: boolean) => {
        this.setState({ enablePrimary: value })
    }
    render() {
        const { color, alpha, isPrimary, opacity, colorValue, enablePrimary } = this.state
        return (
            <div className={prefixCls}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>value:</span>
                    <Input value={colorValue} onChange={this.onInputChange} onBlur={this.onColorBlur} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>alpha:</span>
                    <Input.InputNumber value={alpha} onChange={this.onAlphaChange} max={100} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>启用主题色:</span>
                    <Switch value={enablePrimary} onChange={this.onEnablePrimaryChange} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>是主题色:</span>
                    <Switch value={isPrimary} onChange={this.onPrimaryChange} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>opacity:</span>
                    <Input.InputNumber value={opacity} onChange={this.onOpacityChange} max={1} />
                </div>
                <MColorPicker
                    value={color}
                    alpha={Number(alpha)}
                    onChange={this.onChange}
                    enablePrimary={enablePrimary}
                    isPrimary={isPrimary}
                    opacity={opacity}
                />
            </div>
        );
    }
}
```

### 开启主题色（路由层使用）

直接引入组件进行使用

```jsx
import React, { ReactText } from "react";
import { Input, MColorPicker, Switch } from "@weapp/ui";

export default class ColorPickerDemo extends React.Component<any, any> {
    state = {
        color: "#e71717",
        isPrimary: true,
        opacity: 0.63,
        alpha: 10,
        colorValue: '#e71717',
        enablePrimary: true
    }
    changeColor = (value: any, otherParams: any) => {
        const { isPrimary, opacity } = otherParams
        this.setState({ color: value.hex, isPrimary, opacity, colorValue: value.hex, alpha: Math.round(value.alpha * 100) })
    }
    onClick = () => {
        this.setState({ value: '#EF4300', isPrimary: false })
    }
    onColorBlur = (value: ReactText) => {
        this.setState({ color: String(value) })
    }
    onInputChange = (value: ReactText) => {
        this.setState({ colorValue: String(value) })
    }
    onPrimaryChange = (value: boolean) => {
        this.setState({ isPrimary: value, color: '', colorValue: '' })
    }
    onAlphaChange = (value: ReactText) => {
        this.setState({ alpha: value as number })
    }
    onOpacityChange = (value: ReactText) => {
        this.setState({ opacity: value as number })
    }
    onEnablePrimaryChange = (value: boolean) => {
        this.setState({ enablePrimary: value })
    }
    render() {
        const { color, alpha, isPrimary, opacity, colorValue, enablePrimary } = this.state
        return (
            <>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>value:</span>
                    <Input value={colorValue} onChange={this.onInputChange} onBlur={this.onColorBlur} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>alpha:</span>
                    <Input.InputNumber value={alpha} onChange={this.onAlphaChange} max={100} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>启用主题色:</span>
                    <Switch value={enablePrimary} onChange={this.onEnablePrimaryChange} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>是主题色:</span>
                    <Switch value={isPrimary} onChange={this.onPrimaryChange} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>opacity:</span>
                    <Input.InputNumber value={opacity} onChange={this.onOpacityChange} max={1} />
                </div>
                <MColorPicker
                    showHeader={false}
                    isRouteLayout={true}
                    alpha={Number(alpha)}
                    value={color}
                    onChange={this.changeColor}
                    isPrimary={isPrimary}
                    opacity={opacity}
                    enablePrimary={enablePrimary}
                />
            </>
        );
    }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 颜色值 | string | 否 | `#000000` |
| onChange | 值变化 | (value: Object) => void; | 否 |  |
| onOk | 选择器点击确认回调 | (value: Object) => void; | 否 |  |
| enableAlpha | 透明度开关 | boolean | 否 | true |
| alpha | 透明度 0-100 | number | 否 | 100 |
| isRouteLayout | 是否 路由层方式打开 | boolean | 否 |  |
| formItemProps | 表单 item 参数控制（路由层模式下） | FormItemItemType | 否 |  |
| showHeader | 是否显示选择器头部（路由层模式下） | boolean | 否 | true |
| readOnly | 是否只读（路由层模式下） | boolean | 否 |  |
| disabled | 是否禁用（路由层模式下） | boolean | 否 |  |
| enablePrimary | 开启主题色 | boolean | 否 | false |
| isPrimary | 当前颜色是主题色 | boolean | 否 | false |
| opacity | 主题色不透明度（仅对主题色生效） | number | 否 |  |
