dtable-ui-component 6.0.54 → 6.0.55-beta.2

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

@@ -1,12 +1,13 @@
 "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 _dtableUtils = require("dtable-utils");
+var _DTableColumnIcon = _interopRequireDefault(require("../../DTableColumnIcon"));
 var _lang = require("../../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 class FilterItemUtils {
@@ -14,7 +15,8 @@ class FilterItemUtils {
     if (!column) return null;
     const {
       type,
-      name
+      name,
+      data
     } = column;
     return {
       value: {
@@ -23,8 +25,9 @@ class FilterItemUtils {
       label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "filter-header-icon",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: _dtableUtils.COLUMNS_ICON_CONFIG[type]
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableColumnIcon.default, {
+            columnType: type,
+            columnDisplayType: data === null || data === void 0 ? void 0 : data.display_type
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "select-option-name",

package/lib/DTableFiltersPopover/utils/index.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "FilterItemUtils", {
     return _filterItemUtils.default;
   }
 });
-exports.isFilterTermArray = exports.getUpdatedFilterBySelectSingle = exports.getUpdatedFilterBySelectMultiple = exports.getUpdatedFilterByRate = exports.getUpdatedFilterByPredicate = exports.getUpdatedFilterByCreator = exports.getUpdatedFilterByColumn = exports.getUpdatedFilterByCollaborator = exports.getSingleSelectUpdatedFilterTerm = exports.getMultipleSelectUpdatedFilterTerm = exports.getFormulaColumnFilter = exports.getFormulaAndLinkFilters = exports.getFilterConfigOptions = exports.getFilterColumns = exports.getFilterByColumn = exports.getDefaultFilterGroup = exports.getDefaultFilter = exports.getCreatorUpdatedFilterTerm = exports.getColumnOptions = exports.getColumnByKey = exports.getCollaboratorUpdatedFilterTerm = exports.generateDefaultUser = exports.applyFilterOperation = void 0;
+exports.isFilterTermArray = exports.getUpdatedFilterBySelectSingle = exports.getUpdatedFilterBySelectMultiple = exports.getUpdatedFilterByRate = exports.getUpdatedFilterByPredicate = exports.getUpdatedFilterByCreator = exports.getUpdatedFilterByColumn = exports.getUpdatedFilterByCollaborator = exports.getSingleSelectUpdatedFilterTerm = exports.getMultipleSelectUpdatedFilterTerm = exports.getFormulaColumnFilter = exports.getFormulaAndLinkFilters = exports.getFilterConfigOptions = exports.getFilterColumns = exports.getFilterByColumn = exports.getDefaultFilterGroup = exports.getDefaultFilter = exports.getCreatorUpdatedFilterTerm = exports.getColumnOptions = exports.getColumnByKey = exports.getCollaboratorUpdatedFilterTerm = exports.generateDefaultUser = exports.checkColumnHasFilterOptions = exports.applyFilterOperation = void 0;
 var _dtableUtils = require("dtable-utils");
 var _filterItemUtils = _interopRequireDefault(require("./filter-item-utils"));
 var _constants = require("../constants");
@@ -133,17 +133,25 @@ const getColumnOptions = column => {
   }
   if (type === _dtableUtils.CellType.LINK) {
     const {
-      array_type
+      array_type,
+      array_data
     } = data || {};
     if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
-      return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.CHECKBOX];
+      return (0, _dtableUtils.getColumnFilterOptions)({
+        columnType: _dtableUtils.CellType.CHECKBOX
+      });
     }
     if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.STRING) {
-      return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.TEXT];
+      return (0, _dtableUtils.getColumnFilterOptions)({
+        columnType: _dtableUtils.CellType.TEXT
+      });
     }
-    return getFilterOptionsByArrayType(array_type);
+    return getFilterOptionsByArrayType(array_type, array_data);
   }
