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

package/lib/DTableColorPicker/index.css

@@ -6,7 +6,7 @@
   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 {

package/lib/DTableColorPicker/index.js

@@ -11,16 +11,25 @@ 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 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 = props => {
   const {
     onToggle,
     popoverStyle,
     color,
-    defaultColors,
-    storageKey
+    defaultColors
   } = props;
   const initialRgbaColor = (0, _utils.hexToRgba)(color);
   const [value, setValue] = (0, _react.useState)(initialRgbaColor);
@@ -29,11 +38,19 @@ 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
+  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');
+    }
   }, []);
   const onChangeChromePicker = newColor => {
     const rgba = newColor.rgb;
@@ -48,7 +65,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 +75,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 +87,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 +134,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,10 +156,10 @@ 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;
     }
@@ -189,35 +206,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(hexVal);
     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 +241,7 @@ const DTableColorPicker = props => {
         style: {
           backgroundColor: color
         }
-      }, color === "#".concat(hexVal) && !currentUsedColors.includes(color) && alphaVal === 100 && /*#__PURE__*/_react.default.createElement("i", {
+      }, color === "#".concat(hexVal) && alphaVal === 100 && /*#__PURE__*/_react.default.createElement("i", {
         className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
       })));
     })));
@@ -239,10 +255,10 @@ const DTableColorPicker = props => {
       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", {
+    }, colorMode === 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, {
+    })), colorMode === COLOR_PICKER_MODE.HEX ? renderHexContainer() : renderRgbContainer(), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
       className: "alpha-input",
       type: "text",
       value: alphaVal + '%',
@@ -270,26 +286,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);

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.4",
   "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'
-};