dtable-ui-component 5.3.0 → 5.3.1-beta

package/lib/EmailEditor/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 _reactDom = _interopRequireDefault(require("react-dom"));
+var _editorBase = _interopRequireDefault(require("../common/editor-base"));
+var _constants = require("../constants");
+class EmailEditor extends _editorBase.default {
+  constructor() {
+    super(...arguments);
+    this.setInputRef = input => {
+      this.input = input;
+      return this.input;
+    };
+    this.onBlur = () => {
+      this.props.isInModal ? this.props.onCommit(this.getValue()) : this.props.onBlur();
+    };
+    this.onCut = e => {
+      e.stopPropagation();
+    };
+    this.onPaste = e => {
+      e.stopPropagation();
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        e.preventDefault();
+        this.onBlur();
+        if (this.props.selectDownCell) this.props.selectDownCell();
+      }
+    };
+  }
+  getValue() {
+    return this.getInputNode().value.trim();
+  }
+  getInputNode() {
+    const domNode = _reactDom.default.findDOMNode(this.input);
+    if (domNode.tagName === 'INPUT') {
+      return domNode;
+    }
+    return domNode.querySelector('input:not([type=hidden])');
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      ref: this.setInputRef,
+      onBlur: this.onBlur,
+      onCut: this.onCut,
+      onPaste: this.onPaste,
+      className: "form-control",
+      defaultValue: this.props.value,
+      onKeyDown: this.onKeyDown
+    });
+  }
+}
+var _default = exports.default = EmailEditor;

package/lib/FileEditor/addition-previewer/index.css

@@ -0,0 +1 @@
+@import url('../../ImageEditor/addition-previewer/index.css');

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

@@ -0,0 +1,52 @@
+"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 _localFileAddition = _interopRequireDefault(require("./local-file-addition"));
+var _lang = require("../../lang");
+require("./index.css");
+class AdditionPreviewer extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggle = tab => {
+      if (this.state.activeTab !== tab) {
+        this.setState({
+          activeTab: tab
+        });
+      }
+    };
+    this.state = {
+      activeTab: 'localFiles'
+    };
+  }
+  render() {
+    let {
+      activeTab
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-image-addition-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-image-addition-left"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-image-addition-nav"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-addition-item ".concat(activeTab === 'localFiles' ? 'dtable-ui-addition-item-selected' : ''),
+      onClick: this.toggle.bind(this, 'localFiles')
+    }, (0, _lang.getLocale)('Local_Files')))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-image-addition-right"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-image-addition-right-container"
+    }, activeTab === 'localFiles' && /*#__PURE__*/_react.default.createElement(_localFileAddition.default, {
+      config: this.props.config,
+      uploadLocalFileValue: this.props.uploadLocalFileValue,
+      deleteFile: this.props.deleteFile,
+      fileUploadCompleted: this.props.fileUploadCompleted,
+      uploadFile: this.props.uploadFile
+    }))));
+  }
+}
+var _default = exports.default = AdditionPreviewer;

package/lib/FileEditor/addition-previewer/local-file-addition/index.css

@@ -0,0 +1 @@
+@import url('../../../ImageEditor/addition-previewer/local-image-addition/index.css');

package/lib/FileEditor/addition-previewer/local-file-addition/index.js

