dtable-ui-component 5.3.6 → 5.3.7

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

@@ -0,0 +1,252 @@
+"use strict";
+
+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 _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _UploadProgress = _interopRequireDefault(require("../../../UploadProgress"));
+var _url = require("../../../utils/url");
+var _FileUploader = _interopRequireDefault(require("../../../FileUploader"));
+var _lang = require("../../../lang");
+require("./index.css");
+class LocalFileAddition extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.setFileTipShow = isFileTipShow => {
+      this.setState({
+        isFileTipShow: isFileTipShow
+      });
+    };
+    this.updateUploadFileList = fileListInfo => {
+      if (!fileListInfo) {
+        this.setState({
+          thumbnailSrcList: []
+        });
+        return;
+      }
+      this.setState({
+        thumbnailSrcList: fileListInfo
+      });
+    };
+    this.onFileUploadSuccess = fileMessage => {
+      this.hideDeleteIcon();
+      let {
+        thumbnailSrcList
+      } = this.state;
+      const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
+      thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
+      if (thumbnailSrcList.every(fileItem => !fileItem.isUploading)) {
+        this.setState({
+          thumbnailSrcList: []
+        });
+      }
+      this.props.fileUploadCompleted(fileMessage);
+    };
+    this.onFileUploadProgress = fileMessage => {
+      let {
+        thumbnailSrcList
+      } = this.state;
+      const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
+      thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
+      this.setState({
+        thumbnailSrcList
+      });
+    };
+    this.onFileUploadFailed = fileMessage => {
+      let {
+        thumbnailSrcList
+      } = this.state;
+      const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
+      thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
+      this.setState({
+        thumbnailSrcList
+      });
+    };
+    this.findUploadFileIndex = uploadFileMessage => {
+      let {
+        thumbnailSrcList
+      } = this.state;
+      let uploadFileIndex = thumbnailSrcList.findIndex(item => item.name === uploadFileMessage.file.name);
+      return uploadFileIndex;
+    };
+    this.deleteFile = (event, index) => {
+      this.props.deleteFile(index, 'localFile');
+    };
+    this.showDeleteIcon = (event, index) => {
+      this.setState({
+        isShowDeleteIcon: true,
+        enterFileIndex: index
+      });
+    };
+    this.hideDeleteIcon = () => {
+      this.setState({
+        isShowDeleteIcon: false,
+        enterFileIndex: -1
+      });
+    };
+    this.fileUploadAgain = (event, fileMessage) => {
+      this.uploaderFileRef.reuploadFile(fileMessage);
+    };
+    this.tooltipToggle = () => {
+      if (this.state.tooltipOpen) {
+        this.setState({
+          isShowDeleteIcon: false,
+          enterFileIndex: -1
+        });
+      }
+      this.setState({
+        tooltipOpen: !this.state.tooltipOpen
+      });
+    };
+    this.renderMultipleFilesArr = () => {
+      let {
+        thumbnailSrcList
+      } = this.state;
+      let fileArr = [];
+      if (Array.isArray(this.props.uploadLocalFileValue)) {
+        let uploadedFileList = this.renderUploadedFile();
+        if (uploadedFileList) {
+          fileArr.push(...uploadedFileList);
+        }
+        if (Array.isArray(thumbnailSrcList) && thumbnailSrcList.length > 0) {
+          let thumbnailList = thumbnailSrcList.map((fileThumbnailItem, index) => {
+            let uploadFile = fileThumbnailItem.percent === 100 && !fileThumbnailItem.isErrorTip;
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+              key: "dtable-ui-image-wrapper-circle".concat(index)
+            }, fileThumbnailItem.isUploading && /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-wrapper"
+            }, /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-percent"
+            }, /*#__PURE__*/_react.default.createElement("img", {
+              src: fileThumbnailItem.fileIconUrl,
+              style: {
+                position: 'absolute',
+                zIndex: "".concat(uploadFile ? 3 : 1),
+                maxHeight: '100%'
+              },
+              alt: ""
+            }), fileThumbnailItem.percent < 100 && /*#__PURE__*/_react.default.createElement(_UploadProgress.default, {
+              uploadPercent: fileThumbnailItem.percent || 0
+            }), uploadFile && /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-success"
+            }, /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-success-scale"
+            }, /*#__PURE__*/_react.default.createElement("span", {
+              className: "dtable-ui-image-upload-success-tip"
+            }, (0, _lang.getLocale)('Indexing')))), /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-mask"
+            }), fileThumbnailItem.isErrorTip && /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-error-tip"
+            }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Network_Error')), /*#__PURE__*/_react.default.createElement("span", {
+              className: "dtable-ui-image-upload-again",
+              onClick: event => this.fileUploadAgain(event, fileThumbnailItem)
+            }, (0, _lang.getLocale)('Re_upload'))))));
+          });
+          fileArr.push(...thumbnailList);
+        }
+      }
+      return fileArr;
+    };
+    this.renderUploadedFile = () => {
+      const {
+        config,
+        uploadLocalFileValue
+      } = this.props;
+      let uploadedFileList = [];
+      uploadedFileList = uploadLocalFileValue.length > 0 && uploadLocalFileValue.map((fileItem, index) => {
+        let {
+          fileIconUrl
+        } = (0, _url.getFileThumbnailInfo)(fileItem, config);
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: 'dtable-ui-image-wrapper-' + index,
+          className: "dtable-ui-image-wrapper",
+          id: "file-content-tip-".concat(index),
+          onMouseEnter: event => this.showDeleteIcon(event, index),
+          onMouseLeave: this.hideDeleteIcon
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-ui-image-content"
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          src: fileIconUrl,
+          alt: "",
+          style: {
+            maxHeight: '100%'
+          }
+        })), this.state.isShowDeleteIcon && this.state.enterFileIndex === index && /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-delete-image-icon",
+          onClick: event => this.deleteFile(event, index)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "image-delete-span"
+        }, "x")), this.state.isShowDeleteIcon && this.state.enterFileIndex === index && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
+          toggle: this.tooltipToggle,
+          delay: {
+            show: 0,
+            hide: 0
+          },
+          target: "file-content-tip-".concat(index),
+          placement: "bottom",
+          isOpen: this.state.tooltipOpen
+        }, fileItem.name));
+      });
+      return uploadedFileList;
+    };
+    this.renderUploadFileWrapper = fileArr => {
+      let {
+        isFileTipShow
+      } = this.state;
+      let editorContent = fileArr.length === 0 ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-tip-addition ".concat(isFileTipShow ? 'dtable-ui-image-drop-active' : '')
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-dtable-ui-image-add-icon"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-add-files"
+      })), isFileTipShow ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-add-span"
+      }, (0, _lang.getLocale)('Drag_and_drop_to_add_a_file')) : /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-add-span"
+      }, (0, _lang.getLocale)('Drag_and_drop_files_or_click_here_to_add')))) : /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-add-box"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-add-button ".concat(isFileTipShow ? 'dtable-ui-image-wrapper-drop-active' : '')
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: "dtable-ui-image-add-span"
+      }, (0, _lang.getLocale)('Upload'))));
+      return /*#__PURE__*/_react.default.createElement(_FileUploader.default, {
+        uploadType: "file",
+        isSupportDragDrop: true,
+        className: fileArr.length === 0 ? (0, _classnames.default)('dtable-ui-image-upload-container', {
+          'dtable-ui-image-upload-container-active': isFileTipShow
+        }) : 'dtable-ui-image-wrapper',
+        updateParentTips: this.setFileTipShow,
+        onFileUploadSuccess: this.onFileUploadSuccess,
+        onFileUploadProgress: this.onFileUploadProgress,
+        updateUploadFileList: this.updateUploadFileList,
+        onFileUploadFailed: this.onFileUploadFailed,
+        ref: ref => this.uploaderFileRef = ref,
+        uploadFile: this.props.uploadFile
+      }, editorContent);
+    };
+    this.state = {
+      isFileTipShow: false,
+      isShowDeleteIcon: false,
+      enterFileIndex: -1,
+      tooltipOpen: false,
+      uploadMessageList: [],
+      thumbnailSrcList: [],
+      reUploadFile: null
+    };
+  }
+  render() {
+    let fileArr = this.renderMultipleFilesArr();
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fileArr, this.renderUploadFileWrapper(fileArr));
+  }
+}
+var _default = exports.default = LocalFileAddition;

