dtable-ui-component 5.3.1-beta1 → 6.0.0

package/lib/FileItemFormatter/utils.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.imageCheck = exports.getFileThumbnailInfo = exports.getFileIconUrl = void 0;
+var _url = require("../utils/url");
+const FILEEXT_ICON_MAP = {
+  // text file
+  md: 'txt.png',
+  txt: 'txt.png',
+  // pdf file
+  pdf: 'pdf.png',
+  // document file
+  doc: 'word.png',
+  docx: 'word.png',
+  odt: 'word.png',
+  fodt: 'word.png',
+  ppt: 'ppt.png',
+  pptx: 'ppt.png',
+  odp: 'ppt.png',
+  fodp: 'ppt.png',
+  xls: 'excel.png',
+  xlsx: 'excel.png',
+  ods: 'excel.png',
+  fods: 'excel.png',
+  // video
+  mp4: 'video.png',
+  ogv: 'video.png',
+  webm: 'video.png',
+  mov: 'video.png',
+  flv: 'video.png',
+  wmv: 'video.png',
+  rmvb: 'video.png',
+  // music file
+  mp3: 'music.png',
+  oga: 'music.png',
+  ogg: 'music.png',
+  flac: 'music.png',
+  aac: 'music.png',
+  ac3: 'music.png',
+  wma: 'music.png',
+  // image file
+  jpg: 'pic.png',
+  jpeg: 'pic.png',
+  png: 'pic.png',
+  svg: 'pic.png',
+  gif: 'pic.png',
+  bmp: 'pic.png',
+  ico: 'pic.png',
+  // folder dir
+  folder: 'folder-192.png',
+  // default
+  default: 'file.png'
+};
+const getFileThumbnailInfo = fileItem => {
+  let fileIconUrl;
+  let isImage;
+  if (!fileItem.name) {
+    fileIconUrl = FILEEXT_ICON_MAP['default'];
+    isImage = false;
+  } else {
+    isImage = imageCheck(fileItem.name);
+    if (isImage) {
+      fileIconUrl = (0, _url.getImageThumbnailUrl)(fileItem.url);
+    } else {
+      fileIconUrl = require('./' + getFileIconUrl(fileItem.name, fileItem.type));
+    }
+  }
+  return {
+    fileIconUrl,
+    isImage
+  };
+};
+exports.getFileThumbnailInfo = getFileThumbnailInfo;
+const getFileIconUrl = (filename, direntType) => {
+  if (typeof direntType === 'string' && direntType === 'dir') {
+    return 'assets/folder/' + FILEEXT_ICON_MAP['folder'];
+  }
+  const identifierIndex = typeof filename === 'string' && filename.lastIndexOf('.');
+  if (identifierIndex === -1) {
+    return 'assets/file/192/' + FILEEXT_ICON_MAP['default'];
+  }
+  const file_ext = typeof filename === 'string' && filename.slice(identifierIndex + 1).toLowerCase() || 'default';
+  const iconUrl = FILEEXT_ICON_MAP[file_ext] ? 'assets/file/192/' + FILEEXT_ICON_MAP[file_ext] : 'assets/file/192/' + FILEEXT_ICON_MAP['default'];
+  return iconUrl;
+};
+exports.getFileIconUrl = getFileIconUrl;
+const imageCheck = filename => {
+  // no file ext
+  if (!filename || typeof filename !== 'string') return false;
+  if (filename.lastIndexOf('.') === -1) {
+    return false;
+  }
+  const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+  const image_exts = ['gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'webp'];
+  return image_exts.includes(file_ext);
+};
+exports.imageCheck = imageCheck;

package/lib/FileUploader/index.js

@@ -6,280 +6,26 @@ 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);
-    _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;
-    };
+    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 = [];
   }
   render() {
-    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", {
+    return /*#__PURE__*/_react.default.createElement("input", {
       type: "file",
-      className: "dtable-ui-upload-image",
-      accept: "image/*",
-      ref: ref => this.uploadFileRef = ref,
-      onClick: this.onInputFile,
-      onChange: this.uploadFilesChange,
-      value: "",
-      multiple: true
-    }));
+      onChange: this.onFilesChanged
+    });
   }
 }
 var _default = exports.default = FileUploader;

package/lib/FormulaFormatter/index.js

@@ -10,7 +10,6 @@ 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 {
@@ -115,7 +114,7 @@ class FormulaFormatter extends _react.default.Component {
       return /*#__PURE__*/_react.default.cloneElement(Formatter, {
         ...formatterProps
       });
-    } else if ((0, _utils2.isFunction)(Formatter)) {
+    } else if ((0, _utils.isFunction)(Formatter)) {
       return /*#__PURE__*/_react.default.createElement(Formatter, formatterProps);
     }
     return /*#__PURE__*/_react.default.createElement(_TextFormatter.default, formatterProps);

package/lib/FormulaFormatter/utils.js

@@ -6,7 +6,9 @@ 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) {
@@ -15,6 +17,35 @@ 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]') {

package/lib/LinkEditor/pc-link-editor-popover/index.js

@@ -55,7 +55,7 @@ class PCLinkEditorPopover extends _react.default.Component {
       position: 'absolute'
     });
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-editor-container dtable-ui-link-editor-popover",
+      className: "dtable-ui-editor-popover dtable-ui-link-editor-popover",
       style: popoverStyle
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "link-options-search"

package/lib/LongTextFormatter/index.js

@@ -8,12 +8,12 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _HtmlLongTextFormatter = _interopRequireDefault(require("../HtmlLongTextFormatter"));
 var _SimpleLongTextFormatter = _interopRequireDefault(require("../SimpleLongTextFormatter"));
-function LongTextFormatter(props) {
-  const {
-    isSample,
+function LongTextFormatter(_ref) {
+  let {
+    isSample = true,
     value,
     containerClassName
-  } = props;
+  } = _ref;
   if (isSample) {
     return /*#__PURE__*/_react.default.createElement(_SimpleLongTextFormatter.default, {
       value: value,
@@ -25,7 +25,4 @@ function LongTextFormatter(props) {
     containerClassName: containerClassName
   });
 }
-LongTextFormatter.defaultProps = {
-  isSample: true
-};
 var _default = exports.default = LongTextFormatter;

package/lib/MultipleSelectEditor/index.css

@@ -0,0 +1,9 @@
+.dtable-ui-multiple-select-editor {
+  position: relative;
+}
+
+.dtable-ui-select-editor-container {
+  display: inline-block;
+  height: 30px;
+  padding: 0 10px;
+}