dtable-ui-component 6.0.29-beta2 → 6.0.29-beta3

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("../../../Department-editor/selected-departments"));
-var _departmentMultipleSelect = _interopRequireDefault(require("../../../Department-editor/department-multiple-select"));
-var _constants = require("../../../Department-editor/constants");
+var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
+var _DepartmentMultipleSelectEditor = _interopRequireDefault(require("../../../DepartmentMultipleSelectEditor"));
+var _departments = require("../../../constants/departments");
 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 _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+    return _departments.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(_departmentMultipleSelect.default, {
+  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentMultipleSelectEditor.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("../../../Department-editor/selected-departments"));
-var _departmentSingleSelect = _interopRequireDefault(require("../../../Department-editor/department-single-select"));
-var _constants = require("../../../Department-editor/constants");
+var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
+var _DepartmentSingleSelectEditor = _interopRequireDefault(require("../../../DepartmentSingleSelectEditor"));
+var _departments = require("../../../constants/departments");
 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 _constants.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+    return _departments.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(_departmentSingleSelect.default, {
+  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectEditor.default, {
     enableSelectRange: false,
     column: column,
     value: value,

package/lib/DateEditor/index.js

@@ -1,109 +1,83 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+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"));
+var _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
 require("dayjs/locale/zh-cn");
 require("dayjs/locale/en-gb");
 require("./index.css");
-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);
-    let dateFormat = this.getDateFormat();
-    this.setState({
-      isDateInit: true,
-      newValue: value,
-      dateFormat,
-      showHourAndMinute: dateFormat.indexOf('HH:mm') > -1
-    });
-  }
-  render() {
-    if (!this.state.isDateInit) {
-      return null;
+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);
     }
-    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'
-};
+  }, [value, onCommit]);
+  (0, _react.useEffect)(() => {
+    _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
+  }))));
+});
 var _default = exports.default = DateEditor;

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

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

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