-  return _dtableUtils.FILTER_COLUMN_OPTIONS[type] || {};
+  return (0, _dtableUtils.getColumnFilterOptions)({
+    columnType: type,
+    columnDisplayType: data === null || data === void 0 ? void 0 : data.display_type
+  });
 };
 exports.getColumnOptions = getColumnOptions;
 const getFormulaColumnFilterOptions = column => {
@@ -152,23 +160,32 @@ const getFormulaColumnFilterOptions = column => {
   } = column;
   const {
     result_type,
-    array_type
+    array_type,
+    array_data
   } = data || {};
   if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
-    return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.CHECKBOX];
+    return (0, _dtableUtils.getColumnFilterOptions)({
+      columnType: _dtableUtils.CellType.CHECKBOX
+    });
   }
   if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.STRING) {
-    return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.TEXT];
+    return (0, _dtableUtils.getColumnFilterOptions)({
+      columnType: _dtableUtils.CellType.TEXT
+    });
   }
   if ([_dtableUtils.FORMULA_RESULT_TYPE.NUMBER, _dtableUtils.FORMULA_RESULT_TYPE.DATE].includes(result_type)) {
-    return _dtableUtils.FILTER_COLUMN_OPTIONS[result_type];
+    return (0, _dtableUtils.getColumnFilterOptions)({
+      columnType: result_type
+    });
   }
   if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
-    return getFilterOptionsByArrayType(array_type);
+    return getFilterOptionsByArrayType(array_type, array_data);
   }
-  return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.TEXT];
+  return (0, _dtableUtils.getColumnFilterOptions)({
+    columnType: _dtableUtils.CellType.TEXT
+  });
 };
-const getFilterOptionsByArrayType = array_type => {
+const getFilterOptionsByArrayType = (array_type, array_data) => {
   if (!array_type) {
     return {};
   }
@@ -187,10 +204,21 @@ const getFilterOptionsByArrayType = array_type => {
 
   // only support: is
   if (checkType === _dtableUtils.CellType.CHECKBOX || checkType === _dtableUtils.CellType.BOOL) {
-    return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.CHECKBOX];
-  }
-  let filterOptions = _dtableUtils.FILTER_COLUMN_OPTIONS[checkType] || _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.TEXT];
-  let {
+    return (0, _dtableUtils.getColumnFilterOptions)({
+      columnType: _dtableUtils.CellType.CHECKBOX
+    });
+  }
+  const filterOptions = checkColumnHasFilterOptions({
+    columnType: checkType,
+    columnDisplayType: array_data === null || array_data === void 0 ? void 0 : array_data.display_type
+  }) ? (0, _dtableUtils.getColumnFilterOptions)({
+    columnType: checkType,
+    columnDisplayType: array_data === null || array_data === void 0 ? void 0 : array_data.display_type
+  }) : (0, _dtableUtils.getColumnFilterOptions)({
+    columnType: _dtableUtils.CellType.TEXT,
+    columnDisplayType: array_data === null || array_data === void 0 ? void 0 : array_data.display_type
+  });
+  const {
     filterPredicateList
   } = filterOptions;
   if (filterPredicateList && !filterPredicateList.includes(_dtableUtils.FILTER_PREDICATE_TYPE.EMPTY)) {
@@ -382,7 +410,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,
@@ -390,11 +418,33 @@ const generateDefaultUser = name => {
   };
 };
 exports.generateDefaultUser = generateDefaultUser;
+const checkColumnHasFilterOptions = _ref => {
+  let {
+    columnType,
+    columnDisplayType
+  } = _ref;
+  const filterOptions = (0, _dtableUtils.getColumnFilterOptions)({
+    columnType,
+    columnDisplayType
+  });
+  return filterOptions ? Object.keys(filterOptions).length > 0 : false;
+};
+exports.checkColumnHasFilterOptions = checkColumnHasFilterOptions;
 const getDefaultFilter = columns => {
+  var _defaultColumn$data;
   if (!columns) return null;
   let defaultColumn = columns[0];
-  if (!_dtableUtils.FILTER_COLUMN_OPTIONS[defaultColumn.type]) {
-    defaultColumn = columns.find(c => _dtableUtils.FILTER_COLUMN_OPTIONS[c.type]);
+  if (!checkColumnHasFilterOptions({
+    columnType: defaultColumn.type,
+    columnDisplayType: (_defaultColumn$data = defaultColumn.data) === null || _defaultColumn$data === void 0 ? void 0 : _defaultColumn$data.display_type
+  })) {
+    defaultColumn = columns.find(c => {
+      var _c$data;
+      return checkColumnHasFilterOptions({
+        columnType: c.type,
+        columnDisplayType: (_c$data = c.data) === null || _c$data === void 0 ? void 0 : _c$data.display_type
+      });
+    });
   }
   if (!defaultColumn) return null;
   return getFilterByColumn(defaultColumn);
@@ -433,9 +483,16 @@ const getFilterColumns = columns => {
       type
     } = column;
     if (data && (type === _dtableUtils.CellType.LINK || _dtableUtils.FORMULA_COLUMN_TYPES_MAP[type] && data.result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY)) {
-      return Object.prototype.hasOwnProperty.call(_dtableUtils.FILTER_COLUMN_OPTIONS, data.array_type);
+      var _data$array_data;
+      return checkColumnHasFilterOptions({
+        columnType: data.array_type,
+        columnDisplayType: (_data$array_data = data.array_data) === null || _data$array_data === void 0 ? void 0 : _data$array_data.display_type
+      });
     }
-    return Object.prototype.hasOwnProperty.call(_dtableUtils.FILTER_COLUMN_OPTIONS, type);
+    return checkColumnHasFilterOptions({
+      columnType: type,
+      columnDisplayType: data === null || data === void 0 ? void 0 : data.display_type
+    });
   });
 };
 exports.getFilterColumns = getFilterColumns;
