dtable-ui-component 6.0.110 → 6.0.111-amk.13

package/lib/DTableColorPicker/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactColor = require("react-color");
@@ -180,9 +179,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setSpecColor(value[specColor]);
       return;
     }
-    const newValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
+    const newValue = {
+      ...value,
       [specColor]: val
-    });
+    };
     updateValue(newValue);
   };
   const updateValue = newValue => {
@@ -195,9 +195,10 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       setAlphaVal((0, _utils.toPercentage)(value.a));
       return;
     }
-    const newValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
+    const newValue = {
+      ...value,
       a: parseFloat(alphaVal) / 100
-    });
+    };
     updateValue(newValue);
   };
   const onKeyDown = (event, callBack) => {
@@ -245,18 +246,18 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         children: colors.map((color, index) => {
           const isLight = (0, _utils.isLightColor)(color);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
+            className: `color-item mr-2 ${isLight ? '' : 'dark'}`,
             onClick: () => onSelectDefaultColor(color),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "colorinput-color d-flex align-items-center justify-content-center",
               style: {
                 backgroundColor: color
               },
-              children: color === "".concat((0, _utils.rgbaToHex)(value)) && alphaVal === 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              children: color === `${(0, _utils.rgbaToHex)(value)}` && alphaVal === 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
                 className: "dtable-icon-color-check dtable-font dtable-icon-check-mark"
               })
             })
-          }, "default-color-".concat(index));
+          }, `default-color-${index}`);
         })
       })]
     });
@@ -270,7 +271,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         color: value,
         onChange: onChangeChromePicker
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "color-setting d-flex align-items-center ".concat(colorMode),
+        className: `color-setting d-flex align-items-center ${colorMode}`,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
           className: "mode-btn d-flex",
           onClick: onChangeMode,
@@ -344,7 +345,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           children: currentUsedColors.map((color, index) => {
             const isLight = (0, _utils.isLightColor)(color);
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "color-item mr-2 ".concat(isLight ? '' : 'dark'),
+              className: `color-item mr-2 ${isLight ? '' : 'dark'}`,
               onClick: () => onSelectDefaultColor(color),
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "colorinput-color d-flex align-items-center justify-content-center",
@@ -352,7 +353,7 @@ const DTableColorPicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
                   backgroundColor: color
                 }
               })
-            }, "default-color-".concat(index));
+            }, `default-color-${index}`);
           })
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "blank-placeholder d-flex align-items-center justify-content-center",

package/lib/DTableColorPicker/utils.js

@@ -54,7 +54,7 @@ const rgbaToHex = function (color) {
     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 : '');
+  return `${isNeedPrefix ? '#' : ''}${toHex(r)}${toHex(g)}${toHex(b)}${isNeedAlpha ? alpha : ''}`;
 };
 exports.rgbaToHex = rgbaToHex;
 const isLightColor = color => {

package/lib/DTableCommonAddTool/index.js

@@ -18,11 +18,11 @@ function DTableCommonAddTool(_ref) {
     style
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "dtable-ui add-item-btn ".concat(className ? className : ''),
+    className: `dtable-ui add-item-btn ${className ? className : ''}`,
     style: style,
     onClick: e => callBack(e),
     children: [!hideIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
+      className: `dtable-font dtable-icon-add-table ${addIconClassName || ''}`
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "add-new-option text-truncate",
       children: footerName

package/lib/DTableFiltersPopover/index.js

@@ -156,7 +156,7 @@ var _jsxRuntime = require("react/jsx-runtime");
           firstDayOfWeek: firstDayOfWeek,
           updateFilters: this.updateFilters
         }), !isSupportAdvanced && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCommonAddTool.default, {
-          className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
+          className: `popover-add-tool ${canAddFilter ? '' : 'disabled'}`,
           callBack: canAddFilter ? () => this.addFilter() : () => {},
           footerName: (0, _lang.getLocale)('Add_filter'),
           addIconClassName: "popover-add-icon"

package/lib/DTableFiltersPopover/utils/index.js

@@ -407,7 +407,7 @@ const getMediaUrl = () => {
 };
 const generateDefaultUser = name => {
   const mediaUrl = getMediaUrl();
-  const defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
+  const defaultAvatarUrl = `${mediaUrl}avatars/default.png`;
   return {
     name,
     email: name,

package/lib/DTableFiltersPopover/widgets/filter-group.js

@@ -146,7 +146,7 @@ class FilterGroup extends _react.Component {
           updateConjunction: this.modifyConjunctionInGroup,
           deleteFilter: this.deleteFilterInGroup,
           updateFilter: this.updateFilterInGroup
-        }, "filter-in-group-".concat(groupIndex, "-").concat(subFilterIndex));
+        }, `filter-in-group-${groupIndex}-${subFilterIndex}`);
       });
     };
   }
