dtable-ui-component 7.0.13 → 7.0.15

package/lib/GeolocationFormatter/index.js

@@ -12,10 +12,11 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class GeolocationFormatter extends _react.default.Component {
   render() {
-    let _this$props = this.props,
-      value = _this$props.value,
-      data = _this$props.data,
-      containerClassName = _this$props.containerClassName;
+    let {
+      value,
+      data,
+      containerClassName
+    } = this.props;
     let className = (0, _classnames.default)('dtable-ui cell-formatter-container geolocation-formatter', containerClassName);
     if (typeof value !== 'object') {
       return null;

package/lib/HtmlLongTextFormatter/index.js

@@ -15,7 +15,9 @@ class HtmlLongTextFormatter extends _react.Component {
   constructor(_props) {
     super(_props);
     this.translateValue = props => {
-      const value = props.value;
+      const {
+        value
+      } = props;
       if (!value) {
         this.setState({
           innerHtml: null
@@ -49,18 +51,24 @@ class HtmlLongTextFormatter extends _react.Component {
     this.translateValue(this.props);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const value = this.props.value;
+    const {
+      value
+    } = this.props;
     if (nextProps.value !== value) {
       this.translateValue(nextProps);
     }
   }
   render() {
-    const innerHtml = this.state.innerHtml;
-    const containerClassName = this.props.containerClassName;
+    const {
+      innerHtml
+    } = this.state;
+    const {
+      containerClassName
+    } = this.props;
     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,37 +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 = _this$props.type,
-      className = _this$props.className,
-      size = _this$props.size,
-      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,28 +5,27 @@ 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"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["disabled", "className", "icon", "children"];
 const IconButton = _ref => {
-  let disabled = _ref.disabled,
-    className = _ref.className,
-    icon = _ref.icon,
-    children = _ref.children,
-    otherProperties = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
+  let {
+    disabled,
+    className,
+    icon,
+    children,
+    ...otherProperties
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)('seatable-icon-btn icon-button', 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

@@ -19,11 +19,15 @@ class ImagePreviewer extends _react.default.Component {
   constructor(props) {
     super(props);
     this.showLargeImage = () => {
-      let imageItemUrl = this.props.imageItemUrl;
+      let {
+        imageItemUrl
+      } = this.props;
       this.props.showLargeImage(imageItemUrl);
     };
     this.showImageToolbar = () => {
-      let itemIndex = this.props.itemIndex;
+      let {
+        itemIndex
+      } = this.props;
       this.props.setImageItemIndex(itemIndex);
     };
     this.hideImageToolbar = () => {
@@ -35,7 +39,9 @@ class ImagePreviewer extends _react.default.Component {
     };
     this.deleteImage = e => {
       e.stopPropagation();
-      let itemIndex = this.props.itemIndex;
+      let {
+        itemIndex
+      } = this.props;
       this.props.deleteImage(itemIndex, _constants.FILE_EDITOR_STATUS.PREVIEWER);
     };
     this.onClickDelete = e => {
@@ -85,15 +91,17 @@ class ImagePreviewer extends _react.default.Component {
     const offsetWidth = document.body.offsetWidth;
     this.containerSize = offsetWidth < 768 ? (offsetWidth - 55) / 2 + 'px' : (offsetWidth - 80) / 3 + 'px';
     this.position = {};
-    const _ref = props.config || {},
-      mediaUrl = _ref.mediaUrl;
-    this.imageLoadingFailedUrl = "".concat(mediaUrl, "img/image-loading-failed.png");
+    const {
+      mediaUrl
+    } = props.config || {};
+    this.imageLoadingFailedUrl = `${mediaUrl}img/image-loading-failed.png`;
     this.ref = null;
   }
   componentDidMount() {
-    let _this$props = this.props,
-      imageItemUrl = _this$props.imageItemUrl,
-      config = _this$props.config;
+    let {
+      imageItemUrl,
+      config
+    } = this.props;
     if ((0, _url.checkSVGImage)(imageItemUrl)) {
       this.setState({
         imageThumbnailUrl: imageItemUrl
@@ -112,10 +120,11 @@ class ImagePreviewer extends _react.default.Component {
     });
   }
   render() {
-    const _this$props2 = this.props,
-      enterImageItemIndex = _this$props2.enterImageItemIndex,
-      itemIndex = _this$props2.itemIndex,
-      imageItemUrl = _this$props2.imageItemUrl;
+    const {
+      enterImageItemIndex,
+      itemIndex,
+      imageItemUrl
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         style: _constants.isMobile ? {

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

@@ -26,7 +26,9 @@ class ImagesPreviewer extends _react.default.Component {
       }
     };
     this.showLargeImage = itemUrl => {
-      let value = this.props.value;
+      let {
+        value
+      } = this.props;
       this.setState({
         isShowLargeImage: true,
         largeImageIndex: value.indexOf(itemUrl)
@@ -56,7 +58,9 @@ class ImagesPreviewer extends _react.default.Component {
     };
     this.deleteImage = (index, type) => {
       this.props.deleteImage(index, type);
-      const value = this.props.value;
+      const {
+        value
+      } = this.props;
       if (index > value.length - 2) {
         if (value.length - 2 < 0) {
           this.hideLargeImage();
@@ -99,7 +103,9 @@ class ImagesPreviewer extends _react.default.Component {
     }
   }
   render() {
-    let value = this.props.value;
+    let {
+      value
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('dtable-ui-image-previewer-container', {
         'mt-0': value.length === 0 && _constants.isMobile

package/lib/ImageEditor/index.js

@@ -6,35 +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.isMobile,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  let {
+    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/mb-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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ActivityIndicator = _interopRequireDefault(require("../../ActivityIndicator"));
 var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
@@ -17,35 +16,28 @@ var _utils = require("../../utils/utils");
 var _lang = require("../../lang");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const Header = _MobileFullScreenPage.default.Header,
-  Body = _MobileFullScreenPage.default.Body;
+const {
+  Header,
+  Body
+} = _MobileFullScreenPage.default;
 const MBImageEditor = _ref => {
-  let oldValue = _ref.value,
-    column = _ref.column,
-    config = _ref.config,
-    onToggle = _ref.onToggle,
-    onCommit = _ref.onCommit,
-    uploadFile = _ref.uploadFile;
-  const _useState = (0, _react.useState)(oldValue || []),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  const _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isShowEditor = _useState4[0],
-    setShowEditor = _useState4[1];
-  const _useState5 = (0, _react.useState)([]),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    uploadLocalImages = _useState6[0],
-    setUploadLocalImages = _useState6[1];
-  const _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    isUploading = _useState8[0],
-    setUploading = _useState8[1];
+  let {
+    value: oldValue,
+    column,
+    config,
+    onToggle,
+    onCommit,
+    uploadFile
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(oldValue || []);
+  const [isShowEditor, setShowEditor] = (0, _react.useState)(false);
+  const [uploadLocalImages, setUploadLocalImages] = (0, _react.useState)([]);
+  const [isUploading, setUploading] = (0, _react.useState)(false);
   const uploadingFilesCount = (0, _react.useRef)(0);
   const uploadedFilesCount = (0, _react.useRef)(0);
-  const _ref2 = config || {},
-    mediaUrl = _ref2.mediaUrl;
+  const {
+    mediaUrl
+  } = config || {};
   const resetAdditionImage = (0, _react.useCallback)(() => {
     setUploadLocalImages([]);
   }, []);

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

@@ -14,7 +14,9 @@ class ImageLink extends _react.default.Component {
   constructor(props) {
     super(props);
     this.saveImageLink = () => {
-      let imageLink = this.state.imageLink;
+      let {
+        imageLink
+      } = this.state;
       let _this = this;
       let image = new Image();
       image.onload = function () {
@@ -48,7 +50,9 @@ class ImageLink extends _react.default.Component {
     };
   }
   render() {
-    const isShowErrorMessage = this.state.isShowErrorMessage;
+    const {
+      isShowErrorMessage
+    } = this.state;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-image-link",
       onKeyDown: this.onKeyDown,

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

@@ -32,7 +32,9 @@ class AdditionPreviewer extends _react.default.Component {
     };
   }
   render() {
-    const activeTab = this.state.activeTab;
+    const {
+      activeTab
+    } = this.state;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-image-addition-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -40,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

@@ -41,7 +41,9 @@ class LocalImageAddition extends _react.default.Component {
     };
     this.onFileUploadSuccess = fileMessage => {
       this.hideDeleteIcon();
-      let thumbnailSrcList = this.state.thumbnailSrcList;
+      let {
+        thumbnailSrcList
+      } = this.state;
       const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
       thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
       if (thumbnailSrcList.every(fileItem => !fileItem.isUploading)) {
@@ -52,7 +54,9 @@ class LocalImageAddition extends _react.default.Component {
       this.props.fileUploadCompleted(fileMessage);
     };
     this.onFileUploadFailed = uploadedFileInfo => {
-      let thumbnailSrcList = this.state.thumbnailSrcList;
+      let {
+        thumbnailSrcList
+      } = this.state;
       const findUploadFileIndex = this.findUploadFileIndex(uploadedFileInfo);
       thumbnailSrcList.splice(findUploadFileIndex, 1, uploadedFileInfo);
       this.setState({
@@ -60,7 +64,9 @@ class LocalImageAddition extends _react.default.Component {
       });
     };
     this.findUploadFileIndex = fileMessage => {
-      let thumbnailSrcList = this.state.thumbnailSrcList;
+      let {
+        thumbnailSrcList
+      } = this.state;
       let uploadFileIndex = thumbnailSrcList.findIndex(item => item.name === fileMessage.file.name);
       return uploadFileIndex;
     };
@@ -71,7 +77,9 @@ class LocalImageAddition extends _react.default.Component {
         });
         return;
       }
-      let uploadMessageList = this.state.uploadMessageList;
+      let {
+        uploadMessageList
+      } = this.state;
       let newUploadMessageList = uploadMessageList.slice(0);
       let uploadFile = uploadMessageList.find(item => item.uploadName === uploadMessage.uploadName);
       if (uploadFile) {
@@ -105,7 +113,9 @@ class LocalImageAddition extends _react.default.Component {
       });
     };
     this.renderMultipleFilesArr = () => {
-      let thumbnailSrcList = this.state.thumbnailSrcList;
+      let {
+        thumbnailSrcList
+      } = this.state;
       let imageArr = [];
       if (Array.isArray(this.props.uploadLocalImageValue)) {
         let uploadedFileList = this.renderUploadedFile();
@@ -123,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: ""
@@ -152,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);
         }
@@ -160,7 +170,9 @@ class LocalImageAddition extends _react.default.Component {
       return imageArr;
     };
     this.renderUploadedFile = () => {
-      const uploadLocalImageValue = this.props.uploadLocalImageValue;
+      const {
+        uploadLocalImageValue
+      } = this.props;
       let uploadedFileList = [];
       uploadedFileList = uploadLocalImageValue.length > 0 && uploadLocalImageValue.map((imgSrc, index) => {
         let imageThumbnailUrl = (0, _dtableUtils.getImageThumbnailUrl)(imgSrc);
@@ -190,13 +202,15 @@ class LocalImageAddition extends _react.default.Component {
       return uploadedFileList;
     };
     this.renderUploadFileWrapper = imageArr => {
-      let isImageTipShow = this.state.isImageTipShow;
+      let {
+        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", {
@@ -219,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

@@ -25,7 +25,9 @@ class ImagesPreviewer extends _react.default.Component {
       }
     };
     this.showLargeImage = itemUrl => {
-      let value = this.props.value;
+      let {
+        value
+      } = this.props;
       this.setState({
         isShowLargeImage: true,
         largeImageIndex: value.indexOf(itemUrl)
@@ -55,7 +57,9 @@ class ImagesPreviewer extends _react.default.Component {
     };
     this.deleteImage = (index, type) => {
       this.props.deleteImage(index, type);
-      const value = this.props.value;
+      const {
+        value
+      } = this.props;
       if (index > value.length - 2) {
         if (value.length - 2 < 0) {
           this.hideLargeImage();
@@ -98,11 +102,13 @@ class ImagesPreviewer extends _react.default.Component {
     }
   }
   render() {
-    let value = this.props.value;
+    let {
+      value
+    } = this.props;
     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/ImageEditor/pc-editor/index.js

@@ -24,9 +24,10 @@ class PCImageEditor extends _react.default.Component {
       return this.state.value;
     };
     this.getEditorView = () => {
-      const _this$props = this.props,
-        isInModal = _this$props.isInModal,
-        value = _this$props.value;
+      const {
+        isInModal,
+        value
+      } = this.props;
       return !value || value.length === 0 || isInModal ? _constants.FILE_EDITOR_STATUS.ADDITION : _constants.FILE_EDITOR_STATUS.PREVIEWER;
     };
     this.deleteImage = function (index) {
@@ -56,9 +57,10 @@ class PCImageEditor extends _react.default.Component {
       e.stopPropagation();
       if (this.state.isOpen && this.state.isUpdated) {
         if (this.state.editorView === _constants.FILE_EDITOR_STATUS.ADDITION) {
-          let _this$state = this.state,
-            value = _this$state.value,
-            uploadLocalImageValue = _this$state.uploadLocalImageValue;
+          let {
+            value,
+            uploadLocalImageValue
+          } = this.state;
           let newValue = value.concat(uploadLocalImageValue);
           this.setState({
             value: newValue
@@ -112,7 +114,9 @@ class PCImageEditor extends _react.default.Component {
       });
     };
     this.renderHeader = () => {
-      let editorView = this.state.editorView;
+      let {
+        editorView
+      } = this.state;
       if (this.props.isInModal) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: (0, _lang.getLocale)('Add_images')
@@ -134,10 +138,11 @@ class PCImageEditor extends _react.default.Component {
       });
     };
     this.showImageListPreviewer = () => {
-      let _this$state2 = this.state,
-        value = _this$state2.value,
-        uploadLocalImageValue = _this$state2.uploadLocalImageValue,
-        imageLinkValue = _this$state2.imageLinkValue;
+      let {
+        value,
+        uploadLocalImageValue,
+        imageLinkValue
+      } = this.state;
       let newValue = value.concat(uploadLocalImageValue, imageLinkValue);
       this.setState({
         value: newValue