"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorBoardPicker = ColorBoardPicker;
exports.default = void 0;

require("antd/es/dropdown/style");

var _dropdown = _interopRequireDefault(require("antd/es/dropdown"));

require("antd/es/popover/style");

var _popover = _interopRequireDefault(require("antd/es/popover"));

var _react = _interopRequireDefault(require("react"));

var _reactColor = require("react-color");

var _ahooks = require("ahooks");

var _icons = require("@parallel-line/icons");

var _hooks = require("@parallel-line/common/es/hooks");

var _button = _interopRequireDefault(require("../button"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var DEFAULTCOLOR = 'rgb(64, 64, 64)';
var defaultAlpha = 1;

var decimalToHex = function decimalToHex(alpha) {
  var aHex = Math.round(255 * alpha).toString(16);
  return alpha === 0 ? '00' : aHex.length < 2 ? "0".concat(aHex) : aHex;
}; // TODO react-color 固定版本号 2.17.2
// https://github.com/casesandberg/react-color/pull/611 因为这个后续版本直接删除了 e.preventDefault() 导致失焦
// 后续应该提个PR，把 e.preventDefault() 设置为可选


function ColorPicker(props) {
  var _React$useState = _react.default.useState(''),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      moreColor = _React$useState2[0],
      setMoreColor = _React$useState2[1];

  var _useControllableValue = (0, _ahooks.useControllableValue)(props, {
    valuePropName: 'color',
    trigger: 'onChange'
  }),
      _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
      color = _useControllableValue2[0],
      onChange = _useControllableValue2[1];

  var handleChange = function handleChange(color) {
    var _color$rgb$a, _color$rgb;

    var hexCode = "".concat(color.hex).concat(decimalToHex((_color$rgb$a = color === null || color === void 0 ? void 0 : (_color$rgb = color.rgb) === null || _color$rgb === void 0 ? void 0 : _color$rgb.a) !== null && _color$rgb$a !== void 0 ? _color$rgb$a : defaultAlpha));
    onChange(hexCode);
  };

  var handleColorComplete = function handleColorComplete(color) {
    var _color$rgb2 = color.rgb,
        r = _color$rgb2.r,
        g = _color$rgb2.g,
        b = _color$rgb2.b,
        a = _color$rgb2.a;
    setMoreColor("rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")"));
  };

  var handleComplete = function handleComplete(event) {
    var _props$onComplete;

    event.preventDefault();
    (_props$onComplete = props.onComplete) === null || _props$onComplete === void 0 ? void 0 : _props$onComplete.call(props, moreColor, event);
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: props.className
  }, /*#__PURE__*/_react.default.createElement(_reactColor.SketchPicker, Object.assign({
    width: "250px"
  }, props, {
    presetColors: [],
    color: color,
    onChange: handleChange,
    onChangeComplete: handleColorComplete
  })), /*#__PURE__*/_react.default.createElement(_button.default, {
    size: "small",
    type: "primary",
    onMouseDown: handleComplete
  }, "\u786E\u5B9A"));
}

function ColorBoard(props) {
  var _props$defaultColor = props.defaultColor,
      defaultColor = _props$defaultColor === void 0 ? DEFAULTCOLOR : _props$defaultColor;

  var _useNamespace = (0, _hooks.useNamespace)('color-board', props.prefixCls),
      _useNamespace2 = _slicedToArray(_useNamespace, 2),
      bem = _useNamespace2[1];

  var _useBoolean = (0, _ahooks.useBoolean)(),
      _useBoolean2 = _slicedToArray(_useBoolean, 2),
      visible = _useBoolean2[0],
      toggle = _useBoolean2[1].toggle;

  var _useControllableValue3 = (0, _ahooks.useControllableValue)(props, {
    defaultValuePropName: 'defaultColor',
    valuePropName: 'currentColor',
    trigger: 'onChange'
  }),
      _useControllableValue4 = _slicedToArray(_useControllableValue3, 2),
      currentColor = _useControllableValue4[0],
      onChange = _useControllableValue4[1];

  var _useLocalStorageState = (0, _ahooks.useLocalStorageState)(bem('history'), []),
      _useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
      colors = _useLocalStorageState2[0],
      setColors = _useLocalStorageState2[1];

  var handleColorComplete = function handleColorComplete(color) {
    setTimeout(function () {
      toggle(false);
      onChange(color);
    }, 0);
    if (!color) return;
    if (colors.includes(color)) return;
    var newColors = [color].concat(_toConsumableArray(colors));
    if (newColors.length > 10) newColors.splice(10);
    setColors(newColors);
  };

  var handleChange = function handleChange(currentColor, e) {
    e.preventDefault();
    onChange(currentColor);
  };

  var renderItem = function renderItem(_ref, index) {
    var border = _ref.border,
        color = _ref.color;
    return /*#__PURE__*/_react.default.createElement("span", {
      key: index,
      className: bem('group-item', {
        border: border
      }),
      onMouseDown: function onMouseDown(e) {
        return handleChange(color, e);
      }
    }, /*#__PURE__*/_react.default.createElement("span", {
      style: {
        backgroundColor: color
      }
    }, /*#__PURE__*/_react.default.createElement(Icon, {
      show: color === currentColor
    })));
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: bem()
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: bem('default'),
    onMouseDown: function onMouseDown(e) {
      return handleChange(defaultColor, e);
    }
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: bem('group-item')
  }, /*#__PURE__*/_react.default.createElement("span", {
    style: {
      backgroundColor: defaultColor
    }
  }, /*#__PURE__*/_react.default.createElement(Icon, null))), /*#__PURE__*/_react.default.createElement("span", {
    style: {
      marginLeft: 8,
      lineHeight: 2
    }
  }, "\u9ED8\u8BA4")), ColorBoardData.map(function (list, inx) {
    return /*#__PURE__*/_react.default.createElement("span", {
      key: inx,
      className: bem('group')
    }, list.map(renderItem));
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: bem('history')
  }, "\u6700\u8FD1\u4F7F\u7528\u81EA\u5B9A\u4E49\u989C\u8272"), colors.length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
    className: bem('none-custom-color')
  }, "\u6682\u65E0") : /*#__PURE__*/_react.default.createElement("span", {
    className: bem('group')
  }, colors.map(function (color) {
    return {
      title: color,
      color: color
    };
  }).map(renderItem)), /*#__PURE__*/_react.default.createElement(_popover.default, {
    placement: "rightBottom",
    trigger: ['click'],
    visible: visible,
    onVisibleChange: toggle,
    content: /*#__PURE__*/_react.default.createElement(ColorPicker, {
      className: bem('color-picker'),
      onComplete: handleColorComplete
    }),
    overlayClassName: bem('more-color--popover'),
    getPopupContainer: function getPopupContainer(triggerNode) {
      return triggerNode.parentElement || document.body;
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: bem('more-color'),
    onClick: function onClick(e) {
      return e.preventDefault();
    },
    onMouseDown: function onMouseDown(e) {
      return e.preventDefault();
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: bem('more-color--container')
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: bem('more-color--preview')
  }), /*#__PURE__*/_react.default.createElement("span", null, "\u66F4\u591A\u989C\u8272"), /*#__PURE__*/_react.default.createElement(_icons.MoreArrowOutlined, {
    className: bem('more-color--icon')
  })))));
}

