dtable-ui-component 6.0.29-beta9 → 6.0.29

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
-var _DepartmentMultipleSelectEditor = _interopRequireDefault(require("../../../DepartmentMultipleSelectEditor"));
-var _departments = require("../../../constants/departments");
+var _selectedDepartments = _interopRequireDefault(require("../../../Department-editor/selected-departments"));
+var _departmentMultipleSelect = _interopRequireDefault(require("../../../Department-editor/department-multiple-select"));
+var _constants = require("../../../Department-editor/constants");
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 function DepartmentMultipleSelectFilter(props) {
@@ -26,7 +26,7 @@ function DepartmentMultipleSelectFilter(props) {
     onClickOutside: () => setIsShowSelector(false)
   }, [selectedDepartments]);
   function renderUserDepartmentOptions() {
-    return _departments.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+    return _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
       const {
         type,
         name
@@ -78,14 +78,14 @@ function DepartmentMultipleSelectFilter(props) {
     className: "selected-option"
   }, selectedDepartments.length > 0 ? /*#__PURE__*/_react.default.createElement("span", {
     className: "selected-option-show"
-  }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
+  }, /*#__PURE__*/_react.default.createElement(_selectedDepartments.default, {
     value: selectedDepartments,
     departments: departments
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
   }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-down3"
-  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentMultipleSelectEditor.default, {
+  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_departmentMultipleSelect.default, {
     isShowSelectedDepartments: false,
     classNamePrefix: "filter",
     value: selectedDepartments,

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-single-select-filter.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
-var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../../DepartmentSingleSelectEditor"));
-var _departments = require("../../../constants/departments");
+var _selectedDepartments = _interopRequireDefault(require("../../../Department-editor/selected-departments"));
+var _departmentSingleSelect = _interopRequireDefault(require("../../../Department-editor/department-single-select"));
+var _constants = require("../../../Department-editor/constants");
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
 function DepartmentSingleSelectFilter(props) {
@@ -31,7 +31,7 @@ function DepartmentSingleSelectFilter(props) {
   }, [selectedDepartment]);
   function renderUserDepartmentOptions(onSelect) {
     if (!departments || departments.length === 0) return [];
-    return _departments.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+    return _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
       const {
         type,
         name
@@ -76,14 +76,14 @@ function DepartmentSingleSelectFilter(props) {
     className: "selected-option"
   }, value ? /*#__PURE__*/_react.default.createElement("span", {
     className: "selected-option-show"
-  }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
+  }, /*#__PURE__*/_react.default.createElement(_selectedDepartments.default, {
     value: selectedDepartmentIds,
     departments: departments
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
   }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-down3"
-  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
+  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_departmentSingleSelect.default, {
     enableSelectRange: false,
     column: column,
     value: value,

package/lib/DateEditor/index.js

@@ -1,83 +1,109 @@
 "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 _dtableUtils = require("dtable-utils");
 var _dayjs = _interopRequireDefault(require("../utils/dayjs"));
-var _pcEditor = _interopRequireDefault(require("./pc-editor"));
-var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+var _pcDateEditorPopover = _interopRequireDefault(require("./pc-date-editor-popover"));
+var _mbDateEditorPopover = _interopRequireDefault(require("./mb-date-editor-popover"));
 require("dayjs/locale/zh-cn");
 require("dayjs/locale/en-gb");
 require("./index.css");
-const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    isMobile,
-    lang,
-    isReadOnly,
-    column,
-    className,
-    isInModal,
-    firstDayOfWeek,
-    size,
-    value: oldValue,
-    hideCalendar,
-    onCommit
-  } = _ref;
-  const [isDateInit, setDateInit] = (0, _react.useState)(false);
-  const [value, setValue] = (0, _react.useState)(oldValue || '');
-  const format = (0, _react.useMemo)(() => {
-    var _column$data;
-    return (column === null || column === void 0 ? void 0 : column.data) && (column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.format) || _dtableUtils.DEFAULT_DATE_FORMAT;
-  }, [column]);
-  const showHourAndMinute = (0, _react.useMemo)(() => format.indexOf('HH:mm') > -1, [format]);
-  const handelCommit = (0, _react.useCallback)(newValue => {
-    if (value !== newValue) {
-      setValue(newValue);
-      onCommit(newValue);
-    }
-  }, [value, onCommit]);
-  (0, _react.useEffect)(() => {
+class DateEditor extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.getDateFormat = () => {
+      let {
+        column
+      } = this.props;
+      let defaultDateFormat = 'YYYY-MM-DD';
+      let dateFormat = column.data && column.data.format;
+      return dateFormat || defaultDateFormat;
+    };
+    this.onValueChanged = value => {
+      if (value !== this.state.newValue) {
+        this.setState({
+          newValue: value
+        });
+        this.onCommit(value);
+      }
+    };
+    this.onCommit = newValue => {
+      this.props.onCommit(newValue);
+    };
+    this.state = {
+      isDateInit: false,
+      newValue: '',
+      dateFormat: '',
+      showHourAndMinute: false,
+      defaultCalendarValue: null
+    };
+  }
+  componentDidMount() {
+    const {
+      value,
+      lang
+    } = this.props;
     _dayjs.default.locale(lang);
-    setDateInit(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (!isDateInit) return null;
-  const props = {
-    lang,
-    value,
-    dateFormat: format,
-    showHourAndMinute,
-    firstDayOfWeek,
-    className,
-    onCommit: handelCommit,
-    onClose: hideCalendar
-  };
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    isInModal: isInModal,
-    ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    isReadOnly: isReadOnly,
-    column: column,
-    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, {
-    isInModal: isInModal,
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: '(max-width: 768px)'
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    isReadOnly: isReadOnly,
-    column: column,
-    ref: ref
-  }))));
-});
+    let dateFormat = this.getDateFormat();
+    this.setState({
+      isDateInit: true,
+      newValue: value,
+      dateFormat,
+      showHourAndMinute: dateFormat.indexOf('HH:mm') > -1
+    });
+  }
+  render() {
+    if (!this.state.isDateInit) {
+      return null;
+    }
+    let {
+      lang,
+      column,
+      className,
+      isInModal,
+      firstDayOfWeek
+    } = this.props;
+    let {
+      newValue,
+      dateFormat,
+      showHourAndMinute
+    } = this.state;
+    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,
+      hideCalendar: this.props.hideCalendar,
+      firstDayOfWeek: firstDayOfWeek
+    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: '(max-width: 767.8px)'
+    }, /*#__PURE__*/_react.default.createElement(_mbDateEditorPopover.default, {
+      className: className,
+      isReadOnly: this.props.isReadOnly,
+      lang: lang,
+      value: newValue,
+      dateFormat: dateFormat,
+      showHourAndMinute: showHourAndMinute,
+      column: column,
+      onValueChanged: this.onValueChanged,
+      onClosePopover: this.props.hideCalendar,
+      firstDayOfWeek: firstDayOfWeek
+    })));
+  }
+}
+DateEditor.defaultProps = {
+  isReadOnly: false,
+  value: '',
+  lang: 'en'
+};
 var _default = exports.default = DateEditor;

