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

package/lib/calendar/CalendarRightPanel.js

@@ -36,103 +36,232 @@ var CalendarRightPanel = function (_React$Component) {
 
     var _this = (0, _possibleConstructorReturn3['default'])(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 || (0, _dayjs2['default'])();
+      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 || (0, _dayjs2['default'])();
+      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 = _react2['default'].createRef();
-    _this.times = _this.getTimes();
+
+    _this.hoursRef = _react2['default'].createRef();
+    _this.minutesRef = _react2['default'].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 _react2['default'].createElement(
       'div',
       { className: prefixCls + '-right-panel' },
       _react2['default'].createElement(
         'div',
-        { className: prefixCls + '-right-panel-header', onClick: this.scrollUp },
-        _react2['default'].createElement('span', null)
+        { className: prefixCls + '-right-panel-time-header' },
+        selectedHour,
+        ':',
+        selectedMinute
       ),
       _react2['default'].createElement(
         'div',
-        { className: prefixCls + '-right-panel-body', ref: this.timeRef },
+        { className: prefixCls + '-right-panel-body' },
         _react2['default'].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 _react2['default'].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 },
+          _react2['default'].createElement(
+            'ul',
+            null,
+            this.hours.map(function (h) {
+              return _react2['default'].createElement(
+                'li',
+                {
+                  key: h,
+                  onClick: function onClick() {
+                    return _this4.onSelectHour(h);
+                  },
+                  className: prefixCls + '-right-panel-item ' + (h === selectedHour ? prefixCls + '-right-panel-item-selected' : '')
+                },
+                h
+              );
+            })
+          )
+        ),
+        _react2['default'].createElement(
+          'div',
+          { className: prefixCls + '-right-panel-col', ref: this.minutesRef },
+          _react2['default'].createElement(
+            'ul',
+            null,
+            this.minutes.map(function (m) {
+              return _react2['default'].createElement(
+                'li',
+                {
+                  key: m,
+                  onClick: function onClick() {
+                    return _this4.onSelectMinute(m);
+                  },
+                  className: prefixCls + '-right-panel-item ' + (m === selectedMinute ? prefixCls + '-right-panel-item-selected' : '')
+                },
+                m
+              );
+            })
+          )
         )
-      ),
-      _react2['default'].createElement(
-        'div',
-        { className: prefixCls + '-right-panel-footer', onClick: this.scrollDown },
-        _react2['default'].createElement('span', null)
       )
     );
   };
