dtable-ui-component 5.0.19 → 5.0.21-alpha.1

package/lib/DTableColorPicker/constants/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RGB_COLORS_MAP = exports.DEFAULT_COLORS = exports.COLOR_PICKER_MODE = void 0;
+const DEFAULT_COLORS = exports.DEFAULT_COLORS = ['#ffffff', '#f5f5f5', '#eef6f9', '#deffe6', '#def7c4', '#fefdb5', '#feebb6', '#ffdde5'];
+const COLOR_PICKER_MODE = exports.COLOR_PICKER_MODE = {
+  HEX: 'hex',
+  RGBA: 'rgba'
+};
+const RGB_COLORS_MAP = exports.RGB_COLORS_MAP = {
+  RED: 'r',
+  GREEN: 'g',
+  BLUT: 'b'
+};

package/lib/DTableColorPicker/index.css

@@ -0,0 +1,145 @@
+.dtable-color-picker {
+  width: 240px;
+  background-color: #fff;
+  border-radius: 2px;
+  padding: 0.75rem;
+  line-height: normal;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px
+}
+
+.dtable-color-picker .chrome-picker {
+  width: 100% !important;
+  box-shadow: unset !important;
+}
+
+.dtable-color-picker .colorinput-color {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.dtable-color-picker .colorinput-color .dtable-icon-color-check {
+  color: #666;
+  font-size: 12px;
+}
+
+.dtable-color-picker .dark .colorinput-color .dtable-icon-color-check {
+  color: #fff;
+}
+
+.dtable-color-picker .blank-placeholder {
+  width: 20px;
+  height: 20px;
+  border: 2px #eee solid;
+  border-radius: 4px;
+}
+
+.dtable-color-picker .blank-placeholder span {
+  color: red;
+  transform: rotate(120deg) translate(0px, -2px);
+  font-size: 16px;
+}
+
+.dtable-color-picker .chrome-picker > div:first-of-type {
+  height: 140px;
+  border-radius: 2px !important;
+}
+
+.dtable-color-picker .chrome-picker > div:nth-child(2) {
+  padding: 0.75rem 0 !important;
+}
+
+.dtable-color-picker .color-setting {
+  font-size: 13px;
+}
+
+.dtable-color-picker .color-setting .mode-btn {
+  color: #666;
+}
+
+.dtable-color-picker .color-setting input {
+  height: 24px;
+  font-family: inherit;
+  font-size: 13px;
+}
+
+.dtable-color-picker .color-setting .hex-container {
+  position: relative;
+}
+
+.dtable-color-picker .color-setting .hex-container span {
+  position: absolute;
+  top: 4.8px;
+  left: 10px;
+  color: #999;
+}
+
+.dtable-color-picker .color-setting .hex-input {
+  padding-left: 20px;
+  width: 100px;
+}
+
+.dtable-color-picker .color-setting .rgb-container span {
+  margin: 0 2px 0 4px;
+  color: #999;
+}
+
+.dtable-color-picker .color-setting .rgb-input {
+  width: 28px;
+  display: inline-block;
+  padding: 0 0 0 2px;
+}
+
+.dtable-color-picker .color-setting .alpha-input {
+  width: 60px;
+  margin-left: 0.5rem;
+}
+
+.dtable-color-picker .color-setting.rgba .alpha-input {
+  width: 40px;
+  padding: 0 0 0 2px;
+  margin-left: 4px;
+}
+
+.dtable-color-picker .color-setting .dtable-font {
+  font-size: 13px;
+  margin-left: 2px;
+  color: #ccc;
+  display: inline-block;
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+.dtable-color-picker .color-setting .dtable-font:hover {
+  color: #999;
+}
+
+.dtable-color-picker .saturation-black {
+  cursor: pointer;
+}
+
+.dtable-color-picker .chrome-picker .color-bar .hue-horizontal,
+.dtable-color-picker .chrome-picker .color-bar > div:last-of-type > div:last-of-type > div > div:first-of-type,
+.dtable-color-picker .chrome-picker .color-bar > div:last-of-type > div:last-of-type > div > div:nth-child(2) {
+  border-radius: 10px;
+}
+
+.dtable-color-picker .chrome-picker .color-bar .hue-horizontal,
+.dtable-color-picker .chrome-picker > div:nth-child(2) > div > div > div:nth-child(2) {
+  cursor: pointer;
+}
+
+.dtable-color-picker .chrome-picker .color-bar > div:first-of-type > div {
+  margin-top: 4px !important;
+  width: 20px !important;
+  height: 20px !important;
+  border-radius: 2px !important;
+}
+
+.dtable-color-picker .chrome-picker .color-bar > div:first-of-type > div > div:first-of-type {
+  border-radius: 2px !important;
+}
+
+.dtable-color-picker .chrome-picker > div:nth-child(2) > div:nth-child(2) {
+  display: none !important;
+}

package/lib/DTableColorPicker/index.js

@@ -0,0 +1,322 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _reactColor = require("react-color");
+var _lang = require("../lang");
+var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+var _constants = require("./constants");
+var _utils = require("./utils");
+require("./index.css");
+const DTableColorPicker = props => {
+  const {
+    onToggle,
+    popoverStyle,
+    color,
+    defaultColors,
+    storageKey
+  } = props;
+  const initialRgbaColor = (0, _utils.hexToRgba)(color);
+  const [value, setValue] = (0, _react.useState)(initialRgbaColor);
+  const [hexVal, setHexVal] = (0, _react.useState)((0, _utils.getInitialHexVal)(color));
+  const [alphaVal, setAlphaVal] = (0, _react.useState)((0, _utils.toPercentage)(initialRgbaColor.a));
+  const [redVal, setRedVal] = (0, _react.useState)(initialRgbaColor.r);
+  const [greenVal, setGreenVal] = (0, _react.useState)(initialRgbaColor.g);
+  const [blueVal, setBlueVal] = (0, _react.useState)(initialRgbaColor.b);
+  const [colorMode, setColorMode] = (0, _react.useState)(_constants.COLOR_PICKER_MODE.HEX); // hex or rgb
+  const currentUsedColorsStr = window.localStorage.getItem(storageKey);
+  let currentUsedColors = currentUsedColorsStr ? JSON.parse(currentUsedColorsStr) : [];
+  (0, _react.useEffect)(() => {
+    document.querySelector('.chrome-picker > div:last-of-type > .flexbox-fix:first-of-type').classList.add('color-bar');
+  }, []);
+  const onChangeChromePicker = newColor => {
+    const rgba = newColor.rgb;
+    rgba.a = Math.round(rgba.a * 100) / 100;
+    const transferedHex = (0, _utils.rgbaToHex)(rgba);
+    const hexVal = transferedHex.substring(1, 7);
+    const {
+      r,
+      g,
+      b,
+      a
+    } = rgba;
+    setAlphaVal((0, _utils.toPercentage)(a));
+    updateValue(rgba);
+    if (colorMode === _constants.COLOR_PICKER_MODE.HEX) {
+      setHexVal(hexVal);
+    } else {
+      setRedVal(r);
+      setGreenVal(g);
+      setBlueVal(b);
+    }
+  };
+  const onChangeMode = () => {
+    let newMode;
+    if (colorMode === _constants.COLOR_PICKER_MODE.HEX) {
+      newMode = _constants.COLOR_PICKER_MODE.RGBA;
+      const rgba = (0, _utils.hexToRgba)(color);
+      const {
+        r,
+        g,
+        b
+      } = rgba;
+      setRedVal(r);
+      setGreenVal(g);
+      setBlueVal(b);
+    } else {
+      newMode = _constants.COLOR_PICKER_MODE.HEX;
+      const hexVal = (0, _utils.rgbaToHex)(value, false, false);
+      setHexVal(hexVal);
+    }
+    setColorMode(newMode);
+  };
+  const onChangeHex = e => {
+    const hex = e.target.value;
+    setHexVal(hex);
+  };
+  const onHexInputBlur = () => {
+    const hexRegex = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/i;
+    if (!hexRegex.test(hexVal)) {
+      const validHex = (0, _utils.rgbaToHex)(value, false);
+      setHexVal(validHex);
+      return;
+    }
+    let newHexVal = hexVal;
+    if (newHexVal.length === 3) {
+      newHexVal = newHexVal.split('').map(char => char + char).join('');
+    }
+    setHexVal(newHexVal);
+    const {
+      r,
+      g,
+      b
+    } = (0, _utils.hexToRgba)(newHexVal);
+    const newValue = {
+      r,
+      g,
+      b,
+      a: value.a
+    };
+    updateValue(newValue);
+  };
+  const onChangeAlpha = e => {
+    const regex = /^(\d+|\d+%)?$/;
+    const alphaVal = e.target.value.trim().replace('%', '');
+    if (!regex.test(alphaVal)) return;
+    setAlphaVal(alphaVal);
+  };
+  const onChangeRgb = (e, specColor) => {
+    let newVal = e.target.value;
+    const regex = /^[0-9]*$/;
+    if (!regex.test(newVal)) return;
+    if (newVal) newVal = parseInt(newVal);
+    switch (specColor) {
+      case _constants.RGB_COLORS_MAP.RED:
+        {
+          setRedVal(newVal);
+          break;
+        }
+      case _constants.RGB_COLORS_MAP.GREEN:
+        {
+          setGreenVal(newVal);
+          break;
+        }
+      case _constants.RGB_COLORS_MAP.BLUT:
+        {
+          setBlueVal(newVal);
+          break;
+        }
+      default:
+        break;
+    }
+  };
+  const onRgbInputBlur = specColor => {
+    let val = redVal;
+    let setSpecColor = setRedVal;
+    if (specColor === _constants.RGB_COLORS_MAP.GREEN) {
+      val = greenVal;
+      setSpecColor = setGreenVal;
+    } else if (specColor === _constants.RGB_COLORS_MAP.BLUT) {
+      val = blueVal;
+      setSpecColor = setBlueVal;
+    }
+    if (!val || val < 0 || val > 255) {
+      setSpecColor(value[specColor]);
+      return;
+    }
+    const newValue = {
+      ...value,
+      [specColor]: val
+    };
+    updateValue(newValue);
+  };
+  const updateValue = newValue => {
+    setValue(newValue);
+    const submitHex = (0, _utils.rgbaToHex)(newValue);
+    props.onSubmit(submitHex);
+  };
+  const onAlphaInputBlur = () => {
+    if (!alphaVal || alphaVal < 0 || alphaVal > 100) {
+      setAlphaVal((0, _utils.toPercentage)(value.a));
+      return;
+    }
+    const newValue = {
+      ...value,
+      a: parseFloat(alphaVal) / 100
+    };
+    updateValue(newValue);
+  };
+  const onKeyDown = (event, callBack) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+      callBack && callBack();
+    }
+  };
+  const onSelectDefaultColor = color => {
+    const hexVal = color.slice(1);
+    const rgba = (0, _utils.hexToRgba)(hexVal);
+    const {
+      r,
+      g,
+      b,
+      a
+    } = rgba;
+    const alphaVal = (0, _utils.toPercentage)(a);
+    if (colorMode === _constants.COLOR_PICKER_MODE.HEX) {
+      setHexVal(hexVal);
+    } else {
+      setRedVal(r);
+      setGreenVal(g);
+      setBlueVal(b);
+    }
+    setAlphaVal(alphaVal);
+    updateValue(rgba);
+  };
+  const onClosePopover = () => {
+    if (storageKey) {
+      if (currentUsedColors.length >= 8) currentUsedColors.pop();
+      const hex = (0, _utils.rgbaToHex)(value);
+      if (!currentUsedColors.includes(hex)) {
+        currentUsedColors.unshift(hex);
+        window.localStorage.setItem(storageKey, JSON.stringify(currentUsedColors));
+      }
+    }
+    onToggle();
+  };
+  const renderDefaultContainer = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "default-color-setting"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Default')), /*#__PURE__*/_react.default.createElement("div", {
+      className: "default-colors-container d-flex mt-2 mb-2"
+    }, (defaultColors || _constants.DEFAULT_COLORS).map((color, index) => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "color-item mr-2",
+        onClick: () => onSelectDefaultColor(color),
+        key: "default-color-".concat(index)
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "colorinput-color d-flex align-items-center justify-content-center",
+        style: {
+          backgroundColor: color
+        }
+      }, color === "#".concat(hexVal) && !currentUsedColors.includes(color) && alphaVal === 100 && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
+      })));
+    })));
+  };
+  const renderCustomContainer = () => {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Custom')), /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
+      className: "mt-2",
+      color: value,
+      onChange: onChangeChromePicker
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "color-setting d-flex align-items-center ".concat(colorMode)
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "mode-btn d-flex"
+    }, colorMode === _constants.COLOR_PICKER_MODE.HEX ? 'HEX' : 'RGB', /*#__PURE__*/_react.default.createElement("i", {
+      onClick: onChangeMode,
+      className: "dtable-font dtable-icon-right"
+    })), colorMode === _constants.COLOR_PICKER_MODE.HEX ? renderHexContainer() : renderRgbContainer(), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      className: "alpha-input",
+      type: "text",
+      value: alphaVal + '%',
+      onBlur: onAlphaInputBlur,
+      onKeyDown: e => onKeyDown(e, onAlphaInputBlur),
+      onChange: onChangeAlpha
+    })));
+  };
+  const renderHexContainer = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "hex-container ml-2"
+    }, /*#__PURE__*/_react.default.createElement("span", null, "#"), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      className: "hex-input",
+      type: "text",
+      value: hexVal,
+      onBlur: onHexInputBlur,
+      onKeyDown: e => onKeyDown(e, onHexInputBlur),
+      onChange: onChangeHex
+    }));
+  };
+  const renderRgbContainer = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "rgb-container"
+    }, /*#__PURE__*/_react.default.createElement("span", null, "R"), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      className: "rgb-input",
+      type: "text",
+      value: redVal,
+      onBlur: () => onRgbInputBlur(_constants.RGB_COLORS_MAP.RED),
+      onChange: e => onChangeRgb(e, _constants.RGB_COLORS_MAP.RED)
+    }), /*#__PURE__*/_react.default.createElement("span", null, "G"), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      className: "rgb-input",
+      type: "text",
+      value: greenVal,
+      onBlur: () => onRgbInputBlur(_constants.RGB_COLORS_MAP.GREEN),
+      onChange: e => onChangeRgb(e, _constants.RGB_COLORS_MAP.GREEN)
+    }), /*#__PURE__*/_react.default.createElement("span", null, "B"), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      className: "rgb-input",
+      type: "text",
+      value: blueVal,
+      onBlur: () => onRgbInputBlur(_constants.RGB_COLORS_MAP.BLUT),
+      onChange: e => onChangeRgb(e, _constants.RGB_COLORS_MAP.BLUT)
+    }));
+  };
+  const renderUsedContainer = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "current-used-container mt-2"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Used')), /*#__PURE__*/_react.default.createElement("div", {
+      className: "current-used-colors d-flex mt-2"
+    }, currentUsedColors.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currentUsedColors.map((color, index) => {
+      const isLight = (0, _utils.isLightColor)(color);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
+        onClick: () => onSelectDefaultColor(color),
+        key: "default-color-".concat(index)
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "colorinput-color d-flex align-items-center justify-content-center",
+        style: {
+          backgroundColor: color
+        }
+      }, color === "#".concat(hexVal) && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
+      })));
+    })) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "blank-placeholder d-flex align-items-center justify-content-center"
+    }, /*#__PURE__*/_react.default.createElement("span", null, "/"))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_ClickOutside.default, {
+    onClickOutside: () => {}
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: popoverStyle,
+    className: "dtable-color-picker"
+  }, renderDefaultContainer(), renderCustomContainer(), renderUsedContainer()));
+};
+DTableColorPicker.defaultProps = {
+  color: '#ffffff'
+};
+var _default = exports.default = DTableColorPicker;

