dtable-ui-component 6.0.2 → 6.0.4

package/lib/Comment/utils/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _common = require("./common");
+Object.keys(_common).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _common[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _common[key];
+    }
+  });
+});
+var _utilities = require("./utilities");
+Object.keys(_utilities).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utilities[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utilities[key];
+    }
+  });
+});

package/lib/Comment/utils/utilities.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Utilities = void 0;
+var _getEventTransfer = _interopRequireDefault(require("../../utils/get-event-transfer"));
+class Utilities {
+  constructor() {
+    this.onInsertElement = _ref => {
+      let {
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      } = _ref;
+      if (range) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      return this.createHtmlElement({
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      });
+    };
+    this.getHtmlElement = (nodeType, content) => {
+      switch (nodeType) {
+        case 'image':
+          {
+            let parentElement = document.createElement('div');
+            parentElement.className = 'image-container';
+            parentElement.contentEditable = 'false';
+            let imageContainer = document.createElement('img');
+            imageContainer.src = content;
+            imageContainer.height = 60;
+            parentElement.appendChild(imageContainer);
+            return parentElement.outerHTML;
+          }
+        default:
+          {
+            return '';
+          }
+      }
+    };
+    this.createHtmlElement = _ref2 => {
+      let {
+        commentRef,
+        selection,
+        range,
+        content,
+        nodeType
+      } = _ref2;
+      let spanNode1;
+      let spanNode2;
+      let imageContainer;
+      if (nodeType === 'image') {
+        spanNode1 = document.createElement('div');
+        spanNode1.className = 'image-container';
+        spanNode1.contentEditable = 'false';
+        imageContainer = document.createElement('img');
+        imageContainer.src = content;
+        imageContainer.height = 60;
+        spanNode1.appendChild(imageContainer);
+        spanNode2 = document.createElement('span');
+        spanNode2.innerHTML = ' ';
+      }
+      if (nodeType === 'collaborator') {
+        spanNode1 = document.createElement('span');
+        spanNode2 = document.createElement('span');
+        spanNode1.className = 'at-text';
+        spanNode1.contentEditable = 'true';
+        spanNode1.innerHTML = "@".concat(content.name);
+        spanNode2.innerHTML = ' ';
+      }
+      let frag = document.createDocumentFragment();
+      let lastNode;
+      frag.appendChild(spanNode1);
+      lastNode = frag.appendChild(spanNode2.firstChild);
+      if (range) {
+        range.insertNode(frag);
+      } else {
+        commentRef.appendChild(frag);
+        range = selection.getRangeAt(0);
+      }
+      if (lastNode) {
+        range = range.cloneRange();
+        range.setStartAfter(lastNode);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      return range;
+    };
+    this.onSelectParticipant = _ref3 => {
+      let {
+        selection,
+        range,
+        participant,
+        callBack,
+        commentRef
+      } = _ref3;
+      if (range) {
+        // delete '@xxx';
+        selection.removeAllRanges();
+        selection.addRange(range);
+        const textNode = range.startContainer;
+        const atIndex = this.getAtIndexWithAnchorPosition(range.startOffset, textNode.data);
+        if (atIndex > -1) {
+          range.setStart(textNode, atIndex);
+          range.setEnd(textNode, range.endOffset);
+          range.deleteContents();
+        }
+      }
+      let newRange = this.createHtmlElement({
+        selection,
+        range,
+        content: participant,
+        nodeType: 'collaborator',
+        commentRef
+      });
+      if (callBack) {
+        callBack();
+      }
+      if (commentRef) {
+        commentRef.focus();
+      }
+      return newRange;
+    };
+    /**
+     * get the index of '@' from anchor position.
+     * @param {*} anchorPosition '@text|anchor position|'
+     * @param {*} text '@abc'
+     * @returns index
+     * e.g. '@abc|anchor position|' // 0
+     *      '@123 @|anchor position| @abc' // 5
+     */
+    this.getAtIndexWithAnchorPosition = (anchorPosition, text) => {
+      let atIndex = -1;
+      for (let i = anchorPosition - 1; i > -1; i--) {
+        if (text[i] === '@') {
+          atIndex = i;
+          break;
+        }
+      }
+      return atIndex;
+    };
+    this.onPaste = (event, callBack) => {
+      event.stopPropagation();
+      let cliperData = (0, _getEventTransfer.default)(event);
+      if (cliperData.files) {
+        let file = cliperData.files[0];
+        let isImage = /image/i.test(file.type);
+        if (isImage) {
+          event.preventDefault();
+          if (callBack) {
+            callBack(cliperData.files);
+          }
+        }
+      } else {
+        event.preventDefault();
+        let text = cliperData.text;
+        if (document.queryCommandSupported('insertText')) {
+          document.execCommand('insertText', false, text);
+        } else {
+          document.execCommand('paste', false, text);
+        }
+      }
+    };
+  }
+}
+exports.Utilities = Utilities;

package/lib/DTableColorPicker/index.css

@@ -5,7 +5,7 @@
   border-radius: 3px;
   z-index: 100;
   padding: 0.75rem;
-  line-height: normal;
+  line-height: 16px;
   position: absolute;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 4px;
 }

