# ColorPicker 拾色器

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

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { PureComponent } from 'react';
import { ColorPicker, constants, ColorObject } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-colorpicker`;

interface ColorPickerDemoState {
  color: string;
  colorFocus:string;
  alpha: number;
  alphaFocus: number;
  isPrimary: boolean;
  opacity:number;
}
export default class ColorPickerDemo extends PureComponent<any, ColorPickerDemoState> {
  constructor(props: any) {
    super(props);
    this.state = { color: "#e71717", colorFocus: "#e71717", alpha: 15, alphaFocus: 15, isPrimary: false, opacity: 1 };
  }

  onChange = (color: string, otherParams: any) => {
    const {isPrimary,opacity} = otherParams
    this.setState({
      isPrimary,opacity
    })
    console.log('onChange', color, otherParams)
  }

  onColorChange = (color:any, colorObj:ColorObject) => {
    console.info('ColorObject:',colorObj)
    this.setState({ color: colorObj.hex, alpha: colorObj.alpha });
  }

  onFocus = (value: any, e: React.FocusEvent) => {
    console.log('onFocus', value, e)
  }

  onBlur = (value: any, e: React.FocusEvent) => {
    console.log('onBlur', value, e)
  }

  onPopoverVisibleChange = (visible?: boolean) => {
    console.log('onPopoverVisibleChange', visible)
  }

  onOk = (value: string) => {
    console.log('onOk', value)
  }

  onBeforeClear = (value: string) => {
    return ''
  }

  render() {
    const { color , alpha , colorFocus, alphaFocus, isPrimary, opacity} = this.state;
    return (
      <div className={prefixCls}>
        <h4>默认</h4>
        <ColorPicker
         
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          onChange={this.onChange}
          onOk={this.onOk}
          onPopoverVisibleChange={this.onPopoverVisibleChange}
          value={'#dedede'}
          onBeforeChange = {this.onBeforeClear}
          isPrimary={isPrimary}
          opacity={opacity}
          enablePrimary
        />
        <h4>value为transparent</h4>
        <ColorPicker value={'transparent'} />
        <h4>value为空</h4>
        <ColorPicker value={''} />
        <h4>禁用</h4>
        <ColorPicker
         
          disabled={true}
        />
        <h4>只读</h4>
        <ColorPicker
         
          readOnly={true}
        />
        <h4>聚焦</h4>
        <ColorPicker
         
          alpha={alphaFocus}
          value={colorFocus}
          autoFocus={true}
        />
        <h4>自定义按钮</h4>
        <ColorPicker 
          onChange={this.onColorChange}
          alpha={alpha}
          value={color}>
          <span style={{ color: color }}>自定义按钮</span>
        </ColorPicker>
      </div>
    )
  }
}
```

### 支持透明度

支持透明度

```jsx
import React, { PureComponent } from "react";
import { ColorPicker, constants } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-colorpicker`;

interface ColorPickerDemoState {
  color: string;
}
export default class ColorPickerDemo extends PureComponent<any, ColorPickerDemoState> {
  constructor(props: any) {
    super(props);

    this.state = { color: "#e71717" };
  }

  onColorChange = (color: string) => {
    this.setState({ color });
  }

  render() {
    return (
      <div className={prefixCls}>
        <h4>支持透明度</h4>
        <ColorPicker alpha={50} />
      </div>
    )
  }
}
```

### 开启主题色

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

const prefixCls = `${constants.uiPcClsPrefix}-demo-colorpicker`;

interface ColorPickerDemoState {
    color: string;
    isPrimary?: boolean;
    opacity?: number;
    alpha?: number;
    colorValue?: string;
    enablePrimary?: boolean;
    enableAuto?: boolean;
    /** 对接eb主题颜色 */
    isAuto?: boolean;
}
export default class ColorPickerDemo extends PureComponent<any, ColorPickerDemoState> {
    constructor(props: any) {
        super(props);

        this.state = {
            color: "#e71717",
            //isPrimary: true,
            opacity: 0.63,
            alpha: 10,
            colorValue: '#e71717',
            enablePrimary: true,
            enableAuto: false,
            isAuto: false
        };
    }

    onColorChange = (color: string, otherColorParams: any) => {
        const { alpha, isPrimary, opacity, isAuto } = otherColorParams
        this.setState({ alpha, isPrimary, opacity, color, colorValue: color, isAuto })
        console.log(color, otherColorParams)
    }
    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 })
    }
    onEnableAutoChange = (value: boolean) => {
        this.setState({ enableAuto: value })
    }
    onIsAutoChange = (value: boolean) => {
        this.setState({ isAuto: value, color: '' })
    }
    render() {
        const { isPrimary, opacity, color, alpha, colorValue, enablePrimary, enableAuto, isAuto } = this.state
        return (
            <div className={prefixCls}>
                <h4>开启主题色</h4>
                <ColorPicker
                    enablePrimary={true}
                    isPrimary={true}
                />
                <h4>颜色控制</h4>
                <h5>如果色值中带有不透明度，则取色值中的不透明度</h5>
                <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>
                <h5>opacity仅对主题色生效</h5>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>opacity:</span>
                    <Input.InputNumber value={opacity} onChange={this.onOpacityChange} max={1} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>启用自动按钮（对接eb）:</span>
                    <Switch value={enableAuto} onChange={this.onEnableAutoChange} />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <span style={{ marginRight: '10px' }}>是自动:</span>
                    <Switch value={isAuto} onChange={this.onIsAutoChange} />
                </div>
                <ColorPicker
                    enablePrimary={enablePrimary}
                    isPrimary={isPrimary}
                    opacity={opacity}
                    value={color}
                    alpha={Number(alpha)}
                    onChange={this.onColorChange}
                    enableAuto={enableAuto}
                    isAuto={isAuto}
                />
            </div>
        )
    }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 颜色值 | string | 否 | `#000000` |
| onChange | 值变化 | (value: string, colorObj: ColorObject) => void; | 否 |  |
| enableAlpha | 透明度开关 | boolean | 否 | true |
| alpha | 透明度 0-100 | number | 否 | 100 |
| triggerProps | 支持 Trigger 组件参数 | TriggerProps | 否 |  |
| onBlur | 失焦回调 | (value: ReactText, e: React.FocusEvent) => void | 否 |  |
| onFocus | 聚焦回调 | (value: ValueType, e: React.FocusEvent) => void | 否 |  |
| onPopoverVisibleChange | 弹层显隐回调 | (visible: boolean) => void | 否 |  |
| readOnly | 是否只读 | boolean | 否 |  |
| disabled | 是否禁用 | boolean | 否 |  |
| autoFocus | 是否聚焦光标 | boolean | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| enablePrimary | 开启主题色 | boolean | 否 | false |
| isPrimary | 当前颜色是主题色 | boolean | 否 | false |
| opacity | 主题色不透明度（仅对主题色生效） | number | 否 |  |
| enableAuto | 开启自动按钮 | boolean | 否 | false |
| isAuto | 当前颜色是自动选择 | boolean | 否 | false |
### 主题色说明：

```
1.开启主题色（enablePrimary为true）时，onChange会在第二个参数中返回主题色标识isPrimary及不透明度opacity；可以通过window.TEAMS?.theme?.primaryColor获取当前主题色，再根据需要使用opacity自行处理不透明度；
2.由于主题色本身可以设置不透明度，因此这里的opacity表示主题色之外的不透明度，可以与原有主题色不透明度叠加使用。
3.enableAuto和isAuto是对接eb的属性，一般用不到
```