@@ -0,0 +1,39 @@
+@import url('./custom-rc-calendar.css');
+
+.dtable-ui-mobile-date-editor .dtable-ui-mobile-date-editor-input {
+  display: flex;
+  border-bottom: 1px solid #e9e9e9;
+}
+
+.dtable-ui-mobile-date-editor .dtable-ui-mobile-date-editor-input .date-input {
+  flex: 1;
+  background-color: #fff;
+}
+
+.dtable-ui-mobile-date-editor .dtable-ui-mobile-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-mobile-date-editor .dtable-ui.dtable-ui-mobile-date-editor-picker {
+  display: block;
+  position: relative;
+  margin-top: 20px;
+  line-height: 1.5;
+  box-sizing: border-box;
+}
+
+.dtable-ui-mobile-date-editor .dtable-ui-mobile-date-editor-clear {
+  padding: 10px 0;
+  border-bottom: 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-editor/index.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _datePicker = _interopRequireDefault(require("antd-mobile/lib/date-picker"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/zh-cn");
+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 _editorUtils = require("../../utils/editor-utils");
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+require("@seafile/seafile-calendar/assets/index.css");
+require("./index.css");
+let now = (0, _dayjs.default)();
+const {
+  Header,
+  Body
+} = _MobileFullScreenPage.default;
+class MBDateEditor extends _react.default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleDateChange = date => {
+      if (this.showTime) {
+        const HM = (0, _dayjs.default)(this.state.time).format('HH:mm');
+        // In iOS, the time standard is ISO-8601, new Date("YYYY-MM-DD") will be wrong, new Date("YYYY/MM/DD") will be OK.
+        const newTime = (0, _dayjs.default)(date).format('YYYY/MM/DD') + ' ' + HM;
+        this.setState({
+          time: new Date(newTime)
+        });
+      } else {
+        this.setState({
+          time: date
+        });
+      }
+    };
+    this.handleTimeChange = time => {
+      // In iOS, the time standard is ISO-8601, new Date("YYYY-MM-DD") will be wrong, new Date("YYYY/MM/DD") will be OK.
+      const YMD = (0, _dayjs.default)(this.state.time).format('YYYY/MM/DD');
+      const newTime = YMD + ' ' + (0, _dayjs.default)(time).format('HH:mm');
+      this.setState({
+        time: new Date(newTime)
+      });
+    };
+    this.onSave = () => {
+      const value = (0, _dayjs.default)(this.state.time).format(this.format);
+      this.props.onCommit(value);
+      this.props.onClose();
+    };
+    this.deleteDate = () => {
+      this.props.onCommit(null);
+      this.props.onClose();
+    };
+    this.getCalendarContainer = () => {
+      return this.calendarContainerRef.current;
+    };
+    this.onChange = value => {
+      if (!value) return;
+      const newTime = (0, _dayjs.default)(value.format(this.format));
+      this.setState({
+        time: newTime
+      });
+    };
+    this.renderCalender = () => {
+      const {
+        lang,
+        className,
+        firstDayOfWeek
+      } = this.props;
+      const {
+        time
+      } = this.state;
+      const calendar = /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
+        className: (0, _classnames.default)('dtable-rc-calendar', className),
+        locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+        dateInputPlaceholder: (0, _lang.getLocale)('Please_input'),
+        format: this.format,
+        defaultValue: this.defaultCalendarValue,
+        showDateInput: false,
+        focusablePanel: false,
+        showToday: false,
+        showTime: false,
+        style: {
+          width: '100%',
+          fontSize: '14px'
+        },
+        firstDayOfWeek: firstDayOfWeek
+      });
+      return /*#__PURE__*/_react.default.createElement(_Picker.default, {
+        calendar: calendar,
+        value: time,
+        onChange: this.onChange,
+        getCalendarContainer: this.getCalendarContainer,
+        open: true,
+        style: {
+          width: '100%'
+        }
+      }, _ref => {
+        let {
+          time
+        } = _ref;
+        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: "ant-calendar-picker-input ant-input form-control",
+          value: time ? (0, _dayjs.default)(time).format(this.getFormat()) : ''
+        }), /*#__PURE__*/_react.default.createElement("div", {
+          ref: this.calendarContainerRef,
+          style: {
+            height: '22rem'
+          }
+        }));
+      });
+    };
+    const {
+      dateFormat,
+      showHourAndMinute
+    } = props;
+    this.state = {
+      time: null
+    };
+    this.calendarContainerRef = /*#__PURE__*/_react.default.createRef();
+    this.leftFormat = dateFormat ? dateFormat.indexOf(' ') === -1 ? dateFormat : dateFormat.slice(0, dateFormat.indexOf(' ')) : 'YYYY-MM-DD';
+    this.rightFormat = 'HH:mm';
+    this.showTime = showHourAndMinute;
+    this.format = showHourAndMinute ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD';
+  }
+  componentDidMount() {
+    let {
+      value,
+      lang
+    } = this.props;
+    const iszhcn = lang === 'zh-cn';
+    if (iszhcn) {
+      now = now.locale('zh-cn');
+    } else {
+      now = now.locale('en-gb');
+    }
+    if (!value) {
+      value = new Date(Date.now());
+    }
+    this.defaultCalendarValue = now.clone();
+    this.setState({
+      time: iszhcn ? (0, _dayjs.default)(value).locale('zh-cn') : (0, _dayjs.default)(value).locale('en-gb')
+    });
+  }
+  render() {
+    const {
+      lang,
+      column
+    } = this.props;
+    const {
+      time
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+      className: "dtable-ui-mobile-date-editor",
+      onClose: this.props.onClose
+    }, /*#__PURE__*/_react.default.createElement(Header, {
+      onLeftClick: this.props.onClose,
+      onRightClick: this.onSave
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: '#f09f3f'
+      }
+    }, (0, _lang.getLocale)('Done'))), /*#__PURE__*/_react.default.createElement(Body, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-date-editor-input"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input",
+      style: this.showTime ? {
+        width: '50%'
+      } : {
+        width: '100%'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+      mode: "date",
+      minDate: _editorUtils.minDate,
+      maxDate: _editorUtils.maxDate,
+      locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      value: null,
+      onChange: this.handleDateChange
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input-day"
+    }, (0, _dayjs.default)(time).format(this.leftFormat)))), this.showTime && /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input",
+      style: {
+        width: '50%'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+      mode: "time",
+      locale: (0, _editorUtils.initDateEditorLanguage)(lang),
+      value: null,
+      onChange: this.handleTimeChange
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "date-input-day"
+    }, (0, _dayjs.default)(time).format(this.rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui dtable-ui-mobile-date-editor-picker"
+    }, this.renderCalender()), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mobile-date-editor-clear"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: this.deleteDate,
+      className: "clear-date"
+    }, (0, _lang.getLocale)('Clear')))));
+  }
+}
+var _default = exports.default = MBDateEditor;