dtable-ui-component 5.3.0 → 5.3.1-beta

package/lib/FileEditor/index.js

@@ -7,21 +7,254 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
+var _filesPreviewer = _interopRequireDefault(require("./files-previewer"));
+var _additionPreviewer = _interopRequireDefault(require("./addition-previewer"));
+var _constants = require("../constants");
+var _DTableModalHeader = _interopRequireDefault(require("../DTableModalHeader"));
 var _lang = require("../lang");
-var _index = _interopRequireDefault(require("../DTableModalHeader/index"));
+var _constants2 = require("./constants");
+require("./index.css");
 class FileEditor extends _react.default.Component {
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
+    this.getValue = () => {
+      return this.state.value;
+    };
+    this.getEditorView = () => {
+      const {
+        isInModal,
+        value
+      } = this.props;
+      return !value || value.length === 0 || isInModal ? _constants.FILE_EDITOR_STATUS.ADDITION : _constants.FILE_EDITOR_STATUS.PREVIEWER;
+    };
+    this.deleteImage = function (index) {
+      let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      let uploadLocalFileValue = _this.state.uploadLocalFileValue.slice(0);
+      let value = _this.state.value.slice(0);
+      if (_this.state.editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER) {
+        value.splice(index, 1);
+      } else {
+        if (type === 'localPicture') {
+          uploadLocalFileValue.splice(index, 1);
+        }
+      }
+      _this.setState({
+        uploadLocalFileValue: uploadLocalFileValue,
+        isUpdated: true,
+        value: value
+      });
+    };
+    this.resetAdditionImage = () => {
+      this.setState({
+        uploadLocalFileValue: [],
+        imageLinkValue: []
+      });
+    };
+    this.toggle = e => {
+      e.stopPropagation();
+      if (this.state.isOpen && this.state.isUpdated) {
+        if (this.state.editorView === _constants.FILE_EDITOR_STATUS.ADDITION) {
+          let {
+            value,
+            uploadLocalFileValue
+          } = this.state;
+          let newValue = value.concat(uploadLocalFileValue);
+          this.setState({
+            value: newValue
+          }, () => {
+            this.props.isInModal ? this.props.onCommit(this.getValue()) : this.props.onCommit();
+          });
+          return;
+        }
+        this.props.isInModal ? this.props.onCommit(this.getValue()) : this.props.onCommit();
+      }
+      if (this.props.isInModal) {
+        this.props.onToggle();
+      }
+      const nextIsOpen = !this.state.isOpen;
+      this.setState({
+        isOpen: nextIsOpen
+      }, () => {
+        if (!nextIsOpen) {
+          this.props.onCommitCancel && this.props.onCommitCancel();
+        }
+      });
+    };
+    this.closeEditor = () => {
+      this.setState({
+        isOpen: false
+      });
+    };
+    this.togglePreviewer = type => {
+      this.setState({
+        editorView: type
+      });
+    };
+    this.fileUploadCompleted = fileMessage => {
+      let uploadLocalFileValue = this.state.uploadLocalFileValue.slice(0);
+      let fileUploadMessage = {
+        name: fileMessage.name,
+        size: fileMessage.size,
+        type: fileMessage.type,
+        url: fileMessage.url,
+        upload_time: fileMessage.upload_time
+      };
+      uploadLocalFileValue.push(fileUploadMessage);
+      this.setState({
+        uploadLocalFileValue: uploadLocalFileValue,
+        isUpdated: true
+      });
+    };
+    this.addUploadedFile = fileMessageList => {
+      const uploadLocalFileValue = [...this.state.uploadLocalFileValue, ...fileMessageList.map(_ref => {
+        let {
+          name,
+          size,
+          type,
+          url,
+          mtime
+        } = _ref;
+        return {
+          name,
+          size,
+          type: type || 'file',
+          url,
+          upload_time: mtime
+        };
+      })];
+      this.setState({
+        uploadLocalFileValue,
+        isUpdated: true
+      });
+    };
+    this.renderHeader = () => {
+      let {
+        editorView
+      } = this.state;
+      // if (this.props.isInModal) {
+      //   return (<span>{getLocale('Add_files')}</span>);
+      // }
+      if (editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER) {
+        return /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('All_files'));
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        onClick: this.showImageListPreviewer
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-return mr-2"
+      }), /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Add_files')));
+    };
+    this.showImageListPreviewer = () => {
+      let {
+        value,
+        uploadLocalFileValue,
+        imageLinkValue
+      } = this.state;
+      let newValue = value.concat(uploadLocalFileValue, imageLinkValue);
+      this.setState({
+        value: newValue
+      });
+      this.togglePreviewer(_constants.FILE_EDITOR_STATUS.PREVIEWER);
+    };
+    this.uploadFile = (file, callback) => {
+      return this.props.uploadFile(file, _constants2.FILES_FOLDER, callback);
+    };
+    this.resetFileValue = () => {
+      this.setState({
+        uploadLocalFileValue: []
+      });
+    };
+    this.deleteFile = (index, type) => {
+      let uploadLocalFileValue = this.state.uploadLocalFileValue.slice(0);
+      let value = this.state.value.slice(0);
+      if (this.state.editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER) {
+        value.splice(index, 1);
+      } else {
+        if (type === 'localFile') {
+          uploadLocalFileValue.splice(index, 1);
+        }
+      }
+      this.setState({
+        uploadLocalFileValue: uploadLocalFileValue,
+        isUpdated: true,
+        value: value
+      });
+    };
+    this.deleteFilesByPreviewer = fileList => {
+      const result = this.state.value.filter(file => !fileList.includes(file.name));
+      this.setState({
+        isUpdated: true,
+        value: result
+      });
+    };
+    this.onRenameFile = (index, newName) => {
+      let newValue = this.state.value.slice(0);
+      let fileItem = newValue[index];
+      if (!this.props.renameFile) return;
+      this.props.renameFile(fileItem, newName).then(res => {
+        const {
+          name,
+          url
+        } = res.data;
+        fileItem = {
+          ...fileItem,
+          name,
+          url
+        };
+        newValue[index] = fileItem;
+        this.setState({
+          value: newValue
+        });
+      }).catch(error => {});
+    };
+    this.onRotateImage = (url, degree) => {
+      this.props.rotateImage(url, degree).then(res => {}).catch(error => {});
+    };
+    this.state = {
+      value: props.value || [],
+      editorView: this.getEditorView(),
+      isOpen: true,
+      isShowFileChooser: false,
+      uploadLocalFileValue: [],
+      imageLinkValue: [],
+      isUpdated: false
+    };
+  }
   render() {
-    let {
-      closeEditor
-    } = this.props;
     return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
-      isOpen: true,
-      toggle: closeEditor
-    }, /*#__PURE__*/_react.default.createElement(_index.default, {
-      toggle: closeEditor
-    }, (0, _lang.getLocale)('Add_Files')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
-      className: "file-editor-container"
-    }));
+      className: "dtable-ui-image-editor-dialog dtable-ui-file-editor-dialog",
+      contentClassName: "dtable-ui-image-editor-modal",
+      isOpen: this.state.isOpen,
+      toggle: this.toggle
+    }, /*#__PURE__*/_react.default.createElement(_DTableModalHeader.default, {
+      toggle: this.toggle
+    }, this.renderHeader()), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+      className: "p-0"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-image-editor-container dtable-ui-file-editor-container"
+    }, this.state.editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER && /*#__PURE__*/_react.default.createElement(_filesPreviewer.default, {
+      value: this.state.value,
+      config: this.props.config,
+      togglePreviewer: this.togglePreviewer,
+      deleteFile: this.deleteFile,
+      deleteFiles: this.deleteFilesByPreviewer,
+      renameFile: this.props.renameFile ? this.onRenameFile : null,
+      resetFileValue: this.resetFileValue,
+      rotateImage: this.props.rotateImage ? this.onRotateImage : null,
+      getDownLoadFiles: this.props.getDownLoadFiles || (() => {})
+    }), this.state.editorView === _constants.FILE_EDITOR_STATUS.ADDITION && /*#__PURE__*/_react.default.createElement(_additionPreviewer.default, {
+      config: this.props.config,
+      deleteImage: this.deleteImage,
+      handleFilesChange: this.handleFilesChange,
+      uploadLocalFileValue: this.state.uploadLocalFileValue,
+      togglePreviewer: this.togglePreviewer,
+      fileUploadCompleted: this.fileUploadCompleted,
+      addUploadedFile: this.addUploadedFile,
+      showImageListPreviewer: this.showImageListPreviewer,
+      uploadFile: this.uploadFile
+    }))));
   }
 }
 var _default = exports.default = FileEditor;