@@ -702,17 +759,25 @@ const getFilterConfigOptions = column => {
   }
   if (type === _dtableUtils.CellType.LINK) {
     const {
-      array_type
+      array_type,
+      array_data
     } = data || {};
     if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
-      return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.CHECKBOX];
+      return (0, _dtableUtils.getColumnFilterOptions)({
+        columnType: _dtableUtils.CellType.CHECKBOX
+      });
     }
     if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.STRING) {
-      return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.TEXT];
+      return (0, _dtableUtils.getColumnFilterOptions)({
+        columnType: _dtableUtils.CellType.TEXT
+      });
     }
-    return getFilterOptionsByArrayType(array_type);
+    return getFilterOptionsByArrayType(array_type, array_data);
   }
-  return _dtableUtils.FILTER_COLUMN_OPTIONS[type] || {};
+  return (0, _dtableUtils.getColumnFilterOptions)({
+    columnType: type,
+    columnDisplayType: data === null || data === void 0 ? void 0 : data.display_type
+  }) || {};
 };
 exports.getFilterConfigOptions = getFilterConfigOptions;
 const getMultipleSelectUpdatedFilterTerm = (filterTerm, option) => {

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

@@ -351,7 +351,7 @@ class FilterItem extends _react.default.Component {
             optionStyle.background = _constants.DELETED_OPTION_BACKGROUND_COLOR;
             optionName = (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS);
           }
-          labelArray.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          labelArray.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: className,
             style: optionStyle,
             title: optionName,
@@ -792,7 +792,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.css

@@ -420,13 +420,15 @@
   margin-left: -0.3125rem;
 }
 
