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

package/lib/FieldDisplaySetting/field-item.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
 var _DTableSwitch = _interopRequireDefault(require("../DTableSwitch"));
+var _DTableColumnIcon = _interopRequireDefault(require("../DTableColumnIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function FieldItem(_ref) {
   let {
@@ -63,10 +63,15 @@ function FieldItem(_ref) {
     onMoveField(droppedColumnKey, field.key);
   };
   const placeholder = () => {
+    const {
+      type,
+      data
+    } = field;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "field-switch",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "dtable-font ".concat(_dtableUtils.COLUMNS_ICON_CONFIG[field.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", {
         children: field.name
       })]
@@ -74,7 +79,7 @@ function FieldItem(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: fieldItemRef,
-    className: "field-item-container ".concat(isCollapsed ? 'd-none' : ''),
+    className: `field-item-container ${isCollapsed ? 'd-none' : ''}`,
     onDrop: onDrop,
     onDragEnter: onTableDragEnter,
     onDragOver: onDragOver,

package/lib/FieldDisplaySetting/index.js

@@ -30,17 +30,17 @@ function FieldDisplaySetting(_ref) {
     setCollapsed(!isCollapsed);
   };
   const defaultStyle = {
-    transition: "all ".concat(DURATION, "ms cubic-bezier(.645,.045,.355,1)"),
+    transition: `all ${DURATION}ms cubic-bezier(.645,.045,.355,1)`,
     opacity: 0
   };
   const transitionStyles = {
     entering: {
       opacity: 1,
-      height: "".concat(fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT, "px")
+      height: `${fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT}px`
     },
     entered: {
       opacity: 1,
-      height: "".concat(fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT, "px")
+      height: `${fields.length * FIELD_ITEM_HEIGHT + BANNER_HEIGHT}px`
     },
     exiting: {
       opacity: 0,
@@ -60,7 +60,7 @@ function FieldDisplaySetting(_ref) {
         className: "mb-0",
         children: textProperties.titleValue
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
+        className: `dtable-font dtable-icon-right expand-button ${isCollapsed ? '' : 'revolving'}`
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
       nodeRef: nodeRef,
@@ -74,7 +74,7 @@ function FieldDisplaySetting(_ref) {
           ...transitionStyles[state]
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "field-setting-banner ".concat(isCollapsed ? 'd-none' : 'd-flex', " align-items-center justify-content-between h-5 mt-2 mb-2"),
+          className: `field-setting-banner ${isCollapsed ? 'd-none' : 'd-flex'} align-items-center justify-content-between h-5 mt-2 mb-2`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Label, {
             className: "mb-0",
             children: textProperties.bannerValue
@@ -91,7 +91,7 @@ function FieldDisplaySetting(_ref) {
               isCollapsed: isCollapsed,
               onClickField: onClickField,
               onMoveField: onMoveField
-            }, "".concat(field.key, "-").concat(index));
+            }, `${field.key}-${index}`);
           })
         })]
       })

package/lib/FileEditor/files-previewer/mb-previewer/file-previewer/index.js

@@ -104,7 +104,7 @@ class FilePreviewer extends _react.default.Component {
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "dtable-ui-file-editor-previewer-info",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "dtable-ui-file-editor-previewer-item-name ".concat(fileItem.type === 'dir' ? 'dtable-ui-file-editor-previewer-item-name-height' : ''),
+              className: `dtable-ui-file-editor-previewer-item-name ${fileItem.type === 'dir' ? 'dtable-ui-file-editor-previewer-item-name-height' : ''}`,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 children: fileItem.name
               })
@@ -112,7 +112,7 @@ class FilePreviewer extends _react.default.Component {
               className: "dtable-ui-file-editor-preview-item-detail d-flex",
               children: [uploadTime && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "file-upload-time",
-                children: "".concat(uploadTime, ", ")
+                children: `${uploadTime}, `
               }), fileItem.size > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 children: (0, _utils.bytesToSize)(fileItem.size)
               })]