@@ -157,7 +157,7 @@ class FilterGroup extends _react.Component {
       readOnly
     } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('filter-item', 'filter-group', "level-".concat(level)),
+      className: (0, _classnames.default)('filter-item', 'filter-group', `level-${level}`),
       children: [!readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "delete-filter",
         onClick: this.deleteFilterGroup,

package/lib/DTableFiltersPopover/widgets/filter-item.js

@@ -790,7 +790,7 @@ class FilterItem extends _react.default.Component {
               isLocked: readOnly
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "filter-predicate ml-2 ".concat(_isCheckboxColumn ? 'filter-checkbox-predicate' : ''),
+            className: `filter-predicate ml-2 ${_isCheckboxColumn ? 'filter-checkbox-predicate' : ''}`,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSelect.default, {
               value: activePredicate,
               options: filterPredicateOptions,

package/lib/DTableFiltersPopover/widgets/filter-list/index.js

@@ -261,7 +261,7 @@ class FiltersList extends _react.Component {
           modifyConjunctionInGroup: this.modifyConjunctionInGroup,
           deleteFilterInGroup: this.deleteFilterInGroup,
           updateFilterInGroup: this.updateFilterInGroup
-        }, "filter-group-".concat(index));
+        }, `filter-group-${index}`);
       }
       const {
         error_message

package/lib/DTableFiltersPopover/widgets/rate-item.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -57,19 +56,20 @@ class RateItem extends _react.default.Component {
     };
     let style = itemStyle;
     if (enterRateItemIndex >= rateItemIndex) {
-      style = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemStyle), {}, {
+      style = {
+        ...itemStyle,
         color: rate_style_color,
         opacity: 0.4
-      });
+      };
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       onMouseEnter: this.onMouseEnterRateItem,
       onMouseLeave: this.onMouseLeaveRateItem,
       style: style,
       onClick: this.onChangeRateNumber,
-      className: "rate-item ".concat(value >= rateItemIndex ? 'rate-item-active' : ''),
+      className: `rate-item ${value >= rateItemIndex ? 'rate-item-active' : ''}`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font ".concat(rateShowType),
+        className: `dtable-font ${rateShowType}`,
         ref: this.tooltipRef
       }), editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.UncontrolledTooltip, {
         placement: "bottom",

package/lib/DTableGroupSelect/select-option-group.js

@@ -154,7 +154,7 @@ class SelectOptionGroup extends _react.Component {
           }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
             className: "dtable-font dtable-icon-check-mark"
           })]
-        }, "".concat(option.id, "-").concat(index));
+        }, `${option.id}-${index}`);
       });
     };
     this.state = {

package/lib/DTableIcon/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _svgIcon = _interopRequireDefault(require("./svg-icon"));
 require("./index.css");
@@ -24,14 +23,15 @@ const DTableIcon = _ref => {
     if (ariaHidden) {
       customProps['aria-hidden'] = ariaHidden;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", (0, _objectSpread2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
       className: (0, _classnames.default)(symbol, className, {
         'dtable-font': !symbol.includes('dtable-font')
       }),
       style: {
         color
-      }
-    }, customProps));
+      },
+      ...customProps
+    });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcon.default, {
     symbol: symbol,

package/lib/DTableIcon/svg-icon.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 let svgIconComponents = null;
@@ -49,8 +48,9 @@ const SvgIcon = _ref => {
     IconComponent = getSvg(symbol);
   }
   if (!IconComponent) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, (0, _objectSpread2.default)({
-    className: (0, _classnames.default)('multicolor-icon', className, "multicolor-icon-".concat(symbol))
-  }, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+    className: (0, _classnames.default)('multicolor-icon', className, `multicolor-icon-${symbol}`),
+    ...props
+  });
 };
 var _default = exports.default = SvgIcon;