package/lib/FileEditor/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FILES_FOLDER = void 0;
+const FILES_FOLDER = exports.FILES_FOLDER = 'files';

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _lang = require("../../../lang");
+class FileDropdownMenu extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onDropdownToggleClick = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.setState({
+        isItemMenuShow: !this.state.isItemMenuShow
+      }, () => {
+        if (this.state.isItemMenuShow) {
+          this.props.freezeItem();
+        } else {
+          this.props.unFreezeItem();
+          this.props.resetState();
+        }
+      });
+    };
+    this.onDeleteFile = event => {
+      this.props.resetState();
+      this.props.onDeleteFile(this.props.itemIndex);
+    };
+    this.onRenameFile = event => {
+      event.nativeEvent.stopImmediatePropagation();
+      this.props.onRenameFile();
+    };
+    this.state = {
+      isItemMenuShow: false,
+      isRenameDialogShow: false
+    };
+  }
+  render() {
+    const {
+      onRenameFile,
+      onDeleteFile
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
+      isOpen: this.state.isItemMenuShow,
+      toggle: this.onDropdownToggleClick,
+      className: "file-dropdown-menu"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
+      tag: "span",
+      role: "button",
+      "data-toggle": "dropdown",
+      "aria-expanded": this.state.isItemMenuShow,
+      className: "file-dropdown-icon",
+      title: (0, _lang.getLocale)('More_operations'),
+      "aria-label": (0, _lang.getLocale)('More_operations')
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-more-vertical file-dropdown-more"
+    })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
+      className: "dtable-dropdown-menu dropdown-menu"
+    }, onRenameFile && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+      onClick: this.onRenameFile
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "item-icon dtable-font dtable-icon-rename"
+    }), (0, _lang.getLocale)('Rename')), onDeleteFile && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+      onClick: this.onDeleteFile
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "item-icon dtable-font dtable-icon-delete"
+    }), (0, _lang.getLocale)('Delete'))));
+  }
+}
+var _default = exports.default = FileDropdownMenu;

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

