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

package/lib/ActionSheet/index.js

@@ -72,10 +72,10 @@ function createActionSheet(flag, config, callback) {
     badges = []
   } = props;
   const titleMsg = [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-    className: "".concat(prefixCls, "-title"),
+    className: `${prefixCls}-title`,
     children: title
   }, "0") : null, message ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "".concat(prefixCls, "-message"),
+    className: `${prefixCls}-message`,
     children: message
   }, "1") : null];
   let children = null;
@@ -97,13 +97,13 @@ function createActionSheet(flag, config, callback) {
       children = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ...(0, _getDataAttr.default)(props),
         children: [titleMsg, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "".concat(prefixCls, "-button-list"),
+          className: `${prefixCls}-button-list`,
           role: "group",
           children: normalOptions.map((item, index) => {
             const itemProps = {
-              className: (0, _classnames.default)("".concat(prefixCls, "-button-list-item"), {
-                ["".concat(prefixCls, "-destructive-button")]: destructiveButtonIndex === index,
-                ["".concat(prefixCls, "-cancel-button")]: cancelButtonIndex === index
+              className: (0, _classnames.default)(`${prefixCls}-button-list-item`, {
+                [`${prefixCls}-destructive-button`]: destructiveButtonIndex === index,
+                [`${prefixCls}-cancel-button`]: cancelButtonIndex === index
               }),
               onClick: () => cb(index),
               role: 'button'
@@ -116,24 +116,24 @@ function createActionSheet(flag, config, callback) {
             if (badgesMap[index]) {
               bContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 ...itemProps,
-                className: "".concat(itemProps.className, " ").concat(prefixCls, "-button-list-badge"),
+                className: `${itemProps.className} ${prefixCls}-button-list-badge`,
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  className: "".concat(prefixCls, "-button-list-item-content"),
+                  className: `${prefixCls}-button-list-item-content`,
                   children: item
                 }), badgesMap[index]]
               });
             }
             let bItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcFeedback.default, {
-              activeClassName: "".concat(prefixCls, "-button-list-item-active"),
+              activeClassName: `${prefixCls}-button-list-item-active`,
               children: bContent
             }, index);
             if (cancelButtonIndex === index || destructiveButtonIndex === index) {
               bItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcFeedback.default, {
-                activeClassName: "".concat(prefixCls, "-button-list-item-active"),
+                activeClassName: `${prefixCls}-button-list-item-active`,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                   ...itemProps,
                   children: [item, cancelButtonIndex === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    className: "".concat(prefixCls, "-cancel-button-mask")
+                    className: `${prefixCls}-cancel-button-mask`
                   }) : null]
                 })
               }, index);
@@ -149,14 +149,14 @@ function createActionSheet(flag, config, callback) {
       const createList = function (item, index) {
         let rowIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "".concat(prefixCls, "-share-list-item"),
+          className: `${prefixCls}-share-list-item`,
           role: "button",
           onClick: () => cb(index, rowIndex),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "".concat(prefixCls, "-share-list-item-icon"),
+            className: `${prefixCls}-share-list-item-icon`,
             children: item.icon
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "".concat(prefixCls, "-share-list-item-title"),
+            className: `${prefixCls}-share-list-item-title`,
             children: item.title
           })]
         }, index);
