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

package/es/time/TimeInput.js

@@ -0,0 +1,206 @@
+import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
+import _inherits from 'babel-runtime/helpers/inherits';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { polyfill } from 'react-lifecycles-compat';
+import dayjs from 'dayjs';
+
+var customParseFormat = require('dayjs/plugin/customParseFormat');
+dayjs.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) {
+  _inherits(TimeInput, _React$Component);
+
+  function TimeInput(props) {
+    _classCallCheck(this, TimeInput);
+
+    var _this = _possibleConstructorReturn(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 || dayjs();
+      var parsed = dayjs(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 || dayjs();
+        var parsed = dayjs(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 ReactDOM.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 React.createElement(
+      'div',
+      { className: prefixCls + '-time-input-outer' },
+      React.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;
+}(React.Component);
+
+TimeInput.propTypes = {
+  prefixCls: PropTypes.string,
+  value: PropTypes.object,
+  selectedValue: PropTypes.object,
+  onChange: PropTypes.func,
+  onSelect: PropTypes.func,
+  placeholder: PropTypes.string,
+  inputMode: PropTypes.string,
+  format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  showFromSelected: PropTypes.bool
+};
+TimeInput.defaultProps = {
+  format: 'HH:mm',
+  placeholder: 'HH:mm'
+};
+
+
+polyfill(TimeInput);
+
+export default TimeInput;

package/lib/Calendar.js

@@ -64,6 +64,10 @@ var _DateInput = require('./date/DateInput');
 
 var _DateInput2 = _interopRequireDefault(_DateInput);
 
+var _TimeInput = require('./time/TimeInput');
+
+var _TimeInput2 = _interopRequireDefault(_TimeInput);
+
 var _util = require('./util');
 
 var _toTime = require('./util/toTime');
@@ -109,7 +113,8 @@ var Calendar = function (_React$Component) {
       mode: _this.props.mode || 'date',
       value: getMomentObjectIfValid(props.value) || getMomentObjectIfValid(props.defaultValue) || (0, _dayjs2['default'])(),
       selectedValue: props.selectedValue || props.defaultSelectedValue,
-      currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME
+      currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME,
+      hasExplicitTime: false
     };
     return _this;
   }
@@ -140,6 +145,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,
@@ -182,7 +189,9 @@ var Calendar = function (_React$Component) {
 
       timePickerEle = _react2['default'].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 ? _react2['default'].createElement(_DateInput2['default'], {
@@ -190,8 +199,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,
@@ -203,6 +212,17 @@ var Calendar = function (_React$Component) {
       inputMode: inputMode
     }) : null;
 
+    var timeInputTopElement = _react2['default'].createElement(_TimeInput2['default'], {
+      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());
@@ -210,7 +230,24 @@ var Calendar = function (_React$Component) {
     children.push(_react2['default'].createElement(
       'div',
       { className: prefixCls + '-panel', key: 'panel' },
-      dateInputElement,
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-inputs' },
+        _react2['default'].createElement(
+          'div',
+          { className: prefixCls + '-date-input-col' },
+          _react2['default'].createElement(
+            'div',
+            { className: prefixCls + '-date-input' },
+            dateInputElement
+          )
+        ),
+        _react2['default'].createElement(
+          'div',
+          { className: prefixCls + '-time-input-col' },
+          timeInputTopElement
+        )
+      ),
       _react2['default'].createElement(
         'div',
         { className: prefixCls + '-date-panel-container' },
@@ -254,39 +291,45 @@ var Calendar = function (_React$Component) {
               firstDayOfWeek: firstDayOfWeek,
               currentStatus: currentStatus
             })
-          ),
-          _react2['default'].createElement(_CalendarFooter2['default'], {
-            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 && _react2['default'].createElement(_CalendarRightPanel2['default'], {
           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
         })
-      )
+      ),
+      _react2['default'].createElement(_CalendarFooter2['default'], {
+        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({
@@ -347,14 +390,14 @@ Calendar.defaultProps = (0, _extends3['default'])({}, _CalendarMixin.calendarMix
 });
 
 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);
   };
@@ -366,109 +409,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 _KeyCode2['default'].DOWN:
-        _this2.goTime(1, 'weeks');
+        _this3.goTime(1, 'weeks');
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].UP:
-        _this2.goTime(-1, 'weeks');
+        _this3.goTime(-1, 'weeks');
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].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 _KeyCode2['default'].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 _KeyCode2['default'].HOME:
-        _this2.setValue((0, _toTime.goStartMonth)(_this2.state.value));
+        _this3.setValue((0, _toTime.goStartMonth)(_this3.state.value));
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].END:
-        _this2.setValue((0, _toTime.goEndMonth)(_this2.state.value));
+        _this3.setValue((0, _toTime.goEndMonth)(_this3.state.value));
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].PAGE_DOWN:
-        _this2.goTime(1, 'month');
+        _this3.goTime(1, 'month');
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].PAGE_UP:
-        _this2.goTime(-1, 'month');
+        _this3.goTime(-1, 'month');
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].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: _util.CALENDAR_STATUS.CURRENT_TIME });
+    _this3.onSelect(null);
+    _this3.props.onClear();
+    _this3.setState({ currentStatus: _util.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: _util.CALENDAR_STATUS.SPECIFIC_TIME });
+    _this3.setState({ currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME });
     if (!selectedValue && timePicker) {
       var timePickerDefaultValue = timePicker.props.defaultValue;
       if (timePickerDefaultValue) {
         (0, _util.syncTime)(timePickerDefaultValue, value);
       }
     }
-    _this2.onSelect(value);
+    _this3.onSelect(value);
   };
 
   this.onToday = function () {
-    var value = _this2.state.value;
+    var value = _this3.state.value;
 
     var now = (0, _util.getTodayTime)(value);
-    _this2.onSelect(now, {
+    _this3.onSelect(now, {
       source: 'todayButton'
     });
   };
@@ -476,33 +519,48 @@ var _initialiseProps = function _initialiseProps() {
   this.onBlur = function (event) {
     setTimeout(function () {
       var dateInput = _DateInput2['default'].getInstance();
-      var rootInstance = _this2.rootInstance;
+      var timeInput = _TimeInput2['default'].getInstance && _TimeInput2['default'].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 _reactDom2['default'].findDOMNode(_this2);
+    return _reactDom2['default'].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((0, _toTime.goTime)(_this2.state.value, direction, unit));
+    _this3.setValue((0, _toTime.goTime)(_this3.state.value, direction, unit));
   };
 };