dtable-ui-component 6.0.29-beta2 → 6.0.29-beta4

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

@@ -1,277 +1,35 @@
 "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 = _interopRequireDefault(require("react"));
-var _url = require("../../utils/url");
-var _utils = require("../../utils/utils");
-var _constants = require("../../constants");
-var _lang = require("../../lang");
-var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
-var _DTableCommonAddTool = _interopRequireDefault(require("../../DTableCommonAddTool"));
-var _filePreviewer = _interopRequireDefault(require("./file-previewer"));
+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");
-class FilesPreviewer extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.getFileItemImageUrlList = value => {
-      this.setState({
-        fileImageUrlList: (0, _url.getValidFileImageUrls)(value)
-      });
-    };
-    this.showLargeImage = itemUrl => {
-      let {
-        fileImageUrlList
-      } = this.state;
-      this.setState({
-        isShowLargeImage: true,
-        largeImageIndex: fileImageUrlList.indexOf(itemUrl)
-      });
-    };
-    this.moveNext = () => {
-      let {
-        fileImageUrlList
-      } = this.state;
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + 1) % fileImageUrlList.length
-      }));
-    };
-    this.movePrev = () => {
-      let {
-        fileImageUrlList
-      } = this.state;
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + fileImageUrlList.length - 1) % fileImageUrlList.length
-      }));
-    };
-    this.hideLargeImage = () => {
-      this.setState({
-        isShowLargeImage: false,
-        largeImageIndex: -1
-      });
-    };
-    this.downloadImage = imageItemUrl => {
-      const {
-        value
-      } = this.props;
-      const file = value.find(v => v.url === imageItemUrl);
-      if (!file) return;
-      this.props.getDownLoadFiles([file], _ref => {
-        let [dFile] = _ref;
-        dFile && (0, _utils.downloadFile)(dFile);
-      });
-    };
-    this.onRotateImage = (imageIndex, degree) => {
-      let {
-        fileImageUrlList
-      } = this.state;
-      const imageUrl = fileImageUrlList[imageIndex];
-      this.props.onRotateImage && this.props.onRotateImage(imageUrl, degree);
-    };
-    this.deleteImage = (index, type) => {
-      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);
-      if (index > fileImageUrlList.length - 2) {
-        if (fileImageUrlList.length - 2 < 0) {
-          this.hideLargeImage();
-        } else {
-          this.setState({
-            largeImageIndex: 0
-          });
-        }
-      }
-    };
-    this.togglePreviewer = () => {
-      this.props.togglePreviewer(_constants.FILE_EDITOR_STATUS.ADDITION);
-      this.props.resetFileValue();
-    };
-    this.freezeItem = () => {
-      this.setState({
-        isItemFreezed: true
-      });
-    };
-    this.unFreezeItem = () => {
-      this.setState({
-        isItemFreezed: false
-      });
-    };
-    this.onSelectFiles = name => {
-      const {
-        selectedFilesList
-      } = this.state;
-      let filesList = selectedFilesList.slice(0);
-      const selectedFileIndex = selectedFilesList.indexOf(name);
-      if (selectedFileIndex > -1) {
-        filesList.splice(selectedFileIndex, 1);
-      } else {
-        filesList.push(name);
-      }
-      this.setState({
-        selectedFilesList: filesList
-      });
-    };
-    this.onSelectAllFiles = () => {
-      const {
-        value
-      } = this.props;
-      const {
-        selectedFilesList
-      } = this.state;
-      if (value.length === 0) return;
-      let allFilesList = selectedFilesList.slice(0);
-      value.map(item => {
-        if (selectedFilesList.indexOf(item.name) === -1) {
-          allFilesList.push(item.name);
-        }
-        return null;
-      });
-      this.setState({
-        selectedFilesList: allFilesList
-      });
-    };
-    this.onChangeSelectMultipleFiles = state => {
-      this.setState({
-        isSelectMultipleFiles: state,
-        selectedFilesList: []
-      });
-    };
-    this.onDownloadAllSelectedFiles = () => {
-      const {
-        config
-      } = this.props;
-      const {
-        selectedFilesList
-      } = this.state;
-      if (selectedFilesList.length === 0) return;
-      this.props.getDownLoadFiles(selectedFilesList, downloadFilesUrlList => {
-        if (downloadFilesUrlList.length > 0) {
-          (0, _utils.downloadFiles)(downloadFilesUrlList, config);
-        }
-        this.onChangeSelectMultipleFiles(false);
-      });
-    };
-    this.onDeleteAllSelectedFiles = () => {
-      const {
-        selectedFilesList
-      } = this.state;
-      this.props.deleteFiles(selectedFilesList);
-      this.onChangeSelectMultipleFiles(false);
-    };
-    this.renderFilesOperation = () => {
-      const {
-        value,
-        deleteFiles,
-        getDownLoadFiles
-      } = this.props;
-      const {
-        isSelectMultipleFiles,
-        selectedFilesList
-      } = this.state;
-      if (value.length === 0) return null;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-file-editor-operation-content"
-      }, !isSelectMultipleFiles ? /*#__PURE__*/_react.default.createElement("span", {
-        onClick: this.onChangeSelectMultipleFiles.bind(this, true)
-      }, (0, _lang.getLocale)('Select')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selectedFilesList.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, deleteFiles && /*#__PURE__*/_react.default.createElement("span", {
-        onClick: this.onDeleteAllSelectedFiles
-      }, (0, _lang.getLocale)('Delete')), getDownLoadFiles && /*#__PURE__*/_react.default.createElement("span", {
-        className: "ml-2",
-        onClick: this.onDownloadAllSelectedFiles
-      }, (0, _lang.getLocale)('Download'))), /*#__PURE__*/_react.default.createElement("span", {
-        className: "ml-2",
-        onClick: this.onSelectAllFiles
-      }, (0, _lang.getLocale)('Select_all')), /*#__PURE__*/_react.default.createElement("span", {
-        className: "ml-2",
-        onClick: this.onChangeSelectMultipleFiles.bind(this, false)
-      }, (0, _lang.getLocale)('Cancel'))));
-    };
-    this.state = {
-      isShowRename: false,
-      value: props.value,
-      isItemFreezed: false,
-      isShowLargeImage: false,
-      isSelectMultipleFiles: false,
-      fileImageUrlList: [],
-      selectedFilesList: [],
-      largeImageIndex: -1
-    };
-  }
-  componentDidMount() {
-    this.getFileItemImageUrlList(this.props.value);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)) {
-      this.getFileItemImageUrlList(nextProps.value);
-    }
-  }
-  render() {
-    let {
-      value,
-      getDownLoadFiles
-    } = this.props;
-    const {
-      isSelectMultipleFiles,
-      selectedFilesList
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer-wrapper"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer-header d-flex align-items-center"
-    }, selectedFilesList.length > 0 ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-file-editor-count-content"
-    }, selectedFilesList.length === 1 ? (0, _lang.getLocale)('1_file_selected') : (0, _lang.getLocale)('Selected_xxx_files', {
-      count: selectedFilesList.length
-    })) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-file-editor-count-content"
-    }, value.length <= 1 ? (0, _lang.getLocale)('xxx_existing_file', {
-      count: value.length
-    }) : (0, _lang.getLocale)('xxx_existing_files', {
-      count: value.length
-    })), this.renderFilesOperation()), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-file-editor-previewer-content"
-    }, value.length > 0 && value.map((fileItem, index) => {
-      const isSelected = selectedFilesList.indexOf(fileItem.name) === -1 ? false : true;
-      return /*#__PURE__*/_react.default.createElement(_filePreviewer.default, {
-        key: fileItem.url,
-        fileItem: fileItem,
-        deleteFile: this.props.deleteFile,
-        renameFile: this.props.renameFile,
-        freezeItem: this.freezeItem,
-        unFreezeItem: this.unFreezeItem,
-        isItemFreezed: this.state.isItemFreezed,
-        itemIndex: index,
-        isSelected: isSelected,
-        showLargeImage: this.showLargeImage,
-        onSelectFiles: this.onSelectFiles,
-        isSelectMultipleFiles: isSelectMultipleFiles,
-        downloadFile: getDownLoadFiles ? this.downloadImage : null
-      });
-    }))), this.state.isShowLargeImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: this.state.fileImageUrlList,
-      imageIndex: this.state.largeImageIndex,
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.movePrev,
-      moveToNextImage: this.moveNext,
-      deleteImage: this.deleteImage,
-      downloadImage: this.downloadImage,
-      onRotateImage: this.onRotateImage
-    }), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
-      className: "dtable-ui-file-editor-previewer-add-btn",
-      callBack: this.togglePreviewer,
-      footerName: (0, _lang.getLocale)('Add_files')
-    }));
-  }
-}
+const FilesPreviewer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isMobile,
+    ...props
+  } = _ref;
+  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcPreviewer.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbPreviewer.default, Object.assign({}, props, {
+    ref: ref
+  }));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_pcPreviewer.default, Object.assign({}, props, {
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbPreviewer.default, Object.assign({}, props, {
+    ref: ref
+  }))));
+});
 var _default = exports.default = FilesPreviewer;

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

