# ColorPicker

颜色选择

## 案例演示

### 基本使用

---demo
```js
import { ColorPicker } from 'amos-framework';

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  handleChange = (color) => {
    console.log(color);
  }

  render() {
    return (
      <div>
        基本使用:<ColorPicker onColorChange={this.handleChange} />
        禁用:<ColorPicker disabled onColorChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### DropColor 基本使用

---demo
```js
import { DropColor } from 'amos-framework';

class Demo extends Component {
  constructor(props) {
    super(props);
  }

  handleChange = (color) => {
    console.log(color);
  }

  render() {
    return (
      <div>
        基本使用:<DropColor onColorChange={this.handleChange} />
        禁用:<DropColor disabled onColorChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### CustomColor 自定义 color

---demo
```js
import { CustomColor, Input } from 'amos-framework';

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: '#efefef',
      alpha: 100
    };
  }

  onCustomColorChange = ({ color, alpha, open }) => {
    console.log(color, alpha, open);
    this.setState({
      color,
      alpha
    });
  }

  onIptChange = (e) => {
    this.setState({
      color: e.target.value
    });
  }

  render() {
    const { color, alpha } = this.state;
    return (
      <div>
        输入颜色值: <Input value={color} onChange={this.onIptChange} />
        默认值:<CustomColor defaultColor="#00ff00" alpha={alpha} onChange={this.onCustomColorChange} />
        基本使用:<CustomColor color={color} alpha={alpha} onChange={this.onCustomColorChange} />
        禁用:<CustomColor disabled color={color} alpha={alpha} onChange={this.onCustomColorChange} />
        自定义宽度:<CustomColor color={color} alpha={alpha} width={60} onChange={this.onCustomColorChange} />
        <div>颜色值: {color}</div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### InputColor 自定义 color

---demo
```js
import { InputColor, Icon } from 'amos-framework';

const { toHexColor, toRGBAColor } = InputColor;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: '#efefef'
    };
    // test toHexColor
    // const c1 = toHexColor('rgb(3,32,64)'); // -> #032040
    // const c2 = toHexColor('rgb(3,3,3)'); // -> #030303
    // console.log(c1, c2);
  }

  // value 为 {r, g, b, a}
  onChange = (value) => {
    // debugger
    this.setState({
      color: value
    });
  }

  removeColor = () => {
    this.setState({
      // 此处如果设置为 undefined 则会触发 InputColor 组件的 默认值机制
      color: ''
      // color: undefined
    });
  }

  render() {
    const { color } = this.state;

    return (
      <div>
        基本使用：<InputColor value={color} onChange={this.onChange} />
        启用alpha: <InputColor value={color} onChange={this.onChange} alpha />
        禁用: <InputColor value={color} onChange={this.onChange} disabled />
        自定义清空: <InputColor value={color} onChange={this.onChange} afterIcon={color && <Icon icon="cross-circle" title="清除" style={{ marginRight: '4px' }} onClick={this.removeColor} />} />
        <p>HEX颜色值：<font color={toHexColor(color)}>{toHexColor(color)}</font></p>
        <p>RGBA颜色值：<font color={toHexColor(color)}>{toRGBAColor(color)}</font></p>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### GradientPicker 基本使用

---demo
```js
import { GradientPicker } from 'amos-framework';

const handleChange = (background) => {
  console.log('background:', background);
}

const handleChange2 = (background, gp) => {
  console.log('background:', background, gp);
}

const palette = [
  { id: 1, offset: '0.00', color: '#ffeeff' },
  { id: 2, offset: '1.00', color: '#000000' }
];

ReactDOM.render((
  <div>
    基 本 使 用：<GradientPicker onChange={handleChange} />
    <br />
    扁 平 模 式：<GradientPicker onChange={handleChange} flat />
    <br />
    配 置 角 度：<GradientPicker onChange={handleChange} showAngle />
    <br />
    角度 slider：<GradientPicker onChange={handleChange} showAngle angleProps={{ type: 'slider' }} />
    <br />
    角度 input：<GradientPicker onChange={handleChange} showAngle angleProps={{ type: 'input' }} />
    <br />
    自  定 义：<GradientPicker onChange={handleChange2} palette={palette} />
  </div>
), _react_runner_);
```
---demoend

### MixColorPanel 基本使用

---demo
```js
import { MixColorPanel } from 'amos-framework';

const { getGradientPreview } = MixColorPanel;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {
        linear: {
          angle: 0,
          stops: [
            { id: 1, offset: '0.00', color: '#ffeeff' },
            { id: 2, offset: '1.00', color: '#000000' }
          ]
        },
        pure: '#345fa6',
        type: 'pure'
      }
    };
  }

  handleChange = (value) => {
    console.log('value:', value);
    this.setState({
      value
    });
  }

  render() {
    const { value } = this.state;
    let bg;
    if (value.type === 'pure'){
      bg = value.pure;
    } else {
      const gp = getGradientPreview(value.linear.stops, value.linear.angle);
      bg = gp.background;
    }
    return (
      <div>
        <div style={{ width: 200, height: 50, background: bg, marginBottom: 6 }}/>
        <MixColorPanel value={value} onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### MixColorPanel.InputMixColor 基本使用

---demo
```js
import { MixColorPanel } from 'amos-framework';

const { getGradientPreview, InputMixColor } = MixColorPanel;

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {
        linear: {
          angle: 0,
          stops: [
            { id: 1, offset: '0.00', color: '#ffeeff' },
            { id: 2, offset: '1.00', color: '#000000', opacity: 0.5 }
          ]
        },
        pure: '#345fa6',
        type: 'pure'
      }
    };
  }