@@ -0,0 +1,252 @@
+"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 = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _UploadProgress = _interopRequireDefault(require("../../../UploadProgress"));
+var _url = require("../../../utils/url");
+var _FileUploader = _interopRequireDefault(require("../../../FileUploader"));
+var _lang = require("../../../lang");
+require("./index.css");
+class LocalFileAddition extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.setFileTipShow = isFileTipShow => {
+      this.setState({
+        isFileTipShow: isFileTipShow
+      });
+    };
+    this.updateUploadFileList = fileListInfo => {
+      if (!fileListInfo) {
+        this.setState({
+          thumbnailSrcList: []
+        });
+        return;
+      }
+      this.setState({
+        thumbnailSrcList: fileListInfo
+      });
+    };
+    this.onFileUploadSuccess = fileMessage => {
+      this.hideDeleteIcon();
+      let {
+        thumbnailSrcList
+      } = this.state;
+      const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
+      thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
+      if (thumbnailSrcList.every(fileItem => !fileItem.isUploading)) {
+        this.setState({
+          thumbnailSrcList: []
+        });
+      }
+      this.props.fileUploadCompleted(fileMessage);
+    };
+    this.onFileUploadProgress = fileMessage => {
+      let {
+        thumbnailSrcList
+      } = this.state;
+      const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
+      thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
+      this.setState({
+        thumbnailSrcList
+      });
+    };
+    this.onFileUploadFailed = fileMessage => {
+      let {
+        thumbnailSrcList
+      } = this.state;
+      const findUploadFileIndex = this.findUploadFileIndex(fileMessage);
+      thumbnailSrcList.splice(findUploadFileIndex, 1, fileMessage);
+      this.setState({
+        thumbnailSrcList
+      });
+    };
+    this.findUploadFileIndex = uploadFileMessage => {
+      let {
+        thumbnailSrcList
+      } = this.state;
+      let uploadFileIndex = thumbnailSrcList.findIndex(item => item.name === uploadFileMessage.file.name);
+      return uploadFileIndex;
+    };
+    this.deleteFile = (event, index) => {
+      this.props.deleteFile(index, 'localFile');
+    };
+    this.showDeleteIcon = (event, index) => {
+      this.setState({
+        isShowDeleteIcon: true,
+        enterFileIndex: index
+      });
+    };
+    this.hideDeleteIcon = () => {
+      this.setState({
+        isShowDeleteIcon: false,
+        enterFileIndex: -1
+      });
+    };
+    this.fileUploadAgain = (event, fileMessage) => {
+      this.uploaderFileRef.reuploadFile(fileMessage);
+    };
+    this.tooltipToggle = () => {
+      if (this.state.tooltipOpen) {
+        this.setState({
+          isShowDeleteIcon: false,
+          enterFileIndex: -1
+        });
+      }
+      this.setState({
+        tooltipOpen: !this.state.tooltipOpen
+      });
+    };
+    this.renderMultipleFilesArr = () => {
+      let {
+        thumbnailSrcList
+      } = this.state;
+      let fileArr = [];
+      if (Array.isArray(this.props.uploadLocalFileValue)) {
+        let uploadedFileList = this.renderUploadedFile();
+        if (uploadedFileList) {
+          fileArr.push(...uploadedFileList);
+        }
+        if (Array.isArray(thumbnailSrcList) && thumbnailSrcList.length > 0) {
+          let thumbnailList = thumbnailSrcList.map((fileThumbnailItem, index) => {
+            let uploadFile = fileThumbnailItem.percent === 100 && !fileThumbnailItem.isErrorTip;
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+              key: "dtable-ui-image-wrapper-circle".concat(index)
+            }, fileThumbnailItem.isUploading && /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-wrapper"
+            }, /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-percent"
+            }, /*#__PURE__*/_react.default.createElement("img", {
+              src: fileThumbnailItem.fileIconUrl,
+              style: {
+                position: 'absolute',
+                zIndex: "".concat(uploadFile ? 3 : 1),
+                maxHeight: '100%'
+              },
+              alt: ""
+            }), fileThumbnailItem.percent < 100 && /*#__PURE__*/_react.default.createElement(_UploadProgress.default, {
+              uploadPercent: fileThumbnailItem.percent || 0
+            }), uploadFile && /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-success"
+            }, /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-success-scale"
+            }, /*#__PURE__*/_react.default.createElement("span", {
+              className: "dtable-ui-image-upload-success-tip"
+            }, (0, _lang.getLocale)('Indexing')))), /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-mask"
+            }), fileThumbnailItem.isErrorTip && /*#__PURE__*/_react.default.createElement("div", {
+              className: "dtable-ui-image-upload-error-tip"
+            }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Network_Error')), /*#__PURE__*/_react.default.createElement("span", {
+              className: "dtable-ui-image-upload-again",
+              onClick: event => this.fileUploadAgain(event, fileThumbnailItem)
+            }, (0, _lang.getLocale)('Re_upload'))))));
+          });
+          fileArr.push(...thumbnailList);
+        }
+      }
+      return fileArr;
+    };
+    this.renderUploadedFile = () => {
+      const {
+        config,
+        uploadLocalFileValue
+      } = this.props;
+      let uploadedFileList = [];
+      uploadedFileList = uploadLocalFileValue.length > 0 && uploadLocalFileValue.map((fileItem, index) => {
+        let {
+          fileIconUrl
+        } = (0, _url.getFileThumbnailInfo)(fileItem, config);
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: 'dtable-ui-image-wrapper-' + index,
+          className: "dtable-ui-image-wrapper",
+          id: "file-content-tip-".concat(index),
+          onMouseEnter: event => this.showDeleteIcon(event, index),
+          onMouseLeave: this.hideDeleteIcon
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-ui-image-content"
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          src: fileIconUrl,
+          alt: "",
+          style: {
+            maxHeight: '100%'
+          }
+        })), this.state.isShowDeleteIcon && this.state.enterFileIndex === index && /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-delete-image-icon",
+          onClick: event => this.deleteFile(event, index)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "image-delete-span"
+        }, "x")), this.state.isShowDeleteIcon && this.state.enterFileIndex === index && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
+          toggle: this.tooltipToggle,
+          delay: {
+            show: 0,
+            hide: 0
+          },
+          target: "file-content-tip-".concat(index),
+          placement: "bottom",
+          isOpen: this.state.tooltipOpen
+        }, fileItem.name));
+      });
+      return uploadedFileList;
+    };
+    this.renderUploadFileWrapper = fileArr => {
+      let {
+        isFileTipShow
+      } = this.state;
+      let editorContent = fileArr.length === 0 ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-tip-addition ".concat(isFileTipShow ? 'dtable-ui-image-drop-active' : '')
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-dtable-ui-image-add-icon"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-add-files"
+      })), isFileTipShow ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-add-span"
+      }, (0, _lang.getLocale)('Drag_and_drop_to_add_a_file')) : /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-add-span"
+      }, (0, _lang.getLocale)('Drag_and_drop_files_or_click_here_to_add')))) : /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-add-box"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-image-add-button ".concat(isFileTipShow ? 'dtable-ui-image-wrapper-drop-active' : '')
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: "dtable-ui-image-add-span"
+      }, (0, _lang.getLocale)('Upload'))));
+      return /*#__PURE__*/_react.default.createElement(_FileUploader.default, {
+        uploadType: "file",
+        isSupportDragDrop: true,
+        className: fileArr.length === 0 ? (0, _classnames.default)('dtable-ui-image-upload-container', {
+          'dtable-ui-image-upload-container-active': isFileTipShow
+        }) : 'dtable-ui-image-wrapper',
+        updateParentTips: this.setFileTipShow,
+        onFileUploadSuccess: this.onFileUploadSuccess,
+        onFileUploadProgress: this.onFileUploadProgress,
+        updateUploadFileList: this.updateUploadFileList,
+        onFileUploadFailed: this.onFileUploadFailed,
+        ref: ref => this.uploaderFileRef = ref,
+        uploadFile: this.props.uploadFile
+      }, editorContent);
+    };
+    this.state = {
+      isFileTipShow: false,
+      isShowDeleteIcon: false,
+      enterFileIndex: -1,
+      tooltipOpen: false,
+      uploadMessageList: [],
+      thumbnailSrcList: [],
+      reUploadFile: null
+    };
+  }
+  render() {
+    let fileArr = this.renderMultipleFilesArr();
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fileArr, this.renderUploadFileWrapper(fileArr));
+  }
+}
+var _default = exports.default = LocalFileAddition;