package/lib/FileEditor/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFileUploadTime = exports.bytesToSize = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+const getFileUploadTime = file => {
+  return file.upload_time ? (0, _dayjs.default)(file.upload_time).format('YYYY-MM-DD HH:mm') : '';
+};
+exports.getFileUploadTime = getFileUploadTime;
+const bytesToSize = bytes => {
+  if (typeof bytes == 'undefined') return ' ';
+  if (bytes < 0) return '--';
+  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  if (bytes === 0) return bytes + ' ' + sizes[0];
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1000)), 10);
+  if (i === 0) return bytes + ' ' + sizes[i];
+  return (bytes / 1000 ** i).toFixed(1) + ' ' + sizes[i];
+};
+exports.bytesToSize = bytesToSize;

package/lib/FileItemFormatter/index.js

@@ -1,26 +1,25 @@
 "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 = _interopRequireWildcard(require("react"));
-var _utils = require("./utils");
-class FileItemFormatter extends _react.Component {
-  render() {
-    const {
-      file
-    } = this.props;
-    const {
-      fileIconUrl,
-      isImage
-    } = (0, _utils.getFileThumbnailInfo)(file);
-    return /*#__PURE__*/_react.default.createElement("img", {
-      className: "file-item-icon ".concat(isImage ? 'img' : ''),
-      src: fileIconUrl,
-      alt: (file === null || file === void 0 ? void 0 : file.name) || ''
-    });
-  }
-}
-exports.default = FileItemFormatter;
+var _react = _interopRequireDefault(require("react"));
+var _url = require("../utils/url");
+const FileItemFormatter = _ref => {
+  let {
+    file,
+    config
+  } = _ref;
+  const {
+    fileIconUrl,
+    isImage
+  } = (0, _url.getFileThumbnailInfo)(file, config);
+  return /*#__PURE__*/_react.default.createElement("img", {
+    className: "file-item-icon ".concat(isImage ? 'img' : ''),
+    src: fileIconUrl,
+    alt: (file === null || file === void 0 ? void 0 : file.name) || ''
+  });
+};
+var _default = exports.default = FileItemFormatter;