package/lib/DTableColorPicker/utils/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toPercentage = exports.rgbaToHex = exports.isLightColor = exports.hexToRgba = exports.getInitialHexVal = void 0;
+const hexRegex = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/i;
+const rgbaRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/i;
+const hexToRgba = color => {
+  if (rgbaRegex.test(color)) return color;
+  let r;
+  let g;
+  let b;
+  let a = 1;
+  let hex = color;
+  hex = hex.replace(/^#/, '');
+  if (hex.length === 6 || hex.length === 8) {
+    r = parseInt(hex.slice(0, 2), 16);
+    g = parseInt(hex.slice(2, 4), 16);
+    b = parseInt(hex.slice(4, 6), 16);
+    a = hex.length === 8 ? Math.round(parseInt(hex.slice(6, 8), 16) / 255 * 100) / 100 : 1;
+  } else if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16);
+    g = parseInt(hex[1] + hex[1], 16);
+    b = parseInt(hex[2] + hex[2], 16);
+  } else {
+    throw new Error('Invalid HEX color.');
+  }
+  return {
+    r,
+    g,
+    b,
+    a
+  };
+};
+exports.hexToRgba = hexToRgba;
+const rgbaToHex = function (color) {
+  let isNeedPrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let isNeedAlpha = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  if (hexRegex.test(color)) return color;
+  const {
+    r,
+    g,
+    b,
+    a
+  } = color;
+  const toHex = value => {
+    const hex = value.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  const alpha = a !== undefined && a !== 1 ? toHex(Math.round(a * 255)) : '';
+  return "".concat(isNeedPrefix ? '#' : '').concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).concat(isNeedAlpha ? alpha : '');
+};
+exports.rgbaToHex = rgbaToHex;
+const isLightColor = color => {
+  if (color.startsWith('#')) color = color.slice(1);
+  const r = parseInt(color.substring(0, 2), 16);
+  const g = parseInt(color.substring(2, 4), 16);
+  const b = parseInt(color.substring(4, 6), 16);
+  const a = color.length === 8 ? parseInt(color.substring(6, 8), 16) / 255 : 1;
+  const bgColor = {
+    r: 255,
+    g: 255,
+    b: 255
+  };
+  const mixedR = Math.round((1 - a) * bgColor.r + a * r);
+  const mixedG = Math.round((1 - a) * bgColor.g + a * g);
+  const mixedB = Math.round((1 - a) * bgColor.b + a * b);
+  const luminance = 0.2126 * mixedR + 0.7152 * mixedG + 0.0722 * mixedB;
+  return luminance > 128;
+};
+exports.isLightColor = isLightColor;
+const getInitialHexVal = hex => {
+  let hexVal = hex.slice(1); // Remove #
+  if (hexVal.length > 6) {
+    hexVal = hexVal.slice(0, 6);
+  }
+  return hexVal;
+};
+exports.getInitialHexVal = getInitialHexVal;
+const toPercentage = number => {
+  if (number < 0 || number > 1) {
+    return null;
+  }
+  return Math.round(number * 100);
+};
+exports.toPercentage = toPercentage;