package/lib/FileEditor/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FILES_FOLDER = void 0;
+const FILES_FOLDER = exports.FILES_FOLDER = 'files';

package/lib/FileEditor/files-previewer/file-previewer/dropdown-menu.js

@@ -0,0 +1,74 @@
+"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 _reactstrap = require("reactstrap");
+var _lang = require("../../../lang");
+class FileDropdownMenu extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onDropdownToggleClick = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.setState({
+        isItemMenuShow: !this.state.isItemMenuShow
+      }, () => {
+        if (this.state.isItemMenuShow) {
+          this.props.freezeItem();
+        } else {
+          this.props.unFreezeItem();
+          this.props.resetState();
+        }
+      });
+    };
+    this.onDeleteFile = event => {
+      this.props.resetState();
+      this.props.onDeleteFile(this.props.itemIndex);
+    };
+    this.onRenameFile = event => {
+      event.nativeEvent.stopImmediatePropagation();
+      this.props.onRenameFile();
+    };
+    this.state = {
+      isItemMenuShow: false,
+      isRenameDialogShow: false
+    };
+  }
+  render() {
+    const {
+      onRenameFile,
+      onDeleteFile
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
+      isOpen: this.state.isItemMenuShow,
+      toggle: this.onDropdownToggleClick,
+      className: "file-dropdown-menu"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
+      tag: "span",
+      role: "button",
+      "data-toggle": "dropdown",
+      "aria-expanded": this.state.isItemMenuShow,
+      className: "file-dropdown-icon",
+      title: (0, _lang.getLocale)('More_operations'),
+      "aria-label": (0, _lang.getLocale)('More_operations')
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-more-vertical file-dropdown-more"
+    })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
+      className: "dtable-dropdown-menu dropdown-menu"
+    }, onRenameFile && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+      onClick: this.onRenameFile
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "item-icon dtable-font dtable-icon-rename"
+    }), (0, _lang.getLocale)('Rename')), onDeleteFile && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+      onClick: this.onDeleteFile
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "item-icon dtable-font dtable-icon-delete"
+    }), (0, _lang.getLocale)('Delete'))));
+  }
+}
+var _default = exports.default = FileDropdownMenu;