-.filter-header-icon .dtable-font {
+.filter-header-icon .dtable-font,
+.filter-header-icon .multicolor-icon {
   font-size: 14px;
   color: #aaa;
   cursor: default;
 }
 
-.option.option-active .filter-header-icon .dtable-font {
+.option.option-active .filter-header-icon .dtable-font,
+.option.option-active .filter-header-icon .multicolor-icon {
   color: #fff;
 }
 

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

@@ -67,9 +67,9 @@ class RateItem extends _react.default.Component {
       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/{SvgIcon → DTableIcon}/index.css

@@ -1,10 +1,10 @@
-.dtable-ui-multicolor-icon {
+.multicolor-icon {
   width: 1em;
   height: 1em;
   fill: currentColor;
   overflow: hidden;
 }
 
-.dtable-ui-multicolor-icon.scale-icon {
+.multicolor-icon.scale-icon-150 {
   transform: scale(1.5);
 }

package/lib/DTableIcon/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _svgIcon = _interopRequireDefault(require("./svg-icon"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const DTableIcon = _ref => {
+  let {
+    className,
+    symbol,
+    color,
+    ariaHidden = false,
+    getSvg
+  } = _ref;
+  if (!symbol) return null;
+  if (symbol.includes('dtable-icon')) {
+    let customProps = {};
+    if (ariaHidden) {
+      customProps['aria-hidden'] = ariaHidden;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: (0, _classnames.default)(symbol, className, {
+        'dtable-font': !symbol.includes('dtable-font')
+      }),
+      style: {
+        color
+      },
+      ...customProps
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgIcon.default, {
+    symbol: symbol,
+    color: color,
+    className: className,
+    ariaHidden: ariaHidden,
+    getSvg: getSvg
+  });
+};
+var _default = exports.default = DTableIcon;

package/lib/DTableIcon/svg-icon.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+let svgIconComponents = null;
+const loadSvgIconComponents = () => {
+  // load svg icons from ui-components
+  const requireContext = require.context('../assets/icons', false, /\.svg$/);
+  let iconComponents = {};
+  requireContext.keys().forEach(path => {
+    const iconName = path.replace(/^\.\/(.*?)\.svg$/, '$1').toLowerCase();
+    iconComponents[iconName] = requireContext(path).default;
+  });
+  return iconComponents;
+};
+const getSvgIconComponents = () => {
+  if (!svgIconComponents) {
+    svgIconComponents = loadSvgIconComponents();
+  }
+  return svgIconComponents;
+};
+const SvgIcon = _ref => {
+  let {
+    className,
+    symbol,
+    color,
+    ariaHidden,
+    getSvg
+  } = _ref;
+  if (!symbol) return null;
+  let props = {
+    style: {
+      fill: color
+    }
+  };
+  if (ariaHidden) {
+    props['aria-hidden'] = ariaHidden;
+  }
+  const iconComponents = getSvgIconComponents();
+  let IconComponent = iconComponents[symbol];
+  if (!IconComponent && getSvg) {
+    // try to get svg icon from other modules
+    IconComponent = getSvg(symbol);
+  }
+  if (!IconComponent) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+    className: (0, _classnames.default)('multicolor-icon', className, `multicolor-icon-${symbol}`),
+    ...props
+  });
+};
+var _default = exports.default = SvgIcon;

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/DTableSearchInput/index.js

@@ -67,7 +67,7 @@ class DtableSearchInput extends _react.Component {
       const {
         ClearIndicator
       } = components;
-      if ( /*#__PURE__*/_react.default.isValidElement(ClearIndicator)) {
+      if (/*#__PURE__*/_react.default.isValidElement(ClearIndicator)) {
         return /*#__PURE__*/_react.default.cloneElement(ClearIndicator, {
           clearValue: this.clearSearch
         });

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

@@ -121,6 +121,9 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       },
       '.header-icon .dtable-font': {
         color: '#aaa'
+      },
+      '.header-icon .multicolor-icon': {
+        color: '#aaa'
       }
     };
   },

package/lib/DTableSwitch/index.css

@@ -26,7 +26,8 @@
   color: #212529;
 }
 
-.dtable-switch.sm .custom-switch .dtable-font {
+.dtable-switch.sm .custom-switch .dtable-font,
+.dtable-switch.sm .custom-switch .multicolor-icon {
   -webkit-transform: scale(.8);
   transform: scale(.8);
   display: inline-block;

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 = {

package/lib/DepartmentMultipleSelectEditor/index.js

@@ -110,7 +110,7 @@ function DepartmentMultipleSelect(props) {
           className: "vam department-select-input",
           checked: inputChecked,
           style: {
-            marginRight: "".concat(newLevel * 15 + 5, "px")
+            marginRight: `${newLevel * 15 + 5}px`
           },
           onChange: () => {}
         }), hasChild && !searchVal && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -118,7 +118,7 @@ function DepartmentMultipleSelect(props) {
           role: "button",
           className: "department-item-fold-btn",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "dtable-font expand dtable-icon-down3 ".concat(isExpanded ? '' : 'rotate-270')
+            className: `dtable-font expand dtable-icon-down3 ${isExpanded ? '' : 'rotate-270'}`
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           style: searchVal ? {} : {
@@ -146,7 +146,7 @@ function DepartmentMultipleSelect(props) {
       style: getStyle(),
       onClick: onStopPropagation,
       onMouseDown: onStopPropagation,
-      className: "departments-container dtable-ui ".concat(classNamePrefix),
+      className: `departments-container dtable-ui ${classNamePrefix}`,
       children: [isShowSelectedDepartments && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "selected-departments dtable-ui",
         onClick: onClick,

package/lib/DepartmentSingleSelectEditor/mb-editor/index.js

@@ -158,7 +158,7 @@ const MBDepartmentSingleSelectEditor = _ref => {
                 label: (0, _lang.getLocale)(name)
               })
             })
-          }, "department-range-item-".concat(index));
+          }, `department-range-item-${index}`);
         })
       }), currentDepartments.map((department, index) => {
         const {
@@ -180,7 +180,7 @@ const MBDepartmentSingleSelectEditor = _ref => {
               label: name
             })
           })