@@ -0,0 +1,122 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+var _utils = require("../../../utils");
+var _url = require("../../../../utils/url");
+var _MobileOperationSheet = _interopRequireWildcard(require("../../../../MobileOperationSheet"));
+class FilePreviewer extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.downloadFile = () => {
+      const downloadUrl = this.props.fileItem.url;
+      this.props.downloadFile(downloadUrl);
+    };
+    this.deleteFile = () => {
+      const {
+        fileItem
+      } = this.props;
+      this.props.deleteFile(fileItem);
+    };
+    this.closeRenameFile = () => {
+      this.setState({
+        isShowRename: false
+      });
+    };
+    this.openRenameFile = () => {
+      this.setState({
+        isShowRename: true
+      });
+    };
+    this.openOperationSheet = () => {
+      this.setState({
+        showOperationSheet: true
+      });
+    };
+    this.closeOperationSheet = () => {
+      this.setState({
+        showOperationSheet: false
+      });
+    };
+    this.onOperationChange = operation => {
+      if (operation === _MobileOperationSheet.OPERATION_TYPE.RENAME) {
+        this.openRenameFile();
+        return;
+      }
+      if (operation === _MobileOperationSheet.OPERATION_TYPE.DOWNLOAD) {
+        this.downloadFile();
+        return;
+      }
+      if (operation === _MobileOperationSheet.OPERATION_TYPE.DELETE) {
+        this.deleteFile();
+        return;
+      }
+    };
+    this.state = {
+      isShowRename: false,
+      showOperationSheet: false
+    };
+    this.operations = [];
+    const {
+      renameFile,
+      downloadFile,
+      deleteFile
+    } = props;
+    if (renameFile) {
+      this.operations.push(_MobileOperationSheet.OPERATION_TYPE.RENAME);
+    }
+    if (downloadFile) {
+      this.operations.push(_MobileOperationSheet.OPERATION_TYPE.DOWNLOAD);
+    }
+    if (deleteFile) {
+      this.operations.push(_MobileOperationSheet.OPERATION_TYPE.DELETE);
+    }
+  }
+  render() {
+    const {
+      fileItem,
+      config
+    } = this.props;
+    const {
+      showOperationSheet
+    } = this.state;
+    const {
+      fileIconUrl
+    } = (0, _url.getFileThumbnailInfo)(fileItem, config);
+    const uploadTime = (0, _utils.getFileUploadTime)(fileItem);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-box"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-item"
+    }, /*#__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"
+    }, /*#__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' : '')
+    }, /*#__PURE__*/_react.default.createElement("span", null, 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))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-operation",
+      onClick: this.openOperationSheet
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-more-level"
+    }))), showOperationSheet && /*#__PURE__*/_react.default.createElement(_MobileOperationSheet.default, {
+      operations: this.operations,
+      onChange: this.onOperationChange,
+      onClose: this.closeOperationSheet
+    }));
+  }
+}
+var _default = exports.default = FilePreviewer;

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