@@ -0,0 +1,5 @@
+.dtable-ui-file-name-input {
+  height: 24px;
+  cursor: text;
+  padding: 0 6px;
+}

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _constants = require("../../../../constants");
+require("./index.css");
+class FileNameEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onMouseDown = e => {
+      if (this.fileNameRef && !this.fileNameRef.contains(e.target)) {
+        this.onSave();
+      }
+    };
+    this.onChange = e => {
+      this.setState({
+        fileName: e.target.value
+      });
+    };
+    this.onKeyDown = e => {
+      e.stopPropagation();
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        e.preventDefault();
+        this.onSave();
+      }
+    };
+    this.onSave = () => {
+      const {
+        renameFile,
+        name,
+        closeRenameFile,
+        itemIndex
+      } = this.props;
+      let newName = this.state.fileName.trim();
+      if (newName === name || newName === '') {
+        closeRenameFile();
+        return;
+      }
+      this.unSaved = false;
+      renameFile(itemIndex, newName);
+      closeRenameFile();
+    };
+    this.state = {
+      fileName: props.name || ''
+    };
+    this.unSaved = true;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onMouseDown);
+  }
+  componentWillUnmount() {
+    if (this.unSaved) {
+      this.onSave();
+    }
+    document.removeEventListener('mousedown', this.onMouseDown);
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "pt-1",
+      ref: ref => this.fileNameRef = ref
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      className: "dtable-ui-file-name-input",
+      type: "text",
+      value: this.state.fileName,
+      onChange: this.onChange,
+      onKeyDown: this.onKeyDown,
+      onBlur: this.onSave,
+      autoFocus: true
+    }));
+  }
+}
+var _default = exports.default = FileNameEditor;

package/lib/FileEditor/files-previewer/file-previewer/index.css

