dtable-ui-component 6.0.125 → 6.0.126

package/lib/CreatorFormatter/index.js

@@ -20,10 +20,9 @@ class CreatorFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.getCollaborators = () => {
-      let {
-        value,
-        collaborators
-      } = this.props;
+      let _this$props = this.props,
+        value = _this$props.value,
+        collaborators = _this$props.collaborators;
       if (!Array.isArray(value)) {
         value = [value];
       }
@@ -43,10 +42,9 @@ class CreatorFormatter extends _react.default.PureComponent {
     };
   }
   render() {
-    const {
-      containerClassName,
-      value
-    } = this.props;
+    const _this$props2 = this.props,
+      containerClassName = _this$props2.containerClassName,
+      value = _this$props2.value;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container creator-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -7,33 +7,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ColorPickerPortal;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function ColorPickerPortal(_ref) {
-  let {
-    target,
-    scrollContainerId,
-    throttleDelay = 16,
-    children
-  } = _ref;
+  let target = _ref.target,
+    scrollContainerId = _ref.scrollContainerId,
+    _ref$throttleDelay = _ref.throttleDelay,
+    throttleDelay = _ref$throttleDelay === void 0 ? 16 : _ref$throttleDelay,
+    children = _ref.children;
   const containerRef = (0, _react.useRef)(null);
-  const [isPositioned, setIsPositioned] = (0, _react.useState)(false);
-  const [position, setPosition] = (0, _react.useState)(() => {
-    return {
-      top: '-9999px',
-      left: '-9999px',
-      visibility: 'hidden'
-    };
-  });
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPositioned = _useState2[0],
+    setIsPositioned = _useState2[1];
+  const _useState3 = (0, _react.useState)(() => {
+      return {
+        top: '-9999px',
+        left: '-9999px',
+        visibility: 'hidden'
+      };
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
   const updatePosition = (0, _react.useCallback)(() => {
     if (!target || !containerRef.current) return;
     const targetRect = target.getBoundingClientRect();
-    const {
-      top: spaceAbove,
-      left
-    } = targetRect;
+    const spaceAbove = targetRect.top,
+      left = targetRect.left;
     const portalRectHeight = containerRef.current.clientHeight;
     const newPosition = {
       left: "".concat(left + 1, "px"),
@@ -72,7 +76,7 @@ function ColorPickerPortal(_ref) {
   }, [target, scrollContainerId, throttleDelay, updatePosition]);
   if (!target) return null;
   return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "dtable-color-picker-portal",
+    className: "dtable-color-picker-portal dtable-popover-container",
     style: {
       position: 'fixed',
       zIndex: '1049',

package/lib/DTableColorPicker/index.css

@@ -2,12 +2,10 @@
   width: 240px;
   height: 370px;
   background-color: #fff;
-  border-radius: 3px;
   z-index: 100;
   padding: 0.75rem;
   line-height: 16px;
   position: absolute;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 4px;
 }
 
 .dtable-color-picker .chrome-picker {

package/lib/DTableColorPicker/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactColor = require("react-color");
@@ -29,25 +30,46 @@ const RGB_COLORS_MAP = {
 };
 const LOCAL_STORAGE_KEY = 'dtable-color-picker';
 const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    onToggle,
-    popoverStyle,
-    color = '#ffffff',
-    defaultColors,
-    useProtal,
-    target,
-    scrollContainerId,
-    throttleDelay = 20,
-    onSubmit
-  } = _ref;
+  let onToggle = _ref.onToggle,
+    popoverStyle = _ref.popoverStyle,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#ffffff' : _ref$color,
+    defaultColors = _ref.defaultColors,
+    useProtal = _ref.useProtal,
+    target = _ref.target,
+    scrollContainerId = _ref.scrollContainerId,
+    _ref$throttleDelay = _ref.throttleDelay,
+    throttleDelay = _ref$throttleDelay === void 0 ? 20 : _ref$throttleDelay,
+    onSubmit = _ref.onSubmit;
   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)(COLOR_PICKER_MODE.HEX); // hex or rgb
+  const _useState = (0, _react.useState)(initialRgbaColor),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  const _useState3 = (0, _react.useState)((0, _utils.getInitialHexVal)(color)),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    hexVal = _useState4[0],
+    setHexVal = _useState4[1];
+  const _useState5 = (0, _react.useState)((0, _utils.toPercentage)(initialRgbaColor.a)),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    alphaVal = _useState6[0],
+    setAlphaVal = _useState6[1];
+  const _useState7 = (0, _react.useState)(initialRgbaColor.r),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    redVal = _useState8[0],
+    setRedVal = _useState8[1];
+  const _useState9 = (0, _react.useState)(initialRgbaColor.g),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    greenVal = _useState0[0],
+    setGreenVal = _useState0[1];
+  const _useState1 = (0, _react.useState)(initialRgbaColor.b),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    blueVal = _useState10[0],
+    setBlueVal = _useState10[1];
+  const _useState11 = (0, _react.useState)(COLOR_PICKER_MODE.HEX),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    colorMode = _useState12[0],
+    setColorMode = _useState12[1]; // hex or rgb
   const colorPickerRef = (0, _react.useRef)(null);
   let currentUsedColors = [];
   const currentUsedColorsStr = window.localStorage.getItem(LOCAL_STORAGE_KEY);
@@ -70,12 +92,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     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;
+    const r = rgba.r,
+      g = rgba.g,
+      b = rgba.b,
+      a = rgba.a;
     setAlphaVal((0, _utils.toPercentage)(a));
     updateValue(rgba);
     if (colorMode === COLOR_PICKER_MODE.HEX) {
@@ -91,11 +111,9 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (colorMode === COLOR_PICKER_MODE.HEX) {
       newMode = COLOR_PICKER_MODE.RGBA;
       const rgba = (0, _utils.hexToRgba)(color);
-      const {
-        r,
-        g,
-        b
-      } = rgba;
+      const r = rgba.r,
+        g = rgba.g,
+        b = rgba.b;
       setRedVal(r);
       setGreenVal(g);
       setBlueVal(b);
@@ -122,11 +140,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       newHexVal = newHexVal.split('').map(char => char + char).join('');
     }
     setHexVal(newHexVal);
-    const {
-      r,
-      g,
-      b
-    } = (0, _utils.hexToRgba)(newHexVal);
+    const _hexToRgba = (0, _utils.hexToRgba)(newHexVal),
+      r = _hexToRgba.r,
+      g = _hexToRgba.g,
+      b = _hexToRgba.b;
     const newValue = {
       r,
       g,
@@ -209,12 +226,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   const onSelectDefaultColor = color => {
     const rgba = (0, _utils.hexToRgba)(color);
-    const {
-      r,
-      g,
-      b,
-      a
-    } = rgba;
+    const r = rgba.r,
+      g = rgba.g,
+      b = rgba.b,
+      a = rgba.a;
     const alphaVal = (0, _utils.toPercentage)(a);
     if (colorMode === COLOR_PICKER_MODE.RGBA) {
       setRedVal(r);
@@ -368,7 +383,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: popoverStyle,
       ref: colorPickerRef,
-      className: "dtable-color-picker",
+      className: "dtable-color-picker dtable-popover-container",
       children: [renderDefaultContainer(), renderCustomContainer(), renderUsedContainer()]
     })
   });

package/lib/DTableColorPicker/utils.js

@@ -43,12 +43,10 @@ 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 r = color.r,
+    g = color.g,
+    b = color.b,
+    a = color.a;
   const toHex = value => {
     const hex = value.toString(16);
     return hex.length === 1 ? '0' + hex : hex;

package/lib/DTableColumnIcon/index.js

@@ -45,13 +45,12 @@ const COLUMN_DISPLAY_TYPE_ICON_CONFIG = {
   }
 };
 const DTableColumnIcon = _ref => {
-  let {
-    column,
-    color,
-    className,
-    ariaHidden = false,
-    getSvg
-  } = _ref;
+  let column = _ref.column,
+    color = _ref.color,
+    className = _ref.className,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? false : _ref$ariaHidden,
+    getSvg = _ref.getSvg;
   const columnType = column === null || column === void 0 ? void 0 : column.type;
   if (!columnType) return null;
   const columnDisplayType = (0, _dtableUtils.getColumnDisplayType)(column);

package/lib/DTableCommonAddTool/index.css

@@ -4,11 +4,9 @@
   height: 40px;
   font-size: 14px;
   font-weight: 500;
-  border-top: 1px solid #dedede;
+  border-top: 1px solid var(--bs-border-secondary-color);
   background: #fff;
   padding: 0 1rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
   position: relative;
 }
 

package/lib/DTableCommonAddTool/index.js

@@ -9,14 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function DTableCommonAddTool(_ref) {
-  let {
-    callBack,
-    footerName,
-    className,
-    addIconClassName,
-    hideIcon,
-    style
-  } = _ref;
+  let callBack = _ref.callBack,
+    footerName = _ref.footerName,
+    className = _ref.className,
+    addIconClassName = _ref.addIconClassName,
+    hideIcon = _ref.hideIcon,
+    style = _ref.style;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "dtable-ui add-item-btn ".concat(className ? className : ''),
     style: style,

package/lib/DTableCustomFooter/index.css

@@ -4,9 +4,7 @@
   align-items: center;
   justify-content: flex-end;
   padding: 0.75rem;
-  border-top: 1px solid rgba(0, 40, 100, 0.12);
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-top: 1px solid var(--bs-border-secondary-color) !important;
 }
 
 .dtable-custom-footer>* {

package/lib/DTableCustomFooter/index.js

@@ -10,9 +10,7 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 // DTableCustomFooter is used in geolocation editor and digital sign editor
 const DTableCustomFooter = _ref => {
-  let {
-    children
-  } = _ref;
+  let children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dtable-custom-footer",
     children: children

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -47,24 +47,22 @@ class CollaboratorSelect extends _react.Component {
       });
     };
     this.getFilterOptions = searchValue => {
-      const {
-        options,
-        searchable
-      } = this.props;
+      const _this$props = this.props,
+        options = _this$props.options,
+        searchable = _this$props.searchable;
       if (!searchable) return options || [];
       return (0, _dtableUtils.searchCollaborators)(options, searchValue);
     };
     this.renderOptionGroup = () => {
-      const {
-        value,
-        options,
-        searchable,
-        searchPlaceholder,
-        noOptionsPlaceholder,
-        top,
-        left,
-        isUsePopover
-      } = this.props;
+      const _this$props2 = this.props,
+        value = _this$props2.value,
+        options = _this$props2.options,
+        searchable = _this$props2.searchable,
+        searchPlaceholder = _this$props2.searchPlaceholder,
+        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+        top = _this$props2.top,
+        left = _this$props2.left,
+        isUsePopover = _this$props2.isUsePopover;
       if (!isUsePopover) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
           value: value,
@@ -123,12 +121,11 @@ class CollaboratorSelect extends _react.Component {
     document.removeEventListener('mousedown', this.onMousedown);
   }
   render() {
-    let {
-      className,
-      value,
-      placeholder,
-      isLocked
-    } = this.props;
+    let _this$props3 = this.props,
+      className = _this$props3.className,
+      value = _this$props3.value,
+      placeholder = _this$props3.placeholder,
+      isLocked = _this$props3.isLocked;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('dtable-select custom-select collaborator-select', {

package/lib/DTableCustomizeSelect/index.js

@@ -45,24 +45,20 @@ class DTableCustomizeSelect extends _react.Component {
     };
     this.getSelectedOptionTop = () => {
       if (!this.selector) return 38;
-      const {
-        height
-      } = this.selector.getBoundingClientRect();
+      const _this$selector$getBou = this.selector.getBoundingClientRect(),
+        height = _this$selector$getBou.height;
       return height;
     };
     this.getFilterOptions = searchValue => {
-      const {
-        options,
-        searchable
-      } = this.props;
+      const _this$props = this.props,
+        options = _this$props.options,
+        searchable = _this$props.searchable;
       if (!searchable) return options || [];
       const validSearchVal = searchValue.trim().toLowerCase();
       if (!validSearchVal) return options || [];
       return options.filter(option => {
-        const {
-          value,
-          name
-        } = option;
+        const value = option.value,
+          name = option.name;
         if (typeof name === 'string') {
           return name.toLowerCase().indexOf(validSearchVal) > -1;
         }
@@ -83,19 +79,18 @@ class DTableCustomizeSelect extends _react.Component {
     };
   }
   render() {
-    let {
-      className,
-      value,
-      options,
-      placeholder,
-      searchable,
-      searchPlaceholder,
-      noOptionsPlaceholder,
-      isLocked,
-      isInModal,
-      addOptionAble,
-      component
-    } = this.props;
+    let _this$props2 = this.props,
+      className = _this$props2.className,
+      value = _this$props2.value,
+      options = _this$props2.options,
+      placeholder = _this$props2.placeholder,
+      searchable = _this$props2.searchable,
+      searchPlaceholder = _this$props2.searchPlaceholder,
+      noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+      isLocked = _this$props2.isLocked,
+      isInModal = _this$props2.isInModal,
+      addOptionAble = _this$props2.addOptionAble,
+      component = _this$props2.component;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: node => this.selector = node,
       className: (0, _classnames.default)('dtable-select custom-select', {

package/lib/DTableDropdownItem/index.js

@@ -13,24 +13,22 @@ var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
 var _svgIcon = _interopRequireDefault(require("../DTableIcon/svg-icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableDropdownItem = _ref => {
-  let {
-    className,
-    divider,
-    id,
-    toggle,
-    disabled,
-    tooltip,
-    itemProps,
-    showChecked,
-    checked,
-    leftSlotContent,
-    rightSlotContent,
-    icon,
-    content,
-    onClick,
-    style,
-    tabIndex
-  } = _ref;
+  let className = _ref.className,
+    divider = _ref.divider,
+    id = _ref.id,
+    toggle = _ref.toggle,
+    disabled = _ref.disabled,
+    tooltip = _ref.tooltip,
+    itemProps = _ref.itemProps,
+    showChecked = _ref.showChecked,
+    checked = _ref.checked,
+    leftSlotContent = _ref.leftSlotContent,
+    rightSlotContent = _ref.rightSlotContent,
+    icon = _ref.icon,
+    content = _ref.content,
+    onClick = _ref.onClick,
+    style = _ref.style,
+    tabIndex = _ref.tabIndex;
   if (divider) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemProps), {}, {
       divider: true,

package/lib/DTableDropdownMenu/index.js

@@ -10,16 +10,14 @@ var _reactstrap = require("reactstrap");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableDropdownMenu = _ref => {
-  let {
-    id,
-    className,
-    container,
-    modifiers,
-    flip,
-    style,
-    menuProps,
-    children
-  } = _ref;
+  let id = _ref.id,
+    className = _ref.className,
+    container = _ref.container,
+    modifiers = _ref.modifiers,
+    flip = _ref.flip,
+    style = _ref.style,
+    menuProps = _ref.menuProps,
+    children = _ref.children;
   let customMenuProps = (0, _objectSpread2.default)({}, menuProps);
   customMenuProps.modifiers = [{
     name: 'preventOverflow',

package/lib/DTableEmptyTip/index.js

@@ -10,11 +10,10 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableEmptyTip extends _react.default.Component {
   render() {
-    const {
-      text,
-      title,
-      type
-    } = this.props;
+    const _this$props = this.props,
+      text = _this$props.text,
+      title = _this$props.title,
+      type = _this$props.type;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "empty-tip",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {

package/lib/DTableFiltersPopover/index.css

@@ -29,8 +29,6 @@
   font-weight: 500;
   background: #fff;
   color: #666;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
   position: relative;
 }