# ColorBoard 颜色面板

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/color-board/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s25
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[ColorBoard]

## 代码演示

### 基础用法

```jsx
/*
 * @Date: 2022-05-19 20:38:34
 * @LastEditors: 屈正巍
 * @LastEditTime: 2022-05-19 21:34:41
 */
import { Component } from "react";
import { constants, ColorBoard } from "@weapp/ui";

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

const colorOptions: string[] = [
  "#BA59D1",
  "#2D6ED1",
  '#00A661',
  '#DA4045',
  '#D53265',
  '#DE3A99',
  '#7E56BB',
  '#298AAC',
  '#53C9F6',
  '#68D8B6',
  '#FAC95F',
  '#FF465C',
  '#8269D9',
]

type Props = {}
type State = {
  value: string
}

export default class Demo extends Component<Props, State> {

  constructor(props: Demo) {
    super(props)
    this.state = {
      value: "#BA59D1"
    }
  }

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

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <ColorBoard
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>受控</p>
        <ColorBoard
          value={this.state.value}
          onChange={this.onValueChange}
        />
        <br />
        <br />
        <p>受控不更新值</p>
        <ColorBoard
          value={"#53C9F6"}
          onChange={this.onChange}
        />
        <br />
        <br />
        <p>自定义颜色options</p>
        <ColorBoard
          defaultValue={'#FAC95F'}
          colorOptions={colorOptions}
        />
        <br />
        <br />
        <p>自定义色块形状</p>
        <ColorBoard
          colorCellShape={'circle'}
        />
      </div >
    )
  }
}
```

## API

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| className | 组件样式名 | string | 否 |  |
| style | 组件样式 | CSSProperties | 否 |  |
| colorCellClassName | 颜色方格的className | string | 否 |  |
| defaultValue | 初始化默认颜色值 | string | 否 |  |
| value | 受控颜色值 | string | 否 | #000000 |
| onChange | 值变化 | (value: string) => void | 是 |  |
| colorOptions | 自定义颜色数组 | string[] | 否 |  |
| colorCellShape | 颜色方块的形状 | 'square' \| 'circle' | 否 | 'square' |
### 默认颜色数组

```typescript
const normalColorsOptions: string[] = [
  "#000",
  "#BA59D1",
  "#2D6ED1",
  '#00A661',
  '#DA4045',
  '#D53265',
  '#DE3A99',
  '#7E56BB',
  '#298AAC',
  '#53C9F6',
  '#68D8B6',
  '#FAC95F',
  '#FF465C',
  '#8269D9',
  '#CAAE01',
  '#FF8012',
  '#F73A53',
  '#C7426F',
  '#DDA2F2',
  '#8D7EE1',
  '#88AFDD',
  '#31CACA',
  '#5AB74B',
  '#FFE15D'
];
```
