dtable-ui-component 5.3.1-beta6 → 5.3.2

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

@@ -1,140 +0,0 @@
-"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 _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
-var _imagePreview = _interopRequireDefault(require("./image-preview"));
-var _DTableCommonAddTool = _interopRequireDefault(require("../../DTableCommonAddTool"));
-var _utils = require("../../utils/utils");
-var _constants = require("../../constants");
-var _lang = require("../../lang");
-require("./index.css");
-class ImagesPreviewer extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.handleHistoryBack = e => {
-      if (this.state.isShowLargeImage) {
-        this.hideLargeImage();
-      } else if (this.props.closeEditor) {
-        this.props.closeEditor();
-      }
-    };
-    this.showLargeImage = itemUrl => {
-      let {
-        value
-      } = this.props;
-      this.setState({
-        isShowLargeImage: true,
-        largeImageIndex: value.indexOf(itemUrl)
-      });
-    };
-    this.hideLargeImage = () => {
-      this.setState({
-        isShowLargeImage: false,
-        largeImageIndex: ''
-      });
-    };
-    this.moveNext = () => {
-      let images = this.props.value;
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + 1) % images.length
-      }));
-    };
-    this.movePrev = () => {
-      let images = this.props.value;
-      this.setState(prevState => ({
-        largeImageIndex: (prevState.largeImageIndex + images.length - 1) % images.length
-      }));
-    };
-    this.togglePreviewer = () => {
-      this.props.togglePreviewer(_constants.FILE_EDITOR_STATUS.ADDITION);
-      this.props.resetAdditionImage();
-    };
-    this.deleteImage = (index, type) => {
-      this.props.deleteImage(index, type);
-      const {
-        value
-      } = this.props;
-      if (index > value.length - 2) {
-        if (value.length - 2 < 0) {
-          this.hideLargeImage();
-        } else {
-          this.setState({
-            largeImageIndex: 0
-          });
-        }
-      }
-    };
-    this.downloadImage = imageItemUrl => {
-      let rotateIndex = imageItemUrl.indexOf('?a=');
-      if (rotateIndex > -1) {
-        imageItemUrl = imageItemUrl.slice(0, rotateIndex);
-      }
-      let imageUrlSuffix = imageItemUrl.indexOf('?dl=1');
-      let downloadUrl = imageUrlSuffix !== -1 ? imageItemUrl : imageItemUrl + '?dl=1';
-      (0, _utils.downloadFile)(downloadUrl);
-    };
-    this.setImageItemIndex = index => {
-      this.setState({
-        enterImageItemIndex: index
-      });
-    };
-    this.state = {
-      isShowLargeImage: false,
-      largeImageIndex: '',
-      enterImageItemIndex: -1
-    };
-  }
-  componentDidMount() {
-    if (window.isMobile) {
-      window.history.pushState(null, null, '#');
-      window.addEventListener('popstate', this.handleHistoryBack, false);
-    }
-  }
-  componentWillUnmount() {
-    if (window.isMobile) {
-      window.removeEventListener('popstate', this.handleHistoryBack, false);
-    }
-  }
-  render() {
-    let {
-      value
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-previewer-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-previewer-wrapper ".concat(value.length === 0 && window.isMobile ? 'd-none' : '')
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-previewer-content"
-    }, value.length > 0 && value.map((imageItemUrl, index) => {
-      return /*#__PURE__*/_react.default.createElement(_imagePreview.default, {
-        key: imageItemUrl + index,
-        imageItemUrl: imageItemUrl,
-        value: value,
-        itemIndex: index,
-        deleteImage: this.props.deleteImage,
-        showLargeImage: this.showLargeImage,
-        downloadImage: this.downloadImage,
-        enterImageItemIndex: this.state.enterImageItemIndex,
-        setImageItemIndex: this.setImageItemIndex
-      });
-    }))), this.state.isShowLargeImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
-      imageItems: value,
-      imageIndex: this.state.largeImageIndex,
-      closeImagePopup: this.hideLargeImage,
-      moveToPrevImage: this.movePrev,
-      moveToNextImage: this.moveNext,
-      deleteImage: this.props.deleteImage ? this.deleteImage : null,
-      downloadImage: this.downloadImage,
-      onRotateImage: this.props.onRotateImage
-    }), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
-      callBack: this.togglePreviewer,
-      footerName: (0, _lang.getLocale)('Add_images')
-    }));
-  }
-}
-var _default = exports.default = ImagesPreviewer;