  handleChange = (value) => {
    console.log('value:', value);
    this.setState({
      value
    });
  }

  render() {
    const { value } = this.state;
    let bg;
    if (value.type === 'pure'){
      bg = value.pure;
    } else {
      const gp = getGradientPreview(value.linear.stops, value.linear.angle);
      bg = gp.background;
    }
    return (
      <div>
        <div style={{ width: 200, height: 50, background: bg, marginBottom: 6 }}/>
        基 本 使 用：<InputMixColor value={value} onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### ChartTheme 基本使用

> 颜色系列只能是基本颜色

---demo
```js
import { ChartTheme } from 'amos-framework';

const handleThemeChange = (color) => {
  console.log('themes:', color);
}

ReactDOM.render(<ChartTheme onChange={handleThemeChange} />, _react_runner_);
```
---demoend

### ThemeColor 基本使用

> 颜色系列可以选择基础颜色、线性渐变、径向渐变

---demo
```js
import { ChartColor } from 'amos-framework';

const ThemeColor = ChartColor.ThemeColor;

const handleThemeChange = (color) => {
  console.log('themes:', color);
}

ReactDOM.render(<ThemeColor onChange={handleThemeChange} />, _react_runner_);
```
---demoend

### DropChartColor 基本使用

> 颜色系列可以选择基础颜色、线性渐变、径向渐变

---demo
```js
import { ChartColor } from 'amos-framework';

const DropChartColor = ChartColor.DropChartColor;

const chartColorProps = {
  basic: {
    alpha: true,
    useRgba: true
  },
  linear: {
    alpha: true,
    align: 'left',
    useRgba: true,
    defaultValue: {
      colorStops: [
        { id: 0, offset: 0, color: '#000000' },
        { id: 1, offset: 0.5, color: '#345fa6' }
      ]
    }
  },
  radial: {
    alpha: true,
    align: 'left',
    useRgba: true
  }
};

class Demo extends Component {
  state = {
    value: '#345fa6'
  };
  handleChange = (color) => {
    console.log('color:', color);
    this.setState({
      value: color
    });
  }

  render() {
    return <DropChartColor value={this.state.value} chartColorProps={chartColorProps} onChange={this.handleChange} />;
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### SectionColor 基本使用

分段颜色配置

---demo
```js
import { ChartColor } from 'amos-framework';

const SectionColor = ChartColor.SectionColor;

class Demo extends Component {
  state = {
    value: []
  };
  handleChange = (val) => {
    console.log('SectionColor:', val);
    this.setState({
      value: val
    });
  }

  render() {
    return <SectionColor value={this.state.value} onChange={this.handleChange} />;
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### DropSectionColor 基本使用

分段颜色配置

---demo
```js
import { ChartColor } from 'amos-framework';

const DropSectionColor = ChartColor.DropSectionColor;

class Demo extends Component {
  state = {
    value: []
  };
  handleChange = (val) => {
    console.log('DropSectionColor:', val);
    this.setState({
      value: val
    });
  }

  render() {
    return <DropSectionColor value={this.state.value} onChange={this.handleChange} />;
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

### default ColorPicker

> basic use [react-color](https://github.com/casesandberg/react-color/), [docs](casesandberg.github.io/react-color/)

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-color-picker` | css class 前缀 |
| className | String | - | 自定义 className |
| style | object | - | 自定义 style |
| disabled | boolean | false | 是否禁用 |
| onColorChange | function: (color: {}) => {} | - | 颜色值改变时回调，参数为 color 对象 |
| onPickerClose | function: (color: {}) => {} | - | 关闭时回调，参数为 color 对象 |
| direction | string | up | 颜色选择器方向，默认 `up`, 可选值有 `'up', 'down', 'left', 'right'` |
| align | string | left | 停靠位置，默认 `left`, 可选值有 `'top', 'right', 'bottom', 'left', 'middle'` |
| colorValue | string or object | - | 颜色值, 支持 `hex、rgb、rgba`, hex 颜色不支持解析透明度  |
| adjustPosition | boolean | false | 是否自动调整选择器位置 |

```js
color = {
  rgb,
  hsl,
  hsv,
  hex
}
```

### DropColor [推荐使用]

同 [default ColorPicker](#default ColorPicker), 唯一区别在于，采用 Popover 组件进行包裹。

### CustomColor [推荐使用]

自定义 color picker

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-color-picker` | css class 前缀 |
| className | String | - | 自定义 className |
| children | reactNode | - | 自定义颜色选择触发元素 |
| popoverProps | object | - | Popover 参数，详见 `Popover` 组件 |
| onPickerClose | function: (color: {}) => {} | - | 关闭时回调，参数为 color 对象 |
| disabled | boolean | false | 是否禁用 |
| visible | boolean | false | 是否显示 |
| onChange | function: (params) => {} | - | 颜色值改变时回调，参数为 `CustomColor` 整个state 对象 |
| onVisibleChange | function: (visible) => {} | - | 当 颜色选择器panel 显示装填改变时回调 |
| enableAlpha | boolean | false | 是否启用透明度 |
| mode | string | RGB | 颜色类型，默认 `RGB`, 可选值为 `'RGB', 'HSL', 'HSB'` |
| defaultColor | typeColor | - | 颜色初始值(不受控) |
| color | typeColor | - | 颜色值 |
| defaultAlpha | number | 100 | 默认透明度(不受控) |
| alpha | number | - | 透明度值 |
| width | `string or number` | 30 | 颜色块宽度，默认 `30px` |

```js
params = {
  color,
  alpha,
  open
}

function typeColor(props, propName, componentName) {
  if (props[propName] && !(/^#[0-9a-fA-F]{3,6}$/).test(props[propName])) {
    return new Error(`${componentName}.props.${propName} Validation failed!`);
  }
}
```

### InputColor

具备 Input 输入能力的颜色选择

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-input-color` | css class 前缀 |
| className | String | - | 自定义 className |
| direction | String | down | pop 层方向，可选值 `up/down/left/right` |
| align | String | left | op 层对齐方式，可选值 `top/right/bottom/left/middle` |
| disabled | boolean | false | 是否禁用 |
| onChange | `function: (color: {r, g, b, a}) => {}` | - | 颜色值改变时回调，参数为 `RGBA Object` |
| value | `string or Object: { r, g, b, a }` | - | 颜色值 |
| defaultValue | `string or Object: { r, g, b, a }` | - | 默认值，不可控 |
| alpha | boolean | - | 是否启用透明度选择 |
| afterIcon | ReactNode | - | 输入框右侧图标，可用来配清除数据 |

> 注意，输入框中仅支持 hex 颜色值，并且会舍去 alpha 值，但是 onChange 回调中保存有 alpha 值，此时可根据提供的 `toHexColor, toRGBAColor` 方法，分别保存自己所需要的的格式。

```js
import { InputColor } from 'amos-framework';

const { toHexColor, toRGBAColor } = InputColor;

toHexColor({ r: 241, g: 112, b: 19, a: 1}); // #f17013
toRGBAColor({ r: 241, g: 112, b: 19, a: 1}); // rgba(241, 112, 19, 1)
toRGBAColor({ r: 241, g: 112, b: 19, a: 0.1}); // rgba(241,112,19, 0.1)
```

### ChartTheme

该组件是针对 `CustomColorPanel` 的一次复杂使用，主要是设置一系列 color 值，使用场景主要是在 chart 图表中设置颜色主题。

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| hiddeLabel | boolean | - | 隐藏label |
| themes | array: string[] | - | 主题颜色值 |
| onChange | function: (colors) => {} | - | 当颜色序列改变时的回调。参数为所有的颜色组成的数组 |


### GradientPicker

渐变色，通过颜色系列和角度创建渐变颜色。

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | 'amos-gradient-picker' | 样式前缀 |
| style | object | - | 自定义内联样式 |
| disabled | bool | - | 是否禁用 |
| popoverProps | Object | - | popover 组件自定义 props |
| children | bool | - | 自定义 pop content |
| angle | number | - | 角度值 |
| showAngle | bool | - | 是否显示旋转角度 |
| angleProps | bool | - | 角度组件 props |
| palette | array | [默认 props](#default-palette) | Gradient Color 颜色盘 |
| ColorPicker | `func or element` | - | 自定义的 ColorPicker |
| type | string | 'custom' | 类型，支持 SketchPicker 和 CustomColorPanel |
| width | number | 218 | 渐变色色块区域宽度 |
| paletteHeight | number | 32 | 渐变色色块区域高度 |
| onChange | `func: (background, { palette, angle }) => {}` | - | 颜色改变后的回调, 参数为渐变色 |
| flat | bool | - | 扁平模式, 将会去掉 transform 和 box-shadow |

> 注意，onChange 回调中第二个参数，为原始的 palette 和 angle 数据

```js
// 将 palette 和 angle 转化为 background
const { getGradientPreview } = GradientPicker;

const { gradient, background, angle } = getGradientPreview(palette, angle);

```

#### default-palette

```js
GradientPicker.defaultProps = {
  prefixCls: 'amos-gradient-picker',
  type: 'custom',
  palette: [
    { id: 1, offset: '0.00', color: '#ffffff' },
    { id: 2, offset: '1.00', color: '#000000' }
  ],
  width: 218,
  paletteHeight: 32,
  angle: 90
};
```

### MixColorPanel 与 InputMixColor

支持选择基础颜色与渐变颜色。

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | 'amos-mixcolor-panel' | 样式前缀 |
| className | string | - | 自定义样式名 |
| disabled | bool | - | 是否禁用 |
| onChange | `func: (value) => {}` | - | 颜色改变后的回调 |
| width | number | 218 | 颜色色块区域宽度 |
| value | `{}` | - | 取值 |

> InputMixColor 特有的 props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | 'amos-mixcolor' | 样式前缀 |
| direction | string | 'down' | 可取值 `'up', 'down', 'left', 'right'` |
| align | string | 'left' | 可取值 `'top', 'right', 'bottom', 'left', 'middle'` |


```js
{
// value 数据格式
value -> PropTypes.shape({
  linear: PropTypes.shape({
    angle: PropTypes.number,
    stops: palettePropTypes
  }),
  pure: PropTypes.string,
  type: PropTypes.oneOf(['linear', 'pure'])
})
}
```

### ChartColor 与 DropChartColor

ChartColor 是一个 chart 颜色合集

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| onChange | `func: (value) => {}` | - | 颜色改变后的回调 |
| value | `String or Object` | - | 取值 |
| direction | String | `horizontal` | 方向，可选值为 `vertical、horizontal` |
| data | Object | - | 各类型 color 表单配置项 |

> data 数据格式， 当 `alpha=true` 时，部分场景下，需要设置 `useRgba=true` 才有效果

案例：

```js
{
  basic: {
    alpha: true,
    align: 'left',
    useRgba: true,
    defaultValue: '#000000'
  },
  linear: {
    alpha: true,
    align: 'left',
    useRgba: true,
    defaultValue: {
      colorStops: [
        { id: 0, offset: 0, color: '#000000' },
        { id: 1, offset: 0.5, color: '#345fa6' }
      ]
    }
  },
  radial: {
    alpha: true,
    align: 'left',
    useRgba: true,
    defaultValue: {
      colorStops: [
        { id: 0, offset: 0, color: '#000000' },
        { id: 1, offset: 0.5, color: '#345fa6' }
      ]
    }
  }
}
```

> DropChartColor 特有的 props 属性

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-chartcolor` | 自定义样式前缀 |
| className | String | - | 自定义样式名 |
| onChange | `func: (value) => {}` | - | 颜色改变后的回调 |
| value | `String or Object` | '#345fa6' | 取值 |
| direction | String | `horizontal` | 方向，可选值为 `vertical、horizontal` |
| chartColorProps | Object | - | 各类型 color 表单配置项，数据格式与 `ChartColor.data` 相同 |
| width | number | 220 | 颜色色块区域宽度 |
| title | String | - | 提示信息 |
| disabled | bool | - | 是否禁用 |
| bordered | bool | - | trigger 是否有边框，如果设置自定义的 children，则有具体的children决定 |
| popoverProps | Object | - | popover 属性配置 |
| children | ReactNode | - | 自定义 trigger 内容区 |