dtable-ui-component 5.3.6 → 5.3.7

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/cell-value-validator.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _constants = require("../constants");
+var _dtableUtils = require("dtable-utils");
 const numberValidator = value => {
   return (value || value === 0) && Object.prototype.toString.call(value) === '[object Number]';
 };
@@ -15,22 +15,22 @@ const checkboxValidator = value => {
   return typeof value === 'boolean';
 };
 const validators = {
-  [_constants.CellType.NUMBER]: numberValidator,
-  [_constants.CellType.RATE]: numberValidator,
-  [_constants.CellType.DURATION]: numberValidator,
-  [_constants.CellType.CHECKBOX]: checkboxValidator,
-  [_constants.CellType.TEXT]: textValidator,
-  [_constants.CellType.DATE]: textValidator,
-  [_constants.CellType.CTIME]: textValidator,
-  [_constants.CellType.MTIME]: textValidator,
-  [_constants.CellType.GEOLOCATION]: textValidator,
-  [_constants.CellType.AUTO_NUMBER]: textValidator,
-  [_constants.CellType.URL]: textValidator,
-  [_constants.CellType.EMAIL]: textValidator,
-  [_constants.FORMULA_RESULT_TYPE.DATE]: textValidator,
-  [_constants.FORMULA_RESULT_TYPE.STRING]: textValidator,
-  [_constants.FORMULA_RESULT_TYPE.NUMBER]: numberValidator,
-  [_constants.FORMULA_RESULT_TYPE.BOOL]: checkboxValidator
+  [_dtableUtils.CellType.NUMBER]: numberValidator,
+  [_dtableUtils.CellType.RATE]: numberValidator,
+  [_dtableUtils.CellType.DURATION]: numberValidator,
+  [_dtableUtils.CellType.CHECKBOX]: checkboxValidator,
+  [_dtableUtils.CellType.TEXT]: textValidator,
+  [_dtableUtils.CellType.DATE]: textValidator,
+  [_dtableUtils.CellType.CTIME]: textValidator,
+  [_dtableUtils.CellType.MTIME]: textValidator,
+  [_dtableUtils.CellType.GEOLOCATION]: textValidator,
+  [_dtableUtils.CellType.AUTO_NUMBER]: textValidator,
+  [_dtableUtils.CellType.URL]: textValidator,
+  [_dtableUtils.CellType.EMAIL]: textValidator,
+  [_dtableUtils.FORMULA_RESULT_TYPE.DATE]: textValidator,
+  [_dtableUtils.FORMULA_RESULT_TYPE.STRING]: textValidator,
+  [_dtableUtils.FORMULA_RESULT_TYPE.NUMBER]: numberValidator,
+  [_dtableUtils.FORMULA_RESULT_TYPE.BOOL]: checkboxValidator
 };
 const cellValueValidator = (cellValue, type) => {
   const validator = validators[type];

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);

package/lib/FormulaFormatter/utils.js

@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.convertValueToDtableLongTextValue = void 0;
 exports.isArrayFormatColumn = isArrayFormatColumn;
-exports.isFunction = void 0;
 exports.isSimpleCellFormatter = isSimpleCellFormatter;
-exports.openUrlLink = exports.isValidUrl = exports.isValidCellValue = void 0;
 var _constants = require("../constants");
 var _normalizeLongTextValue = _interopRequireDefault(require("../SimpleLongTextFormatter/normalize-long-text-value"));
 function isSimpleCellFormatter(type) {
@@ -17,35 +15,6 @@ function isSimpleCellFormatter(type) {
 function isArrayFormatColumn(columnType) {
   return _constants.ARRAY_FORMAT_COLUMNS.includes(columnType);
 }
-const isFunction = functionToCheck => {
-  const getType = {};
-  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
-};
-exports.isFunction = isFunction;
-const isValidCellValue = value => {
-  if (value === undefined) return false;
-  if (value === null) return false;
-  if (value === '') return false;
-  if (JSON.stringify(value) === '{}') return false;
-  if (JSON.stringify(value) === '[]') return false;
-  return true;
-};
-exports.isValidCellValue = isValidCellValue;
-const isValidUrl = url => {
-  const reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
-  return reg.test(url);
-};
-exports.isValidUrl = isValidUrl;
-const openUrlLink = url => {
-  let a = document.createElement('a');
-  document.body.appendChild(a);
-  a.href = url;
-  a.target = '_blank';
-  a.rel = 'noopener noreferrer';
-  a.click();
-  document.body.removeChild(a);
-};
-exports.openUrlLink = openUrlLink;
 const convertValueToDtableLongTextValue = value => {
   const valueType = Object.prototype.toString.call(value);
   if (value && valueType === '[object String]') {