package/lib/ImageEditor/index.css

@@ -1,24 +0,0 @@
-.dtable-ui-image-editor-dialog {
-  max-width: 620px;
-}
-
-.dtable-ui-image-editor-modal {
-  width: 620px;
-  max-height: 620px;
-  overflow: hidden;
-}
-
-.dtable-ui-image-editor-container {
-  width: 100%;
-  background-color: #fff;
-}
-
-.dtable-ui-image-addition-container {
-  display: flex;
-  flex-direction: row;
-}
-
-.dtable-ui-image-editor-dialog .dtable-icon-return {
-  color: #666666;
-  font-size: 14px;
-}

package/lib/ImageEditor/index.js

@@ -1,194 +0,0 @@
-"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 _imagesPreviewer = _interopRequireDefault(require("./images-previewer"));
-var _additionPreviewer = _interopRequireDefault(require("./addition-previewer"));
-var _constants = require("../constants");
-var _DTableModalHeader = _interopRequireDefault(require("../DTableModalHeader"));
-var _lang = require("../lang");
-var _constants2 = require("./constants");
-require("./index.css");
-class ImageEditor 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 uploadLocalImageValue = _this.state.uploadLocalImageValue.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') {
-          uploadLocalImageValue.splice(index, 1);
-        }
-      }
-      _this.setState({
-        uploadLocalImageValue: uploadLocalImageValue,
-        isUpdated: true,
-        value: value
-      });
-    };
-    this.resetAdditionImage = () => {
-      this.setState({
-        uploadLocalImageValue: [],
-        imageLinkValue: []
-      });
-    };
-    this.toggle = e => {
-      e.stopPropagation();
-      if (this.state.isOpen && this.state.isUpdated) {
-        if (this.state.editorView === _constants.FILE_EDITOR_STATUS.ADDITION) {
-          let {
-            value,
-            uploadLocalImageValue
-          } = this.state;
-          let newValue = value.concat(uploadLocalImageValue);
-          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 uploadLocalImageValue = this.state.uploadLocalImageValue.slice(0);
-      const imageUrl = fileMessage.url;
-      uploadLocalImageValue.push(imageUrl);
-      this.setState({
-        uploadLocalImageValue: uploadLocalImageValue,
-        isUpdated: true
-      });
-    };
-    this.addUploadedFile = fileMessageList => {
-      let uploadLocalImageValue = this.state.uploadLocalImageValue.slice(0);
-      // eslint-disable-next-line no-unused-vars
-      for (let fileMessage of fileMessageList) {
-        uploadLocalImageValue.push(fileMessage.url);
-      }
-      this.setState({
-        uploadLocalImageValue: uploadLocalImageValue,
-        isUpdated: true
-      });
-    };
-    this.renderHeader = () => {
-      let {
-        editorView
-      } = this.state;
-      if (this.props.isInModal) {
-        return /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Add_images'));
-      }
-      if (editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER) {
-        return /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('All_images'));
-      }
-      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_images')));
-    };
-    this.showImageListPreviewer = () => {
-      let {
-        value,
-        uploadLocalImageValue,
-        imageLinkValue
-      } = this.state;
-      let newValue = value.concat(uploadLocalImageValue, imageLinkValue);
-      this.setState({
-        value: newValue
-      });
-      this.togglePreviewer(_constants.FILE_EDITOR_STATUS.PREVIEWER);
-    };
-    this.saveImageLink = imageUrl => {
-      this.setState({
-        imageLinkValue: imageUrl,
-        isUpdated: true
-      });
-      this.showImageListPreviewer();
-    };
-    this.uploadFile = (file, callback) => {
-      return this.props.uploadFile(file, _constants2.IMAGES_FOLDER, callback);
-    };
-    this.state = {
-      value: props.value || [],
-      editorView: this.getEditorView(),
-      isOpen: true,
-      isShowFileChooser: false,
-      uploadLocalImageValue: [],
-      imageLinkValue: [],
-      isUpdated: false
-    };
-  }
-  render() {
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
-      className: "dtable-ui-image-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"
-    }, this.state.editorView === _constants.FILE_EDITOR_STATUS.PREVIEWER && /*#__PURE__*/_react.default.createElement(_imagesPreviewer.default, {
-      value: this.state.value,
-      togglePreviewer: this.togglePreviewer,
-      deleteImage: this.deleteImage,
-      resetAdditionImage: this.resetAdditionImage
-    }), this.state.editorView === _constants.FILE_EDITOR_STATUS.ADDITION && /*#__PURE__*/_react.default.createElement(_additionPreviewer.default, {
-      deleteImage: this.deleteImage,
-      handleFilesChange: this.handleFilesChange,
-      uploadLocalImageValue: this.state.uploadLocalImageValue,
-      togglePreviewer: this.togglePreviewer,
-      saveImageLink: this.saveImageLink,
-      fileUploadCompleted: this.fileUploadCompleted,
-      addUploadedFile: this.addUploadedFile,
-      showImageListPreviewer: this.showImageListPreviewer,
-      uploadFile: this.uploadFile
-    }))));
-  }
-}
-var _default = exports.default = ImageEditor;

