dtable-ui-component 6.0.26-beta1 → 6.0.26-beta3

package/lib/DateEditor/index.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _dtableUtils = require("dtable-utils");
 var _dayjs = _interopRequireDefault(require("../utils/dayjs"));
-var _large = _interopRequireDefault(require("./large"));
+var _lg = _interopRequireDefault(require("./lg"));
 var _sm = _interopRequireDefault(require("./sm"));
 require("dayjs/locale/zh-cn");
 require("dayjs/locale/en-gb");
@@ -35,7 +35,7 @@ const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     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 onValueChanged = (0, _react.useCallback)(newValue => {
+  const handelCommit = (0, _react.useCallback)(newValue => {
     if (value !== newValue) {
       setValue(newValue);
       onCommit(newValue);
@@ -54,10 +54,10 @@ const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     showHourAndMinute,
     firstDayOfWeek,
     className,
-    onValueChanged,
+    onCommit: handelCommit,
     onClose: hideCalendar
   };
-  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_large.default, Object.assign({}, props, {
+  if (size === 'lg') return /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
     isInModal: isInModal,
     ref: ref
   }));
@@ -68,7 +68,7 @@ const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_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(_large.default, Object.assign({}, props, {
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, Object.assign({}, props, {
     isInModal: isInModal,
     ref: ref
   }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {

package/lib/DateEditor/{large.js → lg.js}

@@ -28,10 +28,10 @@ class Large extends _react.default.Component {
         value: value,
         open: true // if value changed, don't close datePicker
       });
-      this.props.onValueChanged(value.format(dateFormat));
+      this.props.onCommit(value.format(dateFormat));
     };
     this.onBlur = () => {
-      this.props.onValueChanged(this.getValue());
+      this.props.onCommit(this.getValue());
     };
     this.getValue = () => {
       let {
@@ -67,7 +67,7 @@ class Large extends _react.default.Component {
       this.setState({
         value: null
       });
-      this.props.onValueChanged(null);
+      this.props.onCommit(null);
     };
     this.onFocusDatePicker = () => {
       this.setState({

package/lib/DateEditor/sm/index.css

@@ -1,5 +1,4 @@
 @import url('./custom-rc-calendar.css');
-@import url('../../css/mb-cell-editor.css');
 
 .mobile-dtable-ui-date-editor .mobile-dtable-ui-date-editor-input {
   display: flex;

package/lib/DateEditor/sm/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,90 +9,73 @@ 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 SeaDatePicker = _interopRequireWildcard(require("@seafile/seafile-calendar/lib/Picker"));
+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)();
 class Small 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);
+      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.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);
+      // 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({
-        datePickerValue: newValue
+        time: new Date(newTime)
       });
-      this.props.onValueChanged(datePickerValue.format(dateFormat));
     };
-    this.closePopover = () => {
+    this.onSave = () => {
+      const value = (0, _dayjs.default)(this.state.time).format(this.format);
+      this.props.onCommit(value);
       this.props.onClose();
     };
     this.deleteDate = () => {
-      this.props.onValueChanged('');
-      this.closePopover();
+      this.props.onCommit(null);
+      this.props.onClose();
+    };
+    this.getCalendarContainer = () => {
+      return this.calendarContainerRef.current;
     };
     this.onChange = value => {
       if (!value) return;
-      let {
-        dateFormat
-      } = this.props;
+      const newTime = (0, _dayjs.default)(value.format(this.format));
       this.setState({
-        datePickerValue: value
+        time: newTime
       });
-      this.props.onValueChanged(value.format(dateFormat));
-    };
-    this.getCalendarContainer = () => {
-      return this.calendarContainerRef.current;
     };
-    this.getCalender = () => {
-      let {
-        dateFormat,
+    this.renderCalender = () => {
+      const {
+        time,
         lang,
         className,
         firstDayOfWeek
       } = this.props;
-      let defaultValue = (0, _dayjs.default)().clone();
-      return /*#__PURE__*/_react.default.createElement(_seafileCalendar.default, {
+      const calendar = /*#__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'),
+        format: this.format,
+        defaultValue: this.defaultCalendarValue,
         showDateInput: false,
         focusablePanel: false,
         showToday: false,
@@ -104,38 +86,28 @@ class Small extends _react.default.PureComponent {
         },
         firstDayOfWeek: firstDayOfWeek
       });
-    };
-    this.renderDataPicker = () => {
-      let {
-        dateFormat
-      } = this.props;
-      let {
-        datePickerValue
-      } = this.state;
-      let calendar = this.getCalender();
-      return /*#__PURE__*/_react.default.createElement(SeaDatePicker, {
+      return /*#__PURE__*/_react.default.createElement(_Picker.default, {
+        calendar: calendar,
+        value: time,
+        onChange: this.onChange,
+        getCalendarContainer: this.getCalendarContainer,
         open: true,
         style: {
           width: '100%'
-        },
-        calendar: calendar,
-        value: datePickerValue,
-        getCalendarContainer: this.getCalendarContainer,
-        onChange: this.onChange
+        }
       }, _ref => {
         let {
-          value
+          time
         } = _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'),
+          placeholder: (0, _lang.getLocale)('please_select'),
           readOnly: true,
           tabIndex: "-1",
-          className: "form-control",
-          value: value || ''
+          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: {
@@ -144,30 +116,45 @@ class Small extends _react.default.PureComponent {
         }));
       });
     };
+    const {
+      dateFormat,
+      showHourAndMinute
+    } = props;
     this.state = {
-      open: true,
-      datePickerValue: props.value ? (0, _dayjs.default)(props.value) : (0, _dayjs.default)().clone()
+      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() {
-    history.pushState(null, null, '#'); // eslint-disable-line
-    window.addEventListener('popstate', this.handleHistaryBack, false);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('popstate', this.handleHistaryBack, false);
+    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,
-      dateFormat,
-      showHourAndMinute
+      column
     } = this.props;
-    const leftFormat = dateFormat.split(' ')[0];
-    const rightFormat = dateFormat.split(' ')[1];
     const {
-      datePickerValue
+      time
     } = this.state;
     return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
       className: "mobile-dtable-ui-date-editor",
@@ -181,26 +168,36 @@ class Small extends _react.default.PureComponent {
     }, (0, _lang.getLocale)('Done')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "mobile-dtable-ui-date-editor-input"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "date-input"
+      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: this.state.value,
+      value: time,
       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"
+    }, (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: this.state.value,
+      value: time,
       onChange: this.handleTimeChange
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input-day"
-    }, datePickerValue && datePickerValue.format(rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
+    }, (0, _dayjs.default)(time).format(this.rightFormat))))), /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui mobile-dtable-ui-date-editor-picker"
-    }, this.renderDataPicker()), /*#__PURE__*/_react.default.createElement("div", {
+    }, this.renderCalender()), /*#__PURE__*/_react.default.createElement("div", {
       className: "mobile-dtable-ui-date-editor-clear"
     }, /*#__PURE__*/_react.default.createElement("div", {
       onClick: this.deleteDate,

package/lib/RowExpandEditor/RowExpandDateEditor/sm.js

@@ -55,7 +55,6 @@ class Small extends _react.default.Component {
   render() {
     let {
       column,
-      isInModal,
       lang
     } = this.props;
     let {
@@ -72,7 +71,6 @@ class Small extends _react.default.Component {
       },
       onClick: this.toggleEditor
     }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''), /*#__PURE__*/_react.default.createElement(_RightAngle.default, null)), isShowEditor && /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
-      isInModal: isInModal,
       value: value,
       lang: lang,
       column: column,

package/lib/utils/editor-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
+exports.minDate = exports.maxDate = exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
 const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
 const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
 const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
@@ -66,4 +66,8 @@ exports.getSelectOptionItem = getSelectOptionItem;
 const getTrimmedString = value => {
   return typeof value === 'string' ? value.trim() : '';
 };
-exports.getTrimmedString = getTrimmedString;
+
+// min date and max date for mobile date picker
+exports.getTrimmedString = getTrimmedString;
+const minDate = exports.minDate = new Date('1900/01/01');
+const maxDate = exports.maxDate = new Date('2100/12/31');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.26beta1",
+  "version": "6.0.26beta3",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",