package/lib/FileEditor/files-previewer/pc-previewer/file-previewer/index.js

@@ -99,7 +99,7 @@ class FilePreviewer extends _react.default.Component {
     const errorMessage = '';
     const uploadTime = (0, _utils.getFileUploadTime)(fileItem);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "dtable-ui-file-editor-previewer-box ".concat(highlight ? 'dtable-ui-file-editor-previewer-box-highlight' : ''),
+      className: `dtable-ui-file-editor-previewer-box ${highlight ? 'dtable-ui-file-editor-previewer-box-highlight' : ''}`,
       onMouseEnter: this.fileItemMouseEnter,
       onMouseLeave: this.fileItemMouseLeave,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -123,7 +123,7 @@ class FilePreviewer extends _react.default.Component {
             renameFile: this.props.renameFile,
             closeRenameFile: this.closeRenameFile
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui-file-editor-previewer-item-name ".concat(fileItem.type === 'dir' ? 'dtable-ui-file-editor-previewer-item-name-height' : ''),
+            className: `dtable-ui-file-editor-previewer-item-name ${fileItem.type === 'dir' ? 'dtable-ui-file-editor-previewer-item-name-height' : ''}`,
             ref: ref => this.renameRef = ref,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               onClick: this.props.renameFile ? this.handleFileClick : () => {},
@@ -133,7 +133,7 @@ class FilePreviewer extends _react.default.Component {
             className: "dtable-ui-file-editor-preview-item-detail d-flex",
             children: [uploadTime && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "file-upload-time",
-              children: "".concat(uploadTime, ", ")
+              children: `${uploadTime}, `
             }), fileItem.size > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               children: (0, _utils.bytesToSize)(fileItem.size)
             })]

package/lib/FileEditor/pc-editor/addition-previewer/index.js

@@ -35,7 +35,7 @@ class AdditionPreviewer extends _react.default.Component {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "dtable-ui-image-addition-nav",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui-addition-item ".concat(activeTab === 'localFiles' ? 'dtable-ui-addition-item-selected' : ''),
+            className: `dtable-ui-addition-item ${activeTab === 'localFiles' ? 'dtable-ui-addition-item-selected' : ''}`,
             onClick: this.toggle.bind(this, 'localFiles'),
             children: (0, _lang.getLocale)('Local_Files')
           })

package/lib/FileEditor/pc-editor/addition-previewer/local-file-addition/index.js

@@ -126,7 +126,7 @@ class LocalFileAddition extends _react.default.Component {
                     src: fileThumbnailItem.fileIconUrl,
                     style: {
                       position: 'absolute',
-                      zIndex: "".concat(uploadFile ? 3 : 1),
+                      zIndex: `${uploadFile ? 3 : 1}`,
                       maxHeight: '100%'
                     },
                     alt: ""
@@ -155,7 +155,7 @@ class LocalFileAddition extends _react.default.Component {
                   })]
                 })
               })
-            }, "dtable-ui-image-wrapper-circle".concat(index));
+            }, `dtable-ui-image-wrapper-circle${index}`);
           });
           fileArr.push(...thumbnailList);
         }
@@ -174,7 +174,7 @@ class LocalFileAddition extends _react.default.Component {
         } = (0, _url.getFileThumbnailInfo)(fileItem, config);
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-image-wrapper",
-          id: "file-content-tip-".concat(index),
+          id: `file-content-tip-${index}`,
           onMouseEnter: event => this.showDeleteIcon(event, index),
           onMouseLeave: this.hideDeleteIcon,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -199,7 +199,7 @@ class LocalFileAddition extends _react.default.Component {
               show: 0,
               hide: 0
             },
-            target: "file-content-tip-".concat(index),
+            target: `file-content-tip-${index}`,
             placement: "bottom",
             isOpen: this.state.tooltipOpen,
             children: fileItem.name