-        }, "department-item-".concat(index));
+        }, `department-item-${index}`);
       })]
     });
   }, [initColumnData, parentId, isFilterEditor, isSupportMultiple, departments, value, topParentIds, onParentDepartmentClick, onDepartmentClick]);

package/lib/DepartmentSingleSelectEditor/pc-editor/department-single-select.js

@@ -142,7 +142,7 @@ class DepartmentSingleSelect extends _react.Component {
           className: "department-item",
           onClick: event => this.onSelectDepartment(event, id),
           style: {
-            paddingLeft: "".concat(newLevel * 15 + 10, "px")
+            paddingLeft: `${newLevel * 15 + 10}px`
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "department-item-left-content d-flex align-items-center",
@@ -151,7 +151,7 @@ class DepartmentSingleSelect extends _react.Component {
               role: "button",
               className: "department-item-fold-btn",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "dtable-font expand dtable-icon-down3 ".concat(isExpanded ? '' : 'rotate-270')
+                className: `dtable-font expand dtable-icon-down3 ${isExpanded ? '' : 'rotate-270'}`
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               style: {

package/lib/DigitalSignEditor/service.js

@@ -21,7 +21,7 @@ class DigitalService {
       failedCallback
     } = _ref;
     if (!this.uploadFile) return;
-    const name = "".concat(this.username, "-").concat(Date.now().toString(), ".png");
+    const name = `${this.username}-${Date.now().toString()}.png`;
     const file = new File([signBlob], name, {
       type: 'image/png'
     });

package/lib/DigitalSignEditor/signature-board/index.js

@@ -18,8 +18,8 @@ class SignatureBoard extends _react.Component {
     this.initSignTool = () => {
       let signatureBoardCanvas = document.querySelector('#signature_board_canvas');
       if (!this.signatureBoard || !signatureBoardCanvas) return;
-      signatureBoardCanvas.style.width = "".concat(this.signatureBoard.offsetWidth, "px");
-      signatureBoardCanvas.style.height = "".concat(this.signatureBoard.offsetHeight, "px");
+      signatureBoardCanvas.style.width = `${this.signatureBoard.offsetWidth}px`;
+      signatureBoardCanvas.style.height = `${this.signatureBoard.offsetHeight}px`;
       this.signatureTool = new _signatureTool.default(signatureBoardCanvas, {
         minLineWidth: 2,
         maxLineWidth: 4,

package/lib/DigitalSignFormatter/utils.js

@@ -15,7 +15,7 @@ const getDigitalSignImageUrl = (cellValue, config) => {
     dtableUuid
   } = config || {};
   if (server && (workspaceID || workspaceID === 0) && dtableUuid) {
-    return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(url);
+    return `${server}/workspace/${workspaceID}/asset/${dtableUuid}${url}`;
   }
   return url;
 };