package/lib/DateEditor/mb-date-editor-popover/custom-rc-calendar.css

@@ -0,0 +1,118 @@
+.dtable-ui.mb-date-editor-picker .rc-calendar-date {
+  width: 28px;
+  height: 30px;
+  border-radius: 50%;
+  font-size: 14px;
+  line-height: 30px;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-date-panel {
+  width: 100%;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-selected-day .rc-calendar-date {
+  background-color: #FcEcD9;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-date:hover,
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-year-panel-year:hover,
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
+  background-color: #FcEcD9;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-selected-date .rc-calendar-date,
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-selected-date .rc-calendar-date:hover,
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year,
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
+  background-color: #f09f3f;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-next-year-btn:not([href]):not([tabindex]),
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-prev-year-btn:not([href]):not([tabindex]),
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-next-month-btn:not([href]):not([tabindex]),
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-prev-month-btn:not([href]):not([tabindex]) {
+  color: #999;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-next-year-btn:not([href]):not([tabindex]):hover,
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-prev-year-btn:not([href]):not([tabindex]):hover,
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-next-month-btn:not([href]):not([tabindex]):hover,
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-prev-month-btn:not([href]):not([tabindex]):hover {
+  color: #666;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-today .rc-calendar-date {
+  border: none;
+  position: relative;  
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar .rc-calendar-today .rc-calendar-date::after {
+  content: '';
+  background: #f09f3f;
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  left: 45%;
+  bottom: 0%;
+  display: inline-block;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar .rdg-editor-container input.editor-main[readonly] {
+  background-color: #fff;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-time-picker {
+  z-index: 1;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-right-panel-body ul li.highlight {
+  margin: 0;
+  border: none;
+  background-color: #fff;
+  font-size: 12px;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar {
+  box-shadow: none;
+  border-radius: 0px;
+  border: 1px solid #e9e9e9;
+  border-left: none;
+  border-right: none;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-date {
+  font-size: 14px;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-date-panel {
+  width: 100%;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-body {
+  height: 22rem;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-table tr {
+  height: 3rem;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-prev-month-btn,
+.dtable-ui.mb-date-editor-picker .rc-calendar-next-month-btn,
+.dtable-ui.mb-date-editor-picker .rc-calendar-prev-year-btn,
+.dtable-ui.mb-date-editor-picker .rc-calendar-next-year-btn {
+  font-size: 30px;
+  width: 50px;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-header {
+  border-bottom: none;
+  margin-top: 0.5rem;
+}
+
+.dtable-ui.mb-date-editor-picker .rc-calendar-year-select,
+.dtable-ui.mb-date-editor-picker .rc-calendar-month-select,
+.dtable-ui.mb-date-editor-picker .rc-calendar-day-select {
+  font-size: 16px;
+  padding: 5px;
+}

package/lib/DateEditor/mb-date-editor-popover/index.css

@@ -0,0 +1,45 @@
+@import url('./custom-rc-calendar.css');
+@import url('../../css/mb-cell-editor.css');
+
+@media screen and (max-width: 767.8px) {
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input {
+    display: flex;
+    border-top: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input .date-input {
+    flex: 1;
+    background-color: #fff;
+  }
+  
+  .dtable-ui-mb-date-editor-body .mb-date-editor-input .date-input .date-input-day {
+    background-color: #f5f5f5;
+    border: 1px solid #e9e9e9;
+    margin: 10px;
+    padding: 3px 5px;
+    border-radius: 3px;
+  }
+
+  .dtable-ui-mb-date-editor-body .dtable-ui.mb-date-editor-picker {
+    display: block;
+    position: relative;
+    margin-top: 20px;
+    line-height: 1.5;
+    box-sizing: border-box;
+  }
+
+  .dtable-ui-mb-date-editor-body .mb-date-editor-clear {
+    padding: 10px 0;
+    margin-top: 20px;
+    border-bottom: 1px solid #e9e9e9;
+    border-top: 1px solid #e9e9e9;
+    text-align: center;
+    color: #d27053;
+    background-color: #fff;
+  }
+
+  .dtable-ui .am-picker-popup-header .am-picker-popup-item {
+    color: #E5A252;
+  }
+}

package/lib/DateEditor/mb-date-editor-popover/index.js

@@ -0,0 +1,226 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
+var SeaDatePicker = _interopRequireWildcard(require("@seafile/seafile-calendar/lib/Picker"));
+var _DatePicker = _interopRequireDefault(require("../../DatePicker"));
+var _lang = require("../../lang");
+var _editorUtils = require("../../utils/editor-utils");
+var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
+require("@seafile/seafile-calendar/assets/index.css");
+require("./index.css");
+class DateEditorPopover extends _react.default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleHistaryBack = e => {
+      e.preventDefault();
+      this.closePopover();
+    };
+    this.handleDateChange = date => {
+      let {
+        dateFormat,
+        showHourAndMinute
+      } = this.props;
+      let newValue = (0, _dayjs.default)(date);
+      if (showHourAndMinute) {
+        const {
+          datePickerValue
+        } = this.state;
+        const HM = datePickerValue.format('HH:mm');
+        const format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
+        const newDate = (0, _dayjs.default)(date).format(format) + ' ' + HM;
+        newValue = (0, _dayjs.default)(newDate);
+      }
+      this.setState({
+        datePickerValue: (0, _dayjs.default)(date)
+      });
+      this.props.onValueChanged(newValue.format(dateFormat));
+    };
+    this.handleTimeChange = time => {
+      const {
+        datePickerValue
+      } = this.state;
+      const {
+        dateFormat
+      } = this.props;
+      const format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
+      const YMD = datePickerValue.format(format);
+      const newDate = YMD + ' ' + (0, _dayjs.default)(time).format('HH:mm');
+      const newValue = (0, _dayjs.default)(newDate);
+      this.setState({
+        datePickerValue: newValue
+      });
+      this.props.onValueChanged(datePickerValue.format(dateFormat));
+    };
+    this.closePopover = () => {
+      this.props.onClosePopover();
+    };
+    this.deleteDate = () => {
+      this.props.onValueChanged('');
+      this.closePopover();
+    };
+    this.onChange = value => {
+      if (!value) return;
+      let {
+        dateFormat
+      } = this.props;
+      this.setState({
+        datePickerValue: value
+      });
+      this.props.onValueChanged(value.format(dateFormat));
+    };
+    this.onContainerClick = event => {
+      if (this.editorPopover && this.editorPopover.contains(event.target)) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        return false;
+      }
+    };
+    this.setEditorPopover = editorPopover => {
+      this.editorPopover = editorPopover;
+    };
+    this.getCalendarContainer = () => {
+      return this.calendarContainerRef.current;
+    };
+    this.getCalender = () => {
+      let {
+        dateFormat,
+        lang,
+        className,
+        firstDayOfWeek
+      } = this.props;
+      let defaultValue = (0, _dayjs.default)().clone();
+      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
+        className: (0, _classnames.default)('dtable-rc-calendar', className),
+        locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+        format: dateFormat,
+        defaultValue: defaultValue,
+        dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
+        showDateInput: false,
+        focusablePanel: false,
+        showToday: false,
+        showTime: false,
+        style: {
+          width: '100%',
+          fontSize: '14px'
+        },
+        firstDayOfWeek: firstDayOfWeek
+      });
+    };
+    this.renderDataPicker = () => {
+      let {
+        dateFormat
+      } = this.props;
+      let {
+        datePickerValue
+      } = this.state;
+      let calendar = this.getCalender();
+      return /*#__PURE__*/_react.default.createElement(SeaDatePicker, {
+        open: true,
+        style: {
+          width: '100%'
+        },
+        calendar: calendar,
+        value: datePickerValue,
+        getCalendarContainer: this.getCalendarContainer,
+        onChange: this.onChange
+      }, _ref => {
+        let {
+          value
+        } = _ref;
+        value = value && value.format(dateFormat);
+        return /*#__PURE__*/_react.default.createElement("div", {
+          tabIndex: "0",
+          onFocus: this.onReadOnlyFocus
+        }, /*#__PURE__*/_react.default.createElement("input", {
+          placeholder: (0, _lang.getLocale)('Please_select'),
+          readOnly: true,
+          tabIndex: "-1",
+          className: "form-control",
+          value: value || ''
+        }), /*#__PURE__*/_react.default.createElement("div", {
+          ref: this.calendarContainerRef,
+          style: {
+            height: '22rem'
+          }
+        }));
+      });
+    };
+    this.state = {
+      open: true,
+      datePickerValue: props.value ? (0, _dayjs.default)(props.value) : (0, _dayjs.default)().clone()
+    };
+    this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    history.pushState(null, null, '#'); // eslint-disable-line
+    window.addEventListener('popstate', this.handleHistaryBack, false);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('popstate', this.handleHistaryBack, false);
+  }
+  render() {
+    const {
+      lang,
+      column,
+      dateFormat,
+      showHourAndMinute
+    } = this.props;
+    const leftFormat = dateFormat.split(' ')[0];
+    const rightFormat = dateFormat.split(' ')[1];
+    const {
+      datePickerValue
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.setEditorPopover,
+      className: "dtable-ui-mb-editor-popover mb-date-editor-popover",
+      onClick: this.onContainerClick
+    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
+      title: column.name,
+      leftContent: /*#__PURE__*/_react.default.createElement("i", {
+        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
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mb-editor-body dtable-ui-mb-date-editor-body"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-date-editor-input"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input"
+    }, /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
+      mode: "date",
+      locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      value: this.state.value,
+      onChange: this.handleDateChange
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input-day"
+    }, datePickerValue && datePickerValue.format(leftFormat)))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input"
+    }, /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
+      mode: "time",
+      locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      value: this.state.value,
+      onChange: this.handleTimeChange
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input-day"
+    }, datePickerValue && datePickerValue.format(rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui mb-date-editor-picker"
+    }, this.renderDataPicker()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-date-editor-clear"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: this.deleteDate,
+      className: "clear-date"
+    }, (0, _lang.getLocale)('Clear')))));
+  }
+}
+var _default = exports.default = DateEditorPopover;