package/lib/DTableCustomizeSelect/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _modalPortal = _interopRequireDefault(require("../common/modal-portal"));
+var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 require("./index.css");
 class DTableCustomizeSelect extends _react.Component {
   constructor(props) {
@@ -126,7 +126,7 @@ class DTableCustomizeSelect extends _react.Component {
       closeSelect: this.closeSelect,
       getFilterOptions: this.getFilterOptions,
       supportMultipleSelect: this.props.supportMultipleSelect
-    }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement(_SelectOptionGroup.default, {
+    }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_SelectOptionGroup.default, {
       className: className,
       value: value,
       addOptionAble: addOptionAble,

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/DTableGroupSelect/index.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _modalPortal = _interopRequireDefault(require("../common/modal-portal.js"));
-var _selectOptionGroup = _interopRequireDefault(require("./select-option-group.js"));
+var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
+var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
 require("./index.css");
 class DTableGroupSelect extends _react.Component {
   constructor(props) {
@@ -108,7 +108,7 @@ class DTableGroupSelect extends _react.Component {
       onClickOutside: this.onClickOutside,
       closeSelect: this.closeSelect,
       getFilterOptions: this.getFilterOptions
-    }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement(_selectOptionGroup.default, {
+    }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_selectOptionGroup.default, {
       className: className,
       selectedOptions: selectedOptions,
       position: this.selector.getBoundingClientRect(),

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 = {

package/lib/DateEditor/pc-date-editor-popover.js

@@ -11,8 +11,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Picker"));
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var _editorUtils = require("../utils/editor-utils");
+var _constants = require("../constants");
 require("@seafile/seafile-calendar/assets/index.css");
 var _lang = require("../lang");
+let now = (0, _dayjs.default)();
 class PCDateEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -23,21 +25,49 @@ class PCDateEditorPopover extends _react.default.Component {
         dateFormat
       } = this.props;
       this.setState({
-        datePickerValue: value,
+        value: value,
         open: true // if value changed, don't close datePicker
       });
       this.props.onValueChanged(value.format(dateFormat));
     };
+    this.onBlur = () => {
+      this.props.onValueChanged(this.getValue());
+    };
+    this.getValue = () => {
+      let {
+        dateFormat
+      } = this.props;
+      let value = this.state.value ? this.state.value.format(dateFormat) : null;
+      return value;
+    };
+    this.getInputNode = () => {
+      if (!this.datePickerRef) return null;
+      if (this.datePickerRef.tagName === 'INPUT') {
+        return this.datePickerRef;
+      }
+      return this.datePickerRef.querySelector('input:not([type=hidden])');
+    };
     this.onOpenChange = open => {
+      const {
+        isInModal
+      } = this.props;
+      if (open) {
+        this.toggleCalendar(open);
+      }
+      if (isInModal && !open) {
+        this.props.hideCalendar && this.props.hideCalendar();
+      }
+    };
+    this.toggleCalendar = open => {
       this.setState({
-        open: open
+        open
       });
-      return;
     };
     this.onClear = () => {
       this.setState({
-        datePickerValue: null
+        value: null
       });
+      this.props.onValueChanged(null);
     };
     this.onFocusDatePicker = () => {
       this.setState({
@@ -49,7 +79,59 @@ class PCDateEditorPopover extends _react.default.Component {
       event.stopPropagation();
     };
     this.getCalendarContainer = () => {
-      return this.calendarContainerRef.current;
+      const {
+        isInModal
+      } = this.props;
+      return isInModal ? this.calendarContainerRef.current : document.body;
+    };
+    this.handleKeyDown = e => {
+      const directionKeyCodes = [37, 38, 39, 40];
+      if (directionKeyCodes.includes(e.keyCode)) {
+        e.stopPropagation();
+      } else if (e.keyCode === _constants.KeyCodes.Enter) {
+        e.preventDefault();
+        this.onBlur();
+        if (this.props.selectDownCell) this.props.selectDownCell();
+      }
+    };
+    this.onClick = e => {
+      if (!this.showHourAndMinute && e.target.className === 'rc-calendar-date') {
+        this.timer = setTimeout(() => {
+          this.closeEditor();
+        }, 1);
+      }
+    };
+    this.closeEditor = () => {
+      this.toggleCalendar(false);
+      this.onBlur();
+    };
+    this.onReadOnlyFocus = () => {
+      this.toggleCalendar(true);
+    };
+    this.onClickRightPanelTime = () => {
+      const {
+        isInModal
+      } = this.props;
+      let onClickRightPanelTime = isInModal ? this.props.hideCalendar : this.closeEditor;
+      // we should change value and save it(async function), then close Editor.
+      setTimeout(() => {
+        onClickRightPanelTime && onClickRightPanelTime();
+      }, 1);
+    };
+    this.onHotKey = e => {
+      if (e.keyCode === _constants.KeyCodes.Escape) {
+        if (this.props.isInModal) {
+          e.stopPropagation();
+          this.props.hideCalendar && this.props.hideCalendar();
+        }
+      }
+    };
+    this.getDefaultTime = () => {
+      const {
+        value
+      } = this.props;
+      if (value) return (0, _dayjs.default)(value).format('HH:mm');
+      return '';
     };
     this.getCalender = () => {
       let {
@@ -59,6 +141,7 @@ class PCDateEditorPopover extends _react.default.Component {
         className
       } = this.props;
       let defaultValue = (0, _dayjs.default)().clone();
+      const defaultTime = this.getDefaultTime();
       return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
@@ -69,29 +152,83 @@ class PCDateEditorPopover extends _react.default.Component {
         defaultValue: defaultValue,
         showHourAndMinute: showHourAndMinute,
         dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
+        defaultMinutesTime: defaultTime,
         showDateInput: true,
         focusablePanel: false,
         onClear: this.onClear
       });
     };
+    const {
+      dateFormat: _dateFormat,
+      value: _value
+    } = this.props;
     this.state = {
-      open: true,
-      datePickerValue: props.value ? (0, _dayjs.default)(props.value) : null
+      value: _value ? (0, _dayjs.default)(_value) : null,
+      open: false
     };
     this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
+    this.defaultCalendarValue = null;
+    this.showHourAndMinute = !!(_dateFormat.indexOf('HH:mm') > -1);
+  }
+  componentDidMount() {
+    const {
+      value,
+      lang,
+      isInModal
+    } = this.props;
+    const iszhcn = lang === 'zh-cn';
+    if (iszhcn) {
+      now = now.locale('zh-cn');
+    } else {
+      now = now.locale('en-gb');
+    }
+    this.timer = null;
+    this.defaultCalendarValue = now.clone();
+    if (value) {
+      if (typeof value === 'string' && value.length === 1 && !isNaN(Number(value, 10))) {
+        this.timer = setTimeout(() => {
+          let inputDom = document.getElementsByClassName('rc-calendar-input')[0];
+          if (inputDom) {
+            inputDom.value = value;
+          }
+        }, 200);
+        return;
+      }
+      let validValue = (0, _dayjs.default)(value).isValid() ? (0, _dayjs.default)(value) : (0, _dayjs.default)(this.defaultCalendarValue);
+      this.setState({
+        value: iszhcn ? (0, _dayjs.default)(validValue).locale('zh-cn') : (0, _dayjs.default)(validValue).locale('en-gb')
+      });
+    }
+    if (isInModal) {
+      this.onReadOnlyFocus();
+    }
+    document.addEventListener('keydown', this.onHotKey, true);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onHotKey, true);
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
   }
   render() {
     let {
-      dateFormat
+      dateFormat,
+      isInModal
     } = this.props;
     let {
       open,
-      datePickerValue
+      value
     } = this.state;
     const calendar = this.getCalender();
-    return /*#__PURE__*/_react.default.createElement(_Picker.default, {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-picker-container ".concat(isInModal ? 'modal-date-picker-container' : ''),
+      ref: ref => this.datePickerRef = ref,
+      onKeyDown: this.handleKeyDown,
+      onClick: this.onClick
+    }, /*#__PURE__*/_react.default.createElement(_Picker.default, {
       open: open,
-      value: datePickerValue,
+      value: value,
       animation: "slide-up",
       style: {
         zIndex: 1001
@@ -119,7 +256,7 @@ class PCDateEditorPopover extends _react.default.Component {
       }), /*#__PURE__*/_react.default.createElement("div", {
         ref: this.calendarContainerRef
       }));
-    });
+    }));
   }
 }
 var _default = exports.default = PCDateEditorPopover;