package/lib/SelectOptionGroup/index.js

@@ -31,6 +31,7 @@ class SelectOptionGroup extends _react.Component {
           this.optionGroupRef.style.top = position.y - height + 'px';
         }
         this.optionGroupRef.style.opacity = 1;
+        this.searchInputRef.current && this.searchInputRef.current.inputRef.focus();
       } else {
         if (height + top > window.innerHeight) {
           const borderWidth = 2;
@@ -154,6 +155,7 @@ class SelectOptionGroup extends _react.Component {
     };
     this.filterOptions = null;
     this.timer = null;
+    this.searchInputRef = /*#__PURE__*/_react.default.createRef();
   }
   componentDidMount() {
     window.addEventListener('keydown', this.onHotKey);
@@ -226,7 +228,8 @@ class SelectOptionGroup extends _react.Component {
       className: "option-search-control",
       placeholder: searchPlaceholder,
       onChange: this.onChangeSearch,
-      autoFocus: true
+      autoFocus: true,
+      ref: this.searchInputRef
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "option-group-content",
       ref: ref => this.optionGroupContentRef = ref

package/lib/index.js

@@ -70,6 +70,12 @@ Object.defineProperty(exports, "CreatorFormatter", {
     return _CreatorFormatter.default;
   }
 });
+Object.defineProperty(exports, "DTableColorPicker", {
+  enumerable: true,
+  get: function () {
+    return _DTableColorPicker.default;
+  }
+});
 Object.defineProperty(exports, "DTableCommonAddTool", {
   enumerable: true,
   get: function () {
@@ -465,6 +471,7 @@ var _DTableSwitch = _interopRequireDefault(require("./DTableSwitch"));
 var _DTableCustomizeSelect = _interopRequireDefault(require("./DTableCustomizeSelect"));
 var _DTableCustomizeCollaboratorSelect = _interopRequireDefault(require("./DTableCustomizeCollaboratorSelect"));
 var _DTableSearchInput = _interopRequireDefault(require("./DTableSearchInput"));
+var _DTableColorPicker = _interopRequireDefault(require("./DTableColorPicker"));
 var _ModalPortal = _interopRequireDefault(require("./ModalPortal"));
 var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));
 var _DepartmentSelectFilter = _interopRequireDefault(require("./DepartmentSelectFilter"));

package/lib/locals/de.js

@@ -95,6 +95,9 @@ const de = {
   "last_month": "letzten Monat",
   "last_year": "letztes Jahr",
   "URL_is_invalid": "Die URL ist ungültig.",
-  "Select_department": "Bereich auswählen"
+  "Select_department": "Bereich auswählen",
+  "Default": "Standard",
+  "Custom": "Benutzerdefiniert",
+  "Used": "Verwendet"
 };
 var _default = exports.default = de;

package/lib/locals/en.js

@@ -95,6 +95,9 @@ const en = {
   "last_month": "last month",
   "last_year": "last year",
   "URL_is_invalid": "URL is invalid",
-  "Select_department": "Select department"
+  "Select_department": "Select department",
+  "Default": "Default",
+  "Custom": "Custom",
+  "Used": "Used"
 };
 var _default = exports.default = en;

package/lib/locals/es.js

@@ -95,6 +95,9 @@ const es = {
   "last_month": "el mes pasado",
   "last_year": "el año pasado",
   "URL_is_invalid": "URL no válida",
-  "Select_department": "Select department"
+  "Select_department": "Select department",
+  "Default": "Incumplimiento de contrato",
+  "Custom": "Costumbres",
+  "Used": "Acostumbrado a"
 };
 var _default = exports.default = es;

package/lib/locals/fr.js

@@ -95,6 +95,9 @@ const fr = {
   "last_month": "le mois dernier",
   "last_year": "l'année dernière",
   "URL_is_invalid": "L'URL est invalide.",
-  "Select_department": "Sélectionner un département"
+  "Select_department": "Sélectionner un département",
+  "Default": "Violation",
+  "Custom": "Les coutumes",
+  "Used": "Habitué à"
 };
 var _default = exports.default = fr;

package/lib/locals/pt.js

@@ -95,6 +95,9 @@ const pt = {
   "last_month": "mês passado",
   "last_year": "ano passado",
   "URL_is_invalid": "URL é inválido",
-  "Select_department": "Select department"
+  "Select_department": "Select department",
+  "Default": "por omissão",
+  "Custom": "personalizado",
+  "Used": "usado"
 };
 var _default = exports.default = pt;

package/lib/locals/ru.js

@@ -95,6 +95,9 @@ const ru = {
   "last_month": "last month",
   "last_year": "last year",
   "URL_is_invalid": "URL-адрес недействителен",
-  "Select_department": "Select department"
+  "Select_department": "Select department",
+  "Default": "Нарушение обязательств",
+  "Custom": "Обычаи",
+  "Used": "Привыкнуть"
 };
 var _default = exports.default = ru;

package/lib/locals/zh-CN.js

@@ -95,6 +95,9 @@ const zh_CN = {
   "last_month": "上个月",
   "last_year": "去年",
   "URL_is_invalid": "URL 无效",
-  "Select_department": "选择部门"
+  "Select_department": "选择部门",
+  "Default": "默认",
+  "Custom": "自定义",
+  "Used": "使用过"
 };
 var _default = exports.default = zh_CN;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.0.19",
+  "version": "5.0.21-alpha.1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",
@@ -16,6 +16,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dom": "17.0.2",
     "react-responsive": "9.0.2",
+    "react-color": "2.19.3",
     "react-select": "5.7.0",
     "react-transition-group": "^4.4.1",
     "reactstrap": "8.9.0"