dtable-ui-component 6.0.29-beta11 → 6.0.29-beta13

package/lib/GeolocationEditor/{pc-editor/map-selection-editor → map-selection-editor}/large-editor/index.js

@@ -8,12 +8,12 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _dtableUtils = require("dtable-utils");
-var _toaster = _interopRequireDefault(require("../../../../toaster"));
-var _Loading = _interopRequireDefault(require("../../../../Loading"));
-var _constants = require("../../../../constants");
-var _cell = require("../../../../utils/cell");
-var _mapEditorUtils = require("../../../map-editor-utils");
-var _lang = require("../../../../lang");
+var _toaster = _interopRequireDefault(require("../../../toaster"));
+var _Loading = _interopRequireDefault(require("../../../Loading"));
+var _constants = require("../../../constants");
+var _cell = require("../../../utils/cell");
+var _mapEditorUtils = require("../../map-editor-utils");
+var _lang = require("../../../lang");
 require("./index.css");
 class LargeMapSelectionEditorDialog extends _react.default.Component {
   constructor(props) {
@@ -413,7 +413,7 @@ class LargeMapSelectionEditorDialog extends _react.default.Component {
     })))), /*#__PURE__*/_react.default.createElement("div", {
       className: this.readOnly ? 'geolocation-map-read-only-container' : 'geolocation-map-container-large'
     }, this.mapType && isLoading && /*#__PURE__*/_react.default.createElement(_Loading.default, null), !this.mapType && /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-map-editor-error-message d-flex justify-content-center mt-9"
+      className: "error-message d-flex justify-content-center mt-9"
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "alert-danger"
     }, (0, _lang.getLocale)('The_map_plugin_is_not_properly_configured_contact_the_administrator'))), !isLoading && this.mapType && /*#__PURE__*/_react.default.createElement("div", {

package/lib/GeolocationEditor/{pc-editor/province-city-editor.js → province-city-editor.js}

@@ -8,13 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _DTableCustomFooter = _interopRequireDefault(require("../../DTableCustomFooter"));
+var _DTableCustomFooter = _interopRequireDefault(require("../DTableCustomFooter"));
 var _selectorList = _interopRequireDefault(require("./selector-list"));
 var _selectorHeaderItem = _interopRequireDefault(require("./selector-header-item"));
-var _Loading = _interopRequireDefault(require("../../Loading"));
+var _Loading = _interopRequireDefault(require("../Loading"));
 var _parseGeolocation = _interopRequireDefault(require("./parse-geolocation"));
-var _constants = require("../../constants");
-var _lang = require("../../lang");
+var _constants = require("../constants");
+var _lang = require("../lang");
 class ProvinceCityEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -50,6 +50,29 @@ class ProvinceCityEditor extends _react.Component {
         selectedItem: 'city'
       };
     };
+    this.getLocationData = () => {
+      var _window;
+      const {
+        config
+      } = this.props;
+      const {
+        mediaUrl,
+        server
+      } = {
+        ...((_window = window) === null || _window === void 0 ? void 0 : _window.dtable),
+        ...config
+      };
+
+      // get locations from server
+      return fetch("".concat(server).concat(mediaUrl, "geo-data/cn-location.json").replaceAll('//', '/')).then(res => {
+        return res.json();
+      }).catch(() => {
+        // get locations from local
+        return fetch('./geo-data/cn-location.json').then(res => {
+          return res.json();
+        });
+      });
+    };
     this.onToggleSelector = () => {
       this.setState({
         isShowSelector: !this.state.isShowSelector,
@@ -159,8 +182,24 @@ class ProvinceCityEditor extends _react.Component {
     this.isComposing = false;
   }
   componentDidMount() {
-    this.props.getData().then(data => {
-      this.locations = data;
+    if (!window.app.location) {
+      this.getLocationData().then(data => {
+        this.locations = data;
+        window.app.location = data;
+        const {
+          selectedProvince,
+          selectedCity,
+          selectedItem
+        } = this.initLocationSelecting(this.value);
+        this.setState({
+          isLoadingData: false,
+          selectedProvince,
+          selectedCity,
+          selectedItem
+        });
+      });
+    } else {
+      this.locations = window.app.location;
       const {
         selectedProvince,
         selectedCity,
@@ -172,7 +211,7 @@ class ProvinceCityEditor extends _react.Component {
         selectedCity,
         selectedItem
       });
-    });
+    }
   }
   render() {
     const {

package/lib/GeolocationEditor/{pc-editor/province-editor.js → province-editor.js}

@@ -7,13 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
-var _constants = require("../../constants");
-var _Loading = _interopRequireDefault(require("../../Loading"));
-var _lang = require("../../lang");
+var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _constants = require("../constants");
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _lang = require("../lang");
 class ProvinceEditor extends _react.Component {
   constructor(props) {
     super(props);
+    this.getLocationData = () => {
+      var _window;
+      // mediaUrl
+      const {
+        config
+      } = this.props;
+      const {
+        mediaUrl,
+        server
+      } = {
+        ...((_window = window) === null || _window === void 0 ? void 0 : _window.dtable),
+        ...config
+      };
+      // get locations from server
+      return fetch("".concat(server).concat(mediaUrl, "geo-data/cn-location.json").replaceAll('//', '/')).then(res => {
+        return res.json();
+      }).catch(() => {
+        // get locations from local
+        return fetch('./geo-data/cn-location.json').then(res => {
+          return res.json();
+        });
+      });
+    };
     this.onHotKey = e => {
       if (e.keyCode === _constants.KeyCodes.Enter) {
         this.onEnter(e);
@@ -164,13 +187,22 @@ class ProvinceEditor extends _react.Component {
     this.itemHeight = 30;
   }
   componentDidMount() {
-    this.props.getData().then(data => {
-      this.locations = data;
+    if (!window.app.location) {
+      this.getLocationData().then(data => {
+        this.locations = data;
+        window.app.location = data;
+        this.filteredProvince = this.locations.children;
+        this.setState({
+          isLoadingData: false
+        });
+      });
+    } else {
+      this.locations = window.app.location;
       this.filteredProvince = this.locations.children;
       this.setState({
         isLoadingData: false
       });
-    });
+    }
     document.addEventListener('keydown', this.onHotKey, true);
   }
   componentWillUnmount() {

package/lib/GeolocationEditor/{pc-editor/selector-header-item.js → selector-header-item.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _lang = require("../../lang");
+var _lang = require("../lang");
 class SelectorHeaderItem extends _react.default.Component {
   render() {
     const {

package/lib/ImageEditor/{pc-editor/addition-previewer → addition-previewer}/image-link/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
-var _lang = require("../../../../lang");
+var _lang = require("../../../lang");
 require("./index.css");
 class ImageLink extends _react.default.Component {
   constructor(props) {

package/lib/ImageEditor/{pc-editor/addition-previewer → addition-previewer}/index.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _localImageAddition = _interopRequireDefault(require("./local-image-addition"));
 var _imageLink = _interopRequireDefault(require("./image-link"));
-var _lang = require("../../../lang");
+var _lang = require("../../lang");
 require("./index.css");
 class AdditionPreviewer extends _react.default.Component {
   constructor(props) {

package/lib/ImageEditor/{pc-editor/addition-previewer → addition-previewer}/local-image-addition/index.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 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");
+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) {

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

@@ -85,7 +85,7 @@ class ImagePreviewer extends _react.default.Component {
     };
     this.canDownLoad = props.canDownLoad;
     const offsetWidth = document.body.offsetWidth;
-    this.containerSize = offsetWidth < 768 ? (offsetWidth - 55) / 2 + 'px' : (offsetWidth - 80) / 3 + 'px';
+    this.containerSize = offsetWidth < 767.8 ? (offsetWidth - 55) / 2 + 'px' : (offsetWidth - 80) / 3 + 'px';
     this.position = {};
     const {
       mediaUrl
@@ -122,7 +122,7 @@ class ImagePreviewer extends _react.default.Component {
       imageItemUrl
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      style: _constants.isMobile ? {
+      style: window.isMobile ? {
         width: this.containerSize,
         height: this.containerSize
       } : {},
@@ -134,7 +134,7 @@ class ImagePreviewer extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement("img", {
       src: this.state.imageThumbnailUrl,
       alt: ""
-    }), enterImageItemIndex === itemIndex && this.renderImageIcons()), !_constants.isMobile && enterImageItemIndex === itemIndex && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
+    }), enterImageItemIndex === itemIndex && this.renderImageIcons()), enterImageItemIndex === itemIndex && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
       placement: "bottom",
       isOpen: this.state.isTooltipOpen,
       toggle: this.toggle,

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
 var _imagePreview = _interopRequireDefault(require("./image-preview"));
 var _DTableCommonAddTool = _interopRequireDefault(require("../../DTableCommonAddTool"));
@@ -91,13 +90,13 @@ class ImagesPreviewer extends _react.default.Component {
     };
   }
   componentDidMount() {
-    if (_constants.isMobile) {
+    if (window.isMobile) {
       window.history.pushState(null, null, '#');
       window.addEventListener('popstate', this.handleHistoryBack, false);
     }
   }
   componentWillUnmount() {
-    if (_constants.isMobile) {
+    if (window.isMobile) {
       window.removeEventListener('popstate', this.handleHistoryBack, false);
     }
   }
@@ -106,13 +105,9 @@ class ImagesPreviewer extends _react.default.Component {
       value
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui-image-previewer-container', {
-        'mt-0': value.length === 0 && _constants.isMobile
-      })
+      className: "dtable-ui-image-previewer-container"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui-image-previewer-wrapper', {
-        'd-none': value.length === 0 && _constants.isMobile
-      })
+      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) => {

package/lib/ImageEditor/index.css

@@ -1,25 +1,24 @@
-.dtable-ui-file-open-external-browser {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 0;
+.dtable-ui-image-editor-dialog {
+  max-width: 620px;
+}
+
+.dtable-ui-image-editor-modal {
+  width: 620px;
+  max-height: 620px;
   overflow: hidden;
 }
 
-.dtable-ui-file-open-external-browser .seatable-tip-danger {
-  margin: 16px;
-  text-align: center;
+.dtable-ui-image-editor-container {
+  width: 100%;
+  background-color: #fff;
 }
 
-.dtable-ui-file-open-external-browser .image-container {
-  flex: 1;
+.dtable-ui-image-addition-container {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  margin: 0 10px;
+  flex-direction: row;
 }
 
-.dtable-ui-file-open-external-browser img {
-  width: 75%;
-}
+.dtable-ui-image-editor-dialog .dtable-icon-return {
+  color: #666666;
+  font-size: 14px;
+}

package/lib/ImageEditor/index.js

@@ -1,35 +1,194 @@
 "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 _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _pcEditor = _interopRequireDefault(require("./pc-editor"));
-var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+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");
-const ImageEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    isMobile,
-    ...props
-  } = _ref;
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))));
-});
+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.js

@@ -11,7 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DeleteTip = _interopRequireDefault(require("../DeleteTip"));
 var _url = require("../utils/url");
 var _lang = require("../lang");
-var _constants = require("../constants");
 require("./index.css");
 class ImageThumbnail extends _react.default.Component {
   constructor(props) {
@@ -122,7 +121,7 @@ class ImageThumbnail extends _react.default.Component {
       toggle: this.closeTip,
       handleDelete: this.deleteImage,
       deleteTip: this.props.deleteTip || (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
-    }), !_constants.isMobile && this.ref && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
+    }), this.ref && /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
       placement: "bottom",
       isOpen: this.state.isTooltipOpen,
       toggle: this.toggle,

package/lib/LinkEditor/index.js

@@ -12,8 +12,8 @@ var _dtableUtils = require("dtable-utils");
 var _lang = require("../lang");
 var _EditEditorButton = _interopRequireDefault(require("../EditEditorButton"));
 var _linkEditorOption = _interopRequireDefault(require("./link-editor-option"));
-var _pcPopover = _interopRequireDefault(require("./pc-popover"));
-var _mbPopover = _interopRequireDefault(require("./mb-popover"));
+var _pcLinkEditorPopover = _interopRequireDefault(require("./pc-link-editor-popover"));
+var _mbLinkEditorPopover = _interopRequireDefault(require("./mb-link-editor-popover"));
 require("./index.css");
 class LinkEditor extends _react.default.Component {
   constructor(props) {
@@ -238,14 +238,14 @@ class LinkEditor extends _react.default.Component {
       });
     })), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: "(min-width: 768px)"
-    }, /*#__PURE__*/_react.default.createElement(_pcPopover.default, {
+    }, /*#__PURE__*/_react.default.createElement(_pcLinkEditorPopover.default, {
       popoverPosition: popoverPosition,
       options: options,
       selectedOptions: selectedOptions,
       onOptionItemToggle: this.onOptionItemToggle
     })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: "(max-width: 768px)"
-    }, /*#__PURE__*/_react.default.createElement(_mbPopover.default, {
+      query: "(max-width: 767.8px)"
+    }, /*#__PURE__*/_react.default.createElement(_mbLinkEditorPopover.default, {
       isReadOnly: this.props.isReadOnly,
       value: this.state.newValue,
       column: this.props.column,

package/lib/LinkEditor/{mb-popover → mb-link-editor-popover}/index.css

@@ -1,6 +1,6 @@
 @import url('../../css/mb-cell-editor.css');
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 767.8px) {
   .dtable-ui-mb-link-editor-body .mb-search-link-items {
     padding: 8px 16px;
     margin-top: 20px;

package/lib/MultipleSelectEditor/index.js

@@ -1,22 +1,27 @@
 "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 _selectEditor = _interopRequireDefault(require("../select-editor"));
-const MultipleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+var _react = _interopRequireDefault(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _selectEditor = require("../select-editor");
+const MultipleSelectEditor = _ref => {
   let {
     value: oldValue,
     ...props
   } = _ref;
   const value = oldValue ? Array.isArray(oldValue) ? oldValue : [oldValue] : [];
-  return /*#__PURE__*/_react.default.createElement(_selectEditor.default, Object.assign({}, props, {
-    value: value,
-    ref: ref
-  }));
-});
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_selectEditor.PCSelectEditor, Object.assign({}, props, {
+    value: value
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 767.8px)"
+  }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditor, Object.assign({}, props, {
+    value: value
+  }))));
+};
 var _default = exports.default = MultipleSelectEditor;