package/lib/ImageThumbnail/index.css

@@ -1,20 +0,0 @@
-.dtable-ui-image-thumbnail {
-  height: 100px;
-  width: 100px;
-  border: 2px solid #ededed;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 5px;
-  position: relative;
-}
-
-.dtable-ui-image-thumbnail .dtable-ui-image-icons-choice {
-  display: none;
-}
-
-.dtable-ui-image-thumbnail:hover .dtable-ui-image-icons-choice {
-  display: flex;
-}

package/lib/ImageThumbnail/index.js

@@ -1,136 +0,0 @@
-"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 _classnames = _interopRequireDefault(require("classnames"));
-var _url = require("../utils/url");
-var _DeleteTip = _interopRequireDefault(require("../DeleteTip"));
-var _lang = require("../lang");
-require("./index.css");
-class ImageThumbnail extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.getUrl = src => {
-      if ((0, _url.checkSVGImage)(src)) {
-        this.setState({
-          imageThumbnailUrl: src
-        });
-        return;
-      }
-      const imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(src);
-      (0, _url.checkImgExists)(imageThumbnailUrl).then(() => {
-        this.setState({
-          imageThumbnailUrl
-        });
-      }).catch(() => {
-        this.setState({
-          imageThumbnailUrl: this.imageLoadingFailedUrl
-        });
-      });
-    };
-    this.onClick = () => {
-      this.props.onClick(this.props.index);
-    };
-    this.downloadImage = e => {
-      e.stopPropagation();
-      this.props.downloadImage(this.props.src);
-    };
-    this.deleteImage = () => {
-      this.closeTip();
-      this.props.deleteImage(this.props.index);
-    };
-    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.state = {
-      imageThumbnailUrl: '',
-      showTip: false,
-      isTooltipOpen: false
-    };
-    this.ref = null;
-    const {
-      mediaUrl = ''
-    } = props.config || {};
-    this.imageLoadingFailedUrl = "".concat(mediaUrl, "img/image-loading-failed.png");
-  }
-  componentDidMount() {
-    this.getUrl(this.props.src);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.src !== this.props.src) {
-      this.getUrl(nextProps.src);
-    }
-  }
-  render() {
-    const {
-      index,
-      downloadImage,
-      src,
-      className
-    } = this.props;
-    const {
-      imageThumbnailUrl
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui-image-thumbnail', className),
-      onClick: this.onClick,
-      ref: ref => this.ref = ref
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: imageThumbnailUrl,
-      id: "item-image-".concat(index),
-      alt: ""
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-icons-choice"
-    }, downloadImage && /*#__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"
-    })), /*#__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.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')
-    }), this.ref && /*#__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)(src)));
-  }
-}
-var _default = exports.default = ImageThumbnail;

package/lib/RowExpandDialog/body/index.css

@@ -1,21 +0,0 @@
-.dtable-ui-row-expand-body {
-  flex: 1;
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-
-.dtable-ui-row-expand-body .dtable-ui-row-expand-body-content {
-  flex: 1 1;
-  overflow-y: scroll;
-  padding: 30px;
-}
-
-.dtable-ui-row-expand-body .dtable-ui-row-expand-item {
-  min-height: 56px;
-}
-
-.dtable-ui-row-expand-body .dtable-ui-row-expand-item:first-child {
-  margin-top: 2px;
-}