ColorBoard.defaultProps = {
  defaultColor: DEFAULTCOLOR
};

function ColorBoardPicker(props) {
  var colorBoardProps = _extends({}, props);

  var _useNamespace3 = (0, _hooks.useNamespace)('color-board', props.prefixCls),
      _useNamespace4 = _slicedToArray(_useNamespace3, 2),
      bem = _useNamespace4[1];

  var _useControllableValue5 = (0, _ahooks.useControllableValue)(props, {
    defaultValuePropName: 'defaultVisible',
    valuePropName: 'visible',
    trigger: 'onVisibleChange'
  }),
      _useControllableValue6 = _slicedToArray(_useControllableValue5, 2),
      visible = _useControllableValue6[0],
      toggle = _useControllableValue6[1];

  var _useControllableValue7 = (0, _ahooks.useControllableValue)(props, {
    defaultValuePropName: 'defaultColor',
    valuePropName: 'currentColor',
    trigger: 'onChange'
  }),
      _useControllableValue8 = _slicedToArray(_useControllableValue7, 2),
      currentColor = _useControllableValue8[0],
      onChange = _useControllableValue8[1];

  var handleChange = function handleChange(currentColor) {
    onChange(currentColor);
    toggle(false);
  };

  return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
    placement: "bottomLeft",
    trigger: ['click'],
    visible: visible,
    onVisibleChange: toggle,
    overlay: /*#__PURE__*/_react.default.createElement("div", {
      className: bem('overlay')
    }, /*#__PURE__*/_react.default.createElement(ColorBoard, Object.assign({}, colorBoardProps, {
      currentColor: currentColor,
      onChange: handleChange
    })))
  }, props.children);
}