@@ -0,0 +1,39 @@
+@import url('../pc-previewer/file-previewer/index.css');
+
+.dtable-ui-file-editor-previewer.dtable-ui-mobile-file-editor-previewer {
+  margin-top: 20px;
+  width: 100%;
+}
+
+.dtable-ui-file-editor-previewer.dtable-ui-mobile-file-editor-previewer .dtable-ui-file-editor-previewer-wrapper {
+  width: 100%;
+  background-color: #fff;
+  height: fit-content;
+  border-top: 1px solid rgb(233, 233, 233);
+  border-bottom: 1px solid rgb(233, 233, 233);
+}
+
+.dtable-ui-file-editor-previewer.dtable-ui-mobile-file-editor-previewer .dtable-ui-file-editor-previewer-wrapper .dtable-ui-file-editor-previewer-content {
+  margin-top: 0px;
+  height: fit-content;
+}
+
+.dtable-ui-file-editor-previewer.dtable-ui-mobile-file-editor-previewer .dtable-ui-file-editor-previewer-wrapper .dtable-ui-file-editor-previewer-content:after {
+  display: none;
+}
+
+.dtable-ui-file-editor-previewer.dtable-ui-mobile-file-editor-previewer .dtable-ui-file-editor-previewer-content .dtable-ui-file-editor-previewer-box {
+  height: 64px;
+  width: calc(100% - 16px);
+  border-bottom: 1px solid #e9e9e9;
+  padding: 0.5rem 1rem 0.5rem 0;
+  margin-left: 16px;
+}
+
+.dtable-ui-file-editor-previewer.dtable-ui-mobile-file-editor-previewer .dtable-ui-file-editor-previewer-content .dtable-ui-file-editor-previewer-box:last-child {
+  border-bottom: none;
+}
+
+.dtable-ui-mobile-file-editor-previewer .dtable-ui-file-editor-previewer-operation {
+  color: #666;
+}

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

