@seafile/seafile-calendar 0.1.2-beta.0 → 1.0.0-alpha.0

package/es/Calendar.js

@@ -15,6 +15,7 @@ import CalendarRightPanel from './calendar/CalendarRightPanel';
 import { calendarMixinWrapper, calendarMixinPropTypes, calendarMixinDefaultProps, getNowByCurrentStateValue } from './mixin/CalendarMixin';
 import { commonMixinWrapper, propType, defaultProp } from './mixin/CommonMixin';
 import DateInput from './date/DateInput';
+import TimeInput from './time/TimeInput';
 import { getTimeConfig, getTodayTime, syncTime, CALENDAR_STATUS } from './util';
 import { goStartMonth, goEndMonth, goTime } from './util/toTime';
 import localeData from 'dayjs/plugin/localeData';
@@ -47,7 +48,8 @@ var Calendar = function (_React$Component) {
       mode: _this.props.mode || 'date',
       value: getMomentObjectIfValid(props.value) || getMomentObjectIfValid(props.defaultValue) || dayjs(),
       selectedValue: props.selectedValue || props.defaultSelectedValue,
-      currentStatus: CALENDAR_STATUS.SPECIFIC_TIME
+      currentStatus: CALENDAR_STATUS.SPECIFIC_TIME,
+      hasExplicitTime: false
     };
     return _this;
   }