ColorBoardPicker.defaultProps = {
  defaultColor: DEFAULTCOLOR
};

function Icon(_ref2) {
  var show = _ref2.show;
  return /*#__PURE__*/_react.default.createElement("svg", {
    viewBox: "0 0 18 18",
    style: {
      fill: 'rgb(255, 255, 255)',
      display: show ? 'block' : 'none'
    }
  }, /*#__PURE__*/_react.default.createElement("path", {
    d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
  }));
}

var ColorBoardData = [[{
  title: '黑色',
  color: 'rgb(0, 0, 0)'
}, {
  title: '深灰 3',
  color: 'rgb(38, 38, 38)'
}, {
  title: '深灰 2',
  color: 'rgb(89, 89, 89)'
}, {
  title: '深灰 1',
  color: 'rgb(140, 140, 140)'
}, {
  title: '灰色',
  color: 'rgb(191, 191, 191)'
}, {
  title: '浅灰 4',
  color: 'rgb(217,217,217)'
}, {
  title: '浅灰 3',
  color: 'rgb(233, 233, 233)'
}, {
  title: '浅灰 2',
  color: 'rgb(245, 245, 245)'
}, {
  title: '浅灰 1',
  color: 'rgb(250, 250, 250)',
  border: true
}, {
  title: '白色',
  color: 'rgb(255, 255, 255)',
  border: true
}], [{
  title: '红色',
  color: 'rgb(245, 34, 45)'
}, {
  title: '朱红',
  color: 'rgb(250, 84, 28)'
}, {
  title: '橙色',
  color: 'rgb(250, 140, 22)'
}, {
  title: '黄色',
  color: 'rgb(250, 219, 20)'
}, {
  title: '绿色',
  color: 'rgb(82, 196, 26)'
}, {
  title: '青色',
  color: 'rgb(19, 194, 194)'
}, {
  title: '浅蓝',
  color: 'rgb(24, 144, 255)'
}, {
  title: '蓝色',
  color: 'rgb(47, 84, 235)'
}, {
  title: '紫色',
  color: 'rgb(114, 46, 209)'
}, {
  title: '玫红',
  color: 'rgb(235, 47, 150)'
}], [{
  title: '红色 1',
  color: 'rgb(255, 232, 230)'
}, {
  title: '朱红 1',
  color: 'rgb(255, 236, 224)'
}, {
  title: '橙色 1',
  color: 'rgb(255, 239, 209)'
}, {
  title: '黄色 1',
  color: 'rgb(252, 252, 202)'
}, {
  title: '绿色 1',
  color: 'rgb(228, 247, 210)'
}, {
  title: '青色 1',
  color: 'rgb(211, 245, 240)'
}, {
  title: '浅蓝 1',
  color: 'rgb(212, 238, 252)'
}, {
  title: '蓝色 1',
  color: 'rgb(222, 232, 252)'
}, {
  title: '紫色 1',
  color: 'rgb(239, 225, 250)'
}, {
  title: '玫红 1',
  color: 'rgb(250, 225, 235)'
}], [{
  title: '红色 2',
  color: 'rgb(255, 163, 158)'
}, {
  title: '朱红 2',
  color: 'rgb(255, 187, 150)'
}, {
  title: '橙色 2',
  color: 'rgb(255, 213, 145)'
}, {
  title: '黄色 2',
  color: 'rgb(255, 251, 143)'
}, {
  title: '绿色 2',
  color: 'rgb(183, 235, 143)'
}, {
  title: '青色 2',
  color: 'rgb(135, 232, 222)'
}, {
  title: '浅蓝 2',
  color: 'rgb(145, 213, 255)'
}, {
  title: '蓝色 2',
  color: 'rgb(173, 198, 255)'
}, {
  title: '紫色 2',
  color: 'rgb(211, 173, 247)'
}, {
  title: '玫红 2',
  color: 'rgb(255, 173, 210)'
}], [{
  title: '红色 3',
  color: 'rgb(255, 77, 79)'
}, {
  title: '朱红 3',
  color: 'rgb(255, 122, 69)'
}, {
  title: '橙色 3',
  color: 'rgb(255, 169, 64)'
}, {
  title: '黄色 3',
  color: 'rgb(255, 236, 61)'
}, {
  title: '绿色 3',
  color: 'rgb(115, 209, 61)'
}, {
  title: '青色 3',
  color: 'rgb(54, 207, 201)'
}, {
  title: '浅蓝 3',
  color: 'rgb(64, 169, 255)'
}, {
  title: '蓝色 3',
  color: 'rgb(89, 126, 247)'
}, {
  title: '紫色 3',
  color: 'rgb(146, 84, 222)'
}, {
  title: '玫红 3',
  color: 'rgb(247, 89, 171)'
}], [{
  title: '红色 4',
  color: 'rgb(207, 19, 34)'
}, {
  title: '朱红 4',
  color: 'rgb(212, 56, 13)'
}, {
  title: '橙色 4',
  color: 'rgb(212, 107, 8)'
}, {
  title: '黄色 4',
  color: 'rgb(212, 177, 6)'
}, {
  title: '绿色 4',
  color: 'rgb(56, 158, 13)'
}, {
  title: '青色 4',
  color: 'rgb(8, 151, 156)'
}, {
  title: '浅蓝 4',
  color: 'rgb(9, 109, 217)'
}, {
  title: '蓝色 4',
  color: 'rgb(29, 57, 196)'
}, {
  title: '紫色 4',
  color: 'rgb(83, 29, 171)'
}, {
  title: '玫红 4',
  color: 'rgb(196, 29, 127)'
}], [{
  title: '红色 5',
  color: 'rgb(130, 0, 20)'
}, {
  title: '朱红 5',
  color: 'rgb(135, 20, 0)'
}, {
  title: '橙色 5',
  color: 'rgb(135, 56, 0)'
}, {
  title: '黄色 5',
  color: 'rgb(97, 71, 0)'
}, {
  title: '绿色 5',
  color: 'rgb(19, 82, 0)'
}, {
  title: '青色 5',
  color: 'rgb(0, 71, 79)'
}, {
  title: '浅蓝 5',
  color: 'rgb(0, 58, 140)'
}, {
  title: '蓝色 5',
  color: 'rgb(6, 17, 120)'
}, {
  title: '紫色 5',
  color: 'rgb(34, 7, 94)'
}, {
  title: '玫红 5',
  color: 'rgb(120, 6, 80)'
}]];
var _default = ColorBoard;
exports.default = _default;