dtable-ui-component 5.3.5 → 5.3.7

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

@@ -0,0 +1,254 @@
+"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

@@ -0,0 +1,7 @@
+"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

@@ -0,0 +1,59 @@
+.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

@@ -0,0 +1,155 @@
+"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 _DeleteTip = _interopRequireDefault(require("../../../DeleteTip"));
+var _url = require("../../../utils/url");
+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,
+      handleDelete: 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

@@ -0,0 +1,18 @@
+.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;
+}

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

@@ -0,0 +1,140 @@
+"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

@@ -0,0 +1,24 @@
+.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;
+}