@@ -214,7 +214,7 @@ class LocalFileAddition extends _react.default.Component {
       } = this.state;
       let editorContent = fileArr.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "dtable-ui-image-tip-addition ".concat(isFileTipShow ? 'dtable-ui-image-drop-active' : ''),
+          className: `dtable-ui-image-tip-addition ${isFileTipShow ? 'dtable-ui-image-drop-active' : ''}`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "dtable-ui-dtable-ui-image-add-icon",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
@@ -232,7 +232,7 @@ class LocalFileAddition extends _react.default.Component {
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "dtable-ui-image-add-box",
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "dtable-ui-image-add-button ".concat(isFileTipShow ? 'dtable-ui-image-wrapper-drop-active' : ''),
+          className: `dtable-ui-image-add-button ${isFileTipShow ? 'dtable-ui-image-wrapper-drop-active' : ''}`,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
             "aria-hidden": "true",
             className: "dtable-font dtable-icon-add-table"

package/lib/FileFormatter/index.js

@@ -86,7 +86,7 @@ const FileFormatter = _ref => {
         file: item
       }), value.length !== 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "file-item-count",
-        children: "+".concat(value.length)
+        children: `+${value.length}`
       })]
     });
   }

package/lib/FileItemFormatter/index.js

@@ -20,7 +20,7 @@ const FileItemFormatter = _ref => {
   } = (0, _url.getFileThumbnailInfo)(file, config);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
     onClick: () => openFile && openFile(file),
-    className: "file-item-icon ".concat(isImage ? 'img' : ''),
+    className: `file-item-icon ${isImage ? 'img' : ''}`,
     src: fileIconUrl,
     alt: (file === null || file === void 0 ? void 0 : file.name) || ''
   });

package/lib/FileUploader/index.js

@@ -137,7 +137,7 @@ class FileUploader extends _react.default.Component {
       for (let i = 0; i < allFileLen; i++) {
         let file = files[i];
         if (isPasteUpload && file.name === 'image.png') {
-          let newName = "image-".concat((0, _dayjs.default)().format('YYYY-MM-DD-HH-mm'), ".png");
+          let newName = `image-${(0, _dayjs.default)().format('YYYY-MM-DD-HH-mm')}.png`;
           file = new File([file], newName, {
             type: file.type
           });

package/lib/FormulaFormatter/index.js

@@ -36,7 +36,7 @@ class FormulaFormatter extends _react.default.Component {
       } = this.props;
       const gridCellClassName = this.getGridCellClassName(resultType);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(gridCellClassName),
+        className: `dtable-ui cell-formatter-container formula-formatter ${containerClassName} ${gridCellClassName}`,
         title: cellValue,
         "aria-label": cellValue,
         children: cellValue
@@ -72,7 +72,7 @@ class FormulaFormatter extends _react.default.Component {
       if (!Array.isArray(value)) {
         cellValue = (0, _cellValueValidator.default)(value, array_type) ? [value] : [];
       }
-      const contentItemClassName = "formula-formatter-content-item ".concat(_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
+      const contentItemClassName = `formula-formatter-content-item ${_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : ''}`;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "dtable-ui formula-formatter multiple",
         children: cellValue.map((v, index) => {
@@ -80,7 +80,7 @@ class FormulaFormatter extends _react.default.Component {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: contentItemClassName,
             children: this.createColumnFormatter(Formatter, formatterProps)
-          }, "formula-formatter-content-item-".concat(index));
+          }, `formula-formatter-content-item-${index}`);
         })
       });
     };
