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

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
@@ -157,7 +156,9 @@ class LargeMapEditorDialog extends _react.default.Component {
     };
     this.geolocationCallback = (error, point) => {
       if (!error) {
-        this.setValue((0, _objectSpread2.default)({}, point));
+        this.setValue({
+          ...point
+        });
         this.addMarkerByPosition(point.lng, point.lat);
         if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
           this.map.setCenter({
@@ -268,9 +269,10 @@ class LargeMapEditorDialog extends _react.default.Component {
       });
     };
     this.onChangeLatitude = event => {
-      const newValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.state.value), {}, {
+      const newValue = {
+        ...this.state.value,
         lat: event.target.value
-      });
+      };
       this.setState({
         value: newValue
       }, () => {
@@ -280,9 +282,10 @@ class LargeMapEditorDialog extends _react.default.Component {
       });
     };
     this.onChangeLongitude = event => {
-      const newValue = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.state.value), {}, {
+      const newValue = {
+        ...this.state.value,
         lng: event.target.value
-      });
+      };
       this.setState({
         value: newValue
       }, () => {

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

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _toaster = _interopRequireDefault(require("../../../toaster"));
@@ -126,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'
@@ -168,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 {
@@ -382,9 +398,10 @@ class MapSelectionEditor extends _react.Component {
       isShowLargeEditor
     } = this.state;
     if (isShowLargeEditor) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_largeEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props), {}, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_largeEditor.default, {
+        ...this.props,
         toggleFullScreen: this.toggleFullScreen
-      }));
+      });
     }
     if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP || this.mapType === _mapEditorUtils.MAP_TYPES.M_MAP) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {

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,7 +140,7 @@ 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);
       });

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

