dtable-ui-component 5.3.0-alpha1 → 5.3.1-beta

package/lib/CollaboratorEditor/{mb-collaborator-editor-popover → mb-collaborator-editor}/index.js

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _dtableUtils = require("dtable-utils");
 var _lang = require("../../lang");
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
+var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
 require("./index.css");
-class MBCollaboratorEditorPopover extends _react.default.Component {
+class MBCollaboratorEditor extends _react.default.Component {
   constructor(props) {
     super(props);
-    this.handleHistaryBack = e => {
+    this.handleHistoryBack = e => {
       e.preventDefault();
       this.props.onClosePopover();
     };
@@ -23,16 +25,13 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
         return false;
       }
     };
-    this.onChangeSearch = event => {
+    this.onChangeSearch = newValue => {
       let {
         searchVal
       } = this.state;
-      if (searchVal === event.target.value) {
-        return;
-      }
-      searchVal = event.target.value;
+      if (searchVal === newValue) return;
       this.setState({
-        searchVal
+        searchVal: newValue
       });
     };
     this.getSelectedCollaborators = () => {
@@ -54,24 +53,24 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
       let {
         searchVal
       } = this.state;
-      return searchVal ? collaborators.filter(item => item.name.indexOf(searchVal) > -1) : collaborators;
+      return searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
     };
-    this.onSelectCollaborator = collaborator => {
-      this.props.onCollaboratorItemToggle(collaborator);
+    this.onCollaboratorClick = collaborator => {
+      this.props.onCommit(collaborator);
     };
     this.onRemoveCollaborator = collaborator => {
-      this.props.onCollaboratorItemToggle(collaborator);
+      this.props.onCommit(collaborator);
     };
     this.renderFilteredCollaborators = collaborators => {
       let {
-        value
+        value = []
       } = this.props;
       return collaborators.map((collaborator, index) => {
-        let isSelect = value.some(item => item === collaborator.email);
+        const isSelected = value.includes(collaborator.email);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: "mb-collaborator-option-item",
           key: index,
-          onMouseDown: this.onSelectCollaborator.bind(this, collaborator)
+          onMouseDown: this.onCollaboratorClick.bind(this, collaborator)
         }, /*#__PURE__*/_react.default.createElement("span", {
           className: "mb-collaborator-info"
         }, /*#__PURE__*/_react.default.createElement("span", {
@@ -83,7 +82,7 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
           alt: "avatar"
         })), /*#__PURE__*/_react.default.createElement("span", {
           className: "collaborator-name"
-        }, collaborator.name)), isSelect && /*#__PURE__*/_react.default.createElement("i", {
+        }, collaborator.name)), isSelected && /*#__PURE__*/_react.default.createElement("i", {
           className: "mb-collaborator-checked dtable-font dtable-icon-check-mark"
         }));
       });
@@ -97,10 +96,10 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
   }
   componentDidMount() {
     history.pushState(null, null, '#'); // eslint-disable-line
-    window.addEventListener('popstate', this.handleHistaryBack, false);
+    window.addEventListener('popstate', this.handleHistoryBack, false);
   }
   componentWillUnmount() {
-    window.removeEventListener('popstate', this.handleHistaryBack, false);
+    window.removeEventListener('popstate', this.handleHistoryBack, false);
   }
   render() {
     const {
@@ -120,19 +119,17 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
         className: "dtable-font dtable-icon-return"
       }),
       rightContent: /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Done')),
-      onLeftClick: this.props.onClosePopover,
-      onRightClick: this.props.onClosePopover
+      onLeftClick: this.props.onClose,
+      onRightClick: this.props.onClose
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui-mb-editor-body dtable-ui-mb-collaborator-editor-body"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "mb-search-collaborator-items"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      type: "text",
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+      autoFocus: true,
       value: searchVal,
-      onChange: this.onChangeSearch,
-      onClick: this.onInputClick
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      onChange: this.onChangeSearch
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: "mb-collaborators-container"
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -141,11 +138,11 @@ class MBCollaboratorEditorPopover extends _react.default.Component {
       className: "content"
     }, filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: "search-result-none"
