dtable-ui-component 6.0.25 → 6.0.26-beta1

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

@@ -0,0 +1,276 @@
+"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 _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"));
+class Large 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')
+    }));
+  }
+}
+var _default = exports.default = Large;

package/lib/FileEditor/files-previewer/sm/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/sm/index.css

@@ -0,0 +1,39 @@
+@import url('../lg/file-previewer/index.css');
+
+.dtable-ui-file-editor-previewer.mobile-dtable-ui-file-editor-previewer {
+  margin-top: 20px;
+  width: 100%;
+}
+
+.dtable-ui-file-editor-previewer.mobile-dtable-ui-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.mobile-dtable-ui-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.mobile-dtable-ui-file-editor-previewer .dtable-ui-file-editor-previewer-wrapper .dtable-ui-file-editor-previewer-content:after {
+  display: none;
+}
+
+.dtable-ui-file-editor-previewer.mobile-dtable-ui-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.mobile-dtable-ui-file-editor-previewer .dtable-ui-file-editor-previewer-content .dtable-ui-file-editor-previewer-box:last-child {
+  border-bottom: none;
+}
+
+.mobile-dtable-ui-file-editor-previewer .dtable-ui-file-editor-previewer-operation {
+  color: #666;
+}

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

@@ -0,0 +1,59 @@
+"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 _utils = require("../../../utils/utils");
+var _lang = require("../../../lang");
+var _DTableCommonAddTool = _interopRequireDefault(require("../../../DTableCommonAddTool"));
+var _filePreviewer = _interopRequireDefault(require("./file-previewer"));
+require("./index.css");
+class Small 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: "dtable-ui-file-editor-previewer mobile-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-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 = Small;

package/lib/FileEditor/index.css

@@ -1,6 +1 @@
 @import url('../ImageEditor/index.css');
-
-.dtable-ui-file-editor-container {
-  min-height: 300px;
-}
-