dtable-ui-component 5.0.21-alpha.3 → 5.0.21-alpha.5

package/lib/DTableColorPicker/index.css

@@ -1,12 +1,13 @@
 .dtable-color-picker {
   width: 240px;
+  height: 370px;
   background-color: #fff;
   border-radius: 2px;
   z-index: 100;
   padding: 0.75rem;
   line-height: normal;
   position: absolute;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px
+  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 {
@@ -56,7 +57,12 @@
 }
 
 .dtable-color-picker .color-setting .mode-btn {
-  color: #666;
+  cursor: pointer;
+}
+
+.dtable-color-picker .color-setting .mode-btn:hover,
+.dtable-color-picker .color-setting .mode-btn:hover .dtable-font {
+  color: #555;
 }
 
 .dtable-color-picker .color-setting input {
@@ -104,7 +110,7 @@
 }
 
 .dtable-color-picker .color-setting .dtable-font {
-  font-size: 13px;
+  font-size: 12px;
   margin-left: 2px;
   color: #ccc;
   display: inline-block;
@@ -112,10 +118,6 @@
   cursor: pointer;
 }
 
-.dtable-color-picker .color-setting .dtable-font:hover {
-  color: #999;
-}
-
 .dtable-color-picker .saturation-black {
   cursor: pointer;
 }

package/lib/DTableColorPicker/index.js

@@ -9,18 +9,28 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactColor = require("react-color");
+var _dtableUtils = require("dtable-utils");
 var _lang = require("../lang");
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
-var _constants = require("./constants");
 var _utils = require("./utils");
 require("./index.css");
-const DTableColorPicker = props => {
+const DEFAULT_COLORS = ['#ffffff', '#f5f5f5', '#eef6f9', '#deffe6', '#def7c4', '#fefdb5', '#feebb6', '#ffdde5'];
+const COLOR_PICKER_MODE = {
+  HEX: 'hex',
+  RGBA: 'rgba'
+};
+const RGB_COLORS_MAP = {
+  RED: 'r',
+  GREEN: 'g',
+  BLUE: 'b'
+};
+const LOCAL_STORAGE_KEY = 'dtable-color-picker';
+const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     onToggle,
     popoverStyle,
     color,
-    defaultColors,
-    storageKey
+    defaultColors
   } = props;
   const initialRgbaColor = (0, _utils.hexToRgba)(color);
   const [value, setValue] = (0, _react.useState)(initialRgbaColor);
@@ -29,12 +39,24 @@ const DTableColorPicker = props => {
   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) : [];
+  const [colorMode, setColorMode] = (0, _react.useState)(COLOR_PICKER_MODE.HEX); // hex or rgb
+  const colorPickerRef = (0, _react.useRef)(null);
+  let currentUsedColors = [];
+  const currentUsedColorsStr = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+  try {
+    currentUsedColors = currentUsedColorsStr ? JSON.parse(currentUsedColorsStr) : [];
+  } catch (error) {
+    console.error('Error parsing current used colors from localStorage:', error);
+  }
   (0, _react.useEffect)(() => {
-    document.querySelector('.chrome-picker > div:last-of-type > .flexbox-fix:first-of-type').classList.add('color-bar');
+    const colorBarElement = document.querySelector('.chrome-picker > div:last-of-type > .flexbox-fix:first-of-type');
+    if (colorBarElement) {
+      colorBarElement.classList.add('color-bar');
+    }
   }, []);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    getHeight: () => colorPickerRef.current ? colorPickerRef.current.offsetHeight : 0
+  }));
   const onChangeChromePicker = newColor => {
     const rgba = newColor.rgb;
     rgba.a = Math.round(rgba.a * 100) / 100;
@@ -48,7 +70,7 @@ const DTableColorPicker = props => {
     } = rgba;
     setAlphaVal((0, _utils.toPercentage)(a));
     updateValue(rgba);
-    if (colorMode === _constants.COLOR_PICKER_MODE.HEX) {
+    if (colorMode === COLOR_PICKER_MODE.HEX) {
       setHexVal(hexVal);
     } else {
       setRedVal(r);
@@ -58,8 +80,8 @@ const DTableColorPicker = props => {
   };
   const onChangeMode = () => {
     let newMode;
-    if (colorMode === _constants.COLOR_PICKER_MODE.HEX) {
-      newMode = _constants.COLOR_PICKER_MODE.RGBA;
+    if (colorMode === COLOR_PICKER_MODE.HEX) {
+      newMode = COLOR_PICKER_MODE.RGBA;
       const rgba = (0, _utils.hexToRgba)(color);
       const {
         r,
@@ -70,7 +92,7 @@ const DTableColorPicker = props => {
       setGreenVal(g);
       setBlueVal(b);
     } else {
-      newMode = _constants.COLOR_PICKER_MODE.HEX;
+      newMode = COLOR_PICKER_MODE.HEX;
       const hexVal = (0, _utils.rgbaToHex)(value, false, false);
       setHexVal(hexVal);
     }
@@ -117,17 +139,17 @@ const DTableColorPicker = props => {
     if (!regex.test(newVal)) return;
     if (newVal) newVal = parseInt(newVal);
     switch (specColor) {
-      case _constants.RGB_COLORS_MAP.RED:
+      case RGB_COLORS_MAP.RED:
         {
           setRedVal(newVal);
           break;
         }
-      case _constants.RGB_COLORS_MAP.GREEN:
+      case RGB_COLORS_MAP.GREEN:
         {
           setGreenVal(newVal);
           break;
         }
-      case _constants.RGB_COLORS_MAP.BLUT:
+      case RGB_COLORS_MAP.BLUE:
         {
           setBlueVal(newVal);
           break;
@@ -139,14 +161,14 @@ const DTableColorPicker = props => {
   const onRgbInputBlur = specColor => {
     let val = redVal;
     let setSpecColor = setRedVal;
-    if (specColor === _constants.RGB_COLORS_MAP.GREEN) {
+    if (specColor === RGB_COLORS_MAP.GREEN) {
       val = greenVal;
       setSpecColor = setGreenVal;
-    } else if (specColor === _constants.RGB_COLORS_MAP.BLUT) {
+    } else if (specColor === RGB_COLORS_MAP.BLUE) {
       val = blueVal;
       setSpecColor = setBlueVal;
     }
-    if (!val || val < 0 || val > 255) {
+    if ((0, _dtableUtils.isEmpty)(val) || val < 0 || val > 255) {
       setSpecColor(value[specColor]);
       return;
     }
@@ -162,7 +184,7 @@ const DTableColorPicker = props => {
     props.onSubmit(submitHex);
   };
   const onAlphaInputBlur = () => {
-    if (!alphaVal || alphaVal < 0 || alphaVal > 100) {
+    if ((0, _dtableUtils.isEmpty)(alphaVal) || alphaVal < 0 || alphaVal > 100) {
       setAlphaVal((0, _utils.toPercentage)(value.a));
       return;
     }
@@ -180,8 +202,7 @@ const DTableColorPicker = props => {
     }
   };
   const onSelectDefaultColor = color => {
-    const hexVal = color.slice(1);
-    const rgba = (0, _utils.hexToRgba)(hexVal);
+    const rgba = (0, _utils.hexToRgba)(color);
     const {
       r,
       g,
@@ -189,35 +210,34 @@ const DTableColorPicker = props => {
       a
     } = rgba;
     const alphaVal = (0, _utils.toPercentage)(a);
-    if (colorMode === _constants.COLOR_PICKER_MODE.HEX) {
-      setHexVal(hexVal);
-    } else {
+    if (colorMode === COLOR_PICKER_MODE.RGBA) {
       setRedVal(r);
       setGreenVal(g);
       setBlueVal(b);
     }
+    setHexVal(color.slice(1, 7));
     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));
-      }
+    if (currentUsedColors.length >= 8) currentUsedColors.pop();
+    const hex = (0, _utils.rgbaToHex)(value);
+    if (!currentUsedColors.includes(hex)) {
+      currentUsedColors.unshift(hex);
+      window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(currentUsedColors));
     }
     onToggle();
   };
   const renderDefaultContainer = () => {
+    const colors = defaultColors ? defaultColors.slice(0, 8) : DEFAULT_COLORS;
     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) => {
+    }, colors.map((color, index) => {
+      const isLight = (0, _utils.isLightColor)(color);
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "color-item mr-2",
+        className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
         onClick: () => onSelectDefaultColor(color),
         key: "default-color-".concat(index)
       }, /*#__PURE__*/_react.default.createElement("span", {
@@ -225,7 +245,7 @@ const DTableColorPicker = props => {
         style: {
           backgroundColor: color
         }
-      }, color === "#".concat(hexVal) && !currentUsedColors.includes(color) && alphaVal === 100 && /*#__PURE__*/_react.default.createElement("i", {
+      }, color === "".concat((0, _utils.rgbaToHex)(value)) && alphaVal === 100 && /*#__PURE__*/_react.default.createElement("i", {
         className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
       })));
     })));
@@ -238,11 +258,11 @@ const DTableColorPicker = props => {
     }), /*#__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: "mode-btn d-flex",
+      onClick: onChangeMode
+    }, colorMode === COLOR_PICKER_MODE.HEX ? 'HEX' : 'RGB', /*#__PURE__*/_react.default.createElement("i", {
       className: "dtable-font dtable-icon-right"
-    })), colorMode === _constants.COLOR_PICKER_MODE.HEX ? renderHexContainer() : renderRgbContainer(), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    })), colorMode === COLOR_PICKER_MODE.HEX ? renderHexContainer() : renderRgbContainer(), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
       className: "alpha-input",
       type: "text",
       value: alphaVal + '%',
@@ -270,26 +290,26 @@ const DTableColorPicker = props => {
       className: "rgb-input",
       type: "text",
       value: redVal,
-      onBlur: () => onRgbInputBlur(_constants.RGB_COLORS_MAP.RED),
-      onChange: e => onChangeRgb(e, _constants.RGB_COLORS_MAP.RED)
+      onBlur: () => onRgbInputBlur(RGB_COLORS_MAP.RED),
+      onChange: e => onChangeRgb(e, 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)
+      onBlur: () => onRgbInputBlur(RGB_COLORS_MAP.GREEN),
+      onChange: e => onChangeRgb(e, 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)
+      onBlur: () => onRgbInputBlur(RGB_COLORS_MAP.BLUE),
+      onChange: e => onChangeRgb(e, RGB_COLORS_MAP.BLUE)
     }));
   };
   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", {
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Recently_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);
@@ -302,7 +322,7 @@ const DTableColorPicker = props => {
         style: {
           backgroundColor: color
         }
-      }, color === "#".concat(hexVal) && /*#__PURE__*/_react.default.createElement("i", {
+      }, color === "".concat((0, _utils.rgbaToHex)(value)) && /*#__PURE__*/_react.default.createElement("i", {
         className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
       })));
     })) : /*#__PURE__*/_react.default.createElement("div", {
@@ -313,9 +333,10 @@ const DTableColorPicker = props => {
     onClickOutside: onClosePopover
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: popoverStyle,
+    ref: colorPickerRef,
     className: "dtable-color-picker"
   }, renderDefaultContainer(), renderCustomContainer(), renderUsedContainer()));