@@ -0,0 +1,88 @@
+.dtable-ui-file-editor-previewer-box {
+  display: flex;
+  height: 48px;
+  width: 100%;
+  padding: 0px 16px;
+  justify-content: space-between;
+}
+
+.dtable-ui-file-editor-previewer-box.dtable-ui-file-editor-previewer-box-highlight {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item {
+  display: flex;
+  align-items: center;
+  width: calc(100% - 56px);
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-previewer-icon {
+  height: 100%;
+  line-height: 48px;
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-previewer-icon img {
+  width: 36px;
+  height: 36px;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-previewer-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-previewer-item-name {
+  max-width: 480px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-preview-item-detail {
+  color: #c0c0c0;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-preview-item-detail .file-upload-time {
+  white-space: pre-wrap;
+}
+
+.dtable-ui-file-editor-previewer-operation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dtable-ui-file-editor-previewer-operation .file-dropdown-menu .file-dropdown-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  width: 24px;
+}
+
+.file-dropdown-menu .file-dropdown-icon .dtable-icon-more-vertical {
+  font-size: 14px;
+  color: #999;
+}
+
+.dtable-ui-file-editor-previewer-operation .file-download-icon,
+.file-dropdown-menu .file-dropdown-icon .file-dropdown-more {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #999;
+  cursor: pointer;
+}
+
+.file-dropdown-menu .file-dropdown-icon:hover .file-dropdown-more,
+.dtable-ui-file-editor-previewer-operation .file-download-icon:hover {
+  color: #000;
+  opacity: 0.75;
+}
+
+

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

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _dropdownMenu = _interopRequireDefault(require("./dropdown-menu"));
+var _fileNameEditor = _interopRequireDefault(require("./file-name-editor"));
+var _utils = require("../../utils");
+var _url = require("../../../utils/url");
+require("./index.css");
+class FilePreviewer extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.fileItemMouseEnter = () => {
+      if (!this.props.isItemFreezed) {
+        this.setState({
+          isShowOperation: true,
+          highlight: true
+        });
+      }
+    };
+    this.fileItemMouseLeave = () => {
+      if (!this.props.isItemFreezed) {
+        this.setState({
+          isShowOperation: false,
+          highlight: false
+        });
+      }
+    };
+    this.handleFileClick = () => {
+      let {
+        fileItem
+      } = this.props;
+      let openFileUrl = fileItem.url;
+      let assetFileIndex = openFileUrl.indexOf('/asset');
+      if (assetFileIndex > -1 && (0, _url.imageCheck)(fileItem.name)) {
+        this.props.showLargeImage(fileItem.url);
+        return;
+      }
+    };
+    this.downloadFile = e => {
+      e.stopPropagation();
+      let downloadUrl = this.props.fileItem.url;
+      this.props.downloadFile(downloadUrl);
+    };
+    this.onSelectFile = () => {
+      const {
+        fileItem
+      } = this.props;
+      this.props.onSelectFiles(fileItem.name);
+    };
+    this.closeRenameFile = () => {
+      if (this.state.isShowRename) {
+        this.setState({
+          isShowRename: false
+        });
+      }
+    };
+    this.openRenameFile = () => {
+      this.setState({
+        isShowRename: true
+      });
+    };
+    this.resetState = () => {
+      this.setState({
+        isShowOperation: false,
+        highlight: false
+      });
+      this.props.unFreezeItem();
+    };
+    this.state = {
+      isShowRename: false,
+      isShowOperation: false,
+      highlight: false,
+      errorMessage: ''
+    };
+  }
+  render() {
+    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__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-box ".concat(highlight ? 'dtable-ui-file-editor-previewer-box-highlight' : ''),
+      onMouseEnter: this.fileItemMouseEnter,
+      onMouseLeave: this.fileItemMouseLeave
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-item"
+    }, isSelectMultipleFiles && /*#__PURE__*/_react.default.createElement("input", {
+      onChange: this.onSelectFile,
+      checked: isSelected,
+      className: "mr-2",
+      type: "checkbox"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-icon"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      alt: "",
+      src: fileIconUrl
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-info"
+    }, isShowRename ? /*#__PURE__*/_react.default.createElement(_fileNameEditor.default, {
+      itemIndex: this.props.itemIndex,
+      name: fileItem.name,
+      renameFile: this.props.renameFile,
+      closeRenameFile: this.closeRenameFile
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-item-name ".concat(fileItem.type === 'dir' ? 'dtable-ui-file-editor-previewer-item-name-height' : ''),
+      ref: ref => this.renameRef = ref
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      onClick: this.props.renameFile ? this.handleFileClick : () => {}
+    }, fileItem.name)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-preview-item-detail d-flex"
+    }, uploadTime && /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-upload-time"
+    }, "".concat(uploadTime, ", ")), fileItem.size > -1 && /*#__PURE__*/_react.default.createElement("span", null, (0, _utils.bytesToSize)(fileItem.size))))), !isShowRename && isItemFreezed && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+      delay: {
+        show: 0,
+        hide: 0
+      },
+      placement: "bottom",
+      target: this.renameRef
+    }, fileItem.name), isShowOperation && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-operation"
+    }, this.props.downloadFile && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fileItem.type === 'file' && !errorMessage && /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-download file-download-icon",
+      onClick: this.downloadFile
+    }), fileItem.type === 'file' && errorMessage && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-download disable file-download-icon",
+      ref: ref => this.disabledDownloadRef = ref
+    }), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+      delay: {
+        show: 0,
+        hide: 0
+      },
+      placement: "bottom",
+      target: this.disabledDownloadRef
+    }, errorMessage))), (this.props.deleteFile || this.props.renameFile) && /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+      fileItem: fileItem,
+      freezeItem: this.props.freezeItem,
+      unFreezeItem: this.props.unFreezeItem,
+      resetState: this.resetState,
+      itemIndex: this.props.itemIndex,
+      onDeleteFile: this.props.deleteFile ? this.props.deleteFile : null,
+      onRenameFile: this.props.renameFile ? this.openRenameFile : null
+    })));
+  }
+}
+var _default = exports.default = FilePreviewer;