-    }, (0, _lang.getLocale)('No_collaborators_avaliable')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
+    }, (0, _lang.getLocale)('No_collaborators_available')), filteredCollaborators.length > 0 && this.renderFilteredCollaborators(filteredCollaborators)))));
   }
 }
-MBCollaboratorEditorPopover.defaultProps = {
+MBCollaboratorEditor.defaultProps = {
   isReadOnly: false,
   value: []
 };
-var _default = exports.default = MBCollaboratorEditorPopover;
+var _default = exports.default = MBCollaboratorEditor;

package/lib/CollaboratorEditor/pc-collaborator-editor/index.js

@@ -0,0 +1,257 @@
+"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 _dtableUtils = require("dtable-utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _lang = require("../../lang");
+var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
+var _DTableSearchInput = _interopRequireDefault(require("../../DTableSearchInput"));
+var _constants = require("../../constants");
+var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
+require("./index.css");
+class PCCollaboratorEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.onValueChanged = newSearchValue => {
+      if (newSearchValue === this.state.searchValue) return;
+      const {
+        collaborators
+      } = this.props;
+      this.filteredCollaborators = (0, _dtableUtils.searchCollaborators)(collaborators, newSearchValue);
+      this.setState({
+        highlightIndex: this.filteredCollaborators.length > 0 ? 0 : -1,
+        searchValue: newSearchValue
+      });
+    };
+    this.onCollaboratorClick = collaborator => {
+      this.props.onCommit(collaborator);
+    };
+    this.getFilterCollaborator = () => {
+      const {
+        collaborators
+      } = this.props;
+      const searchValue = this.state.searchValue.toLowerCase();
+      if (!searchValue) return collaborators;
+      return (0, _dtableUtils.searchCollaborators)(collaborators, searchValue);
+    };
+    this.getMaxItemNum = () => {
+      let collaboratorContainerStyle = getComputedStyle(this.container, null);
+      let collaboratorItemStyle = getComputedStyle(this.collaboratorItem, null);
+      let maxContainerItemNum = Math.floor(parseInt(collaboratorContainerStyle.maxHeight) / parseInt(collaboratorItemStyle.height));
+      return maxContainerItemNum - 1;
+    };
+    this.onHotKey = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        this.onEnter(e);
+      } else if (e.keyCode === _constants.KeyCodes.UpArrow) {
+        this.onUpArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.DownArrow) {
+        this.onDownArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.Escape) {
+        this.onEsc(e);
+      } else if (e.keyCode === _constants.KeyCodes.Tab) {
+        if (this.props.onPressTab) {
+          this.props.onPressTab(e);
+        }
+      }
+    };
+    this.onEnter = e => {
+      e.preventDefault();
+      let collaborator;
+      if (this.filteredCollaborators.length === 1) {
+        collaborator = this.filteredCollaborators[0];
+      } else if (this.state.highlightIndex > -1) {
+        collaborator = this.filteredCollaborators[this.state.highlightIndex];
+      }
+      if (collaborator) {
+        this.onCollaboratorClick(collaborator);
+      }
+    };
+    this.onUpArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
+      if (highlightIndex > 0) {
+        this.setState({
+          highlightIndex: highlightIndex - 1
+        }, () => {
+          if (highlightIndex < this.filteredCollaborators.length - maxItemNum) {
+            this.container.scrollTop -= itemHeight;
+          }
+        });
+      } else {
+        this.setState({
+          highlightIndex: this.filteredCollaborators.length - 1
+        }, () => {
+          this.container.scrollTop = this.container.scrollHeight;
+        });
+      }
+    };
+    this.onDownArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndex,
+        maxItemNum,
+        itemHeight
+      } = this.state;
+      if (highlightIndex < this.filteredCollaborators.length - 1) {
+        this.setState({
+          highlightIndex: highlightIndex + 1
+        }, () => {
+          if (highlightIndex >= maxItemNum) {
+            this.container.scrollTop += itemHeight;
+          }
+        });
+      } else {
+        this.setState({
+          highlightIndex: 0
+        }, () => {
+          this.container.scrollTop = 0;
+        });
+      }
+    };
+    this.onEsc = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const {
+        isInModal,
+        value,
+        onCommitCancel,
+        onClose
+      } = this.props;
+      if (isInModal) {
+        onClose && onClose();
+        return;
+      }
+      if (_objectUtils.default.isSameObject({
+        'value': this.state.value
+      }, {
+        value
+      })) {
+        onCommitCancel && onCommitCancel();
+        return;
+      }
+      this.onCommit();
+    };
+    this.onCommit = () => {
+      const value = this.getValue();
+      this.props.onCommit(value);
+    };
+    this.getValue = () => {
+      return this.state.value;
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.LeftArrow || e.keyCode === _constants.KeyCodes.RightArrow) {
+        e.stopPropagation();
+      }
+    };
+    this.state = {
+      searchValue: '',
+      highlightIndex: -1,
+      maxItemNum: 0,
+      itemHeight: 0
+    };
+    this.filteredCollaborators = props.collaborators || [];
+  }
+  componentDidMount() {
+    if (this.props.isInModal && this.parent) {
+      if (this.parent.getBoundingClientRect().top > 330) {
+        this.ref.style.top = '-200px';
+      }
+    }
+    if (!this.props.isInModal && this.ref) {
+      const {
+        bottom
+      } = this.ref.getBoundingClientRect();
+      if (bottom > window.innerHeight) {
+        this.ref.style.top = "".concat(window.innerHeight - bottom, "px");
+      }
+    }
+    if (this.container && this.collaboratorItem) {
+      this.setState({
+        maxItemNum: this.getMaxItemNum(),
+        itemHeight: parseInt(getComputedStyle(this.collaboratorItem, null).height)
+      });
+    }
+    document.addEventListener('keydown', this.onHotKey, true);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.isInModal && nextProps.value !== this.state.value && Array.isArray(nextProps.value)) {
+      this.setState({
+        value: nextProps.value
+      });
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onHotKey, true);
+  }
+  render() {
+    const {
+      searchValue,
+      highlightIndex
+    } = this.state;
+    const {
+      isInModal,
+      value = [],
+      target
+    } = this.props;
+    const dom = /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-container dtable-ui-collaborator-editor-container",
+      ref: ref => this.ref = ref
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "collaborator-search-container"
+    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
+      autoFocus: true,
+      placeholder: (0, _lang.getLocale)('Search_collaborator'),
+      value: searchValue,
+      onChange: this.onValueChanged,
+      onKeyDown: this.onKeyDown
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "collaborator-list-container",
+      ref: ref => this.container = ref
+    }, this.filteredCollaborators.length > 0 && this.filteredCollaborators.map((collaborator, index) => {
+      const isSelected = value.includes(collaborator.email);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: collaborator.email,
+        className: (0, _classnames.default)('collaborator-item-container', {
+          'collaborator-item-container-highlight': index === highlightIndex
+        }),
+        ref: ref => this.collaboratorItem = ref,
+        onClick: this.onCollaboratorClick.bind(this, collaborator)
+      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+        collaborator: collaborator
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "collaborator-checked"
+      }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })));
+    }), this.filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-editor-no-search-result"
+    }, (0, _lang.getLocale)('No_collaborators_available'))));
+    if (isInModal) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: ref => this.parent = ref
+      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
+        placement: "bottom-start",
+        isOpen: true,
+        target: target,
+        hideArrow: true,
+        fade: false,
+        className: "dtable-ui-row-expand-select-editor-popover"
+      }, dom));
+    }
+    return dom;
+  }
+}
+var _default = exports.default = PCCollaboratorEditor;