@@ -143,6 +272,7 @@ var CalendarRightPanel = function (_React$Component) {
 CalendarRightPanel.propTypes = {
   prefixCls: _propTypes2['default'].string,
   value: _propTypes2['default'].object,
+  selectedValue: _propTypes2['default'].object,
   onSelect: _propTypes2['default'].func,
   onClickRightPanelTime: _propTypes2['default'].func,
   locale: _propTypes2['default'].object,

package/lib/date/DateInput.js

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

package/lib/time/TimeInput.js

@@ -0,0 +1,234 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactLifecyclesCompat = require('react-lifecycles-compat');
+
+var _dayjs = require('dayjs');
+
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var customParseFormat = require('dayjs/plugin/customParseFormat');
+_dayjs2['default'].extend(customParseFormat);
+
+function formatTime(value, format) {
+  if (!value) return '';
+  var fmt = Array.isArray(format) ? format[0] : format || 'HH:mm';
+  return value.format(fmt);
+}
+
+// Convert a loose numeric/time string into HH:mm
+// Rules (similar spirit to DateInput.initializeStr):
+// - Strip non-digits
+// - If len <= 2 => treat as hour
+// - If len > 2 => last two digits are minutes; preceding are hours
+// - Clamp hours to [0,23], minutes to [0,59]
+// - Return formatted HH:mm or '' when input is empty
+function initializeTime(str) {
+  if (typeof str !== 'string') return '';
+  var digits = str.replace(/\D/g, '');
+  if (!digits.length) return '';
+
+  var hDigits = '';
+  var mDigits = '';
+  if (digits.length <= 2) {
+    hDigits = digits;
+  } else {
+    hDigits = digits.slice(0, digits.length - 2);
+    mDigits = digits.slice(-2);
+  }
+
+  var hour = parseInt(hDigits || '0', 10);
+  var minute = parseInt(mDigits || '0', 10);
+  if (Number.isNaN(hour)) hour = 0;
+  if (Number.isNaN(minute)) minute = 0;
+
+  if (hour > 23) hour = 23;
+  if (minute > 59) minute = 59;
+
+  var HH = String(hour).padStart(2, '0');
+  var mm = String(minute).padStart(2, '0');
+  return HH + ':' + mm;
+}
+
+var timeInputInstance = void 0;
+var cachedSelectionStart = void 0;
+var cachedSelectionEnd = void 0;
+
+var TimeInput = function (_React$Component) {
+  (0, _inherits3['default'])(TimeInput, _React$Component);
+
+  function TimeInput(props) {
+    (0, _classCallCheck3['default'])(this, TimeInput);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));
+
+    _this.onInputChange = function (event) {
+      var str = event.target.value;
+      var timeStr = initializeTime(str);
+
+      if (!str || !timeStr) {
+        _this.setState({ str: str, isInputEmpty: true });
+        return;
+      }
+
+      if (_this.state.isInputEmpty) {
+        _this.setState({ isInputEmpty: false });
+      }
+
+      var base = _this.props.selectedValue || _this.props.value || (0, _dayjs2['default'])();
+      var parsed = (0, _dayjs2['default'])(timeStr, 'HH:mm');
+      var next = base.clone().hour(parsed.hour()).minute(parsed.minute());
+
+      _this.setState({ str: str });
+      if (_this.props.onChange) {
+        _this.props.onChange(next);
+      }
+    };
+
+    _this.onKeyDown = function (event) {
+      if (event.key === 'Enter' && _this.props.onSelect) {
+        var timeStr = initializeTime(_this.state.str);
+        if (!timeStr) return;
+        var base = _this.props.selectedValue || _this.props.value || (0, _dayjs2['default'])();
+        var parsed = (0, _dayjs2['default'])(timeStr, 'HH:mm');
+        var next = base.clone().hour(parsed.hour()).minute(parsed.minute());
+        _this.props.onSelect(next);
+        event.preventDefault();
+      }
+    };
+
+    _this.onFocus = function () {
+      _this.setState({ hasFocus: true });
+    };
+
+    _this.onBlur = function () {
+      var base = _this.props.showFromSelected ? _this.props.selectedValue || null : null;
+      _this.setState({
+        hasFocus: false,
+        str: base ? formatTime(base, _this.props.format) : ''
+      });
+    };
+
+    _this.saveRef = function (node) {
+      timeInputInstance = node;
+    };
+
+    _this.getRootDOMNode = function () {
+      return _reactDom2['default'].findDOMNode(_this);
+    };
+
+    _this.state = {
+      str: '',
+      hasFocus: false,
+      isInputEmpty: true
+    };
+    return _this;
+  }
+
+  TimeInput.prototype.componentDidUpdate = function componentDidUpdate() {
+    if (timeInputInstance && this.state.hasFocus && !(cachedSelectionStart === 0 && cachedSelectionEnd === 0)) {
+      timeInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd);
+    }
+  };
+
+  TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
+    var newState = null;
+    if (timeInputInstance) {
+      cachedSelectionStart = timeInputInstance.selectionStart;
+      cachedSelectionEnd = timeInputInstance.selectionEnd;
+    }
+
+    if (!state.hasFocus) {
+      if (nextProps.showFromSelected && nextProps.selectedValue) {
+        newState = { str: formatTime(nextProps.selectedValue, nextProps.format) };
+      } else {
+        newState = { str: '' };
+      }
+    }
+    return newState;
+  };
+
+  TimeInput.getInstance = function getInstance() {
+    return timeInputInstance;
+  };
+
+  TimeInput.prototype.render = function render() {
+    var _props = this.props,
+        prefixCls = _props.prefixCls,
+        placeholder = _props.placeholder,
+        inputMode = _props.inputMode,
+        disabled = _props.disabled,
+        className = _props.className;
+
+    var inputCls = className || prefixCls + '-time-input ' + prefixCls + '-text-input';
+    return _react2['default'].createElement(
+      'div',
+      { className: prefixCls + '-time-input-outer' },
+      _react2['default'].createElement('input', {
+        ref: this.saveRef,
+        className: inputCls,
+        value: this.state.str,
+        disabled: disabled,
+        placeholder: placeholder,
+        onChange: this.onInputChange,
+        onKeyDown: this.onKeyDown,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        inputMode: inputMode
+      })
+    );
+  };
+
+  return TimeInput;
+}(_react2['default'].Component);
+
+TimeInput.propTypes = {
+  prefixCls: _propTypes2['default'].string,
+  value: _propTypes2['default'].object,
+  selectedValue: _propTypes2['default'].object,
+  onChange: _propTypes2['default'].func,
+  onSelect: _propTypes2['default'].func,
+  placeholder: _propTypes2['default'].string,
+  inputMode: _propTypes2['default'].string,
+  format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]),
+  disabled: _propTypes2['default'].bool,
+  className: _propTypes2['default'].string,
+  showFromSelected: _propTypes2['default'].bool
+};
+TimeInput.defaultProps = {
+  format: 'HH:mm',
+  placeholder: 'HH:mm'
+};
+
+
+(0, _reactLifecyclesCompat.polyfill)(TimeInput);
+
+exports['default'] = TimeInput;
+module.exports = exports['default'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-calendar",
-  "version": "0.1.2-beta.0",
+  "version": "1.0.0-alpha.0",
   "description": "React Calendar",
   "keywords": [
     "react",