@@ -0,0 +1,64 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../../../utils/utils");
+var _lang = require("../../../lang");
+var _DTableCommonAddTool = _interopRequireDefault(require("../../../DTableCommonAddTool"));
+var _filePreviewer = _interopRequireDefault(require("./file-previewer"));
+require("./index.css");
+class MBFilesPreviewer extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.downloadImage = imageItemUrl => {
+      const {
+        value
+      } = this.props;
+      const file = value.find(v => v.url === imageItemUrl);
+      if (!file) return;
+      this.props.getDownLoadFiles([file], _ref => {
+        let [dFile] = _ref;
+        dFile && (0, _utils.downloadFile)(dFile);
+      });
+    };
+    this.togglePreviewer = () => {
+      this.props.togglePreviewer();
+      this.props.resetFileValue();
+    };
+  }
+  render() {
+    const {
+      value,
+      getDownLoadFiles
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('dtable-ui-file-editor-previewer dtable-ui-mobile-file-editor-previewer', {
+        'mt-0': value.length === 0
+      })
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('dtable-ui-file-editor-previewer-wrapper', {
+        'd-one': value.length === 0
+      })
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-file-editor-previewer-content"
+    }, value.length > 0 && value.map((fileItem, index) => {
+      return /*#__PURE__*/_react.default.createElement(_filePreviewer.default, {
+        key: fileItem.url,
+        fileItem: fileItem,
+        deleteFile: this.props.deleteFile,
+        renameFile: this.props.renameFile,
+        downloadFile: getDownLoadFiles ? this.downloadImage : null
+      });
+    }))), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
+      className: "dtable-ui-file-editor-previewer-add-btn",
+      callBack: this.togglePreviewer,
+      footerName: (0, _lang.getLocale)('Add_files')
+    }));
+  }
+}
+var _default = exports.default = MBFilesPreviewer;

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
-var _lang = require("../../../lang");
+var _lang = require("../../../../lang");
 class FileDropdownMenu extends _react.default.Component {
   constructor(props) {
     super(props);

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _constants = require("../../../../constants");
+var _constants = require("../../../../../constants");
 require("./index.css");
 class FileNameEditor extends _react.Component {
   constructor(props) {

package/lib/FileEditor/files-previewer/{file-previewer → pc-previewer/file-previewer}/index.css

@@ -84,5 +84,3 @@
   color: #000;
   opacity: 0.75;
 }
-
-

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

@@ -9,8 +9,8 @@ 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");
+var _utils = require("../../../utils");
+var _url = require("../../../../utils/url");
 require("./index.css");
 class FilePreviewer extends _react.default.Component {
   constructor(props) {