dtable-ui-component 5.3.1-beta → 5.3.1

package/lib/ImageEditor/addition-previewer/local-image-addition/index.css

@@ -1,125 +0,0 @@
-.dtable-ui-image-add-box {
-  display: flex;
-  background: #f0f0f0;
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.dtable-ui-image-add-box .dtable-ui-image-add-button {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 16px 10px 0;
-}
-
-.dtable-ui-image-add-box .dtable-ui-image-add-button i {
-  color: #999;
-  font-size: 25px;
-}
-
-dtable-ui-image-add-box .dtable-ui-image-add-span {
-  color: #999;
-  margin-top: 5px;
-  font-size: 12px;
-}
-
-.dtable-ui-dtable-ui-image-add-icon {
-  line-height: 1;
-}
-
-.dtable-ui-dtable-ui-image-add-icon i {
-  font-size: 54px;
-  color: #ccc;
-}
-
-.dtable-ui-image-tip-addition {
-  text-align: center;
-  padding: 6rem 4rem;
-  width: 100%;
-}
-
-.dtable-ui-image-upload-percent {
-  width: 100%;
-  height: 100%;
-  border-radius: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.dtable-ui-image-upload-success {
-  width: 60px;
-  height: 60px;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 2px;
-  position: absolute;
-  z-index: 5;
-}
-
-.dtable-ui-image-upload-success .dtable-ui-image-upload-success-scale {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.dtable-ui-image-upload-success .dtable-ui-image-upload-success-scale .dtable-ui-image-upload-success-tip {
-  color: #fff;
-  font-size: 12px;
-  width: 100%;
-  transform: scale(0.8);
-  text-align: center;
-}
-
-.dtable-ui-image-upload-success .dtable-ui-image-upload-success-icon i {
-  display: inline-block;
-  color: #757474;
-}
-
-.dtable-ui-image-upload-mask {
-  height: 100%;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 2;
-  border-radius: 2px;
-}
-
-.dtable-ui-image-upload-error-tip {
-  z-index: 3;
-  font-size: 12px;
-  transform: scale(0.7);
-  position: absolute;
-  color: #fff;
-  white-space: nowrap;
-  text-align: center;
-}
-
-.dtable-ui-image-upload-again {
-  text-decoration: underline;
-  cursor: pointer;
-  margin-left: 3px;
-}
-
-.dtable-delete-image-icon {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  height: 32px;
-  width: 32px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  text-align: center;
-  cursor: pointer;
-  transform: scale(0.5);
-}
-
-.dtable-delete-image-icon .image-delete-span {
-  font-size: 20px;
-}

package/lib/ImageEditor/addition-previewer/local-image-addition/index.js

@@ -1,254 +0,0 @@
-"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 _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 LocalImageAddition extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.setFileTipShow = (isImageTipShow, uploadType) => {
-      if (uploadType && uploadType === 'image') {
-        this.setState({
-          isImagePasteTipShow: isImageTipShow
-        });
-        return;
-      }
-      this.setState({
-        isImageTipShow: isImageTipShow
-      });
-    };
-    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.onFileUploadFailed = uploadedFileInfo => {
-      let {
-        thumbnailSrcList
-      } = this.state;
-      const findUploadFileIndex = this.findUploadFileIndex(uploadedFileInfo);
-      thumbnailSrcList.splice(findUploadFileIndex, 1, uploadedFileInfo);
-      this.setState({
-        thumbnailSrcList
-      });
-    };
-    this.findUploadFileIndex = fileMessage => {
-      let {
-        thumbnailSrcList
-      } = this.state;
-      let uploadFileIndex = thumbnailSrcList.findIndex(item => item.name === fileMessage.file.name);
-      return uploadFileIndex;
-    };
-    this.onFileUploadProgress = uploadMessage => {
-      if (!uploadMessage) {
-        this.setState({
-          uploadMessageList: []
-        });
-        return;
-      }
-      let {
-        uploadMessageList
-      } = this.state;
-      let newUploadMessageList = uploadMessageList.slice(0);
-      let uploadFile = uploadMessageList.find(item => item.uploadName === uploadMessage.uploadName);
-      if (uploadFile) {
-        uploadFile.uploadPercent = uploadMessage.uploadPercent;
-      } else {
-        newUploadMessageList.push(uploadMessage);
-      }
-      this.setState({
-        uploadMessageList: newUploadMessageList
-      });
-    };
-    this.deleteImage = (event, index) => {
-      this.props.deleteImage(index, 'localPicture');
-    };
-    this.fileUploadAgain = (event, uploadFileInfo) => {
-      this.uploaderFileRef.uploadFileAgain(uploadFileInfo);
-    };
-    this.onCellTipShow = code => {
-      //
-    };
-    this.showDeleteIcon = (event, index) => {
-      this.setState({
-        isShowDeleteIcon: true,
-        enterImageIndex: index
-      });
-    };
-    this.hideDeleteIcon = () => {
-      this.setState({
-        isShowDeleteIcon: false,
-        enterImageIndex: -1
-      });
-    };
-    this.renderMultipleFilesArr = () => {
-      let {
-        thumbnailSrcList
-      } = this.state;
-      let imageArr = [];
-      if (Array.isArray(this.props.uploadLocalImageValue)) {
-        let uploadedFileList = this.renderUploadedFile();
-        if (uploadedFileList) {
-          imageArr.push(...uploadedFileList);
-        }
-        if (Array.isArray(thumbnailSrcList) && thumbnailSrcList.length > 0) {
-          let thumbnailList = thumbnailSrcList.map((fileThumbnailItem, index) => {
-            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(fileThumbnailItem.percent === 100 ? 3 : 1),
-                maxHeight: '100%'
-              },
-              alt: ""
-            }), fileThumbnailItem.percent < 100 && /*#__PURE__*/_react.default.createElement(_UploadProgress.default, {
-              uploadPercent: fileThumbnailItem.percent || 0
-            }), fileThumbnailItem.percent === 100 && /*#__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'))))));
-          });
-          imageArr.push(...thumbnailList);
-        }
-      }
-      return imageArr;
-    };
-    this.renderUploadedFile = () => {
-      const {
-        uploadLocalImageValue
-      } = this.props;
-      let uploadedFileList = [];
-      uploadedFileList = uploadLocalImageValue.length > 0 && uploadLocalImageValue.map((imgSrc, index) => {
-        let imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(imgSrc);
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: 'dtable-ui-image-wrapper-' + index,
-          className: "dtable-ui-image-wrapper",
-          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: imageThumbnailUrl,
-          alt: "",
-          style: {
-            maxHeight: '100%'
-          }
-        })), this.state.isShowDeleteIcon && this.state.enterImageIndex === index && /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-delete-image-icon",
-          onClick: event => this.deleteImage(event, index)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "image-delete-span"
-        }, "x")));
-      });
-      return uploadedFileList;
-    };
-    this.renderUploadFileWrapper = imageArr => {
-      let {
-        isImageTipShow
-      } = this.state;
-      let editorContent;
-      let className = imageArr.length === 0 ? "dtable-ui-image-upload-container ".concat(isImageTipShow ? 'dtable-ui-image-upload-container-active' : '') : 'dtable-ui-image-wrapper';
-      if (imageArr.length === 0) {
-        editorContent = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-tip-addition ".concat(isImageTipShow ? '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"
-        })), isImageTipShow ? /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-add-span"
-        }, (0, _lang.getLocale)('Drag_and_drop_to_add_an_image')) : /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-add-span"
-        }, (0, _lang.getLocale)('Drag_and_drop_images_or_click_or_paste_here_to_add'))), this.state.isImagePasteTipShow && /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
-          className: "image-addition-paste",
-          autoFocus: true
-        }));
-      } else {
-        editorContent = /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-add-box"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-image-add-button ".concat(isImageTipShow ? '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: "image",
-        isSupportDragDrop: true,
-        isSupportPaste: true,
-        className: className,
-        updateParentTips: this.setFileTipShow,
-        onFileUploadSuccess: this.onFileUploadSuccess,
-        onFileUploadProgress: this.onFileUploadProgress,
-        updateUploadFileList: this.updateUploadFileList,
-        onFileUploadFailed: this.onFileUploadFailed,
-        ref: ref => this.uploaderFileRef = ref,
-        onCellTipShow: this.onCellTipShow,
-        uploadFile: this.props.uploadFile
-      }, editorContent);
-    };
-    this.state = {
-      isImageTipShow: false,
-      isShowDeleteIcon: false,
-      enterImageIndex: -1,
-      thumbnailSrcList: [],
-      uploadMessageList: [],
-      isImagePasteTipShow: false
-    };
-  }
-  render() {
-    const imageArr = this.renderMultipleFilesArr();
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, imageArr, this.renderUploadFileWrapper(imageArr));
-  }
-}
-var _default = exports.default = LocalImageAddition;

package/lib/ImageEditor/constants.js

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

package/lib/ImageEditor/images-previewer/image-preview/index.css

@@ -1,59 +0,0 @@
-.dtable-ui-image-previewer-box:nth-child(5n) {
-  margin-right: 0;
-}
-
-.dtable-ui-image-previewer-box {
-  margin-right: 19px;
-  width: 100px;
-  height: 100px;
-  margin-top: 15px;
-  border: 2px solid #ededed;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-}
-
-.dtable-ui-image-previewer-box:hover {
-  border-color: #c9c9c9;
-}
-
-.dtable-ui-image-previewer-box img {
-  max-height: 100%;
-  max-width: 100%;
-}
-
-.dtable-ui-image-icons-choice {
-  height: 20px;
-  width: 100%;
-  top: 0;
-  position: absolute;
-  color: #fff;
-  display: flex;
-  padding: 0 3px;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.dtable-ui-image-icons-choice .image-icon {
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dtable-ui-image-icons-choice .image-icon:nth-child(2) {
-  margin-left: 5px;
-}
-
-.dtable-ui-image-icons-choice .image-icon .dtable-font {
-  font-size: 12px;
-  transform: scale(0.7);
-}

package/lib/ImageEditor/images-previewer/image-preview/index.js

@@ -1,155 +0,0 @@
-"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 _reactstrap = require("reactstrap");
-var _url = require("../../../utils/url");
-var _DeleteTip = _interopRequireDefault(require("../../../DeleteTip"));
-var _constants = require("../../../constants");
-var _lang = require("../../../lang");
-require("./index.css");
-class ImagePreviewer extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.showLargeImage = () => {
-      let {
-        imageItemUrl
-      } = this.props;
-      this.props.showLargeImage(imageItemUrl);
-    };
-    this.showImageToolbar = () => {
-      let {
-        itemIndex
-      } = this.props;
-      this.props.setImageItemIndex(itemIndex);
-    };
-    this.hideImageToolbar = () => {
-      this.props.setImageItemIndex(-1);
-    };
-    this.downloadImage = e => {
-      e.stopPropagation();
-      this.props.downloadImage(this.props.imageItemUrl);
-    };
-    this.deleteImage = e => {
-      e.stopPropagation();
-      let {
-        itemIndex
-      } = this.props;
-      this.props.deleteImage(itemIndex, _constants.FILE_EDITOR_STATUS.PREVIEWER);
-    };
-    this.onClickDelete = e => {
-      e.stopPropagation();
-      this.position = {
-        top: e.clientY,
-        left: e.clientX
-      };
-      this.setState({
-        showTip: true
-      });
-    };
-    this.closeTip = () => {
-      this.setState({
-        showTip: false
-      });
-    };
-    this.toggle = () => {
-      this.setState({
-        isTooltipOpen: !this.state.isTooltipOpen
-      });
-    };
-    this.renderImageIcons = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-image-icons-choice"
-      }, this.props.downloadImage && this.canDownLoad && /*#__PURE__*/_react.default.createElement("span", {
-        className: "image-icon",
-        onClick: this.downloadImage
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-download"
-      })), this.props.deleteImage && /*#__PURE__*/_react.default.createElement("span", {
-        className: "image-icon",
-        onClick: this.onClickDelete
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-fork-number"
-      })));
-    };
-    this.state = {
-      isTooltipOpen: false,
-      imageThumbnailUrl: ''
-    };
-    this.canDownLoad = props.canDownLoad;
-    const offsetWidth = document.body.offsetWidth;
-    this.containerSize = offsetWidth < 767.8 ? (offsetWidth - 55) / 2 + 'px' : (offsetWidth - 80) / 3 + 'px';
-    this.position = {};
-    const {
-      mediaUrl
-    } = props.config || {};
-    this.imageLoadingFailedUrl = "".concat(mediaUrl, "img/image-loading-failed.png");
-    this.ref = null;
-  }
-  componentDidMount() {
-    let {
-      imageItemUrl,
-      config
-    } = this.props;
-    if ((0, _url.checkSVGImage)(imageItemUrl)) {
-      this.setState({
-        imageThumbnailUrl: imageItemUrl
-      });
-      return;
-    }
-    let imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(imageItemUrl, config);
-    (0, _url.checkImgExists)(imageThumbnailUrl).then(() => {
-      this.setState({
-        imageThumbnailUrl: imageThumbnailUrl
-      });
-    }).catch(() => {
-      this.setState({
-        imageThumbnailUrl: this.imageLoadingFailedUrl
-      });
-    });
-  }
-  render() {
-    const {
-      enterImageItemIndex,
-      itemIndex,
-      imageItemUrl
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      style: window.isMobile ? {
-        width: this.containerSize,
-        height: this.containerSize
-      } : {},
-      onClick: this.showLargeImage,
-      className: "dtable-ui-image-previewer-box",
-      onMouseEnter: this.showImageToolbar,
-      onMouseLeave: this.hideImageToolbar,
-      ref: ref => this.ref = ref
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: this.state.imageThumbnailUrl,
-      alt: ""
-    }), enterImageItemIndex === itemIndex && this.renderImageIcons()), enterImageItemIndex === itemIndex && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
-      placement: "bottom",
-      isOpen: this.state.isTooltipOpen,
-      toggle: this.toggle,
-      target: this.ref,
-      delay: {
-        show: 0,
-        hide: 0
-      },
-      fade: false
-    }, (0, _url.getFileName)(imageItemUrl)), this.state.showTip && /*#__PURE__*/_react.default.createElement(_DeleteTip.default, {
-      position: this.position,
-      toggle: this.closeTip,
-      deleteImage: this.deleteImage,
-      deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
-    }));
-  }
-}
-var _default = exports.default = ImagePreviewer;

package/lib/ImageEditor/images-previewer/index.css

@@ -1,18 +0,0 @@
-.dtable-ui-image-editor-container .dtable-ui-image-previewer-container {
-  position: relative;
-  width: 100%;
-  min-height: 30px;
-}
-
-.dtable-ui-image-previewer-wrapper {
-  padding: 0 20px 20px;
-  flex-direction: row;
-  height: 350px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.dtable-ui-image-previewer-content {
-  display: flex;
-  flex-wrap: wrap;
-}