package/lib/CollaboratorItem/index.css

@@ -20,7 +20,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 5px 0 2px;
+  margin: 0 5px 0 1px;
 }
 
 .dtable-ui.collaborator-item .collaborator-avatar img {

package/lib/CollaboratorItem/index.js

@@ -6,22 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
 class CollaboratorItem extends _react.default.Component {
   constructor() {
     super(...arguments);
-    this.onDeleteCollaborator = () => {
+    this.onDeleteCollaborator = event => {
+      event.stopPropagation();
+      event && event.nativeEvent.stopImmediatePropagation();
       this.props.onDeleteCollaborator(this.props.collaborator);
     };
   }
   render() {
     const {
+      className,
       collaborator,
       enableDeleteCollaborator
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       title: collaborator.name,
-      className: "dtable-ui collaborator-item"
+      className: (0, _classnames.default)('dtable-ui collaborator-item', className)
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "collaborator-avatar"
     }, /*#__PURE__*/_react.default.createElement("img", {

package/lib/DTableFiltersPopover/utils/index.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "FilterItemUtils", {
     return _filterItemUtils.default;
   }
 });
-exports.isFilterTermArray = exports.isCheckboxColumn = exports.getUpdatedFilterByTermModifier = exports.getUpdatedFilterBySpecialTerm = exports.getUpdatedFilterBySelectSingle = exports.getUpdatedFilterBySelectMultiple = exports.getUpdatedFilterByRate = exports.getUpdatedFilterByPredicate = exports.getUpdatedFilterByNormalTerm = exports.getUpdatedFilterByCreator = exports.getUpdatedFilterByColumn = exports.getUpdatedFilterByCollaborator = exports.getFormulaColumnFilter = exports.getFilterByColumn = exports.getDateColumnFormat = exports.getColumnOptions = exports.getColumnByKey = exports.generateDefaultUser = void 0;
+exports.isFilterTermArray = exports.isCheckboxColumn = exports.getUpdatedFilterByTermModifier = exports.getUpdatedFilterBySpecialTerm = exports.getUpdatedFilterBySelectSingle = exports.getUpdatedFilterBySelectMultiple = exports.getUpdatedFilterByRate = exports.getUpdatedFilterByPredicate = exports.getUpdatedFilterByNormalTerm = exports.getUpdatedFilterByCreator = exports.getUpdatedFilterByColumn = exports.getUpdatedFilterByCollaborator = exports.getFormulaColumnFilter = exports.getFilterByColumn = exports.getColumnOptions = exports.getColumnByKey = exports.generateDefaultUser = void 0;
 var _dtableUtils = require("dtable-utils");
 var _filterItemUtils = _interopRequireDefault(require("./filter-item-utils"));
 var _constants = require("../constants");
@@ -459,12 +459,6 @@ const isCheckboxColumn = column => {
   return type === _dtableUtils.CellType.CHECKBOX;
 };
 exports.isCheckboxColumn = isCheckboxColumn;
-const getDateColumnFormat = column => {
-  const format = column && column.data && column.data.format ? column.data.format : _dtableUtils.DEFAULT_DATE_FORMAT;
-  // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
-  return format;
-};
-exports.getDateColumnFormat = getDateColumnFormat;
 const getMediaUrl = () => {
   var _window, _window$dtable, _window2, _window2$dtablePlugin;
   return ((_window = window) === null || _window === void 0 ? void 0 : (_window$dtable = _window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.mediaUrl) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$dtablePlugin = _window2.dtablePluginConfig) === null || _window2$dtablePlugin === void 0 ? void 0 : _window2$dtablePlugin.mediaUrl) || '/media/';

package/lib/DTableFiltersPopover/widgets/filter-calendar.js

@@ -13,7 +13,7 @@ require("dayjs/locale/en-gb");
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
 var _lang = require("../../lang");
-var _utils = require("../utils");
+var _columnUtils = require("../../utils/column-utils");
 require("@seafile/seafile-calendar/assets/index.css");
 let now = (0, _dayjs.default)();
 class FilterCalendar extends _react.Component {
@@ -80,7 +80,7 @@ class FilterCalendar extends _react.Component {
       open: false,
       value: null
     };
-    const DataFormat = (0, _utils.getDateColumnFormat)(props.filterColumn).trim();
+    const DataFormat = (0, _columnUtils.getDateColumnFormat)(props.filterColumn).trim();
     // Minutes and seconds are not supported at present
     this.columnDataFormat = DataFormat.split(' ')[0];
     this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();

package/lib/DTableSelect/index.js

@@ -26,13 +26,15 @@ class DTableSelect extends _react.default.Component {
       isDisabled,
       form,
       customFilterOption,
-      autoFocus
+      autoFocus,
+      className
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
       value: value,
       onChange: onChange,
       options: options,
       isMulti: isMulti,
+      className: className,
       classNamePrefix: classNamePrefix,
       styles: style || _utils.MenuSelectStyle,
       components: {

package/lib/DateEditor/index.js

@@ -1,15 +1,13 @@
 "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 _react = _interopRequireDefault(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _dtableUtils = require("dtable-utils");
+var _dayjs = _interopRequireDefault(require("../utils/dayjs"));
 var _pcDateEditorPopover = _interopRequireDefault(require("./pc-date-editor-popover"));
 var _mbDateEditorPopover = _interopRequireDefault(require("./mb-date-editor-popover"));
 require("dayjs/locale/zh-cn");
@@ -26,45 +24,21 @@ class DateEditor extends _react.default.Component {
       let dateFormat = column.data && column.data.format;
       return dateFormat || defaultDateFormat;
     };
-    this.onDateEditorToggle = () => {
-      const {
-        isReadOnly
-      } = this.props;
-      if (isReadOnly) {
-        return;
-      }
-      this.setState({
-        isPopoverShow: !this.state.isPopoverShow
-      });
-    };
     this.onValueChanged = value => {
       if (value !== this.state.newValue) {
         this.setState({
           newValue: value
         });
         this.onCommit(value);
-        if (!this.state.showHourAndMinute) {
-          this.onClosePopover();
-        }
       }
     };
     this.onCommit = newValue => {
-      let updated = {};
-      let {
-        column
-      } = this.props;
-      updated[column.key] = newValue;
-      this.props.onCommit(updated);
-    };
-    this.onClosePopover = () => {
-      this.setState({
-        isPopoverShow: false
-      });
+      this.props.onCommit(newValue);
     };
     this.state = {
       isDateInit: false,
       newValue: '',
-      isPopoverShow: false,
+      dateFormat: '',
       showHourAndMinute: false,
       defaultCalendarValue: null
     };
@@ -79,47 +53,36 @@ class DateEditor extends _react.default.Component {
     this.setState({
       isDateInit: true,
       newValue: value,
-      dateFormat: dateFormat,
+      dateFormat,
       showHourAndMinute: dateFormat.indexOf('HH:mm') > -1
     });
   }
   render() {
     if (!this.state.isDateInit) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "cell-editor date-editor"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "date-editor-container"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "control-form"
-      })));
+      return null;
     }
     let {
       lang,
       column,
-      className
+      className,
+      isInModal
     } = this.props;
     let {
       newValue,
-      isPopoverShow,
       dateFormat,
       showHourAndMinute
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cell-editor dtable-ui-date-editor"
-    }, !isPopoverShow && /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-date-editor-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "form-control",
-      onClick: this.onDateEditorToggle
-    }, (0, _dtableUtils.getDateDisplayString)(newValue, dateFormat))), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: '(min-width: 768px)'
     }, /*#__PURE__*/_react.default.createElement(_pcDateEditorPopover.default, {
       className: className,
       lang: lang,
+      isInModal: isInModal,
       value: newValue,
       dateFormat: dateFormat,
       showHourAndMinute: showHourAndMinute,
-      onValueChanged: this.onValueChanged
+      onValueChanged: this.onValueChanged,
+      hideCalendar: this.props.hideCalendar
     })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: '(max-width: 767.8px)'
     }, /*#__PURE__*/_react.default.createElement(_mbDateEditorPopover.default, {
@@ -131,8 +94,8 @@ class DateEditor extends _react.default.Component {
       showHourAndMinute: showHourAndMinute,
       column: column,
       onValueChanged: this.onValueChanged,
-      onClosePopover: this.onClosePopover
-    }))));
+      onClosePopover: this.props.hideCalendar
+    })));
   }
 }
 DateEditor.defaultProps = {