@@ -1,39 +1,35 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
 var _loadSprite = _interopRequireDefault(require("./load-sprite"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["type", "className", "size"];
 class Icon extends React.Component {
   componentDidMount() {
     (0, _loadSprite.default)();
   }
   render() {
-    const _this$props = this.props,
-      {
-        type,
-        className,
-        size
-      } = _this$props,
-      restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-    const cls = (0, _classnames.default)(className, 'am-icon', "am-icon-".concat(type), "am-icon-".concat(size));
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      className: cls
-    }, restProps), {}, {
+    const {
+      type,
+      className,
+      size,
+      ...restProps
+    } = this.props;
+    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}`
       })
-    }));
+    });
   }
 }
 exports.default = Icon;

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

@@ -5,29 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["disabled", "className", "icon", "children"];
 const IconButton = _ref => {
   let {
-      disabled,
-      className,
-      icon,
-      children
-    } = _ref,
-    otherProperties = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    disabled,
+    className,
+    icon,
+    children,
+    ...otherProperties
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('seatable-icon-btn', className, {
       'disabled': disabled
-    })
-  }, otherProperties), {}, {
+    }),
+    ...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]
-  }));
+  });
 };
 var _default = exports.default = IconButton;

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

@@ -6,37 +6,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _pcEditor = _interopRequireDefault(require("./pc-editor"));
 var _mbEditor = _interopRequireDefault(require("./mb-editor"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["isMobile"];
 const ImageEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-      isMobile
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    isMobile,
+    ...props
+  } = _ref;
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+    ...props,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+    ...props,
     ref: ref
-  }));
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
       query: "(min-width: 768px)",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+        ...props,
         ref: ref
-      }))
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
       query: "(max-width: 768px)",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
         ref: ref
-      }))
+      })
     })]
   });
 });

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

package/lib/ImageFormatter/index.js

@@ -91,7 +91,7 @@ class ImageFormatter extends _react.default.Component {
           alt: ""
         }), value.length !== 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "image-item-count",
-          children: "+".concat(value.length)
+          children: `+${value.length}`
         })]
       });
     }

package/lib/ImagePreviewerLightbox/index.js

@@ -57,24 +57,27 @@ function ImagePreviewerLightbox(props) {
       thumbnail: src
     };
   });
-  const imagesLength = imageSrcList.length;
-  const [currentImageIndex, setCurrentImageIndex] = _react.default.useState(imageIndex || 0);
+  console.log('imageSrcList111', imageSrcList);
+  const imageItemsLength = imageItems.length;
+  const [currentImageIndex, setCurrentImageIndex] = _react.default.useState(imageItemsLength > 0 ? Math.min(imageIndex || 0, imageItemsLength - 1) : 0);
+  _react.default.useEffect(() => {
+    if (imageItemsLength > 0) {
+      setCurrentImageIndex(Math.min(imageIndex || 0, imageItemsLength - 1));
+    }
+  }, [imageIndex, imageItemsLength]);
+  if (imageItemsLength === 0) return null;
   const imageItem = imageSrcList[currentImageIndex];
   const URL = imageItem ? imageItem.thumbnail : '';
   const imageName = imageItem ? imageItem.name : '';
-  _react.default.useEffect(() => {
-    setCurrentImageIndex(imageIndex);
-  }, [imageIndex]);
+  const mainImg = imageItems[imageIndex];
+  const nextImg = imageItems[(imageIndex + 1) % imageItemsLength];
+  const prevImg = imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength];
+  const mainSrc = mainImg ? mainImg.thumbnail || mainImg.src : '';
+  const nextSrc = nextImg ? nextImg.thumbnail || nextImg.src : '';
+  const prevSrc = prevImg ? prevImg.thumbnail || prevImg.src : '';
+  console.log('imageSrcList222', imageSrcList);
+  console.log('mainSrc', mainSrc);
   const canRotateImage = onRotateImage && !readOnly && !['gif', 'heic', 'heif'].includes((0, _url.getFileSuffix)(URL)) && (0, _url.isInternalImg)(URL, server);
-  let mainSrc = URL;
-  if ((0, _url.needUseThumbnailImage)(URL)) {
-    mainSrc = (0, _url.getImageThumbnailUrl)(URL, {
-      server,
-      dtableUuid,
-      workspaceID,
-      size: 512
-    });
-  }
   const imageTitleDOM = props.imageTitle || /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     className: "d-flex",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -82,7 +85,7 @@ function ImagePreviewerLightbox(props) {
       children: imageName || ''
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: "flex-shrink-0 pl-1",
-      children: ["(", currentImageIndex + 1, "/", imagesLength, ")"]
+      children: ["(", currentImageIndex + 1, "/", imageItemsLength, ")"]
     })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageLightbox.default, {
@@ -92,8 +95,8 @@ function ImagePreviewerLightbox(props) {
     wrapperClassName: (0, _classnames.default)('dtable-ui-component', className),
     imageTitle: imageTitleDOM,
     mainSrc: mainSrc,
-    nextSrc: imageSrcList[(currentImageIndex + 1) % imagesLength] ? imageSrcList[(currentImageIndex + 1) % imagesLength].thumbnail : '',
-    prevSrc: imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength] ? imageSrcList[(currentImageIndex + imagesLength - 1) % imagesLength].thumbnail : '',
+    nextSrc: nextSrc,
+    prevSrc: prevSrc,
     imagePadding: 70,
     viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
     enableRotate: canRotateImage,

package/lib/ImageThumbnail/index.js

@@ -75,7 +75,7 @@ class ImageThumbnail 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`;
   }
   componentDidMount() {
     this.getUrl(this.props.src);
@@ -103,7 +103,7 @@ class ImageThumbnail extends _react.default.Component {
         ref: ref => this.ref = ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: imageThumbnailUrl,
-          id: "item-image-".concat(index),
+          id: `item-image-${index}`,
           alt: ""
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-image-icons-choice",

package/lib/InputItem/custom-input.js

@@ -63,7 +63,7 @@ class NumberInput extends React.Component {
         if (this.props.autoAdjustHeight) {
           this.getContainer().style.height = '0';
         }
-        (0, _class.addClass)(customNumberKeyboard.antmKeyboard, "".concat(this.props.keyboardPrefixCls, "-wrapper-hide"));
+        (0, _class.addClass)(customNumberKeyboard.antmKeyboard, `${this.props.keyboardPrefixCls}-wrapper-hide`);
       }
       // for unmount
       this.removeBlurListener();
@@ -98,7 +98,7 @@ class NumberInput extends React.Component {
           if (customNumberKeyboard.antmKeyboard) {
             if (this.props.autoAdjustHeight) {
               const keyBoardHeight = customNumberKeyboard.antmKeyboard.offsetHeight;
-              this.getContainer().style.height = "".concat(keyBoardHeight, "px");
+              this.getContainer().style.height = `${keyBoardHeight}px`;
               if (this.inputRef) {
                 const {
                   bottom
@@ -111,14 +111,14 @@ class NumberInput extends React.Component {
                 }
               }
             }
-            (0, _class.removeClass)(customNumberKeyboard.antmKeyboard, "".concat(this.props.keyboardPrefixCls, "-wrapper-hide"));
+            (0, _class.removeClass)(customNumberKeyboard.antmKeyboard, `${this.props.keyboardPrefixCls}-wrapper-hide`);
           }
           customNumberKeyboard.confirmDisabled = value === '';
           if (customNumberKeyboard.confirmKeyboardItem) {
             if (value === '') {
-              (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+              (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, `${this.props.keyboardPrefixCls}-item-disabled`);
             } else {
-              (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+              (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, `${this.props.keyboardPrefixCls}-item-disabled`);
             }
           }
         }
@@ -179,9 +179,9 @@ class NumberInput extends React.Component {
         customNumberKeyboard.confirmDisabled = valueAfterChange === '';
         if (customNumberKeyboard.confirmKeyboardItem) {
           if (valueAfterChange === '') {
-            (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+            (0, _class.addClass)(customNumberKeyboard.confirmKeyboardItem, `${this.props.keyboardPrefixCls}-item-disabled`);
           } else {
-            (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, "".concat(this.props.keyboardPrefixCls, "-item-disabled"));
+            (0, _class.removeClass)(customNumberKeyboard.confirmKeyboardItem, `${this.props.keyboardPrefixCls}-item-disabled`);
           }
         }
       }
@@ -248,10 +248,10 @@ class NumberInput extends React.Component {
     const {
       keyboardPrefixCls
     } = this.props;
-    let container = document.querySelector("#".concat(keyboardPrefixCls, "-container"));
+    let container = document.querySelector(`#${keyboardPrefixCls}-container`);
     if (!container) {
       container = document.createElement('div');
-      container.setAttribute('id', "".concat(keyboardPrefixCls, "-container"));
+      container.setAttribute('id', `${keyboardPrefixCls}-container`);
       document.body.appendChild(container);
     }
     this.container = container;