package/lib/DTableModalHeader/index.js

@@ -5,19 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children"];
 const DTableModalHeader = _ref => {
   let {
-      children
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    children,
+    ...props
+  } = _ref;
   const customCloseBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
     type: "button",
     className: "close dtable-modal-close",
@@ -29,9 +26,10 @@ const DTableModalHeader = _ref => {
       className: "dtable-modal-close-inner"
     })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, {
+    ...props,
     close: customCloseBtn,
     children: children
-  }));
+  });
 };
 var _default = exports.default = DTableModalHeader;

package/lib/DTableRadioGroup/index.js

@@ -49,7 +49,7 @@ class DTableRadioGroup extends _react.default.Component {
       options
     } = this.props;
     if (!this.btn || !this.slider || !Array.isArray(options)) return;
-    this.slider.style.width = "".concat(100 / options.length, "%");
+    this.slider.style.width = `${100 / options.length}%`;
     this.setSliderTransition();
   }
   componentDidUpdate(prevProps) {
@@ -77,13 +77,13 @@ class DTableRadioGroup extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "radio-group-wrapper",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "radio-group-options ".concat(readOnly ? 'read-only' : ''),
+        className: `radio-group-options ${readOnly ? 'read-only' : ''}`,
         children: [options.map(option => {
           const isActive = activeOption === option ? true : false;
           const displayOption = optionsDisplay && optionsDisplay[option] || '';
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             ref: ref => this.btn = ref,
-            className: "radio-group-button ".concat(isActive ? 'active' : ''),
+            className: `radio-group-button ${isActive ? 'active' : ''}`,
             "data-option": option,
             onClick: this.onSelectChanged,
             children: displayOption

package/lib/DTableSelect/dtable-select-label.js

@@ -15,7 +15,7 @@ function DTableSelectLabel(_ref) {
     isSelect = false
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "".concat(classname, " w-100 d-flex justify-content-between"),
+    className: `${classname} w-100 d-flex justify-content-between`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: name
     }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/DTableSelect/utils.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["innerProps"]; // DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
+// DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
 const DEFAULT_CONTROL_STYLE = {
   border: '1px solid rgba(0, 40, 100, 0.12) !important'
 };
@@ -30,17 +28,25 @@ const controlCallback = (provided, state) => {
     isFocused
   } = state;
   if (isFocused && !isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), {}, {
-      '&:hover': (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE)
-    });
+    return {
+      ...provided,
+      ...FOCUS_CONTROL_STYLE,
+      '&:hover': {
+        ...provided,
+        ...FOCUS_CONTROL_STYLE
+      }
+    };
   }
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+  return {
+    ...provided,
     fontSize: '14px',
     lineHeight: '1.5',
-    cursor: 'pointer'
-  }, DEFAULT_CONTROL_STYLE), {}, {
-    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
-  });
+    cursor: 'pointer',
+    ...DEFAULT_CONTROL_STYLE,
+    '&:hover': {
+      ...DEFAULT_CONTROL_STYLE
+    }
+  };
 };
 const UserSelectStyle = exports.UserSelectStyle = {
   option: (provided, state) => {
@@ -48,41 +54,46 @@ const UserSelectStyle = exports.UserSelectStyle = {
       isDisabled,
       isFocused
     } = state;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    return {
+      ...provided,
       cursor: isDisabled ? 'default' : 'pointer',
       backgroundColor: isFocused ? '#f5f5f5' : '#fff'
-    });
+    };
   },
   control: controlCallback,
   indicatorSeparator: noneCallback,
   dropdownIndicator: noneCallback,
   clearIndicator: noneCallback,
   multiValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    return {
+      ...provided,
       display: 'inline-flex',
       alignItems: 'center',
       background: '#eaeaea',
       borderRadius: '10px',
       margin: '0 10px 0 0',
       padding: '0 0 0 2px'
-    });
+    };
   },
   multiValueLabel: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    return {
+      ...provided,
       padding: '0px'
-    });
+    };
   },
   multiValueRemove: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    return {
+      ...provided,
       color: '#666',
       ':hover': {
         backgroundColor: 'transparent',
         color: '#555555'
       }
-    });
+    };
   },
   singleValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    return {
+      ...provided,
       display: 'inline-flex',
       alignItems: 'center',
       background: '#eaeaea',
@@ -90,7 +101,7 @@ const UserSelectStyle = exports.UserSelectStyle = {
       margin: '0',
       padding: '0 2px',
       width: 'fit-content'
-    });
+    };
   }
 };
 const MenuSelectStyle = exports.MenuSelectStyle = {
@@ -99,7 +110,8 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       isDisabled,
       isFocused
     } = state;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    return {
+      ...provided,
       fontSize: '13px',
       color: '#212529',
       cursor: isDisabled ? 'default' : 'pointer',
@@ -113,16 +125,18 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       '.header-icon .multicolor-icon': {
         color: '#aaa'
       }
-    });
+    };
   },
   control: controlCallback,
