import React__default from 'react';
import { SketchPicker } from 'react-color';
import { Popover } from 'antd';
import IconFont from '../IconFont/index.js';
import '../_rollupPluginBabelHelpers-736b301a.js';
import '@zenview/micro-utils';

class SketchPickerForm extends React__default.Component {
  constructor(props) {
    super(props);
    this.onChange = color => {
      const {
        r,
        g,
        b,
        a
      } = color.rgb;
      const value = `rgba(${r},${g},${b},${a})`;
      this.setState({
        value
      });
      this.props.onChange && this.props.onChange(value);
    };
    this.clearColor = () => {
      this.setState({
        value: ''
      });
      this.props.onChange && this.props.onChange('');
    };
    this.state = {
      value: props.value || props.defaultValue
    };
  }
  static getDerivedStateFromProps(nextProps) {
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {})
      };
    }
    return null;
  }
  shouldComponentUpdate(nextProps) {
    if ('value' in nextProps && this.state.value !== nextProps.value) {
      this.setState({
        value: nextProps.value || ''
      });
    }
    return true;
  }
  render() {
    const {
      value
    } = this.state;
    return /*#__PURE__*/React__default.createElement(Popover, {
      trigger: "click",
      overlayClassName: "lm-sketch-picker-popup",
      content: /*#__PURE__*/React__default.createElement(SketchPicker, {
        width: 250,
        color: getRGBA(value),
        onChange: this.onChange,
        className: "lm-sketch-picker"
      })
    }, /*#__PURE__*/React__default.createElement("span", {
      className: "lm-color-picker-box",
      style: {
        width: this.props.width
      }
    }, /*#__PURE__*/React__default.createElement("span", {
      className: "color-box",
      style: {
        backgroundColor: value
      }
    }, !value ? this.props.placeholder : value), this.props.hasClear && value && /*#__PURE__*/React__default.createElement("span", {
      className: "delete-color",
      onClick: this.clearColor
    }, "\u6E05\u9664", /*#__PURE__*/React__default.createElement(IconFont, {
      type: "icon-S_Edit_LineClose"
    }))));
  }
}
function getRGBA(color) {
  if (!color) {
    return {
      r: 0,
      g: 0,
      b: 0,
      a: 1
    };
  }
  const rgba = color.toLowerCase().replace('rgba(', '').replace(')', '').split(',');
  return {
    r: rgba[0],
    g: rgba[1],
    b: rgba[2],
    a: rgba[3]
  };
}

export { SketchPickerForm as default };
//# sourceMappingURL=index.js.map