@@ -78,6 +80,8 @@ var Calendar = function (_React$Component) {
   };
 
   Calendar.prototype.render = function render() {
+    var _this2 = this;
+
     var props = this.props,
         state = this.state;
     var locale = props.locale,
@@ -120,7 +124,9 @@ var Calendar = function (_React$Component) {
 
       timePickerEle = React.cloneElement(timePicker, timePickerProps);
     }
-    var calendarInputPlaceholder = dateInputPlaceholder || (Array.isArray(this.getFormat()) ? this.getFormat()[0] : this.getFormat());
+
+    var baseFormat = Array.isArray(this.getFormat()) ? this.getFormat()[0] : this.getFormat();
+    var headerDatePlaceholder = baseFormat.replace(/\s*HH:mm(?::ss)?\s*/, '').trim() || 'YYYY-MM-DD';
     var inputFormat = Array.isArray(this.getFormat()) ? this.getFormat() : [this.getFormat()];
 
     var dateInputElement = props.showDateInput ? React.createElement(DateInput, {
@@ -128,8 +134,8 @@ var Calendar = function (_React$Component) {
       key: 'date-input',
       value: value,
       locale: locale,
-      placeholder: calendarInputPlaceholder,
-      showClear: true,
+      placeholder: headerDatePlaceholder,
+      showClear: false,
       disabledTime: disabledTime,
       disabledDate: disabledDate,
       onClear: this.onClear,
@@ -141,6 +147,17 @@ var Calendar = function (_React$Component) {
       inputMode: inputMode
     }) : null;
 
+    var timeInputTopElement = React.createElement(TimeInput, {
+      key: 'time-input-top',
+      prefixCls: prefixCls,
+      value: value,
+      selectedValue: selectedValue,
+      showFromSelected: this.state.hasExplicitTime,
+      onChange: this.onTimeInputChange,
+      onSelect: this.onTimeInputSelect,
+      inputMode: 'numeric'
+    });
+
     var children = [];
     if (props.renderSidebar) {
       children.push(props.renderSidebar());
@@ -148,7 +165,24 @@ var Calendar = function (_React$Component) {
     children.push(React.createElement(
       'div',
       { className: prefixCls + '-panel', key: 'panel' },
-      dateInputElement,
+      React.createElement(
+        'div',
+        { className: prefixCls + '-inputs' },
+        React.createElement(
+          'div',
+          { className: prefixCls + '-date-input-col' },
+          React.createElement(
+            'div',
+            { className: prefixCls + '-date-input' },
+            dateInputElement
+          )
+        ),
+        React.createElement(
+          'div',
+          { className: prefixCls + '-time-input-col' },
+          timeInputTopElement
+        )
+      ),
       React.createElement(
         'div',
         { className: prefixCls + '-date-panel-container' },
@@ -192,39 +226,45 @@ var Calendar = function (_React$Component) {
               firstDayOfWeek: firstDayOfWeek,
               currentStatus: currentStatus
             })
-          ),
-          React.createElement(CalendarFooter, {
-            showOk: props.showOk,
-            mode: mode,
-            renderFooter: props.renderFooter,
-            locale: locale,
-            prefixCls: prefixCls,
-            showToday: props.showToday,
-            disabledTime: disabledTime,
-            showTimePicker: showTimePicker,
-            showDateInput: props.showDateInput,
-            timePicker: timePicker,
-            selectedValue: selectedValue,
-            value: value,
-            disabledDate: disabledDate,
-            okDisabled: props.showOk !== false && (!selectedValue || !this.isAllowedDate(selectedValue)),
-            onOk: this.onOk,
-            onSelect: this.onSelect,
-            onToday: this.onToday,
-            onOpenTimePicker: this.openTimePicker,
-            onCloseTimePicker: this.closeTimePicker
-          })
+          )
         ),
         showHourAndMinute && React.createElement(CalendarRightPanel, {
           prefixCls: prefixCls,
           value: value,
+          selectedValue: selectedValue,
           locale: locale,
-          onSelect: this.onDateTableSelect,
+          onSelect: function onSelect(v) {
+            if (!_this2.state.hasExplicitTime) {
+              _this2.setState({ hasExplicitTime: true });
+            }
+            _this2.onDateTableSelect(v);
+          },
           onClickRightPanelTime: onClickRightPanelTime,
           defaultMinutesTime: this.props.defaultMinutesTime,
           format: inputFormat
         })
-      )
+      ),
+      React.createElement(CalendarFooter, {
+        showOk: props.showOk,
+        mode: mode,
+        renderFooter: props.renderFooter,
+        locale: locale,
+        prefixCls: prefixCls,
+        showToday: props.showToday,
+        disabledTime: disabledTime,
+        showTimePicker: showTimePicker,
+        showDateInput: props.showDateInput,
+        timePicker: timePicker,
+        selectedValue: selectedValue,
+        value: value,
+        disabledDate: disabledDate,
+        okDisabled: props.showOk !== false && (!selectedValue || !this.isAllowedDate(selectedValue)),
+        onOk: this.onOk,
+        onSelect: this.onSelect,
+        onToday: this.onToday,
+        onOpenTimePicker: this.openTimePicker,
+        onCloseTimePicker: this.closeTimePicker
+      })
     ));
 
     return this.renderRoot({
@@ -285,14 +325,14 @@ Calendar.defaultProps = _extends({}, calendarMixinDefaultProps, defaultProp, {
 });
 
 var _initialiseProps = function _initialiseProps() {
-  var _this2 = this;
+  var _this3 = this;
 
   this.onPanelChange = function (value, mode) {
-    var props = _this2.props,
-        state = _this2.state;
+    var props = _this3.props,
+        state = _this3.state;
 
     if (!('mode' in props)) {
-      _this2.setState({ mode: mode });
+      _this3.setState({ mode: mode });
     }
     props.onPanelChange(value || state.value, mode);
   };
@@ -304,109 +344,109 @@ var _initialiseProps = function _initialiseProps() {
     var keyCode = event.keyCode;
     // mac
     var ctrlKey = event.ctrlKey || event.metaKey;
-    var disabledDate = _this2.props.disabledDate;
-    var value = _this2.state.value;
+    var disabledDate = _this3.props.disabledDate;
+    var value = _this3.state.value;
 
     switch (keyCode) {
       case KeyCode.DOWN:
-        _this2.goTime(1, 'weeks');
+        _this3.goTime(1, 'weeks');
         event.preventDefault();
         return 1;
       case KeyCode.UP:
-        _this2.goTime(-1, 'weeks');
+        _this3.goTime(-1, 'weeks');
         event.preventDefault();
         return 1;
       case KeyCode.LEFT:
         if (ctrlKey) {
-          _this2.goTime(-1, 'years');
+          _this3.goTime(-1, 'years');
         } else {
-          _this2.goTime(-1, 'days');
+          _this3.goTime(-1, 'days');
         }
         event.preventDefault();
         return 1;
       case KeyCode.RIGHT:
         if (ctrlKey) {
-          _this2.goTime(1, 'years');
+          _this3.goTime(1, 'years');
         } else {
-          _this2.goTime(1, 'days');
+          _this3.goTime(1, 'days');
         }
         event.preventDefault();
         return 1;
       case KeyCode.HOME:
-        _this2.setValue(goStartMonth(_this2.state.value));
+        _this3.setValue(goStartMonth(_this3.state.value));
         event.preventDefault();
         return 1;
       case KeyCode.END:
-        _this2.setValue(goEndMonth(_this2.state.value));
+        _this3.setValue(goEndMonth(_this3.state.value));
         event.preventDefault();
         return 1;
       case KeyCode.PAGE_DOWN:
-        _this2.goTime(1, 'month');
+        _this3.goTime(1, 'month');
         event.preventDefault();
         return 1;
       case KeyCode.PAGE_UP:
-        _this2.goTime(-1, 'month');
+        _this3.goTime(-1, 'month');
         event.preventDefault();
         return 1;
       case KeyCode.ENTER:
         if (!disabledDate || !disabledDate(value)) {
-          _this2.onSelect(value, {
+          _this3.onSelect(value, {
             source: 'keyboard'
           });
         }
         event.preventDefault();
         return 1;
       default:
-        _this2.props.onKeyDown(event);
+        _this3.props.onKeyDown(event);
         return 1;
     }
   };
 
   this.onClear = function () {
-    _this2.onSelect(null);
-    _this2.props.onClear();
-    _this2.setState({ currentStatus: CALENDAR_STATUS.CURRENT_TIME });
+    _this3.onSelect(null);
+    _this3.props.onClear();
+    _this3.setState({ currentStatus: CALENDAR_STATUS.CURRENT_TIME, hasExplicitTime: false });
   };
 
   this.onOk = function () {
-    var selectedValue = _this2.state.selectedValue;
+    var selectedValue = _this3.state.selectedValue;
 
-    if (_this2.isAllowedDate(selectedValue)) {
-      _this2.props.onOk(selectedValue);
+    if (_this3.isAllowedDate(selectedValue)) {
+      _this3.props.onOk(selectedValue);
     }
   };
 
   this.onDateInputChange = function (value) {
-    _this2.onSelect(value, {
+    _this3.onSelect(value, {
       source: 'dateInput'
     });
   };
 
   this.onDateInputSelect = function (value) {
-    _this2.onSelect(value, {
+    _this3.onSelect(value, {
       source: 'dateInputSelect'
     });
   };
 
   this.onDateTableSelect = function (value) {
-    var timePicker = _this2.props.timePicker;
-    var selectedValue = _this2.state.selectedValue;
+    var timePicker = _this3.props.timePicker;
+    var selectedValue = _this3.state.selectedValue;
 
-    _this2.setState({ currentStatus: CALENDAR_STATUS.SPECIFIC_TIME });
+    _this3.setState({ currentStatus: CALENDAR_STATUS.SPECIFIC_TIME });
     if (!selectedValue && timePicker) {
       var timePickerDefaultValue = timePicker.props.defaultValue;
       if (timePickerDefaultValue) {
         syncTime(timePickerDefaultValue, value);
       }
     }
-    _this2.onSelect(value);
+    _this3.onSelect(value);
   };
 
   this.onToday = function () {
-    var value = _this2.state.value;
+    var value = _this3.state.value;
 
     var now = getTodayTime(value);
-    _this2.onSelect(now, {
+    _this3.onSelect(now, {
       source: 'todayButton'
     });
   };
@@ -414,33 +454,48 @@ var _initialiseProps = function _initialiseProps() {
   this.onBlur = function (event) {
     setTimeout(function () {
       var dateInput = DateInput.getInstance();
-      var rootInstance = _this2.rootInstance;
+      var timeInput = TimeInput.getInstance && TimeInput.getInstance();
+      var rootInstance = _this3.rootInstance;
 
-      if (!rootInstance || rootInstance.contains(document.activeElement) || dateInput && dateInput.contains(document.activeElement)) {
+      if (!rootInstance || rootInstance.contains(document.activeElement) || dateInput && dateInput.contains(document.activeElement) || timeInput && timeInput.contains && timeInput.contains(document.activeElement)) {
         // focused element is still part of Calendar
         return;
       }
 
-      if (_this2.props.onBlur) {
-        _this2.props.onBlur(event);
+      if (_this3.props.onBlur) {
+        _this3.props.onBlur(event);
       }
     }, 0);
   };
 
+  this.onTimeInputChange = function (value) {
+    if (!_this3.state.hasExplicitTime) {
+      _this3.setState({ hasExplicitTime: true });
+    }
+    _this3.onSelect(value, { source: 'timeInputChange' });
+  };
+
+  this.onTimeInputSelect = function (value) {
+    if (!_this3.state.hasExplicitTime) {
+      _this3.setState({ hasExplicitTime: true });
+    }
+    _this3.onSelect(value, { source: 'timeInputSelect' });
+  };
+
   this.getRootDOMNode = function () {
-    return ReactDOM.findDOMNode(_this2);
+    return ReactDOM.findDOMNode(_this3);
   };
 
   this.openTimePicker = function () {
-    _this2.onPanelChange(null, 'time');
+    _this3.onPanelChange(null, 'time');
   };
 
   this.closeTimePicker = function () {
-    _this2.onPanelChange(null, 'date');
+    _this3.onPanelChange(null, 'date');
   };
 
   this.goTime = function (direction, unit) {
-    _this2.setValue(goTime(_this2.state.value, direction, unit));
+    _this3.setValue(goTime(_this3.state.value, direction, unit));
   };
 };
 

package/es/calendar/CalendarRightPanel.js

@@ -13,103 +13,232 @@ var CalendarRightPanel = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
-    _this.onSelect = function (value) {
-      _this.setState({
-        highlightTime: value
-      });
-      _this.props.onSelect(value);
-      _this.props.onClickRightPanelTime();
+    _this.centerScroll = function (container, index) {
+      if (!container || index < 0) return;
+      var firstItem = container.querySelector('li');
+      var itemHeight = firstItem && firstItem.offsetHeight || 32;
+      var containerHeight = container.clientHeight || 0;
+      var maxScroll = Math.max(0, container.scrollHeight - containerHeight);
+      var target = index * itemHeight - (containerHeight / 2 - itemHeight / 2);
+      if (target < 0) target = 0;
+      if (target > maxScroll) target = maxScroll;
+      container.scrollTop = target;
     };
 
-    _this.getTimes = function () {
-      var times = [];
-      for (var i = 0; i < 24; i++) {
-        var str = (String(i) + ':00').padStart(5, '0');
-        var str1 = (String(i) + ':30').padStart(5, '0');
-        times.push(str);
-        times.push(str1);
+    _this.onSelectMinute = function (minute) {
+      var base = _this.props.selectedValue || _this.props.value || _this.state.highlightTime || dayjs();
+      var h = parseInt(_this.getSelectedHour(), 10) || 0;
+      var m = parseInt(minute, 10) || 0;
+      var current = base.clone().hour(h).minute(m);
+      _this.skipScrollUpdates = 2;
+      _this.setState({ highlightTime: current });
+      _this.props.onSelect(current);
+      if (_this.props.onClickRightPanelTime) {
+        _this.props.onClickRightPanelTime();
       }
-      return times;
     };
 
-    _this.scrollUp = function () {
-      _this.timeRef.current.scrollBy(0, -200);
+    _this.onSelectHour = function (hour) {
+      var base = _this.props.selectedValue || _this.props.value || _this.state.highlightTime || dayjs();
+      var h = parseInt(hour, 10) || 0;
+      var m = parseInt(_this.getSelectedMinute(), 10) || 0;
+      var current = base.clone().hour(h).minute(m);
+      _this.skipScrollUpdates = 2;
+      _this.setState({ highlightTime: current });
+      _this.props.onSelect(current);
+    };
+
+    _this.getHours = function () {
+      return Array.from({ length: 24 }, function (_, i) {
+        return String(i).padStart(2, '0');
+      });
+    };
+
+    _this.getMinutes = function () {
+      return Array.from({ length: 60 }, function (_, i) {
+        return String(i).padStart(2, '0');
+      });
     };
 
-    _this.scrollDown = function () {
-      _this.timeRef.current.scrollBy(0, 200);
+    _this.getSelectedHour = function () {
+      var highlightTime = _this.state.highlightTime;
+      var _this$props = _this.props,
+          value = _this$props.value,
+          selectedValue = _this$props.selectedValue;
+
+      var v = highlightTime || selectedValue || value;
+      return v ? v.format('HH') : '00';
+    };
+
+    _this.getSelectedMinute = function () {
+      var highlightTime = _this.state.highlightTime;
+      var _this$props2 = _this.props,
+          value = _this$props2.value,
+          selectedValue = _this$props2.selectedValue;
+
+      var v = highlightTime || selectedValue || value;
+      return v ? v.format('mm') : '00';
     };
 
     var format = Array.isArray(_this.props.format) ? _this.props.format[0] : _this.props.format;
     _this.state = {
-      highlightTime: _this.props.value || null,
+      highlightTime: _this.props.selectedValue || _this.props.value || null,
       localeFormat: format
     };
-    _this.timeRef = React.createRef();
-    _this.times = _this.getTimes();
+
+    _this.hoursRef = React.createRef();
+    _this.minutesRef = React.createRef();
+    _this.hours = _this.getHours();
+    _this.minutes = _this.getMinutes();
+
+    _this.skipScrollUpdates = 0;
     return _this;
   }
 
+  CalendarRightPanel.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.selectedValue) {
+      if (!prevState.highlightTime || !prevState.highlightTime.isSame(nextProps.selectedValue)) {
+        return { highlightTime: nextProps.selectedValue };
+      }
+    }
+    return null;
+  };
+
   CalendarRightPanel.prototype.componentDidMount = function componentDidMount() {
-    var defaultMinutesTime = this.props.defaultMinutesTime;
+    var _this2 = this;
 
-    var showTimeIndex = this.times.findIndex(function (item) {
-      return item >= defaultMinutesTime;
+    var _props = this.props,
+        defaultMinutesTime = _props.defaultMinutesTime,
+        value = _props.value,
+        selectedValue = _props.selectedValue;
+
+    var baseTime = defaultMinutesTime || (selectedValue || value ? (selectedValue || value).format('HH:mm') : '00:00');
+    var base = baseTime.split(':');
+    var hIdx = this.hours.findIndex(function (h) {
+      return h === base[0];
+    });
+    var mIdx = this.minutes.findIndex(function (m) {
+      return m === base[1];
     });
-    var scrollTimeIndex = showTimeIndex > -1 ? showTimeIndex - 1 : 16;
-    this.timeRef.current.scrollTo(0, 34 * scrollTimeIndex);
+    var hourIndex = hIdx > -1 ? hIdx : 0;
+    var minuteIndex = mIdx > -1 ? mIdx : 0;
+
+    if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+      window.requestAnimationFrame(function () {
+        _this2.centerScroll(_this2.hoursRef.current, hourIndex);
+        _this2.centerScroll(_this2.minutesRef.current, minuteIndex);
+      });
+    } else {
+      this.centerScroll(this.hoursRef.current, hourIndex);
+      this.centerScroll(this.minutesRef.current, minuteIndex);
+    }
+  };
+
+  CalendarRightPanel.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var _this3 = this;
+
+    var prevV = prevState.highlightTime || prevProps.selectedValue || prevProps.value;
+    var currV = this.state.highlightTime || this.props.selectedValue || this.props.value;
+
+    var prevH = prevV ? prevV.format('HH') : '00';
+    var prevM = prevV ? prevV.format('mm') : '00';
+    var currH = currV ? currV.format('HH') : '00';
+    var currM = currV ? currV.format('mm') : '00';
+
+    if (this.skipScrollUpdates > 0) {
+      this.skipScrollUpdates -= 1;
+      return;
+    }
+
+    var hChanged = prevH !== currH;
+    var mChanged = prevM !== currM;
+    if (hChanged || mChanged) {
+      var scrollHours = function scrollHours() {
+        if (hChanged) {
+          var hIdx = _this3.hours.findIndex(function (h) {
+            return h === currH;
+          });
+          var hourIndex = hIdx > -1 ? hIdx : 0;
+          _this3.centerScroll(_this3.hoursRef.current, hourIndex);
+        }
+        if (mChanged) {
+          var mIdx = _this3.minutes.findIndex(function (m) {
+            return m === currM;
+          });
+          var minuteIndex = mIdx > -1 ? mIdx : 0;
+          _this3.centerScroll(_this3.minutesRef.current, minuteIndex);
+        }
+      };
+      if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+        window.requestAnimationFrame(scrollHours);
+      } else {
+        scrollHours();
+      }
+    }
   };
 
   CalendarRightPanel.prototype.render = function render() {
-    var _this2 = this;
+    var _this4 = this;
 
-    var _props = this.props,
-        value = _props.value,
-        prefixCls = _props.prefixCls,
-        locale = _props.locale;
+    var prefixCls = this.props.prefixCls;
 
-    var highlight = this.state.highlightTime;
-    var highlightTime = highlight ? highlight.format().slice(11, 16) : null;
-    var isZhcn = locale && locale.today === '今天';
+    var selectedHour = this.getSelectedHour();
+    var selectedMinute = this.getSelectedMinute();
     return React.createElement(
       'div',
       { className: prefixCls + '-right-panel' },
       React.createElement(
         'div',
-        { className: prefixCls + '-right-panel-header', onClick: this.scrollUp },
-        React.createElement('span', null)
+        { className: prefixCls + '-right-panel-time-header' },
+        selectedHour,
+        ':',
+        selectedMinute
       ),
       React.createElement(
         'div',
-        { className: prefixCls + '-right-panel-body', ref: this.timeRef },
+        { className: prefixCls + '-right-panel-body' },
         React.createElement(
-          'ul',
-          null,
-          this.times.map(function (time) {
-            var _time$split$map = time.split(':').map(function (n) {
-              return parseInt(n, 10);
-            }),
-                h = _time$split$map[0],
-                m = _time$split$map[1];
-
-            var current = value.hour(h).minute(m).second(0);
-            current = isZhcn ? current.locale('zh-cn') : current.locale('en-gb');
-            return React.createElement(
-              'li',
-              {
-                key: time,
-                onClick: _this2.onSelect.bind(_this2, current),
-                className: '' + (highlightTime === time ? prefixCls + '-selected-time' : '')
-              },
-              time
-            );
-          })
+          'div',
+          { className: prefixCls + '-right-panel-col', ref: this.hoursRef },
+          React.createElement(
+            'ul',
+            null,
+            this.hours.map(function (h) {
+              return React.createElement(
+                'li',
+                {
+                  key: h,
+                  onClick: function onClick() {
+                    return _this4.onSelectHour(h);
+                  },
+                  className: prefixCls + '-right-panel-item ' + (h === selectedHour ? prefixCls + '-right-panel-item-selected' : '')
+                },
+                h
+              );
+            })
+          )
+        ),
+        React.createElement(
+          'div',
+          { className: prefixCls + '-right-panel-col', ref: this.minutesRef },
+          React.createElement(
+            'ul',
+            null,
+            this.minutes.map(function (m) {
+              return React.createElement(
+                'li',
+                {
+                  key: m,
+                  onClick: function onClick() {
+                    return _this4.onSelectMinute(m);
+                  },
+                  className: prefixCls + '-right-panel-item ' + (m === selectedMinute ? prefixCls + '-right-panel-item-selected' : '')
+                },
+                m
+              );
+            })
+          )
         )
-      ),
-      React.createElement(
-        'div',
-        { className: prefixCls + '-right-panel-footer', onClick: this.scrollDown },
-        React.createElement('span', null)
       )
     );
   };
@@ -120,6 +249,7 @@ var CalendarRightPanel = function (_React$Component) {
 CalendarRightPanel.propTypes = {
   prefixCls: PropTypes.string,
   value: PropTypes.object,
+  selectedValue: PropTypes.object,
   onSelect: PropTypes.func,
   onClickRightPanelTime: PropTypes.func,
   locale: PropTypes.object,

package/es/date/DateInput.js

@@ -150,7 +150,6 @@ var _initialiseProps = function _initialiseProps() {
         onChange = _props.onChange,
         selectedValue = _props.selectedValue;
 
-    // 没有内容，合法并直接退出
 
     if (!str || !calendarStr) {
       _this3.setState({ isInputEmpty: true });