-  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+  menuPortal: base => ({
+    ...base,
     zIndex: 9999
   }),
   indicatorSeparator: noneCallback
 };
 const DropdownIndicator = props => {
-  return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, {
+    ...props,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "dtable-font dtable-icon-down3",
       style: {
@@ -130,22 +144,24 @@ const DropdownIndicator = props => {
         marginLeft: '-2px'
       }
     })
-  }));
+  });
 };
 exports.DropdownIndicator = DropdownIndicator;
 const ClearIndicator = _ref => {
   let {
-      innerProps
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    innerProps,
+    ...props
+  } = _ref;
   const onMouseDown = e => {
     e.nativeEvent.stopImmediatePropagation();
     innerProps.onMouseDown(e);
   };
-  props.innerProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, innerProps), {}, {
+  props.innerProps = {
+    ...innerProps,
     onMouseDown
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.ClearIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.ClearIndicator, {
+    ...props,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "dtable-font dtable-icon-fork-number",
       style: {
@@ -153,21 +169,24 @@ const ClearIndicator = _ref => {
         marginRight: '-2px'
       }
     })
-  }));
+  });
 };
 exports.ClearIndicator = ClearIndicator;
 const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   onClick: e => e.nativeEvent.stopImmediatePropagation(),
   onMouseDown: e => e.nativeEvent.stopImmediatePropagation(),
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.MenuList, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.MenuList, {
+    ...props,
     children: props.children
-  }))
+  })
 });
 exports.MenuList = MenuList;
 const Option = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: props.data.style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)({}, props))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, {
+      ...props
+    })
   });
 };
 exports.Option = Option;

package/lib/DateEditor/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _dtableUtils = require("dtable-utils");
@@ -60,29 +59,33 @@ const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onCommit: handelCommit,
     onClose: hideCalendar
   };
-  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+    ...props,
     isInModal: isInModal,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+    ...props,
     isReadOnly: isReadOnly,
     column: column,
     ref: ref
-  }));
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
       query: '(min-width: 768px)',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+        ...props,
         isInModal: isInModal,
         ref: ref
-      }))
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
       query: '(max-width: 768px)',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
         isReadOnly: isReadOnly,
         column: column,
         ref: ref
-      }))
+      })
     })]
   });
 });

package/lib/DateEditor/pc-editor.js

@@ -224,7 +224,7 @@ class PCDateEditor extends _react.default.Component {
     } = this.state;
     const calendar = this.getCalender();
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "date-picker-container ".concat(isInModal ? 'modal-date-picker-container' : ''),
+      className: `date-picker-container ${isInModal ? 'modal-date-picker-container' : ''}`,
       ref: ref => this.datePickerRef = ref,
       onKeyDown: this.handleKeyDown,
       onClick: this.onClick,

package/lib/DatePicker/utils.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.formatFn = formatFn;
 function formatIt(date, form) {
-  const pad = n => n < 10 ? "0".concat(n) : n;
-  const dateStr = "".concat(date.getFullYear(), "-").concat(pad(date.getMonth() + 1), "-").concat(pad(date.getDate()));
-  const timeStr = "".concat(pad(date.getHours()), ":").concat(pad(date.getMinutes()));
+  const pad = n => n < 10 ? `0${n}` : n;
+  const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
   if (form === 'YYYY-MM-DD') {
     return dateStr;
   }
   if (form === 'HH:mm') {
     return timeStr;
   }
-  return "".concat(dateStr, " ").concat(timeStr);
+  return `${dateStr} ${timeStr}`;
 }
 function formatFn(instance, value) {
   const formatsEnum = {