amis-theme-editor/esm/renderers/ColorPicker.js

amis主题编辑器

/**
 * amis-theme-editor v2.0.22-beta.2
 * Copyright 2018-2023 @fex
 */

import { __extends, __assign, __decorate } from 'tslib';
import React__default, { useRef, useState, useEffect, useImperativeHandle } from 'react';
import { FormItem, resolveVariableAndFilter, classnames, findTree, render, eachTree } from 'amis-core';
import cx from 'classnames';
import { SketchPicker } from 'react-color';
import { TooltipWrapper, Icon, Overlay, PopOver, SearchBox, NumberInput, Select } from 'amis-ui';
import cloneDeep from 'lodash/cloneDeep';
import debounce from 'lodash/debounce';
import { i18n } from 'i18n-runtime';
import { getValueByPath, formatInheritData, getInheritValue, setInheritData } from '../util.js';
import '../icons/index.js';
import { Icon as Icon$1 } from 'amis';

/**
 * @file 颜色选择器
 * @description 设置颜色
 */
var POSITION_MAP = ['left top', 'center top', 'right top', 'left center', 'center center', 'right center', 'left bottom', 'center bottom', 'right bottom'];
function findColor(value, tree) {
  var res = {
    label: value,
    value: value
  };
  if (typeof value === 'string' && (value === null || value === void 0 ? void 0 : value.indexOf('var')) === 0) {
    var r = findTree(tree, function (item) {
      return item.value === value;
    });
    if (r) {
      res = {
        label: "".concat(r.label, "-").concat(r.realValue),
        value: r.realValue
      };
    } else if (!value.includes('--colors-')) {
      res = {
        label: i18n("a4f758412c3797290c957544c56db443"),
        value: value
      };
    }
  }
  if (value === 'transparent') {
    res = {
      label: i18n("1110ba0bda5a251c55247f122e923848"),
      value: 'transparent'
    };
  }
  if (value === 'custom') {
    res = {
      label: i18n("d8a4e8cdc29e9aa576e669ed165892c9"),
      value: 'transparent'
    };
  }
  if (value === 'inherit') {
    res = {
      label: i18n("a4f758412c3797290c957544c56db443"),
      value: value
    };
  }
  return res;
}
function ThemeColorList(props) {
  var _a;
  var themeList = props.themeList,
    onChange = props.onChange,
    value = props.value,
    data = props.data,
    itemName = props.itemName,
    state = props.state,
    editorThemePath = props.editorThemePath;
  var editorInheritValue = props.editorInheritValue || getInheritValue(editorThemePath, data);
  var defaultVar = state && state !== 'default' ? 'inherit' : "var(".concat((_a = data === null || data === void 0 ? void 0 : data.default) === null || _a === void 0 ? void 0 : _a.token).concat(itemName, ")");
  var _b = useState(cloneDeep(themeList || [])),
    colorList = _b[0],
    setColorList = _b[1];
  var _c = useState(true),
    showFlag = _c[0],
    setShowFlag = _c[1];
  function setColor(value) {
    onChange(setInheritData(value, editorInheritValue));
  }
  function searchColor(value) {
    var list = cloneDeep(themeList || []);
    var showFlag = false;
    if (value) {
      eachTree(list, function (item, key, level, paths) {
        var _a, _b, _c, _d, _e, _f;
        if (item.children) {
          item.show = ((_a = item.label) === null || _a === void 0 ? void 0 : _a.includes(value)) || ((_b = item.value) === null || _b === void 0 ? void 0 : _b.includes(value));
        }
        if (paths && ((_c = paths[level - 2]) === null || _c === void 0 ? void 0 : _c.show)) {
          item.show = true;
        } else {
          item.show = ((_d = item.value) === null || _d === void 0 ? void 0 : _d.includes(value)) || ((_e = item.realValue) === null || _e === void 0 ? void 0 : _e.includes(value)) || ((_f = item.label) === null || _f === void 0 ? void 0 : _f.includes(value));
        }
        if (item.show) {
          showFlag = true;
        }
      });
    } else {
      showFlag = true;
    }
    setShowFlag(showFlag);
    setColorList(list);
  }
  return React__default.createElement("div", {
    className: "ThemeColorList"
  }, React__default.createElement("div", {
    className: "ThemeColorList-content ThemeColorList-content--top"
  }, React__default.createElement("div", {
    className: "ThemeColorList-content-title"
  }, i18n("aa05fd09a619ddbf07d8d903e6d32c5e")), React__default.createElement("div", {
    className: "ThemeColorList-content-labels"
  }, React__default.createElement(TooltipWrapper, {
    trigger: "hover",
    placement: "top",
    tooltip: {
      children: function () {
        return React__default.createElement("div", null, i18n("ee5841a88da34c5a0e0515c4d863752a"));
      }
    }
  }, React__default.createElement("div", {
    className: cx('ThemeColorList-content-label', value === 'transparent' && 'ThemeColorList-content-label--active'),
    onClick: function () {
      return setColor('transparent');
    }
  }, React__default.createElement("div", {
    className: cx('ThemeColorList-content-label-inner', 'ThemeColor--transparent')
  }))), React__default.createElement(TooltipWrapper, {
    trigger: "hover",
    placement: "top",
    tooltip: {
      children: function () {
        return React__default.createElement("div", null, i18n("d81bb206a889656035b929cd8bb1ef10"));
      }
    }
  }, React__default.createElement("div", {
    className: cx('ThemeColorList-content-label'),
    onClick: function () {
      return setColor(undefined);
    }
  }, React__default.createElement("div", {
    className: "ThemeColorList-content-label-inner"
  }, React__default.createElement("div", {
    className: "ThemeColor--delete"
  })))), (data === null || data === void 0 ? void 0 : data.state) && data.state !== 'default' || state && state !== 'default' ? React__default.createElement(TooltipWrapper, {
    trigger: "hover",
    placement: "top",
    tooltip: {
      children: function () {
        return React__default.createElement("div", null, i18n("a4f758412c3797290c957544c56db443"));
      }
    }
  }, React__default.createElement("div", {
    className: cx('ThemeColorList-content-label', value === defaultVar && 'ThemeColorList-content-label--active'),
    onClick: function () {
      return setColor(defaultVar);
    }
  }, React__default.createElement("div", {
    className: cx('ThemeColorList-content-label-inner', 'ThemeColor--transparent')
  }, React__default.createElement("div", {
    className: "ThemeColorList-content-label-inner",
    style: {
      background: defaultVar
    }
  })))) : null), React__default.createElement("div", {
    className: "ThemeColorList-content--search"
  }, React__default.createElement(SearchBox, {
    placeholder: i18n("517c1de3f9f069c1c33003ec8d75c3da"),
    onChange: searchColor
  }))), showFlag ? colorList === null || colorList === void 0 ? void 0 : colorList.map(function (item, i) {
    var _a, _b;
    var show = item.show;
    (_a = item.children) === null || _a === void 0 ? void 0 : _a.forEach(function (n) {
      var _a;
      (_a = n.children) === null || _a === void 0 ? void 0 : _a.forEach(function (m) {
        if (m.show !== false) {
          show = true;
        }
      });
    });
    return show ? React__default.createElement("div", {
      key: i
    }, React__default.createElement("div", {
      className: "ThemeColorList-title"
    }, i18n(item.label)), (_b = item.children) === null || _b === void 0 ? void 0 : _b.map(function (colors, i) {
      var _a, _b;
      var show = colors.show;
      (_a = colors.children) === null || _a === void 0 ? void 0 : _a.forEach(function (n) {
        if (n.show !== false) {
          show = true;
        }
      });
      return show ? React__default.createElement("div", {
        className: "ThemeColorList-content",
        key: i
      }, React__default.createElement("div", {
        className: "ThemeColorList-content-title"
      }, i18n(colors.label)), React__default.createElement("div", {
        className: "ThemeColorList-content-labels"
      }, (_b = colors.children) === null || _b === void 0 ? void 0 : _b.map(function (color, i) {
        return color.show !== false ? React__default.createElement(TooltipWrapper, {
          key: i,
          trigger: "hover",
          placement: "top",
          tooltip: {
            children: function () {
              return React__default.createElement("div", null, "".concat(i18n(color.label), "-").concat(color.realValue));
            }
          }
        }, React__default.createElement("div", {
          className: cx('ThemeColorList-content-label', value === color.value && 'ThemeColorList-content-label--active'),
          onClick: function () {
            return setColor(color.value);
          }
        }, React__default.createElement("div", {
          className: cx('ThemeColorList-content-label-inner', color.realValue === '#ffffff' && 'ThemeColorList-content-label--border'),
          style: {
            background: color.value
          }
        }))) : null;
      }))) : null;
    })) : null;
  }) : React__default.createElement("span", {
    className: "ThemeColorList-content-title"
  }, i18n("d6a80fc3f53d0b11e5f96a538b096c06")));
}
function CustomColor(props) {
  var value = props.value,
    onChange = props.onChange,
    themeList = props.themeList;
  if ((value === null || value === void 0 ? void 0 : value.indexOf('var')) === 0) {
    var res = findColor(value, themeList).value;
    value = res;
  }
  return React__default.createElement("div", {
    className: "Theme-CustomColor"
  }, React__default.createElement(SketchPicker, {
    width: "216px",
    color: value,
    presetColors: [],
    onChangeComplete: function (value) {
      if (value.rgb.a === 1) {
        onChange(value.hex);
      } else {
        var rag = value.rgb;
        onChange("rgba(".concat(rag.r, ", ").concat(rag.g, ", ").concat(rag.b, ", ").concat(rag.a, ")"));
      }
    }
  }));
}
function GradientColor(props) {
  var _a;
  var slider = useRef(null);
  var rangeRef = useRef(null);
  var rangeRefPanel = useRef(null);
  var value = props.value,
    onChange = props.onChange,
    themeList = props.themeList;
  var _b = useState([]),
    colors = _b[0],
    setColors = _b[1];
  var _c = useState(0),
    index = _c[0],
    setIndex = _c[1];
  var _d = useState(0),
    range = _d[0],
    setRange = _d[1];
  var _e = useState(false),
    rangeShow = _e[0],
    setRangeShow = _e[1];
  var _f = useState(false),
    move = _f[0],
    setMove = _f[1];
  var currentIndex = index;
  // 格式化渐变
  function formatGradient(value) {
    var str = /linear-gradient\((.*)\)/.exec(value);
    if (!str) return {
      colors: [],
      range: 0
    };
    str = str[1];
    var bracketStart = false;
    var length = str.length;
    var rangeAndColor = [];
    var j = 0;
    rangeAndColor[j] = '';
    for (var i = 0; i < length; i++) {
      var w = str[i];
      if (w === '(') {
        bracketStart = true;
      }
      if (w === ')') {
        bracketStart = false;
      }
      if (w === ',' && !bracketStart) {
        j++;
        rangeAndColor[j] = '';
      } else {
        rangeAndColor[j] += w;
      }
    }
    var range = parseFloat(rangeAndColor.shift());
    var len = rangeAndColor.length;
    var res = [];
    rangeAndColor.forEach(function (item, i) {
      var colorAndPosition = /(.*) (.*)/.exec(item);
      var color = {
        color: findColor(colorAndPosition[1], themeList).value,
        position: (i + 1) / len * 100
      };
      if (colorAndPosition[2]) {
        color.position = parseFloat(colorAndPosition[2]);
      }
      res.push(color);
    });
    return {
      colors: res,
      range: range
    };
  }
  useEffect(function () {
    if ((value === null || value === void 0 ? void 0 : value.indexOf('linear-gradient')) === 0) {
      var _a = formatGradient(value),
        colors_1 = _a.colors,
        range_1 = _a.range;
      setColors(colors_1);
      setRange(range_1);
    } else {
      var color = value;
      if ((value === null || value === void 0 ? void 0 : value.indexOf('url')) === 0) {
        color = '#fff';
      }
      setColors([{
        color: color || '#fff',
        position: 0
      }, {
        color: color || '#fff',
        position: 100
      }]);
    }
  }, [value]);
  function gradientChange(range, colors) {
    onChange("linear-gradient(".concat(range, "deg,").concat(colors.map(function (item) {
      return "".concat(item.color, " ").concat(item.position, "%");
    }).join(','), ")"));
  }
  // 渐变角度改变
  function rangeChange(value) {
    setRange(value);
    gradientChange(value, colors);
  }
  // 添加渐变点
  function handleClickSlider(e) {
    if (move) {
      return;
    }
    var target = e.currentTarget.getBoundingClientRect();
    var itemPosition = Math.round((e.clientX - target.x) / target.width * 100);
    var tempColors = cloneDeep(colors);
    var len = tempColors.length;
    var index = 0;
    if (tempColors[0].position > itemPosition) {
      tempColors.unshift({
        color: tempColors[0].color,
        position: itemPosition
      });
    } else if (tempColors[len - 1].position < itemPosition) {
      tempColors.push({
        color: tempColors[len - 1].color,
        position: itemPosition
      });
      index = len;
    } else {
      for (var i = 0; i < len; i++) {
        if (tempColors[i].position < itemPosition && tempColors[i + 1].position > itemPosition) {
          index = i + 1;
          tempColors.splice(index, 0, {
            color: tempColors[i].color,
            position: itemPosition
          });
          break;
        }
      }
    }
    setColors(tempColors);
    setIndex(index);
    gradientChange(range, tempColors);
  }
  // 按住渐变点
  function handleDownSliderItem(e, i) {
    setIndex(i);
    setMove(true);
    currentIndex = i;
    window.addEventListener('mousemove', handleMoveSliderItem);
    window.addEventListener('mouseup', handleUpSliderItem);
  }
  // 移动渐变点
  function handleMoveSliderItem(e) {
    var target = slider.current.getBoundingClientRect();
    var itemPosition = Math.round((e.x - target.x) / target.width * 100);
    var tempColors = cloneDeep(colors);
    // 渐变点个数大于2，当y轴移动大于30，删除渐变点
    if (Math.abs(e.y - target.y) > 30 && tempColors.length > 2) {
      tempColors.splice(currentIndex, 1);
      setIndex(0);
      setColors(tempColors);
      gradientChange(range, tempColors);
    }
    // 限制不能超过最大、最小值
    else if (itemPosition >= 0 && itemPosition <= 100) {
      tempColors[currentIndex].position = itemPosition;
      // 向前交换渐变点
      if (tempColors[currentIndex - 1] && itemPosition < tempColors[currentIndex - 1].position) {
        var temp = cloneDeep(tempColors[currentIndex - 1]);
        tempColors[currentIndex - 1] = cloneDeep(tempColors[currentIndex]);
        tempColors[currentIndex] = temp;
        setIndex(currentIndex - 1);
      }
      // 向后交换渐变点
      else if (tempColors[currentIndex + 1] && itemPosition > tempColors[currentIndex + 1].position) {
        var temp = cloneDeep(tempColors[currentIndex + 1]);
        tempColors[currentIndex + 1] = cloneDeep(tempColors[currentIndex]);
        tempColors[currentIndex] = temp;
        setIndex(currentIndex + 1);
      }
      setColors(tempColors);
      gradientChange(range, tempColors);
    }
  }
  // 放开渐变点
  function handleUpSliderItem() {
    window.removeEventListener('mousemove', handleMoveSliderItem);
    window.removeEventListener('mouseup', handleUpSliderItem);
    setTimeout(function () {
      setMove(false);
    }, 0);
  }
  // 通过角度计算位置
  function computedRange(angle) {
    if (angle === void 0) {
      angle = 0;
    }
    var radian = Math.PI / 180 * angle;
    var left = 21 + Math.sin(radian) * 25;
    var top = 21 - Math.cos(radian) * 25;
    return {
      left: left,
      top: top
    };
  }
  // 按下渐变角度句柄
  function handleDownRange() {
    window.addEventListener('mousemove', handleMoveRange);
    window.addEventListener('mouseup', handleUpRange);
  }
  // 移动渐变角度句柄
  function handleMoveRange(e) {
    var panel = rangeRefPanel.current.getBoundingClientRect();
    var panelX = panel.x + 25;
    var panelY = panel.y + 25;
    var x = Math.abs(e.x - panelX);
    var y = Math.abs(e.y - panelY);
    var angle = Math.round(Math.atan(x / y) * 180 / Math.PI);
    // 二象限
    if (e.y > panelY && e.x > panelX) {
      angle = 180 - angle;
    }
    // 三象限
    if (e.x <= panelX && e.y > panelY) {
      angle = 180 + angle;
    }
    // 四象限
    if (e.x < panelX && e.y < panelY) {
      angle = 360 - angle;
    }
    setRange(angle);
    gradientChange(angle, colors);
  }
  // 抬起渐变角度句柄
  function handleUpRange() {
    window.removeEventListener('mousemove', handleMoveRange);
    window.removeEventListener('mouseup', handleUpRange);
  }
  return React__default.createElement("div", {
    className: "Theme-GradientColor"
  }, React__default.createElement("div", {
    className: "Theme-GradientColor-slider"
  }, React__default.createElement("div", {
    ref: slider,
    className: "Theme-GradientColor-slider-inner",
    style: {
      backgroundImage: "linear-gradient(to right,".concat(colors.map(function (item) {
        return "".concat(item.color, " ").concat(item.position, "%");
      }).join(','), ")")
    },
    onClick: handleClickSlider
  }, colors.map(function (item, i) {
    return React__default.createElement("div", {
      key: i,
      className: cx('Theme-GradientColor-slider-inner-item', i === index && 'Theme-GradientColor-slider-inner-item--active'),
      onMouseDown: function (e) {
        handleDownSliderItem(e, i);
      },
      onClick: function (e) {
        e.stopPropagation();
      },
      style: {
        left: "calc(".concat(item.position, "% - 7px)"),
        background: item.color
      }
    });
  })), React__default.createElement("div", {
    className: "Theme-GradientColor-range",
    ref: rangeRef,
    onClick: function (e) {
      setRangeShow(true);
      e.stopPropagation();
      window.addEventListener('click', function () {
        setRangeShow(false);
      });
    }
  }, React__default.createElement(NumberInput, {
    formatter: function (value) {
      return value + '°';
    },
    max: 360,
    min: 0,
    value: range,
    onChange: rangeChange
  }), React__default.createElement(Overlay
  // @ts-ignore
  , {
    // @ts-ignore
    container: document.body,
    // @ts-ignore
    target: rangeRef.current,
    show: rangeShow,
    placement: "center-bottom-center-top",
    rootClose: false,
    offset: [0, 4]
  }, React__default.createElement(PopOver, null, React__default.createElement("div", {
    className: "Theme-GradientColor-range-panel"
  }, React__default.createElement("div", {
    className: "Theme-GradientColor-range-panel-title"
  }, i18n("c7706039e8ad85969df13ce3458d199a")), React__default.createElement("div", {
    className: "Theme-GradientColor-range-panel-content",
    ref: rangeRefPanel
  }, React__default.createElement("div", {
    className: "Theme-GradientColor-range-panel-content-handler",
    onMouseDown: handleDownRange,
    style: {
      left: computedRange(range).left + 'px',
      top: computedRange(range).top + 'px'
    }
  }))))))), React__default.createElement(SketchPicker, {
    width: "216px",
    color: (_a = colors[index]) === null || _a === void 0 ? void 0 : _a.color,
    presetColors: [],
    onChangeComplete: function (value) {
      var color = value.hex;
      if (value.rgb.a !== 1) {
        var rag = value.rgb;
        color = "rgba(".concat(rag.r, ", ").concat(rag.g, ", ").concat(rag.b, ", ").concat(rag.a, ")");
      }
      var colorsTemp = cloneDeep(colors);
      colorsTemp[index].color = color;
      setColors(colorsTemp);
      gradientChange(range, colorsTemp);
    }
  }));
}
function ImageInput(props) {
  var onChange = props.onChange,
    value = props.value,
    imageType = props.imageType,
    receiver = props.receiver,
    env = props.env;
  var _a = useState(''),
    image = _a[0],
    setImage = _a[1];
  var _b = useState('auto'),
    mode = _b[0],
    setMode = _b[1];
  var _c = useState(4),
    position = _c[0],
    setPosition = _c[1];
  var _d = useState(''),
    color = _d[0],
    setColor = _d[1];
  function formatData() {
    var _a, _b;
    var list = value.split(' ');
    var imgRes = /url\((.*)\)/.exec(list[0]);
    if (imgRes) {
      var img = imgRes[1];
      setImage(img);
      var res = value.replace(imgRes[0] + ' ', '');
      var list_1 = res.split(' ');
      // 解析position
      var position_1 = list_1[0] + ' ' + list_1[1];
      var index = POSITION_MAP.findIndex(function (n) {
        return n === position_1;
      });
      setPosition(index);
      res = res.replace(position_1 + ' / ', '');
      list_1 = res.split(' ');
      // 解析mode
      var mode_1 = list_1[0];
      if (~((_a = list_1[1]) === null || _a === void 0 ? void 0 : _a.indexOf('repeat'))) {
        mode_1 += ' ' + list_1[1];
      }
      if (~((_b = list_1[1]) === null || _b === void 0 ? void 0 : _b.indexOf('100%'))) {
        mode_1 = '100% 100% no-repeat';
      }
      setMode(mode_1);
      // 解析color
      var color_1 = res.replace(mode_1 + ' ', '');
      setColor(color_1);
    }
  }
  useEffect(function () {
    formatData();
  }, [value]);
  return React__default.createElement("div", {
    className: "Theme-ImageInput"
  }, render({
    type: imageType || 'input-image',
    receiver: receiver,
    name: 'image',
    onChange: function (url) {
      if (url) {
        onChange("url(".concat(url, ") ").concat(POSITION_MAP[position], " / ").concat(mode, " ").concat(color));
      }
    }
  }, {
    data: {
      image: image
    }
  }, __assign({}, env)), React__default.createElement("div", {
    className: "Theme-ImageInput-func"
  }, React__default.createElement(Select, {
    className: ":Theme-ImageInput-fill",
    value: mode,
    clearable: false,
    options: [{
      label: i18n("21f3929a4484e6e992af64ec1dd3a576"),
      value: 'auto no-repeat'
    }, {
      label: i18n("0f1fd39145bad43e18f81337e0144c8c"),
      value: 'cover no-repeat'
    }, {
      label: i18n("e0d76824dfe5e09c7068b44f605266d2"),
      value: 'contain no-repeat'
    }, {
      label: i18n("e39d3b7a3600d9327221a637f910fc0b"),
      value: '100% 100% no-repeat'
    }, {
      label: i18n("e1ff2c83c09f2dc6cc74ae02ab6b8222"),
      value: 'auto repeat'
    }, {
      label: i18n("7ddd9dbf373f760acfd63778469b5c4b"),
      value: 'auto repeat-x'
    }, {
      label: i18n("4ab931e0f709f9b493e660156925a113"),
      value: 'auto repeat-y'
    }],
    onChange: function (res) {
      if (image && (res === null || res === void 0 ? void 0 : res.value)) {
        onChange("url(".concat(image, ") ").concat(POSITION_MAP[position], " / ").concat(res.value, " ").concat(color));
      }
    }
  }), React__default.createElement(ImagePosition, {
    value: position,
    onChange: function (value) {
      onChange("url(".concat(image, ") ").concat(POSITION_MAP[value], " / ").concat(mode, " ").concat(color));
    }
  }), React__default.createElement(ImageColor, __assign({}, props, {
    value: color,
    onChange: function (value) {
      onChange("url(".concat(image, ") ").concat(POSITION_MAP[position], " / ").concat(mode, " ").concat(value));
    }
  }))));
}
function ImagePosition(_a) {
  var value = _a.value,
    onChange = _a.onChange;
  var positionMap = Array.from(Array(9).keys());
  var _b = useState(false),
    show = _b[0],
    setShow = _b[1];
  var target = useRef(null);
  function close() {
    setShow(false);
  }
  function positionChange(value) {
    onChange(value);
  }
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
    className: "Theme-ImageInput-position",
    ref: target,
    onClick: function () {
      setShow(true);
    }
  }, positionMap.map(function (position) {
    return React__default.createElement("div", {
      key: position,
      className: cx('Theme-ImageInput-position-item', value === position && 'Theme-ImageInput-position-item--active')
    });
  })), React__default.createElement(Overlay
  // @ts-ignore
  , {
    // @ts-ignore
    container: document.body,
    target: target.current,
    show: show,
    offset: [0, 4]
  }, React__default.createElement(PopOver, {
    overlay: true,
    onHide: close
  }, React__default.createElement("div", {
    className: "Theme-ImageInput-position-container"
  }, React__default.createElement("div", {
    className: "Theme-ImageInput-position-title"
  }, i18n("61a87a021904dc65995e99d4c476cb21")), React__default.createElement("div", {
    className: "Theme-ImageInput-position-content"
  }, positionMap.map(function (position) {
    return React__default.createElement("div", {
      key: position,
      className: cx('Theme-ImageInput-position-content-item', value === position && 'Theme-ImageInput-position-content-item--active'),
      onClick: function () {
        positionChange(position);
      }
    });
  }))))));
}
function ImageColor(props) {
  var value = props.value,
    onChange = props.onChange,
    themeList = props.themeList,
    subTabList = props.subTabList;
  var _a = useState(false),
    show = _a[0],
    setShow = _a[1];
  var _b = useState(0),
    tab = _b[0],
    setTab = _b[1];
  var target = useRef(null);
  function close() {
    setShow(false);
  }
  function handleTab(value) {
    setTab(value);
  }
  useEffect(function () {
    if (~value.indexOf('var')) {
      setTab(0);
    } else {
      setTab(1);
    }
  }, [value]);
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
    ref: target,
    className: "Theme-ImageInput-color",
    style: {
      background: value
    },
    onClick: function () {
      setShow(true);
    }
  }), React__default.createElement(Overlay
  // @ts-ignore
  , {
    // @ts-ignore
    container: document.body,
    target: target.current,
    show: show,
    offset: [0, 4]
  }, React__default.createElement(PopOver, {
    overlay: true,
    onHide: close
  }, React__default.createElement("div", {
    className: "Theme-ImageInput-color-container"
  }, React__default.createElement("div", {
    className: "Theme-ImageInput-color-content"
  }, React__default.createElement("div", {
    className: "Theme-ImageInput-color-content-tab"
  }, subTabList.map(function (item) {
    return React__default.createElement("div", {
      className: cx('Theme-ImageInput-color-content-tab-item', tab === item.id && 'Theme-ImageInput-color-content-tab-item--active'),
      onClick: function () {
        handleTab(item.id);
      },
      key: item.id
    }, item.name);
  })), tab === 0 ? React__default.createElement(ThemeColorList, __assign({}, props, {
    themeList: themeList,
    onChange: function (value) {
      onChange(value);
      close();
    },
    value: value
  })) : null, tab === 1 ? React__default.createElement(CustomColor, {
    onChange: onChange,
    value: value,
    themeList: themeList
  }) : null)))));
}
/**
 * 最近颜色列表
 */