@@ -114,7 +114,7 @@ class FormulaFormatter extends _react.default.Component {
     };
   }
   createColumnFormatter(Formatter, formatterProps) {
-    if ( /*#__PURE__*/_react.default.isValidElement(Formatter)) {
+    if (/*#__PURE__*/_react.default.isValidElement(Formatter)) {
       return /*#__PURE__*/_react.default.cloneElement(Formatter, {
         ...formatterProps
       });

package/lib/GeolocationEditor/index.js

@@ -33,7 +33,7 @@ const GeolocationEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       server = '',
       mediaUrl = ''
     } = config || {};
-    return fetch("".concat(server).concat(mediaUrl, "geo-data/cn-location.json").replaceAll('//', '/')).then(res => {
+    return fetch(`${server}${mediaUrl}geo-data/cn-location.json`.replaceAll('//', '/')).then(res => {
       // get locations from server
       return res.json();
     }).catch(() => {
@@ -55,11 +55,11 @@ const GeolocationEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       server = ''
     } = config;
     const geoFileName = lang === 'cn' ? 'cn-region-location' : 'en-region-location';
-    return fetch("".concat(server).concat(mediaUrl, "geo-data/").concat(geoFileName, ".json").replaceAll('//', '/')).then(res => {
+    return fetch(`${server}${mediaUrl}geo-data/${geoFileName}.json`.replaceAll('//', '/')).then(res => {
       return res.json();
     }).catch(() => {
       // get locations from local
-      return fetch("./geo-data/".concat(geoFileName, ".json")).then(res => {
+      return fetch(`./geo-data/${geoFileName}.json`).then(res => {
         return res.json();
       });
     }).then(res => {

package/lib/GeolocationEditor/map-editor-utils.js

@@ -105,9 +105,9 @@ const loadMapSource = (mapType, mapKey, callback) => {
   let script = document.createElement('script');
   script.type = 'text/javascript';
   if (mapType === MAP_TYPES.B_MAP) {
-    scriptUrl = "https://api.map.baidu.com/api?v=3.0&ak=".concat(mapKey, "&callback=renderBaiduMap");
+    scriptUrl = `https://api.map.baidu.com/api?v=3.0&ak=${mapKey}&callback=renderBaiduMap`;
   } else if (mapType === MAP_TYPES.G_MAP) {
-    scriptUrl = "https://maps.googleapis.com/maps/api/js?key=".concat(mapKey, "&callback=renderGoogleMap&libraries=&v=weekly");
+    scriptUrl = `https://maps.googleapis.com/maps/api/js?key=${mapKey}&callback=renderGoogleMap&libraries=&v=weekly`;
   } else {
     scriptUrl = 'https://minemap.minedata.cn/minemapapi/v2.1.1/minemap.js';
     let link = document.createElement('link');

package/lib/GeolocationEditor/pc-editor/country-editor.js

@@ -159,14 +159,14 @@ class CountryEditor extends _react.Component {
       let countryList = this.filteredCountry[continent].map((country, index) => {
         const isHighlight = highlightIndexes[0] === continentIndex && highlightIndexes[1] === index;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "geolocation-region-editor-country ".concat(isHighlight ? 'geolocation-region-editor-province-highlight' : ''),
+          className: `geolocation-region-editor-country ${isHighlight ? 'geolocation-region-editor-province-highlight' : ''}`,
           onMouseEnter: () => this.onMenuMouseEnter(continentIndex, index),
           onMouseLeave: () => this.onMenuMouseLeave(continentIndex, index),
           title: country,
           "aria-label": country,
           onClick: () => this.onClick(country),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "icon ".concat(value === country ? 'dtable-font dtable-icon-check-mark' : '')
+            className: `icon ${value === country ? 'dtable-font dtable-icon-check-mark' : ''}`
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             className: "country-name",
             children: country

package/lib/GeolocationEditor/pc-editor/location-editor.js

@@ -191,7 +191,7 @@ class LocationEditor extends _react.Component {
     this.locations = {};
     this.state = {
       isShowSelector: false,
-      location: "".concat(this.value.province || '').concat(this.value.city || '').concat(this.value.district || ''),
+      location: `${this.value.province || ''}${this.value.city || ''}${this.value.district || ''}`,
       selectedProvince: null,
       selectedCity: null,
       selectedCounty: null,
@@ -243,7 +243,7 @@ class LocationEditor extends _react.Component {
             className: "dtable-ui-geolocation-editor-item-right",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               onClick: this.onToggleSelector,
-              className: "dtable-ui-geolocation-editor-selector text-truncate ".concat(isShowSelector ? 'focus' : ''),
+              className: `dtable-ui-geolocation-editor-selector text-truncate ${isShowSelector ? 'focus' : ''}`,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "selected-option-show",
                 children: location ? location : (0, _lang.getLocale)('Select_province_city_district')

package/lib/GeolocationEditor/pc-editor/map-selection-editor/index.js

@@ -125,7 +125,7 @@ class MapSelectionEditor extends _react.Component {
           backgroundColor: '#ffffff',
           boxShadow: '1px 2px 1px rgba(0,0,0,.15)',
           padding: '3px 10px',
-          transform: "translate(-50%, ".concat(translateY, ")"),
+          transform: `translate(-50%, ${translateY})`,
           borderRadius: '3px',
           fontWeight: '500',
           left: '7px'
@@ -167,9 +167,26 @@ class MapSelectionEditor extends _react.Component {
       } = value;
       const tagContent = Array.isArray(tag) && tag.length > 0 ? tag[0] : '';
       if (title) {
-        return "\n          <div class='dtable-ui-selection-label-content' id='dtable-ui-selection-label-content'>\n            <i class='dtable-font dtable-icon-down3'></i>\n            <span class='label-title text-truncate' title=".concat(title, ">").concat(title, "</span>\n            ").concat(tagContent && "<span class='label-tag'>".concat(tagContent, "</span>"), "\n            <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>\n            <span class='label-address-tip'>").concat((0, _lang.getLocale)('Address'), "</span>\n            <span class='label-address text-truncate' title=").concat(address, ">").concat(address, "</span>\n            <div class='label-submit btn btn-primary' id='selection-label-submit'>").concat((0, _lang.getLocale)('Fill_in'), "</div>\n          </div>\n        ");
+        return `
+          <div class='dtable-ui-selection-label-content' id='dtable-ui-selection-label-content'>
+            <i class='dtable-font dtable-icon-down3'></i>
+            <span class='label-title text-truncate' title=${title}>${title}</span>
+            ${tagContent && `<span class='label-tag'>${tagContent}</span>`}
+            <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>
+            <span class='label-address-tip'>${(0, _lang.getLocale)('Address')}</span>
+            <span class='label-address text-truncate' title=${address}>${address}</span>
+            <div class='label-submit btn btn-primary' id='selection-label-submit'>${(0, _lang.getLocale)('Fill_in')}</div>
+          </div>
+        `;
       }
-      return "\n        <div class='dtable-ui-selection-label-content simple' id='dtable-ui-selection-label-content'>\n          <i class='dtable-font dtable-icon-down3'></i>\n          <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>\n          <span class='label-address text-truncate simple' title=".concat(address, ">").concat(address, "</span>\n          <div class='label-submit btn btn-primary' id='selection-label-submit'>").concat((0, _lang.getLocale)('Fill_in'), "</div>\n        </div>\n      ");
+      return `
+        <div class='dtable-ui-selection-label-content simple' id='dtable-ui-selection-label-content'>
+          <i class='dtable-font dtable-icon-down3'></i>
+          <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>
+          <span class='label-address text-truncate simple' title=${address}>${address}</span>
+          <div class='label-submit btn btn-primary' id='selection-label-submit'>${(0, _lang.getLocale)('Fill_in')}</div>
+        </div>
+      `;
     };
     this.getInitValue = () => {
       const {

package/lib/GeolocationEditor/pc-editor/map-selection-editor/large-editor/index.js

@@ -113,7 +113,7 @@ class LargeMapSelectionEditorDialog extends _react.default.Component {
           backgroundColor: '#ffffff',
           boxShadow: '1px 2px 1px rgba(0,0,0,.15)',
           padding: '3px 10px',
-          transform: "translate(-50%, ".concat(translateY, ")"),
+          transform: `translate(-50%, ${translateY})`,
           borderRadius: '3px',
           fontWeight: '500',
           left: '7px'
@@ -155,9 +155,26 @@ class LargeMapSelectionEditorDialog extends _react.default.Component {
       } = value;
       const tagContent = Array.isArray(tag) && tag.length > 0 ? tag[0] : '';
       if (title) {
-        return "\n          <div class='dtable-ui-selection-label-content' id='dtable-ui-selection-label-content'>\n            <i class='dtable-font dtable-icon-down3'></i>\n            <span class='label-title text-truncate' title=".concat(title, ">").concat(title, "</span>\n            ").concat(tagContent && "<span class='label-tag'>".concat(tagContent, "</span>"), "\n            <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>\n            <span class='label-address-tip'>").concat((0, _lang.getLocale)('Address'), "</span>\n            <span class='label-address text-truncate' title=").concat(address, ">").concat(address, "</span>\n            <div class='label-submit btn btn-primary' id='selection-label-submit'>").concat((0, _lang.getLocale)('Fill_in'), "</div>\n          </div>\n        ");
+        return `
+          <div class='dtable-ui-selection-label-content' id='dtable-ui-selection-label-content'>
+            <i class='dtable-font dtable-icon-down3'></i>
+            <span class='label-title text-truncate' title=${title}>${title}</span>
+            ${tagContent && `<span class='label-tag'>${tagContent}</span>`}
+            <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>
+            <span class='label-address-tip'>${(0, _lang.getLocale)('Address')}</span>
+            <span class='label-address text-truncate' title=${address}>${address}</span>
+            <div class='label-submit btn btn-primary' id='selection-label-submit'>${(0, _lang.getLocale)('Fill_in')}</div>
+          </div>
+        `;
       } else {
-        return "\n          <div class='dtable-ui-selection-label-content simple' id='dtable-ui-selection-label-content'>\n            <i class='dtable-font dtable-icon-down3'></i>\n            <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>\n            <span class='label-address text-truncate simple' title=".concat(address, ">").concat(address, "</span>\n            <div class='label-submit btn btn-primary' id='selection-label-submit'>").concat((0, _lang.getLocale)('Fill_in'), "</div>\n          </div>\n        ");
+        return `
+          <div class='dtable-ui-selection-label-content simple' id='dtable-ui-selection-label-content'>
+            <i class='dtable-font dtable-icon-down3'></i>
+            <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>
+            <span class='label-address text-truncate simple' title=${address}>${address}</span>
+            <div class='label-submit btn btn-primary' id='selection-label-submit'>${(0, _lang.getLocale)('Fill_in')}</div>
+          </div>
+        `;
       }
     };
     this.getInitValue = () => {

package/lib/GeolocationEditor/pc-editor/province-city-editor.js

@@ -197,7 +197,7 @@ class ProvinceCityEditor extends _react.Component {
             className: "dtable-ui-geolocation-editor-item-right",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               onClick: this.onToggleSelector,
-              className: "dtable-ui-geolocation-editor-selector text-truncate ".concat(isShowSelector ? 'focus' : ''),
+              className: `dtable-ui-geolocation-editor-selector text-truncate ${isShowSelector ? 'focus' : ''}`,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "selected-option-show",
                 children: location ? location : (0, _lang.getLocale)('Select_province_city')

package/lib/GeolocationEditor/pc-editor/province-editor.js

@@ -130,7 +130,7 @@ class ProvinceEditor extends _react.Component {
       } = this.state;
       let provinceList = this.filteredProvince.map((item, index) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "geolocation-region-editor-province ".concat(highlightIndex === index ? 'geolocation-region-editor-province-highlight' : ''),
+          className: `geolocation-region-editor-province ${highlightIndex === index ? 'geolocation-region-editor-province-highlight' : ''}`,
           title: item.name,
           "aria-label": item.name,
           onClick: () => this.onClick(item.name),
@@ -140,12 +140,12 @@ class ProvinceEditor extends _react.Component {
             className: "province-name",
             children: item.name
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "icon ".concat(value === item.name ? 'province-selected-icon dtable-font dtable-icon-check-mark' : '')
+            className: `icon ${value === item.name ? 'province-selected-icon dtable-font dtable-icon-check-mark' : ''}`
           })]
         }, item.alphabetic + index);
       });
       if (provinceList.length === 0) {
-        provinceList.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        provinceList.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "country-list-empty",
           children: (0, _lang.getLocale)('No_options')
         }, 'province-null'));

package/lib/GeolocationEditor/pc-editor/selector-list.js

@@ -25,7 +25,7 @@ class SelectorList extends _react.default.Component {
           onDoubleClick: () => {
             doubleClickHandler && doubleClickHandler(item);
           },
-          className: "dtable-ui-geolocation-selector-list-item ".concat(type === 'province' ? 'province-item' : '', " ").concat(isSelected ? 'selected-list-item' : ''),
+          className: `dtable-ui-geolocation-selector-list-item ${type === 'province' ? 'province-item' : ''} ${isSelected ? 'selected-list-item' : ''}`,
           children: item.name
         }, type + '-item-' + index);
       })

package/lib/HtmlLongTextFormatter/index.js

@@ -68,7 +68,7 @@ class HtmlLongTextFormatter extends _react.Component {
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
     if (!innerHtml) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(className, " article"),
+      className: `${className} article`,
       dangerouslySetInnerHTML: {
         __html: innerHtml
       }

package/lib/Icon/index.js

@@ -22,12 +22,12 @@ class Icon extends React.Component {
       size,
       ...restProps
     } = this.props;
-    const cls = (0, _classnames.default)(className, 'am-icon', "am-icon-".concat(type), "am-icon-".concat(size));
+    const cls = (0, _classnames.default)(className, 'am-icon', `am-icon-${type}`, `am-icon-${size}`);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
       className: cls,
       ...restProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("use", {
-        xlinkHref: "#".concat(type)
+        xlinkHref: `#${type}`
       })
     });
   }

package/lib/Icon/load-sprite.js

@@ -7,7 +7,18 @@ exports.default = void 0;
 /* tslint:disable:max-line-length */
 // inspried by https://github.com/kisenka/svg-sprite-loader/blob/master/runtime/browser-sprite.js
 // Much simplified, do make sure run this after document ready
-const svgSprite = contents => "\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    id=\"__ANTD_MOBILE_SVG_SPRITE_NODE__\"\n    style=\"display:none;overflow:hidden;width:0;height:0\"\n  >\n    <defs>\n      ".concat(contents, "\n    </defs>\n  </svg>\n");
+const svgSprite = contents => `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    id="__ANTD_MOBILE_SVG_SPRITE_NODE__"
+    style="display:none;overflow:hidden;width:0;height:0"
+  >
+    <defs>
+      ${contents}
+    </defs>
+  </svg>
+`;
 
 // both minified by https://github.com/svg/svgo
 const icons = {
@@ -39,7 +50,7 @@ const icons = {
 const renderSvgSprite = () => {
   const symbols = Object.keys(icons).map(iconName => {
     const svgContent = icons[iconName].split('svg')[1];
-    return "<symbol id=".concat(iconName).concat(svgContent, "symbol>");
+    return `<symbol id=${iconName}${svgContent}symbol>`;
   }).join('');
   return svgSprite(symbols);
 };

package/lib/IconButton/index.js

@@ -22,7 +22,7 @@ const IconButton = _ref => {
     }),
     ...otherProperties,
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: (0, _classnames.default)('seatable-icon dtable-font', "dtable-icon-".concat(icon)),
+      className: (0, _classnames.default)('seatable-icon dtable-font', `dtable-icon-${icon}`),
       "aria-hidden": "true"
     }), children]
   });

package/lib/ImageEditor/images-previewer/image-preview/index.js

@@ -94,7 +94,7 @@ class ImagePreviewer extends _react.default.Component {
     const {
       mediaUrl
     } = props.config || {};
-    this.imageLoadingFailedUrl = "".concat(mediaUrl, "img/image-loading-failed.png");
+    this.imageLoadingFailedUrl = `${mediaUrl}img/image-loading-failed.png`;
     this.ref = null;
   }
   componentDidMount() {

package/lib/ImageEditor/pc-editor/addition-previewer/index.js

@@ -42,11 +42,11 @@ class AdditionPreviewer extends _react.default.Component {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-image-addition-nav",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui-addition-item ".concat(activeTab === 'localPicture' ? 'dtable-ui-addition-item-selected' : ''),
+            className: `dtable-ui-addition-item ${activeTab === 'localPicture' ? 'dtable-ui-addition-item-selected' : ''}`,
             onClick: this.toggle.bind(this, 'localPicture'),
             children: (0, _lang.getLocale)('Local_Images')
           }), this.props.saveImageLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "dtable-ui-addition-item ".concat(activeTab === 'imageLink' ? 'dtable-ui-addition-item-selected' : ''),
+            className: `dtable-ui-addition-item ${activeTab === 'imageLink' ? 'dtable-ui-addition-item-selected' : ''}`,
             onClick: this.toggle.bind(this, 'imageLink'),
             children: (0, _lang.getLocale)('Image_Link')
           })]

package/lib/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js

@@ -133,7 +133,7 @@ class LocalImageAddition extends _react.default.Component {
                     src: fileThumbnailItem.fileIconUrl,
                     style: {
                       position: 'absolute',
-                      zIndex: "".concat(fileThumbnailItem.percent === 100 ? 3 : 1),
+                      zIndex: `${fileThumbnailItem.percent === 100 ? 3 : 1}`,
                       maxHeight: '100%'
                     },
                     alt: ""
@@ -162,7 +162,7 @@ class LocalImageAddition extends _react.default.Component {
                   })]
                 })
               })
