dtable-ui-component 7.0.13 → 7.0.15

package/lib/DigitalSignEditor/pc-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 _reactstrap = require("reactstrap");
 var _DTableCustomFooter = _interopRequireDefault(require("../../DTableCustomFooter"));
@@ -24,12 +23,14 @@ class PCDigitalSignEditor extends _react.Component {
     super(props);
     this.setPosition = () => {
       if (!this.editor) return;
-      const _this$editor$parentNo = this.editor.parentNode,
-        offsetLeft = _this$editor$parentNo.offsetLeft,
-        offsetTop = _this$editor$parentNo.offsetTop;
-      const _this$editor = this.editor,
-        editorWidth = _this$editor.offsetWidth,
-        editorHeight = _this$editor.offsetHeight;
+      const {
+        offsetLeft,
+        offsetTop
+      } = this.editor.parentNode;
+      const {
+        offsetWidth: editorWidth,
+        offsetHeight: editorHeight
+      } = this.editor;
       let editorLeft = offsetLeft - editorWidth;
       let editorTop = offsetTop;
       if (this.props.isInModal) {
@@ -111,11 +112,14 @@ class PCDigitalSignEditor extends _react.Component {
       editorPosition: {},
       saving: false
     };
-    const uploadFile = props.uploadFile,
-      config = props.config,
-      value = props.value;
-    const _ref = config || {},
-      username = _ref.username;
+    const {
+      uploadFile,
+      config,
+      value
+    } = props;
+    const {
+      username
+    } = config || {};
     this.value = value || {};
     this.digitalService = new _service.default({
       uploadFile,
@@ -126,21 +130,25 @@ class PCDigitalSignEditor extends _react.Component {
     this.setPosition();
   }
   render() {
-    const _this$props = this.props,
-      value = _this$props.value,
-      config = _this$props.config;
-    const _this$state = this.state,
-      editorPosition = _this$state.editorPosition,
-      saving = _this$state.saving;
-    const signImageUrl = (0, _url.generateCurrentBaseImageUrl)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, config), {}, {
+    const {
+      value,
+      config
+    } = this.props;
+    const {
+      editorPosition,
+      saving
+    } = this.state;
+    const signImageUrl = (0, _url.generateCurrentBaseImageUrl)({
+      ...config,
       partUrl: _utils.default.getSignImageUrl(value)
-    }));
+    });
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-digital-sign-editor-container",
       ref: ref => this.editor = ref,
-      style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, editorPosition), {}, {
+      style: {
+        ...editorPosition,
         zIndex: 1000
-      }),
+      },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "dtable-ui-digital-sign-editor-header",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/DigitalSignEditor/service.js

@@ -16,10 +16,12 @@ class DigitalService {
     this.username = props.username;
   }
   uploadSignImage(signBlob, _ref) {
-    let successCallback = _ref.successCallback,
-      failedCallback = _ref.failedCallback;
+    let {
+      successCallback,
+      failedCallback
+    } = _ref;
     if (!this.uploadFile) return;
-    const name = "".concat(this.username, "-").concat(Date.now().toString(), ".png");
+    const name = `${this.username}-${Date.now().toString()}.png`;
     const file = new File([signBlob], name, {
       type: 'image/png'
     });

package/lib/DigitalSignEditor/signature-board/index.js

@@ -18,8 +18,8 @@ class SignatureBoard extends _react.Component {
     this.initSignTool = () => {
       let signatureBoardCanvas = document.querySelector('#signature_board_canvas');
       if (!this.signatureBoard || !signatureBoardCanvas) return;
-      signatureBoardCanvas.style.width = "".concat(this.signatureBoard.offsetWidth, "px");
-      signatureBoardCanvas.style.height = "".concat(this.signatureBoard.offsetHeight, "px");
+      signatureBoardCanvas.style.width = `${this.signatureBoard.offsetWidth}px`;
+      signatureBoardCanvas.style.height = `${this.signatureBoard.offsetHeight}px`;
       this.signatureTool = new _signatureTool.default(signatureBoardCanvas, {
         minLineWidth: 2,
         maxLineWidth: 4,
@@ -72,7 +72,9 @@ class SignatureBoard extends _react.Component {
       }
     };
     this.renderTips = () => {
-      const isEmpty = this.state.isEmpty;
+      const {
+        isEmpty
+      } = this.state;
       if (!isEmpty) return null;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "signature-board-tips",
@@ -80,10 +82,11 @@ class SignatureBoard extends _react.Component {
       });
     };
     this.renderSignImage = () => {
-      const _this$state = this.state,
-        isEmpty = _this$state.isEmpty,
-        signImageUrl = _this$state.signImageUrl,
-        loadingSignImage = _this$state.loadingSignImage;
+      const {
+        isEmpty,
+        signImageUrl,
+        loadingSignImage
+      } = this.state;
       if (isEmpty || !signImageUrl) return null;
       let img = new Image();
       img.src = signImageUrl;

package/lib/DigitalSignEditor/utils.js

@@ -14,8 +14,10 @@ class DigitalSignUtils {
     return (0, _dtableUtils.getDigitalSignImageUrl)(sign);
   }
   static getUpdatedSign(_ref) {
-    let username = _ref.username,
-      sign_image_url = _ref.sign_image_url;
+    let {
+      username,
+      sign_image_url
+    } = _ref;
     const time = (0, _dayjs.default)().utc().format('YYYY-MM-DDTHH:mm:ss.SSSZ');
     return {
       username,

package/lib/DigitalSignFormatter/index.js

@@ -18,9 +18,10 @@ class DigitalSignFormatter extends _react.Component {
   constructor(props) {
     super(props);
     this.getSignImages = () => {
-      const _this$props = this.props,
-        value = _this$props.value,
-        config = _this$props.config;
+      const {
+        value,
+        config
+      } = this.props;
       return [(0, _utils.getDigitalSignImageUrl)(value, config)].filter(Boolean);
     };
     this.onClickSignImage = index => {
@@ -56,18 +57,20 @@ class DigitalSignFormatter extends _react.Component {
     };
   }
   render() {
-    const _this$props2 = this.props,
-      containerClassName = _this$props2.containerClassName,
-      readOnly = _this$props2.readOnly,
-      config = _this$props2.config,
-      isSample = _this$props2.isSample,
-      renderItem = _this$props2.renderItem;
+    const {
+      containerClassName,
+      readOnly,
+      config,
+      isSample,
+      renderItem
+    } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container digital-sign-formatter', containerClassName);
     const signImages = this.getSignImages();
     if (signImages.length === 0) return null;
-    const _this$state = this.state,
-      isPreviewSignImage = _this$state.isPreviewSignImage,
-      largeSignImageIndex = _this$state.largeSignImageIndex;
+    const {
+      isPreviewSignImage,
+      largeSignImageIndex
+    } = this.state;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: className,

package/lib/DigitalSignFormatter/utils.js

@@ -9,12 +9,13 @@ const getDigitalSignImageUrl = (cellValue, config) => {
   const url = cellValue && cellValue.sign_image_url || '';
   if (!url) return '';
   if (!config) return url;
-  const _ref = config || {},
-    server = _ref.server,
-    workspaceID = _ref.workspaceID,
-    dtableUuid = _ref.dtableUuid;
+  const {
+    server,
+    workspaceID,
+    dtableUuid
+  } = config || {};
   if (server && (workspaceID || workspaceID === 0) && dtableUuid) {
-    return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(url);
+    return `${server}/workspace/${workspaceID}/asset/${dtableUuid}${url}`;
   }
   return url;
 };

package/lib/Drawer/index.js

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _rmcDrawer = _interopRequireDefault(require("rmc-drawer"));
 var React = _interopRequireWildcard(require("react"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class Drawer extends React.Component {
   render() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcDrawer.default, (0, _objectSpread2.default)({}, this.props));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcDrawer.default, {
+      ...this.props
+    });
   }
 }
 exports.default = Drawer;

package/lib/DurationEditor/index.js

@@ -23,10 +23,11 @@ class DurationEditor extends _react.default.Component {
       });
     };
     this.onKeyDown = event => {
-      let _event$currentTarget = event.currentTarget,
-        selectionStart = _event$currentTarget.selectionStart,
-        selectionEnd = _event$currentTarget.selectionEnd,
-        value = _event$currentTarget.value;
+      let {
+        selectionStart,
+        selectionEnd,
+        value
+      } = event.currentTarget;
       if (event.keyCode === _constants.KeyCodes.Enter) {
         event.preventDefault();
         this.onBlur();
@@ -36,7 +37,9 @@ class DurationEditor extends _react.default.Component {
       }
     };
     this.getValue = () => {
-      const column = this.props.column;
+      const {
+        column
+      } = this.props;
       const newDuration = (0, _dtableUtils.formatDurationToNumber)(this.getInputNode().value, column.data);
       return newDuration;
     };
@@ -48,10 +51,11 @@ class DurationEditor extends _react.default.Component {
       return this.input.querySelector('input:not([type=hidden])');
     };
     this.onBlur = () => {
-      const _this$props = this.props,
-        isInModal = _this$props.isInModal,
-        onBlur = _this$props.onBlur,
-        onCommit = _this$props.onCommit;
+      const {
+        isInModal,
+        onBlur,
+        onCommit
+      } = this.props;
       isInModal ? onCommit(this.getValue()) : onBlur();
     };
     this.setInputRef = input => {
@@ -64,30 +68,36 @@ class DurationEditor extends _react.default.Component {
     this.onCut = e => {
       e.stopPropagation();
     };
-    let _value = props.value,
-      _column = props.column;
+    let {
+      value: _value,
+      column: _column
+    } = props;
     this.initValue = _value || _value === 0 ? (0, _dtableUtils.getDurationDisplayString)(_value, _column.data) : '';
     this.state = {
       value: this.initValue
     };
   }
   componentDidMount() {
-    const _this$props2 = this.props,
-      isInModal = _this$props2.isInModal,
-      autoFocus = _this$props2.autoFocus,
-      readOnly = _this$props2.readOnly;
+    const {
+      isInModal,
+      autoFocus,
+      readOnly
+    } = this.props;
     if (isInModal && autoFocus && !readOnly) {
       this.input.focus();
     }
   }
   render() {
-    const _this$props3 = this.props,
-      column = _this$props3.column,
-      isInModal = _this$props3.isInModal,
-      className = _this$props3.className,
-      readOnly = _this$props3.readOnly;
+    const {
+      column,
+      isInModal,
+      className,
+      readOnly
+    } = this.props;
     const data = column.data || {};
-    const duration_format = data.duration_format;
+    const {
+      duration_format
+    } = data;
     const style = isInModal ? {
       textAlign: 'left',
       width: '320px'

package/lib/DurationFormatter/index.js

@@ -12,10 +12,11 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DurationFormatter extends _react.default.Component {
   render() {
-    let _this$props = this.props,
-      value = _this$props.value,
-      containerClassName = _this$props.containerClassName,
-      format = _this$props.format;
+    let {
+      value,
+      containerClassName,
+      format
+    } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container duration-formatter', containerClassName);
     const durationDisplayString = (0, _dtableUtils.getDurationDisplayString)(value, {
       duration_format: format

package/lib/EditEditorButton/index.js

@@ -10,7 +10,9 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class EditEditorButton extends _react.default.Component {
   render() {
-    const text = this.props.text;
+    const {
+      text
+    } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "dtable-ui-editor-button",
       onClick: this.props.onClick,

package/lib/EmailFormatter/index.js

@@ -11,9 +11,10 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class EmailFormatter extends _react.default.Component {
   render() {
-    const _this$props = this.props,
-      containerClassName = _this$props.containerClassName,
-      value = _this$props.value;
+    const {
+      containerClassName,
+      value
+    } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container email-formatter', containerClassName);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: value,

package/lib/FieldDisplaySetting/field-item.js

@@ -1,27 +1,25 @@
 "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 _DTableSwitch = _interopRequireDefault(require("../DTableSwitch"));
 var _DTableColumnIcon = _interopRequireDefault(require("../DTableColumnIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function FieldItem(_ref) {
-  let field = _ref.field,
-    isCollapsed = _ref.isCollapsed,
-    onClickField = _ref.onClickField,
-    onMoveField = _ref.onMoveField;
+  let {
+    field,
+    isCollapsed,
+    onClickField,
+    onMoveField
+  } = _ref;
   let enteredCounter = 0;
   const fieldItemRef = (0, _react.useRef)(null);
-  const _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isItemDropTipShow = _useState2[0],
-    setDropTipShow = _useState2[1];
+  const [isItemDropTipShow, setDropTipShow] = (0, _react.useState)(false);
   const handleClickField = e => {
     e.nativeEvent.stopImmediatePropagation();
     const value = e.target.checked;
@@ -65,8 +63,10 @@ function FieldItem(_ref) {
     onMoveField(droppedColumnKey, field.key);
   };
   const placeholder = () => {
-    const type = field.type,
-      data = field.data;
+    const {
+      type,
+      data
+    } = field;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "field-switch",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableColumnIcon.default, {
@@ -81,7 +81,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

@@ -1,13 +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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactTransitionGroup = require("react-transition-group");
@@ -18,32 +16,31 @@ const FIELD_ITEM_HEIGHT = 30;
 const BANNER_HEIGHT = 24;
 const DURATION = 300;
 function FieldDisplaySetting(_ref) {
-  let fields = _ref.fields,
-    textProperties = _ref.textProperties,
-    fieldAllShown = _ref.fieldAllShown,
-    onClickField = _ref.onClickField,
-    onMoveField = _ref.onMoveField,
-    onToggleFieldsVisibility = _ref.onToggleFieldsVisibility;
+  let {
+    fields,
+    textProperties,
+    fieldAllShown,
+    onClickField,
+    onMoveField,
+    onToggleFieldsVisibility
+  } = _ref;
   const nodeRef = (0, _react.useRef)(null);
-  const _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isCollapsed = _useState2[0],
-    setCollapsed = _useState2[1];
+  const [isCollapsed, setCollapsed] = (0, _react.useState)(true);
   const expandAllFields = () => {
     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,
@@ -63,7 +60,7 @@ function FieldDisplaySetting(_ref) {
         className: "mb-0",
         children: textProperties.titleValue
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "seatable-icon-btn dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
+        className: `seatable-icon-btn dtable-font dtable-icon-right expand-button ${isCollapsed ? '' : 'revolving'}`
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
       nodeRef: nodeRef,
@@ -72,9 +69,12 @@ function FieldDisplaySetting(_ref) {
       children: state => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "field-setting-wrapper",
         ref: nodeRef,
-        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultStyle), transitionStyles[state]),
+        style: {
+          ...defaultStyle,
+          ...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/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 _pcPreviewer = _interopRequireDefault(require("./pc-previewer"));
 var _mbPreviewer = _interopRequireDefault(require("./mb-previewer"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["isMobile"];
 const FilesPreviewer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let isMobile = _ref.isMobile,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcPreviewer.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  let {
+    isMobile,
+    ...props
+  } = _ref;
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcPreviewer.default, {
+    ...props,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbPreviewer.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbPreviewer.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)(_pcPreviewer.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcPreviewer.default, {
+        ...props,
         ref: ref
-      }))
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
       query: "(max-width: 768px)",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbPreviewer.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbPreviewer.default, {
+        ...props,
         ref: ref
-      }))
+      })
     })]
   });
 });

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

@@ -19,7 +19,9 @@ class FilePreviewer extends _react.default.Component {
       this.props.downloadFile(downloadUrl);
     };
     this.deleteFile = () => {
-      const fileItem = this.props.fileItem;
+      const {
+        fileItem
+      } = this.props;
       this.props.deleteFile(fileItem);
     };
     this.closeRenameFile = () => {
@@ -61,9 +63,11 @@ class FilePreviewer extends _react.default.Component {
       showOperationSheet: false
     };
     this.operations = [];
-    const renameFile = props.renameFile,
-      downloadFile = props.downloadFile,
-      deleteFile = props.deleteFile;
+    const {
+      renameFile,
+      downloadFile,
+      deleteFile
+    } = props;
     if (renameFile) {
       this.operations.push(_MobileOperationSheet.OPERATION_TYPE.RENAME);
     }
@@ -75,12 +79,16 @@ class FilePreviewer extends _react.default.Component {
     }
   }
   render() {
-    const _this$props = this.props,
-      fileItem = _this$props.fileItem,
-      config = _this$props.config;
-    const showOperationSheet = this.state.showOperationSheet;
-    const _getFileThumbnailInfo = (0, _url.getFileThumbnailInfo)(fileItem, config),
-      fileIconUrl = _getFileThumbnailInfo.fileIconUrl;
+    const {
+      fileItem,
+      config
+    } = this.props;
+    const {
+      showOperationSheet
+    } = this.state;
+    const {
+      fileIconUrl
+    } = (0, _url.getFileThumbnailInfo)(fileItem, config);
     const uploadTime = (0, _utils.getFileUploadTime)(fileItem);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -96,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
               })
@@ -104,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)
               })]