// 拾色器
import React from 'react';
import { Modal } from 'antd';
import { SketchPicker, SwatchesPicker } from 'react-color';
import '../style/index.less';

export default class ColorPickup extends React.Component {
  render() {
    return (
      <Modal
        title=""
        visible={this.props.visible}
        onCancel={this.props.cancelColorPickup}
        footer={null}
        mask={false}
        closable={false}
        style={{ position: 'fixed', top: this.props.top, left: this.props.left }}
        className="color-pickup"
      >
        {this.props.type === 'SwatchesPicker' ? ( // 父组件中如果存在监听鼠标移入移出事件就会有bug，可以使用SwatchesPicker选择颜色
          <SwatchesPicker color={this.props.color} onChangeComplete={this.props.onChange} />
        ) : (
          <SketchPicker color={this.props.color} onChangeComplete={this.props.onChange} />
        )}
      </Modal>
    )
  }
}

// react-color可选组件如下：
// <AlphaPicker /> <BlockPicker /> <ChromePicker/> <CirclePicker /> <CompactPicker /> <GithubPicker /> <HuePicker/>
// <MaterialPicker /> <PhotoshopPicker /> <SketchPicker/> <SliderPicker/> <TwitterPicker/> <SwatchesPicker/>