package/lib/FileEditor/files-previewer/file-previewer/file-name-editor/index.css

@@ -0,0 +1,5 @@
+.dtable-ui-file-name-input {
+  height: 24px;
+  cursor: text;
+  padding: 0 6px;
+}

package/lib/FileEditor/files-previewer/file-previewer/file-name-editor/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _constants = require("../../../../constants");
+require("./index.css");
+class FileNameEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onMouseDown = e => {
+      if (this.fileNameRef && !this.fileNameRef.contains(e.target)) {
+        this.onSave();
+      }
+    };
+    this.onChange = e => {
+      this.setState({
+        fileName: e.target.value
+      });
+    };
+    this.onKeyDown = e => {
+      e.stopPropagation();
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        e.preventDefault();
+        this.onSave();
+      }
+    };
+    this.onSave = () => {
+      const {
+        renameFile,
+        name,
+        closeRenameFile,
+        itemIndex
+      } = this.props;
+      let newName = this.state.fileName.trim();
+      if (newName === name || newName === '') {
+        closeRenameFile();
+        return;
+      }
+      this.unSaved = false;
+      renameFile(itemIndex, newName);
+      closeRenameFile();
+    };
+    this.state = {
+      fileName: props.name || ''
+    };
+    this.unSaved = true;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onMouseDown);
+  }
+  componentWillUnmount() {
+    if (this.unSaved) {
+      this.onSave();
+    }
+    document.removeEventListener('mousedown', this.onMouseDown);
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "pt-1",
+      ref: ref => this.fileNameRef = ref
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      className: "dtable-ui-file-name-input",
+      type: "text",
+      value: this.state.fileName,
+      onChange: this.onChange,
+      onKeyDown: this.onKeyDown,
+      onBlur: this.onSave,
+      autoFocus: true
+    }));
+  }
+}
+var _default = exports.default = FileNameEditor;

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

@@ -0,0 +1,88 @@
+.dtable-ui-file-editor-previewer-box {
+  display: flex;
+  height: 48px;
+  width: 100%;
+  padding: 0px 16px;
+  justify-content: space-between;
+}
+
+.dtable-ui-file-editor-previewer-box.dtable-ui-file-editor-previewer-box-highlight {
+  background-color: #f5f5f5;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item {
+  display: flex;
+  align-items: center;
+  width: calc(100% - 56px);
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-previewer-icon {
+  height: 100%;
+  line-height: 48px;
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-previewer-icon img {
+  width: 36px;
+  height: 36px;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-previewer-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-previewer-item-name {
+  max-width: 480px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-previewer-item .dtable-ui-file-editor-preview-item-detail {
+  color: #c0c0c0;
+}
+
+.dtable-ui-file-editor-previewer-box .dtable-ui-file-editor-preview-item-detail .file-upload-time {
+  white-space: pre-wrap;
+}
+
+.dtable-ui-file-editor-previewer-operation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dtable-ui-file-editor-previewer-operation .file-dropdown-menu .file-dropdown-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  width: 24px;
+}
+
+.file-dropdown-menu .file-dropdown-icon .dtable-icon-more-vertical {
+  font-size: 14px;
+  color: #999;
+}
+
+.dtable-ui-file-editor-previewer-operation .file-download-icon,
+.file-dropdown-menu .file-dropdown-icon .file-dropdown-more {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #999;
+  cursor: pointer;
+}
+
+.file-dropdown-menu .file-dropdown-icon:hover .file-dropdown-more,
+.dtable-ui-file-editor-previewer-operation .file-download-icon:hover {
+  color: #000;
+  opacity: 0.75;
+}
+
+