package/lib/FileUploader/index.css

@@ -0,0 +1,9 @@
+.dtable-ui-upload-image {
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  font-size: 0;
+  cursor: pointer;
+}

package/lib/FileUploader/index.js

@@ -6,26 +6,280 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
+var _getEventTransfer = _interopRequireDefault(require("../utils/get-event-transfer"));
+var _url = require("../utils/url");
+require("./index.css");
+_dayjs.default.extend(_utc.default);
+const MAX_UPLOAD_FILES = 10;
 class FileUploader extends _react.default.Component {
   constructor(props) {
+    var _this2;
     super(props);
-    this.onFilesChanged = () => {};
-    this.uploadFiles = function (fileList) {
-      let isMultiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    };
-    this.checkRepeat = () => {};
-    this.cancelUploadFile = () => {};
-    this.onFileUploadProgress = () => {};
-    this.onFileUploadSuccss = () => {};
-    this.onFileUploadFailed = () => {};
-    this.state = {};
-    this.uploadFiles = [];
+    _this2 = this;
+    this.onInputFile = e => {
+      e.nativeEvent.stopImmediatePropagation();
+      e.stopPropagation();
+    };
+    this.uploadFileClick = () => {
+      this.uploadFileRef.click();
+    };
+    this.onDragEnter = e => {
+      const {
+        isSupportDragDrop,
+        updateParentTips
+      } = this.props;
+      if (isSupportDragDrop) {
+        e.preventDefault();
+        this.enteredCounter++;
+        if (this.enteredCounter !== 0) {
+          updateParentTips(true);
+        }
+      }
+    };
+    this.onDragOver = e => {
+      const {
+        isSupportDragDrop
+      } = this.props;
+      if (isSupportDragDrop) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    this.onDragLeave = e => {
+      const {
+        isSupportDragDrop,
+        updateParentTips
+      } = this.props;
+      if (isSupportDragDrop) {
+        this.enteredCounter--;
+        if (this.enteredCounter === 0) {
+          updateParentTips(false);
+        }
+      }
+    };
+    this.onDrop = event => {
+      const {
+        isSupportDragDrop,
+        updateParentTips,
+        onCellTipShow
+      } = this.props;
+      if (isSupportDragDrop) {
+        this.enteredCounter = 0;
+        updateParentTips(false);
+        let files = event.dataTransfer.files;
+        if (files.length === 0) {
+          if (onCellTipShow) onCellTipShow(-1);
+          return;
+        }
+        this.handleFilesChange(files);
+        event.preventDefault();
+      }
+    };
+    this.onPaste = event => {
+      const {
+        isSupportPaste
+      } = this.props;
+      if (isSupportPaste) {
+        event.stopPropagation();
+        let cliperData = (0, _getEventTransfer.default)(event);
+        if (cliperData.files) {
+          let files = cliperData.files;
+          this.handleFilesChange(files, true);
+        }
+      }
+    };
+    this.onMouseEnter = () => {
+      const {
+        updateParentTips,
+        uploadType
+      } = this.props;
+      if (uploadType === 'image') {
+        if (updateParentTips) updateParentTips(true, uploadType);
+      }
+    };
+    this.onMouseLeave = () => {
+      const {
+        updateParentTips,
+        uploadType
+      } = this.props;
+      if (uploadType === 'image') {
+        if (updateParentTips) updateParentTips(false, uploadType);
+      }
+    };
+    this.uploadFilesChange = event => {
+      this.handleFilesChange(event.target.files);
+    };
+    this.handleFilesChange = function (files) {
+      let isPasteUpload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      const _this = _this2;
+      const {
+        uploadType,
+        updateUploadFileList,
+        onCellTipShow
+      } = _this2.props;
+      let uploadFileList = [];
+      let dealFileCnt = 0;
+      let allFileLen = files.length;
+      function checkLoadFinish() {
+        if (dealFileCnt === allFileLen - 1) {
+          if (uploadFileList.length === 0) {
+            if (onCellTipShow) onCellTipShow(uploadFileList.length);
+            return;
+          }
+          if (updateUploadFileList) updateUploadFileList(uploadFileList);
+          _this.uploadFilesInBatch(uploadFileList);
+        }
+        dealFileCnt++;
+      }
+      for (let i = 0; i < allFileLen; i++) {
+        let file = files[i];
+        if (isPasteUpload && file.name === 'image.png') {
+          let newName = "image-".concat((0, _dayjs.default)().format('YYYY-MM-DD-HH-mm'), ".png");
+          file = new File([file], newName, {
+            type: file.type
+          });
+        }
+        try {
+          let fileReader = new FileReader();
+          fileReader.readAsDataURL(file);
+          fileReader.addEventListener('load', function (event) {
+            let isImage = /image/i.test(file.type);
+            if (uploadType === 'file' || isImage) {
+              let uploadFileItem = {
+                name: file.name,
+                fileIconUrl: isImage ? event.target.result : (0, _url.getFileIconUrl)(file.name, file.type),
+                isUploading: true,
+                isErrorTip: false,
+                file: file,
+                size: file.size,
+                url: '',
+                type: uploadType === 'file' ? 'file' : '',
+                percent: 0
+              };
+              uploadFileList.push(uploadFileItem);
+            }
+            checkLoadFinish();
+          }, false);
+          fileReader.addEventListener('error', function (e) {
+            checkLoadFinish();
+          }, false);
+        } catch (event) {
+          checkLoadFinish();
+        }
+      }
+    };
+    this.uploadFilesInBatch = files => {
+      const fileUploadPromises = [];
+      const length = MAX_UPLOAD_FILES + this.start > files.length ? files.length : MAX_UPLOAD_FILES + this.start;
+      for (let i = this.start; i < length; i++) {
+        let file = files[i];
+        fileUploadPromises.push(this.createPromise(file));
+      }
+      this.uploadFilesPromise(fileUploadPromises, files);
+    };
+    this.uploadFilesPromise = (fileUploadPromises, files) => {
+      Promise.all(fileUploadPromises).then(res => {
+        this.start += MAX_UPLOAD_FILES;
+        if (this.start + MAX_UPLOAD_FILES - files.length >= 10) {
+          this.start = 0;
+          return;
+        }
+        this.uploadFilesInBatch(files);
+      });
+    };
+    this.handleFileChange = (fileMessage, callback) => {
+      const {
+        onFileUploadFailed
+      } = this.props;
+      this.uploadFile(fileMessage).then(res => {
+        const data = res;
+        this.uploadFileMessage({
+          data,
+          fileMessage
+        });
+        callback && callback();
+      }).catch(error => {
+        fileMessage.isErrorTip = true;
+        fileMessage.error = error;
+        if (onFileUploadFailed) onFileUploadFailed(fileMessage);
+      });
+    };
+    this.createPromise = fileMessage => {
+      const _this = this;
+      return new Promise(function (resolve, reject) {
+        _this.handleFileChange(fileMessage, resolve);
+      });
+    };
+    this.uploadFileMessage = _ref => {
+      let {
+        data = {},
+        fileMessage
+      } = _ref;
+      fileMessage.name = data.name;
+      fileMessage.isUploading = false;
+      fileMessage.size = data.size;
+      fileMessage.url = data.url;
+      fileMessage.upload_time = (0, _dayjs.default)().utc().format('YYYY-MM-DDTHH:mm:ss.SSSZ');
+      this.props.onFileUploadSuccess(fileMessage);
+    };
+    this.uploadFile = fileMessage => {
+      return this.props.uploadFile(fileMessage.file, event => this.onUploadProgress(event, fileMessage));
+    };
+    this.reuploadFile = fileMessage => {
+      fileMessage.isErrorTip = false;
+      this.handleFileChange(fileMessage);
+    };
+    this.onUploadProgress = (event, fileMessage) => {
+      const {
+        onFileUploadProgress
+      } = this.props;
+      let uploadPercent = Math.floor(event.loaded / event.total * 100);
+      fileMessage.percent = uploadPercent;
+      if (onFileUploadProgress) onFileUploadProgress(fileMessage);
+    };
+    this.enteredCounter = 0; // Determine whether to enter the child element to avoid dragging bubbling bugs。
+    this.start = 0;
+  }
+  componentWillUnmount() {
+    // prevent async operation
+    this.setState = (state, callback) => {
+      return;
+    };
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("input", {
+    const {
+      uploadType
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onDragEnter: this.onDragEnter,
+      onDragOver: this.onDragOver,
+      onDragLeave: this.onDragLeave,
+      onDrop: this.onDrop,
+      onPaste: this.onPaste,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      onClick: this.uploadFileClick,
+      className: this.props.className
+    }, this.props.children, uploadType === 'file' && /*#__PURE__*/_react.default.createElement("input", {
+      type: "file",
+      className: "dtable-ui-upload-image",
+      ref: ref => this.uploadFileRef = ref,
+      onClick: this.onInputFile,
+      onChange: this.uploadFilesChange,
+      value: "",
+      multiple: true
+    }), uploadType === 'image' && /*#__PURE__*/_react.default.createElement("input", {
       type: "file",
-      onChange: this.onFilesChanged
-    });
+      className: "dtable-ui-upload-image",
+      accept: "image/*",
+      ref: ref => this.uploadFileRef = ref,
+      onClick: this.onInputFile,
+      onChange: this.uploadFilesChange,
+      value: "",
+      multiple: true
+    }));
   }
 }
 var _default = exports.default = FileUploader;

package/lib/FormulaFormatter/index.js

@@ -10,6 +10,7 @@ var _dtableUtils = require("dtable-utils");
 var _baseFormatterConfig = _interopRequireDefault(require("../formatterConfig/base-formatter-config"));
 var _TextFormatter = _interopRequireDefault(require("../TextFormatter"));
 var _utils = require("./utils");
+var _utils2 = require("../utils/utils");
 var _cellValueValidator = _interopRequireDefault(require("./cell-value-validator"));
 require("./index.css");
 class FormulaFormatter extends _react.default.Component {
@@ -114,7 +115,7 @@ class FormulaFormatter extends _react.default.Component {
       return /*#__PURE__*/_react.default.cloneElement(Formatter, {
         ...formatterProps
       });
-    } else if ((0, _utils.isFunction)(Formatter)) {
+    } else if ((0, _utils2.isFunction)(Formatter)) {
       return /*#__PURE__*/_react.default.createElement(Formatter, formatterProps);
     }
     return /*#__PURE__*/_react.default.createElement(_TextFormatter.default, formatterProps);