-};
+});
 DTableColorPicker.defaultProps = {
   color: '#ffffff'
 };

package/lib/DTableColorPicker/{utils/index.js → utils.js}

@@ -12,8 +12,7 @@ const hexToRgba = color => {
   let g;
   let b;
   let a = 1;
-  let hex = color;
-  hex = hex.replace(/^#/, '');
+  const hex = color.replace(/^#/, '');
   if (hex.length === 6 || hex.length === 8) {
     r = parseInt(hex.slice(0, 2), 16);
     g = parseInt(hex.slice(2, 4), 16);

package/lib/locals/de.js

@@ -98,6 +98,6 @@ const de = {
   "Select_department": "Bereich auswählen",
   "Default": "Standard",
   "Custom": "Benutzerdefiniert",
-  "Used": "Verwendet"
+  "Recently_used": "Kürzlich benutzt"
 };
 var _default = exports.default = de;

package/lib/locals/en.js

@@ -98,6 +98,6 @@ const en = {
   "Select_department": "Select department",
   "Default": "Default",
   "Custom": "Custom",
-  "Used": "Used"
+  "Recently_used": "Recently used"
 };
 var _default = exports.default = en;

package/lib/locals/es.js

@@ -98,6 +98,6 @@ const es = {
   "Select_department": "Select department",
   "Default": "Incumplimiento de contrato",
   "Custom": "Costumbres",
-  "Used": "Acostumbrado a"
+  "Recently_used": "Recientemente usado"
 };
 var _default = exports.default = es;

package/lib/locals/fr.js

@@ -98,6 +98,6 @@ const fr = {
   "Select_department": "Sélectionner un département",
   "Default": "Violation",
   "Custom": "Les coutumes",
-  "Used": "Habitué à"
+  "Recently_used": "Utilisé récemment"
 };
 var _default = exports.default = fr;

package/lib/locals/pt.js

@@ -98,6 +98,6 @@ const pt = {
   "Select_department": "Select department",
   "Default": "por omissão",
   "Custom": "personalizado",
-  "Used": "usado"
+  "Recently_used": "usado recentemente"
 };
 var _default = exports.default = pt;

package/lib/locals/ru.js

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

package/lib/locals/zh-CN.js

@@ -98,6 +98,6 @@ const zh_CN = {
   "Select_department": "选择部门",
   "Default": "默认",
   "Custom": "自定义",
-  "Used": "使用过"
+  "Recently_used": "最近使用"
 };
 var _default = exports.default = zh_CN;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.0.21-alpha.3",
+  "version": "5.0.21-alpha.5",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",

package/lib/DTableColorPicker/constants/index.js

@@ -1,16 +0,0 @@
-"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'
-};