function PresetColors(props) {
  var themeList = props.themeList,
    onChange = props.onChange,
    onRef = props.onRef,
    needGradient = props.needGradient,
    needImage = props.needImage,
    needTheme = props.needTheme,
    needCustom = props.needCustom;
  var _a = useState({
      colors: [],
      linearGradient: [],
      img: []
    }),
    colors = _a[0],
    setColors = _a[1];
  var _b = useState(false),
    edit = _b[0],
    setEdit = _b[1];
  function setPresetColor(value) {
    if (!value) {
      return;
    }
    var presetColors = cloneDeep(colors);
    if (!!~value.indexOf('linear-gradient')) {
      if (presetColors.linearGradient.length < 8 && !colors.linearGradient.find(function (n) {
        return n.color === value;
      })) {
        presetColors.linearGradient.unshift({
          color: value,
          title: value
        });
      }
    } else if (!!~value.indexOf('url')) {
      // 图片不加入最近颜色列表
      return;
      // if (
      //   presetColors.img.length < 8 &&
      //   !colors.img.find(n => n.color === value)
      // ) {
      //   presetColors.img.unshift({
      //     color: value,
      //     title: value
      //   });
      // }
    } else if (presetColors.colors.length < 8 && !colors.colors.find(function (n) {
      return n.color === value;
    })) {
      var title = void 0;
      if (value.indexOf('var(') === 0) {
        title = findColor(value, themeList).label;
      }
      presetColors.colors.unshift({
        color: value,
        title: title
      });
    }
    localStorage.setItem('presetColors', JSON.stringify(presetColors));
    setColors(presetColors);
  }
  useImperativeHandle(onRef, function () {
    return {
      setPresetColor: debounce(setPresetColor, 500)
    };
  });
  useEffect(function () {
    var presetColors;
    try {
      presetColors = JSON.parse(localStorage.getItem('presetColors') || '');
    } catch (e) {
      presetColors = {
        colors: [],
        linearGradient: [],
        img: []
      };
    }
    setColors(presetColors);
  }, []);
  function getColorsLen(colors) {
    return colors.colors.length + colors.linearGradient.length + colors.img.length;
  }
  function colorClick(color, index, type) {
    if (edit) {
      var newColors = cloneDeep(colors);
      newColors[type].splice(index, 1);
      setColors(newColors);
      localStorage.setItem('presetColors', JSON.stringify(newColors));
      if (getColorsLen(newColors) === 0) {
        setEdit(false);
      }
    } else {
      onChange(color);
    }
  }
  return React__default.createElement("div", {
    className: "Theme-ColorSelect-PresetColors"
  }, React__default.createElement("div", {
    className: "Theme-ColorSelect-PresetColors-header"
  }, React__default.createElement("span", {
    className: "Theme-ColorSelect-PresetColors-title"
  }, i18n("7778401c65bfef9c0ad4d543e3b5b310")), getColorsLen(colors) > 0 ? React__default.createElement("span", {
    className: cx('Theme-ColorSelect-PresetColors-edit', edit && 'Theme-ColorSelect-PresetColors-editing'),
    onClick: function () {
      setEdit(!edit);
    }
  }, edit ? i18n("769d88e425e03120b83ee4ed6b9d588e") : i18n("95b351c86267f3aedf89520959bce689")) : null), React__default.createElement("div", null, getColorsLen(colors) > 0 ? Object.keys(colors).map(function (key) {
    if (!needGradient && key === 'linearGradient') {
      return null;
    }
    if (!needImage && key === 'img') {
      return null;
    }
    if (!needTheme && !needCustom && key === 'colors') {
      return null;
    }
    return colors[key].length > 0 ? React__default.createElement("div", {
      key: key,
      className: cx('Theme-ColorSelect-PresetColors-content', edit && 'Theme-ColorSelect-PresetColors-content-editing')
    }, colors[key].map(function (color, index) {
      return React__default.createElement(TooltipWrapper, {
        trigger: "hover",
        placement: "left",
        tooltip: {
          children: function () {
            return React__default.createElement("div", null, color.title || color.color);
          }
        },
        key: color.color,
        container: document.body
      }, React__default.createElement("div", {
        className: "ThemeColor--transparent Theme-ColorPicker-label-out",
        onClick: function () {
          colorClick(color.color, index, key);
        }
      }, React__default.createElement("div", {
        style: {
          background: color.color
        },
        className: "Theme-ColorSelect-PresetColors-content-item"
      })));
    })) : null;
  }) : React__default.createElement("span", {
    className: "Theme-ColorSelect-PresetColors-content-placeholder"
  }, i18n("ec8baa57611b5a89a37b31c7432a01d7"))));
}
function ColorSelect(props) {
  var show = props.show,
    target = props.target,
    themeList = props.themeList,
    onChange = props.onChange,
    close = props.close,
    value = props.value,
    needGradient = props.needGradient,
    needImage = props.needImage,
    needTheme = props.needTheme,
    needCustom = props.needCustom;
  var _a = useState('color'),
    tab = _a[0],
    setTab = _a[1];
  var _b = useState(0),
    subTab = _b[0],
    setSubTab = _b[1];
  var presetColorRef = useRef();
  var tabMap = {
    color: {
      name: 'color'
    }
  };
  if (needGradient) {
    tabMap['gradient'] = {
      name: 'gradient'
    };
  }
  if (needImage) {
    tabMap['img'] = {
      name: 'img',
      icon: React__default.createElement(Icon$1, {
        icon: "color-picker-img"
      }),
      activeIcon: React__default.createElement(Icon$1, {
        icon: "color-picker-img-active"
      })
    };
  }
  var subTabList = [needTheme && themeList && themeList.length > 0 && {
    name: i18n("a1c76c6e1bd796959e536718e04d10ca"),
    parent: 'color',
    id: 0
  }, needCustom && {
    name: i18n("255f442c4a1b92624a6e96541202a0be"),
    parent: 'color',
    id: 1
  }].filter(function (n) {
    return n;
  });
  function setSubTabCheck() {
    if (needTheme && value.indexOf('#') !== 0 && value.indexOf('rgba') !== 0 && subTabList.find(function (item) {
      return item.id === 0;
    })) {
      setSubTab(0);
    } else if (needCustom && subTabList.find(function (item) {
      return item.id === 1;
    })) {
      setSubTab(1);
    }
  }
  useEffect(function () {
    if (needTheme && ((value === null || value === void 0 ? void 0 : value.indexOf('var')) === 0 || value === 'transparent' || !value) && subTabList.find(function (item) {
      return item.id === 0;
    })) {
      setTab('color');
      setSubTab(0);
    } else if (needGradient && (value === null || value === void 0 ? void 0 : value.indexOf('linear-gradient')) === 0) {
      setTab('gradient');
    } else if (needImage && (value === null || value === void 0 ? void 0 : value.indexOf('url')) === 0) {
      setTab('img');
    } else if (needCustom && subTabList.find(function (item) {
      return item.id === 1;
    })) {
      setTab('color');
      setSubTab(1);
    }
  }, [show]);
  useEffect(function () {
    if (needTheme) {
      setSubTab(0);
    } else if (needCustom) {
      setSubTab(1);
    }
  }, [needCustom, needTheme]);
  function colorOnChange(value) {
    var _a;
    onChange(value);
    (_a = presetColorRef.current) === null || _a === void 0 ? void 0 : _a.setPresetColor(value);
  }
  function renderSubTab() {
    var list = subTabList.filter(function (item) {
      return item.parent === tab;
    });
    if (list.length > 0) {
      return React__default.createElement("div", {
        className: "Theme-ColorSelect-tab-sub"
      }, list.map(function (item) {
        return React__default.createElement("div", {
          key: item.id,
          className: cx('Theme-ColorSelect-tab-sub-item', subTab === item.id && 'Theme-ColorSelect-tab-sub--active'),
          onClick: function () {
            return setSubTab(item.id);
          }
        }, item.name);
      }));
    } else {
      return null;
    }
  }
  return React__default.createElement(Overlay
  // @ts-ignore
  , {
    // @ts-ignore
    container: document.body,
    target: target.current,
    show: show,
    placement: "left"
  }, React__default.createElement(PopOver, {
    overlay: true,
    onHide: close
  }, React__default.createElement("div", {
    className: "Theme-ColorSelect"
  }, Object.keys(tabMap).length > 1 ? React__default.createElement("div", {
    className: "Theme-ColorSelect-tab"
  }, Object.keys(tabMap).map(function (key) {
    return React__default.createElement("div", {
      key: key,
      className: cx('Theme-ColorSelect-tab-' + key, tab === key && "Theme-ColorSelect-tab-".concat(key, "--active")),
      onClick: function () {
        setTab(key);
        setSubTabCheck();
      }
    }, tab === key ? tabMap[key].activeIcon : tabMap[key].icon);
  })) : null, renderSubTab(), React__default.createElement("div", {
    className: "Theme-ColorSelect-content"
  }, tab === 'color' ? React__default.createElement("div", {
    className: "Theme-ColorSelect-content-color"
  }, subTab === 0 ? React__default.createElement(ThemeColorList, __assign({}, props, {
    themeList: themeList,
    onChange: colorOnChange,
    value: value
  })) : null, subTab === 1 ? React__default.createElement(CustomColor, {
    onChange: colorOnChange,
    value: value,
    themeList: themeList
  }) : null) : null, tab === 'gradient' ? React__default.createElement(GradientColor, {
    value: value,
    onChange: colorOnChange,
    themeList: themeList
  }) : null, tab === 'img' ? React__default.createElement(ImageInput, __assign({}, props, {
    value: value,
    onChange: colorOnChange,
    subTabList: subTabList
  })) : null, React__default.createElement(PresetColors, {
    onRef: presetColorRef,
    onChange: colorOnChange,
    themeList: themeList,
    needGradient: needGradient,
    needImage: needImage,
    needTheme: needTheme,
    needCustom: needCustom
  })))));
}
function ColorPicker(props) {
  var _a;
  var value = props.value,
    options = props.options,
    data = props.data,
    onChange = props.onChange,
    labelMode = props.labelMode,
    needGradient = props.needGradient,
    needImage = props.needImage,
    needTheme = props.needTheme,
    needCustom = props.needCustom,
    placeholder = props.placeholder,
    disabled = props.disabled,
    readOnly = props.readOnly;
  var themeList = options;
  if (typeof options === 'string') {
    themeList = resolveVariableAndFilter(options, data, '| raw');
  }
  var container = useRef(null);
  var target = useRef(null);
  var _b = useState(value),
    color = _b[0],
    setColor = _b[1];
  var _c = useState(false),
    show = _c[0],
    setShow = _c[1];
  function colorSelectHandler() {
    !disabled && setShow(!show);
  }
  function handleClean(event) {
    setColor(undefined);
    onChange(undefined);
    event.preventDefault();
    event.stopPropagation();
  }
  useEffect(function () {
    setColor(value);
  }, [value]);
  return React__default.createElement("div", {
    className: cx('Theme-ColorPicker', disabled && 'is-disabled', readOnly && 'is-readOnly'),
    ref: container
  }, React__default.createElement("div", {
    className: cx('Theme-ColorPicker', labelMode === 'input' && 'Theme-ColorPicker--input'),
    onClick: colorSelectHandler,
    ref: target
  }, React__default.createElement("div", {
    className: "ThemeColor--transparent Theme-ColorPicker-label-out"
  }, findColor(color || placeholder, themeList).value ? React__default.createElement(TooltipWrapper, {
    trigger: "hover",
    placement: "left",
    disabled: labelMode === 'input',
    tooltip: {
      children: function () {
        return React__default.createElement("div", null, findColor(color || placeholder, themeList).label);
      }
    }
  }, React__default.createElement("div", {
    className: cx('Theme-ColorPicker-label'),
    style: {
      background: findColor(color || placeholder, themeList).value
    }
  })) : React__default.createElement("div", {
    className: "ThemeColor--delete"
  })), labelMode === 'input' ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
    className: cx('Theme-ColorPicker-input')
  }, color ? React__default.createElement("div", null, findColor(color, themeList).label) : React__default.createElement("div", {
    className: cx('Theme-ColorPicker-input--placeholder')
  }, ((_a = findColor(placeholder, themeList)) === null || _a === void 0 ? void 0 : _a.label) || placeholder)), value && !disabled && !readOnly ? React__default.createElement("span", {
    className: classnames('Select-clear'),
    onClick: handleClean
  }, React__default.createElement(Icon, {
    icon: "input-clear",
    className: "icon"
  })) : null, React__default.createElement("span", {
    className: cx('Theme-ColorPicker-arrow', show && 'Theme-ColorPicker-arrow--active')
  }, React__default.createElement(Icon, {
    icon: "right-arrow-bold",
    className: "icon"
  }))) : null), React__default.createElement(ColorSelect, __assign({}, props, {
    needGradient: needGradient !== null && needGradient !== void 0 ? needGradient : false,
    needImage: needImage !== null && needImage !== void 0 ? needImage : false,
    needTheme: needTheme !== null && needTheme !== void 0 ? needTheme : true,
    needCustom: needCustom !== null && needCustom !== void 0 ? needCustom : false,
    value: value || placeholder || '',
    show: show,
    close: function () {
      setShow(false);
    },
    container: container,
    target: target,
    themeList: themeList,
    onChange: onChange
  })));
}
function ColorPickerControl(props) {
  var _a;
  var editorDefaultValue = getValueByPath(props.editorThemePath || '', props.data);
  var value = formatInheritData(props.value) || editorDefaultValue;
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ColorPicker, __assign({}, props, {
    placeholder: value,
    options: props.options || props.data.colorOptions,
    labelMode: (_a = props.labelMode) !== null && _a !== void 0 ? _a : 'default',
    needGradient: props.needGradient,
    needImage: props.needImage,
    needTheme: props.needTheme,
    needCustom: props.needCustom
  })));
}
/** @class */(function (_super) {
  __extends(ColorPickerRenderer, _super);
  function ColorPickerRenderer() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(ColorPickerRenderer.prototype, "render", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function () {
      var _a;
      return React__default.createElement(ColorPickerControl, __assign({}, this.props, {
        labelMode: (_a = this.props.labelMode) !== null && _a !== void 0 ? _a : 'default',
        needGradient: this.props.needGradient,
        needImage: this.props.needImage,
        needTheme: this.props.needTheme,
        needCustom: this.props.needCustom
      }));
    }
  });
  ColorPickerRenderer = __decorate([FormItem({
    type: 'amis-theme-color-picker',
    strictMode: false,
    renderLabel: true
  })], ColorPickerRenderer);
  return ColorPickerRenderer;
})(React__default.Component);

export { ColorPicker as default };