dtable-ui-component 7.0.13 → 7.0.15

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../../../utils/utils");
@@ -18,12 +17,13 @@ class MBFilesPreviewer extends _react.default.Component {
   constructor() {
     super(...arguments);
     this.downloadImage = imageItemUrl => {
-      const value = this.props.value;
+      const {
+        value
+      } = this.props;
       const file = value.find(v => v.url === imageItemUrl);
       if (!file) return;
       this.props.getDownLoadFiles([file], _ref => {
-        let _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-          dFile = _ref2[0];
+        let [dFile] = _ref;
         dFile && (0, _utils.downloadFile)(dFile);
       });
     };
@@ -33,9 +33,10 @@ class MBFilesPreviewer extends _react.default.Component {
     };
   }
   render() {
-    const _this$props = this.props,
-      value = _this$props.value,
-      getDownLoadFiles = _this$props.getDownLoadFiles;
+    const {
+      value,
+      getDownLoadFiles
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)('dtable-ui-file-editor-previewer dtable-ui-mobile-file-editor-previewer', {
         'mt-0': value.length === 0

package/lib/FileEditor/files-previewer/pc-previewer/file-previewer/dropdown-menu.js

@@ -42,9 +42,10 @@ class FileDropdownMenu extends _react.default.Component {
     };
   }
   render() {
-    const _this$props = this.props,
-      onRenameFile = _this$props.onRenameFile,
-      onDeleteFile = _this$props.onDeleteFile;
+    const {
+      onRenameFile,
+      onDeleteFile
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Dropdown, {
       isOpen: this.state.isItemMenuShow,
       toggle: this.onDropdownToggleClick,

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

@@ -31,11 +31,12 @@ class FileNameEditor extends _react.Component {
       }
     };
     this.onSave = () => {
-      const _this$props = this.props,
-        renameFile = _this$props.renameFile,
-        name = _this$props.name,
-        closeRenameFile = _this$props.closeRenameFile,
-        itemIndex = _this$props.itemIndex;
+      const {
+        renameFile,
+        name,
+        closeRenameFile,
+        itemIndex
+      } = this.props;
       let newName = this.state.fileName.trim();
       if (newName === name || newName === '') {
         closeRenameFile();

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

@@ -33,7 +33,9 @@ class FilePreviewer extends _react.default.Component {
       }
     };
     this.handleFileClick = () => {
-      let fileItem = this.props.fileItem;
+      let {
+        fileItem
+      } = this.props;
       let openFileUrl = fileItem.url;
       let assetFileIndex = openFileUrl.indexOf('/asset');
       if (assetFileIndex > -1 && (0, _url.imageCheck)(fileItem.name)) {
@@ -47,7 +49,9 @@ class FilePreviewer extends _react.default.Component {
       this.props.downloadFile(downloadUrl);
     };
     this.onSelectFile = () => {
-      const fileItem = this.props.fileItem;
+      const {
+        fileItem
+      } = this.props;
       this.props.onSelectFiles(fileItem.name);
     };
     this.closeRenameFile = () => {
@@ -77,22 +81,25 @@ class FilePreviewer extends _react.default.Component {
     };
   }
   render() {
-    const _this$props = this.props,
-      fileItem = _this$props.fileItem,
-      isItemFreezed = _this$props.isItemFreezed,
-      isSelectMultipleFiles = _this$props.isSelectMultipleFiles,
-      isSelected = _this$props.isSelected,
-      config = _this$props.config;
-    const _this$state = this.state,
-      isShowRename = _this$state.isShowRename,
-      isShowOperation = _this$state.isShowOperation,
-      highlight = _this$state.highlight;
-    const _getFileThumbnailInfo = (0, _url.getFileThumbnailInfo)(fileItem, config),
-      fileIconUrl = _getFileThumbnailInfo.fileIconUrl;
+    const {
+      fileItem,
+      isItemFreezed,
+      isSelectMultipleFiles,
+      isSelected,
+      config
+    } = this.props;
+    const {
+      isShowRename,
+      isShowOperation,
+      highlight
+    } = this.state;
+    const {
+      fileIconUrl
+    } = (0, _url.getFileThumbnailInfo)(fileItem, config);
     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", {
@@ -116,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 : () => {},
@@ -126,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/files-previewer/pc-previewer/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _url = require("../../../utils/url");
 var _utils = require("../../../utils/utils");
@@ -24,20 +23,26 @@ class PCFilesPreviewer extends _react.default.Component {
       });
     };
     this.showLargeImage = itemUrl => {
-      let fileImageUrlList = this.state.fileImageUrlList;
+      let {
+        fileImageUrlList
+      } = this.state;
       this.setState({
         isShowLargeImage: true,
         largeImageIndex: fileImageUrlList.indexOf(itemUrl)
       });
     };
     this.moveNext = () => {
-      let fileImageUrlList = this.state.fileImageUrlList;
+      let {
+        fileImageUrlList
+      } = this.state;
       this.setState(prevState => ({
         largeImageIndex: (prevState.largeImageIndex + 1) % fileImageUrlList.length
       }));
     };
     this.movePrev = () => {
-      let fileImageUrlList = this.state.fileImageUrlList;
+      let {
+        fileImageUrlList
+      } = this.state;
       this.setState(prevState => ({
         largeImageIndex: (prevState.largeImageIndex + fileImageUrlList.length - 1) % fileImageUrlList.length
       }));
@@ -49,23 +54,30 @@ class PCFilesPreviewer extends _react.default.Component {
       });
     };
     this.downloadImage = imageItemUrl => {
-      const value = this.props.value;
+      const {
+        value
+      } = this.props;
       const file = value.find(v => v.url === imageItemUrl);
       if (!file) return;
       this.props.getDownLoadFiles([file], _ref => {
-        let _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-          dFile = _ref2[0];
+        let [dFile] = _ref;
         dFile && (0, _utils.downloadFile)(dFile);
       });
     };
     this.onRotateImage = (imageIndex, degree) => {
-      let fileImageUrlList = this.state.fileImageUrlList;
+      let {
+        fileImageUrlList
+      } = this.state;
       const imageUrl = fileImageUrlList[imageIndex];
       this.props.onRotateImage && this.props.onRotateImage(imageUrl, degree);
     };
     this.deleteImage = (index, type) => {
-      const value = this.props.value;
-      let fileImageUrlList = this.state.fileImageUrlList;
+      const {
+        value
+      } = this.props;
+      let {
+        fileImageUrlList
+      } = this.state;
       const imageUrl = fileImageUrlList[index];
       let fileItemIndex = value.findIndex(fileItem => fileItem.url === imageUrl);
       this.props.deleteFile(fileItemIndex, type);
@@ -94,7 +106,9 @@ class PCFilesPreviewer extends _react.default.Component {
       });
     };
     this.onSelectFiles = name => {
-      const selectedFilesList = this.state.selectedFilesList;
+      const {
+        selectedFilesList
+      } = this.state;
       let filesList = selectedFilesList.slice(0);
       const selectedFileIndex = selectedFilesList.indexOf(name);
       if (selectedFileIndex > -1) {
@@ -107,8 +121,12 @@ class PCFilesPreviewer extends _react.default.Component {
       });
     };
     this.onSelectAllFiles = () => {
-      const value = this.props.value;
-      const selectedFilesList = this.state.selectedFilesList;
+      const {
+        value
+      } = this.props;
+      const {
+        selectedFilesList
+      } = this.state;
       if (value.length === 0) return;
       let allFilesList = selectedFilesList.slice(0);
       value.map(item => {
@@ -128,8 +146,12 @@ class PCFilesPreviewer extends _react.default.Component {
       });
     };
     this.onDownloadAllSelectedFiles = () => {
-      const config = this.props.config;
-      const selectedFilesList = this.state.selectedFilesList;
+      const {
+        config
+      } = this.props;
+      const {
+        selectedFilesList
+      } = this.state;
       if (selectedFilesList.length === 0) return;
       this.props.getDownLoadFiles(selectedFilesList, downloadFilesUrlList => {
         if (downloadFilesUrlList.length > 0) {
@@ -139,18 +161,22 @@ class PCFilesPreviewer extends _react.default.Component {
       });
     };
     this.onDeleteAllSelectedFiles = () => {
-      const selectedFilesList = this.state.selectedFilesList;
+      const {
+        selectedFilesList
+      } = this.state;
       this.props.deleteFiles(selectedFilesList);
       this.onChangeSelectMultipleFiles(false);
     };
     this.renderFilesOperation = () => {
-      const _this$props = this.props,
-        value = _this$props.value,
-        deleteFiles = _this$props.deleteFiles,
-        getDownLoadFiles = _this$props.getDownLoadFiles;
-      const _this$state = this.state,
-        isSelectMultipleFiles = _this$state.isSelectMultipleFiles,
-        selectedFilesList = _this$state.selectedFilesList;
+      const {
+        value,
+        deleteFiles,
+        getDownLoadFiles
+      } = this.props;
+      const {
+        isSelectMultipleFiles,
+        selectedFilesList
+      } = this.state;
       if (value.length === 0) return null;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "dtable-ui-file-editor-operation-content",
@@ -199,12 +225,14 @@ class PCFilesPreviewer extends _react.default.Component {
     }
   }
   render() {
-    let _this$props2 = this.props,
-      value = _this$props2.value,
-      getDownLoadFiles = _this$props2.getDownLoadFiles;
-    const _this$state2 = this.state,
-      isSelectMultipleFiles = _this$state2.isSelectMultipleFiles,
-      selectedFilesList = _this$state2.selectedFilesList;
+    let {
+      value,
+      getDownLoadFiles
+    } = this.props;
+    const {
+      isSelectMultipleFiles,
+      selectedFilesList
+    } = this.state;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-file-editor-previewer",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/FileEditor/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 FileEditor = /*#__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/FileEditor/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 MBFileEditor = _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),
-    uploadLocalFiles = _useState6[0],
-    setUploadLocalFiles = _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 [uploadLocalFiles, setUploadLocalFiles] = (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 resetFileValue = (0, _react.useCallback)(() => {
     setUploadLocalFiles([]);
   }, []);

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

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

@@ -36,7 +36,9 @@ class LocalFileAddition 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)) {
@@ -47,7 +49,9 @@ class LocalFileAddition extends _react.default.Component {
       this.props.fileUploadCompleted(fileMessage);
     };
     this.onFileUploadProgress = fileMessage => {
-      let thumbnailSrcList = this.state.thumbnailSrcList;
+      let {
+        thumbnailSrcList
+      } = this.state;
       const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
       thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
       this.setState({
@@ -55,7 +59,9 @@ class LocalFileAddition extends _react.default.Component {
       });
     };
     this.onFileUploadFailed = fileMessage => {
-      let thumbnailSrcList = this.state.thumbnailSrcList;
+      let {
+        thumbnailSrcList
+      } = this.state;
       const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
       thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
       this.setState({
@@ -63,7 +69,9 @@ class LocalFileAddition extends _react.default.Component {
       });
     };
     this.findUploadFileIndex = uploadFileMessage => {
-      let thumbnailSrcList = this.state.thumbnailSrcList;
+      let {
+        thumbnailSrcList
+      } = this.state;
       let uploadFileIndex = thumbnailSrcList.findIndex(item => item.name === uploadFileMessage.file.name);
       return uploadFileIndex;
     };
@@ -97,7 +105,9 @@ class LocalFileAddition extends _react.default.Component {
       });
     };
     this.renderMultipleFilesArr = () => {
-      let thumbnailSrcList = this.state.thumbnailSrcList;
+      let {
+        thumbnailSrcList
+      } = this.state;
       let fileArr = [];
       if (Array.isArray(this.props.uploadLocalFileValue)) {
         let uploadedFileList = this.renderUploadedFile();
@@ -116,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: ""
@@ -145,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);
         }
@@ -153,16 +163,18 @@ class LocalFileAddition extends _react.default.Component {
       return fileArr;
     };
     this.renderUploadedFile = () => {
-      const _this$props = this.props,
-        config = _this$props.config,
-        uploadLocalFileValue = _this$props.uploadLocalFileValue;
+      const {
+        config,
+        uploadLocalFileValue
+      } = this.props;
       let uploadedFileList = [];
       uploadedFileList = uploadLocalFileValue.length > 0 && uploadLocalFileValue.map((fileItem, index) => {
-        let _getFileThumbnailInfo = (0, _url.getFileThumbnailInfo)(fileItem, config),
-          fileIconUrl = _getFileThumbnailInfo.fileIconUrl;
+        let {
+          fileIconUrl
+        } = (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", {
@@ -182,7 +194,7 @@ class LocalFileAddition extends _react.default.Component {
               children: "x"
             })
           }), this.state.isShowDeleteIcon && this.state.enterFileIndex === index && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableToolTip.default, {
-            target: "file-content-tip-".concat(index),
+            target: `file-content-tip-${index}`,
             placement: "bottom",
             children: fileItem.name
           })]
@@ -191,10 +203,12 @@ class LocalFileAddition extends _react.default.Component {
       return uploadedFileList;
     };
     this.renderUploadFileWrapper = fileArr => {
-      let isFileTipShow = this.state.isFileTipShow;
+      let {
+        isFileTipShow
+      } = 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", {
@@ -212,7 +226,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"