-            }, "dtable-ui-image-wrapper-circle".concat(index));
+            }, `dtable-ui-image-wrapper-circle${index}`);
           });
           imageArr.push(...thumbnailList);
         }
@@ -206,11 +206,11 @@ class LocalImageAddition extends _react.default.Component {
         isImageTipShow
       } = this.state;
       let editorContent;
-      let className = imageArr.length === 0 ? "dtable-ui-image-upload-container ".concat(isImageTipShow ? 'dtable-ui-image-upload-container-active' : '') : 'dtable-ui-image-wrapper';
+      let className = imageArr.length === 0 ? `dtable-ui-image-upload-container ${isImageTipShow ? 'dtable-ui-image-upload-container-active' : ''}` : 'dtable-ui-image-wrapper';
       if (imageArr.length === 0) {
         editorContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "dtable-ui-image-tip-addition ".concat(isImageTipShow ? 'dtable-ui-image-drop-active' : ''),
+            className: `dtable-ui-image-tip-addition ${isImageTipShow ? 'dtable-ui-image-drop-active' : ''}`,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "dtable-ui-dtable-ui-image-add-icon",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
@@ -233,7 +233,7 @@ class LocalImageAddition extends _react.default.Component {
         editorContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "dtable-ui-image-add-box",
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "dtable-ui-image-add-button ".concat(isImageTipShow ? 'dtable-ui-image-wrapper-drop-active' : ''),
+            className: `dtable-ui-image-add-button ${isImageTipShow ? 'dtable-ui-image-wrapper-drop-active' : ''}`,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
               "aria-hidden": "true",
               className: "dtable-font dtable-icon-add-table"

package/lib/ImageEditor/pc-editor/images-previewer/index.js

@@ -108,7 +108,7 @@ class ImagesPreviewer extends _react.default.Component {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-image-previewer-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dtable-ui-image-previewer-wrapper ".concat(value.length === 0 && _constants.isMobile ? 'd-none' : ''),
+        className: `dtable-ui-image-previewer-wrapper ${value.length === 0 && _constants.isMobile ? 'd-none' : ''}`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "dtable-ui-image-previewer-content",
           children: value.length > 0 && value.map((imageItemUrl, index) => {