@@ -164,17 +164,17 @@ function createActionSheet(flag, config, callback) {
       children = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ...(0, _getDataAttr.default)(props),
         children: [titleMsg, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "".concat(prefixCls, "-share"),
+          className: `${prefixCls}-share`,
           children: [multipleLine ? options.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "".concat(prefixCls, "-share-list"),
+            className: `${prefixCls}-share-list`,
             children: item.map((ii, ind) => createList(ii, ind, index))
           }, index)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "".concat(prefixCls, "-share-list"),
+            className: `${prefixCls}-share-list`,
             children: options.map((item, index) => createList(item, index))
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcFeedback.default, {
-            activeClassName: "".concat(prefixCls, "-share-cancel-button-active"),
+            activeClassName: `${prefixCls}-share-cancel-button-active`,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "".concat(prefixCls, "-share-cancel-button"),
+              className: `${prefixCls}-share-cancel-button`,
               role: "button",
               onClick: () => cb(-1),
               children: cancelButtonText
@@ -186,8 +186,8 @@ function createActionSheet(flag, config, callback) {
     default:
       break;
   }
-  const rootCls = (0, _classnames.default)("".concat(prefixCls, "-").concat(mode), className);
-  root.render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcDialog.default, {
+  const rootCls = (0, _classnames.default)(`${prefixCls}-${mode}`, className);
+  root.render(/*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcDialog.default, {
     visible: true,
     title: "",
     footer: "",

package/lib/ActivityIndicator/index.js

@@ -23,28 +23,28 @@ class ActivityIndicator extends React.Component {
       text
     } = this.props;
     const wrapClass = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-lg")]: size === 'large',
-      ["".concat(prefixCls, "-sm")]: size === 'small',
-      ["".concat(prefixCls, "-toast")]: !!toast
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small',
+      [`${prefixCls}-toast`]: !!toast
     });
-    const spinnerClass = (0, _classnames.default)("".concat(prefixCls, "-spinner"), {
-      ["".concat(prefixCls, "-spinner-lg")]: !!toast || size === 'large'
+    const spinnerClass = (0, _classnames.default)(`${prefixCls}-spinner`, {
+      [`${prefixCls}-spinner-lg`]: !!toast || size === 'large'
     });
     if (animating) {
       if (toast) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: wrapClass,
           children: text ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "".concat(prefixCls, "-content"),
+            className: `${prefixCls}-content`,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: spinnerClass,
               "aria-hidden": "true"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "".concat(prefixCls, "-toast"),
+              className: `${prefixCls}-toast`,
               children: text
             })]
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "".concat(prefixCls, "-content"),
+            className: `${prefixCls}-content`,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: spinnerClass,
               "aria-label": "Loading"
@@ -58,7 +58,7 @@ class ActivityIndicator extends React.Component {
             className: spinnerClass,
             "aria-hidden": "true"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "".concat(prefixCls, "-tip"),
+            className: `${prefixCls}-tip`,
             children: text
           })]
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/AsyncUserSelect/index.js

@@ -169,7 +169,7 @@ const AsyncUserSelect = _ref => {
         bottom
       } = userSelectContainerRef.current.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        userSelectContainerRef.current.style.top = "".concat(window.innerHeight - bottom, "px");
+        userSelectContainerRef.current.style.top = `${window.innerHeight - bottom}px`;
       }
     }
     if (userListContainerRef.current && userItemContainerRef.current) {
@@ -200,7 +200,7 @@ const AsyncUserSelect = _ref => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
             user: user,
             deleteUser: deselectUser
-          }, "dtable-ui-user-selector-selected-user-".concat(index));
+          }, `dtable-ui-user-selector-selected-user-${index}`);
         }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "dtable-ui-user-select-placeholder",
           children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
@@ -239,7 +239,7 @@ const AsyncUserSelect = _ref => {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
                   user: user,
                   enableShowIDInOrgWhenSearchUser: enableShowIDInOrgWhenSearchUser
-                }, "dtable-ui-user-selector-searched-user-".concat(index)), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                }, `dtable-ui-user-selector-searched-user-${index}`), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                   className: "dtable-ui-collaborator-check-icon",
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
                     className: "dtable-font dtable-icon-check-mark",

package/lib/Badge/index.js

@@ -27,24 +27,24 @@ class Badge extends React.Component {
     } = this.props;
     // eslint-disable-next-line no-self-assign
     overflowCount = overflowCount;
-    text = typeof text === 'number' && text > overflowCount ? "".concat(overflowCount, "+") : text;
+    text = typeof text === 'number' && text > overflowCount ? `${overflowCount}+` : text;
 
     // dot mode don't need text
     if (dot) {
       text = '';
     }
     const scrollNumberCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-dot")]: dot,
-      ["".concat(prefixCls, "-dot-large")]: dot && size === 'large',
-      ["".concat(prefixCls, "-text")]: !dot && !corner,
-      ["".concat(prefixCls, "-corner")]: corner,
-      ["".concat(prefixCls, "-corner-large")]: corner && size === 'large'
+      [`${prefixCls}-dot`]: dot,
+      [`${prefixCls}-dot-large`]: dot && size === 'large',
+      [`${prefixCls}-text`]: !dot && !corner,
+      [`${prefixCls}-corner`]: corner,
+      [`${prefixCls}-corner-large`]: corner && size === 'large'
     });
     const badgeCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-not-a-wrapper")]: !children,
-      ["".concat(prefixCls, "-corner-wrapper")]: corner,
-      ["".concat(prefixCls, "-hot")]: !!hot,
-      ["".concat(prefixCls, "-corner-wrapper-large")]: corner && size === 'large'
+      [`${prefixCls}-not-a-wrapper`]: !children,
+      [`${prefixCls}-corner-wrapper`]: corner,
+      [`${prefixCls}-hot`]: !!hot,
+      [`${prefixCls}-corner-wrapper-large`]: corner && size === 'large'
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: badgeCls,

package/lib/CheckboxEditor/mb-editor.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 class MBCheckboxEditor extends _react.Component {
@@ -52,15 +52,7 @@ class MBCheckboxEditor extends _react.Component {
       const className = (0, _classnames.default)('dtable-ui-checkbox-check-mark', {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
       });
-      if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
-          style: {
-            color
-          }
-        });
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
         className: className,
         symbol: symbol,
         color: color

package/lib/CheckboxEditor/pc-editor.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
 class PCCheckboxEditor extends _react.Component {
@@ -65,15 +65,7 @@ class PCCheckboxEditor extends _react.Component {
       const className = (0, _classnames.default)('dtable-ui-checkbox-check-mark', {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
       });
-      if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
-          style: {
-            color
-          }
-        });
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
         className: className,
         symbol: symbol,
         color: color

package/lib/CheckboxFormatter/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 var _constants = require("../constants");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -15,20 +15,11 @@ class CheckboxFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.renderIcon = (symbol, color) => {
-      let className = 'dtable-ui-checkbox-check-mark';
-      if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
-          style: {
-            color
-          }
-        });
-      }
-      className = (0, _classnames.default)(className, {
+      const className = (0, _classnames.default)('dtable-ui-checkbox-check-mark', {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon')),
-        'scale-icon': _constants.isMobile
+        'scale-icon-150': _constants.isMobile
       });
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
         className: className,
         symbol: symbol,
         color: color

package/lib/CollaboratorEditor/pc-editor/index.js

@@ -176,7 +176,7 @@ class PCCollaboratorEditor extends _react.default.Component {
         bottom
       } = this.ref.getBoundingClientRect();
       if (bottom > window.innerHeight) {
-        this.ref.style.top = "".concat(window.innerHeight - bottom, "px");
+        this.ref.style.top = `${window.innerHeight - bottom}px`;
       }
     }
     if (this.container && this.collaboratorItem) {

package/lib/CollapsibleSettingLayout/index.js

@@ -26,7 +26,7 @@ const CollapsibleSettingLayout = props => {
         className: "collapsible-setting-layout-title",
         children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "dtable-font dtable-icon-right".concat(isShowSettings ? ' dtable-icon-spin' : '')
+        className: `dtable-font dtable-icon-right${isShowSettings ? ' dtable-icon-spin' : ''}`
       })]
     }), isShowSettings && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "collapsible-setting-layout-body mt-3 pl-2",

package/lib/Comment/body/comment.js

@@ -140,7 +140,7 @@ class Comment extends _react.PureComponent {
     if (!this.isCommentUserExist(comment)) return null;
     const isShowDropdownMenu = comment.author === username || !comment.resolved;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "dtable-ui-comment-container ".concat(comment.resolved ? 'dtable-ui-comment-container-resolved' : ''),
+      className: `dtable-ui-comment-container ${comment.resolved ? 'dtable-ui-comment-container-resolved' : ''}`,
       id: comment.id,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "dtable-ui-comment-info",

package/lib/Comment/footer/index.js

@@ -64,7 +64,7 @@ class Footer extends _react.default.Component {
       let start = 0;
       let newValue = '';
       while ((match = regex.exec(value)) !== null) {
-        let notificationName = "".concat(match[1]);
+        let notificationName = `${match[1]}`;
         let substr = value.substring(start, match.index);
         start = regex.lastIndex;
         newValue += substr + notificationName;

package/lib/Comment/footer/input/index.js

@@ -49,12 +49,12 @@ class Input extends _react.default.Component {
         right,
         left
       } = this.commentRef.getBoundingClientRect();
-      this.commentPopoverRef.style.left = "".concat(caretPosition.x + FONT_SIZE_WIDTH, "px");
-      this.commentPopoverRef.style.top = "".concat(caretPosition.y - this.commentPopoverRef.offsetHeight, "px");
+      this.commentPopoverRef.style.left = `${caretPosition.x + FONT_SIZE_WIDTH}px`;
+      this.commentPopoverRef.style.top = `${caretPosition.y - this.commentPopoverRef.offsetHeight}px`;
       if (caretPosition.x + FONT_SIZE_WIDTH > right - PADDING_WIDTH) {
         // is last code
-        this.commentPopoverRef.style.left = "".concat(left + PADDING_WIDTH + FONT_SIZE_WIDTH, "px");
-        this.commentPopoverRef.style.top = "".concat(caretPosition.y - this.commentPopoverRef.offsetHeight + LINE_HEIGHT, "px");
+        this.commentPopoverRef.style.left = `${left + PADDING_WIDTH + FONT_SIZE_WIDTH}px`;
+        this.commentPopoverRef.style.top = `${caretPosition.y - this.commentPopoverRef.offsetHeight + LINE_HEIGHT}px`;
       }
       if (caretPosition.x + FONT_SIZE_WIDTH + this.commentPopoverRef.offsetWidth > document.body.clientWidth) {
         this.commentPopoverRef.style.right = 0;
@@ -166,7 +166,7 @@ class Input extends _react.default.Component {
         spanNode2 = document.createElement('span');
         spanNode1.className = 'at-text';
         spanNode1.contentEditable = 'false';
-        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode1.innerHTML = `@${content.name}`;
         spanNode2.innerHTML = ' ';
       }
       let frag = document.createDocumentFragment();

package/lib/Comment/footer/input/participant/index.js

@@ -35,7 +35,7 @@ class Participant extends _react.default.Component {
     } = this.props;
     const active = index === activeIndex;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "comment-participant-item ".concat(active ? 'active' : ''),
+      className: `comment-participant-item ${active ? 'active' : ''}`,
       ref: ref => this.participantItem = ref,
       onClick: this.onSelect,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/Comment/footer/participants/participant-select/index.js

@@ -127,12 +127,12 @@ class ParticipantSelect extends _react.Component {
   }
   componentDidMount() {
     let collaboratorListHeight = this.participantsRef.offsetHeight;
-    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+    this.participantsRef.style.top = `${-collaboratorListHeight + 10}px`;
     this.registerHandlers();
   }
   componentDidUpdate() {
     let collaboratorListHeight = this.participantsRef.offsetHeight;
-    this.participantsRef.style.top = "".concat(-collaboratorListHeight + 10, "px");
+    this.participantsRef.style.top = `${-collaboratorListHeight + 10}px`;
   }
   componentWillUnmount() {
     this.unregisterHandlers();

package/lib/Comment/utils/utilities.js

@@ -74,7 +74,7 @@ class Utilities {
         spanNode2 = document.createElement('span');
         spanNode1.className = 'at-text';
         spanNode1.contentEditable = 'true';
-        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode1.innerHTML = `@${content.name}`;
         spanNode2.innerHTML = ' ';
       }
       let frag = document.createDocumentFragment();

package/lib/DTableColorPicker/ColorPickerPortal/index.js

@@ -35,13 +35,13 @@ function ColorPickerPortal(_ref) {
     } = targetRect;
     const portalRectHeight = containerRef.current.clientHeight;
     const newPosition = {
-      left: "".concat(left + 1, "px"),
+      left: `${left + 1}px`,
       visibility: 'visible'
     };
     if (spaceAbove < portalRectHeight) {
-      newPosition.top = "calc(".concat(spaceAbove, "px + 2.375rem)");
+      newPosition.top = `calc(${spaceAbove}px + 2.375rem)`;
     } else {
-      newPosition.top = "calc(".concat(spaceAbove - portalRectHeight, "px)");
+      newPosition.top = `calc(${spaceAbove - portalRectHeight}px)`;
     }
     setPosition(prev => ({
       ...prev,
@@ -73,7 +73,7 @@ function ColorPickerPortal(_ref) {
     };
   }, [target, scrollContainerId, throttleDelay, updatePosition]);
   if (!target) return null;
-  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "dtable-color-picker-portal",
     style: {
       position: 'fixed',

package/lib/DTableColorPicker/index.js

@@ -246,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}`);
         })
       })]
     });
@@ -271,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,
@@ -345,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",
@@ -353,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/DTableColumnIcon/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dtableUtils = require("dtable-utils");
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
+var _jsxRuntime = require("react/jsx-runtime");
+const COLUMNS_ICON_CONFIG = {
+  [_dtableUtils.CellType.DEFAULT]: 'dtable-font dtable-icon-single-line-text',
+  [_dtableUtils.CellType.TEXT]: 'dtable-font dtable-icon-single-line-text',
+  [_dtableUtils.CellType.STRING]: 'dtable-font dtable-icon-single-line-text',
+  [_dtableUtils.CellType.NUMBER]: 'dtable-font dtable-icon-number',
+  [_dtableUtils.CellType.CHECKBOX]: 'dtable-font dtable-icon-check-square-solid',
+  [_dtableUtils.CellType.DATE]: 'dtable-font dtable-icon-calendar-alt-solid',
+  [_dtableUtils.CellType.SINGLE_SELECT]: 'dtable-font dtable-icon-single-election',
+  [_dtableUtils.CellType.LONG_TEXT]: 'dtable-font dtable-icon-long-text',
+  [_dtableUtils.CellType.IMAGE]: 'dtable-font dtable-icon-picture',
+  [_dtableUtils.CellType.FILE]: 'dtable-font dtable-icon-file-alt-solid',
+  [_dtableUtils.CellType.MULTIPLE_SELECT]: 'dtable-font dtable-icon-multiple-selection',
+  [_dtableUtils.CellType.COLLABORATOR]: 'dtable-font dtable-icon-collaborator',
+  [_dtableUtils.CellType.LINK]: 'dtable-font dtable-icon-link-other-record',
+  [_dtableUtils.CellType.FORMULA]: 'dtable-font dtable-icon-formula',
+  [_dtableUtils.CellType.LINK_FORMULA]: 'dtable-font dtable-icon-link-formulas',
+  [_dtableUtils.CellType.CREATOR]: 'dtable-font dtable-icon-creator',
+  [_dtableUtils.CellType.CTIME]: 'dtable-font dtable-icon-creation-time',
+  [_dtableUtils.CellType.LAST_MODIFIER]: 'dtable-font dtable-icon-creator',
+  [_dtableUtils.CellType.MTIME]: 'dtable-font dtable-icon-creation-time',
+  [_dtableUtils.CellType.GEOLOCATION]: 'dtable-font dtable-icon-location',
+  [_dtableUtils.CellType.AUTO_NUMBER]: 'dtable-font dtable-icon-autonumber',
+  [_dtableUtils.CellType.URL]: 'dtable-font dtable-icon-url',
+  [_dtableUtils.CellType.EMAIL]: 'dtable-font dtable-icon-email',
+  [_dtableUtils.CellType.DURATION]: 'dtable-font dtable-icon-duration',
+  [_dtableUtils.CellType.BUTTON]: 'dtable-font dtable-icon-button',
+  [_dtableUtils.CellType.RATE]: 'dtable-font dtable-icon-rate',
+  [_dtableUtils.CellType.DIGITAL_SIGN]: 'dtable-font dtable-icon-handwritten-signature',
+  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: 'dtable-font dtable-icon-department-single-selection'
+};
+const COLUMN_DISPLAY_TYPE_ICON_CONFIG = {
+  [_dtableUtils.CellType.TEXT]: {
+    [_dtableUtils.TEXT_DISPLAY_TYPE_MAP.PHONE]: 'telephone'
+  }
+};
+const DTableColumnIcon = _ref => {
+  let {
+    columnType,
+    columnDisplayType,
+    color,
+    className,
+    ariaHidden = false,
+    getSvg
+  } = _ref;
+  let symbol = null;
+  let displayTypeIconConfig = COLUMN_DISPLAY_TYPE_ICON_CONFIG[columnType];
+  if (displayTypeIconConfig && columnDisplayType) {
+    symbol = displayTypeIconConfig[columnDisplayType];
+  }
+  if (!symbol) {
+    symbol = COLUMNS_ICON_CONFIG[columnType];
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+    className: className,
+    symbol: symbol,
+    color: color,
+    ariaHidden: ariaHidden,
+    getSvg: getSvg
+  });
+};
+var _default = exports.default = DTableColumnIcon;

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"