@seafile/seafile-calendar 1.0.1-beta.4 → 1.0.2-alpha.1

package/lib/Calendar.js

@@ -144,8 +144,6 @@ var Calendar = function (_React$Component) {
   };
 
   Calendar.prototype.render = function render() {
-    var _this2 = this;
-
     var props = this.props,
         state = this.state;
     var locale = props.locale,
@@ -250,7 +248,11 @@ var Calendar = function (_React$Component) {
         showTimeControls && _react2['default'].createElement(
           'div',
           { className: prefixCls + '-time-input-col' },
-          timeInputTopElement
+          _react2['default'].createElement(
+            'div',
+            { className: prefixCls + '-time-input' },
+            timeInputTopElement
+          )
         )
       ),
       _react2['default'].createElement(
@@ -303,9 +305,7 @@ var Calendar = function (_React$Component) {
           value: value,
           selectedValue: selectedValue,
           locale: locale,
-          onSelect: function onSelect(v) {
-            return _this2.onDateTableSelect(v);
-          },
+          onSelect: this.onDateTableSelect,
           onClickRightPanelTime: onClickRightPanelTime,
           defaultMinutesTime: this.props.defaultMinutesTime,
           format: inputFormat
@@ -392,14 +392,14 @@ Calendar.defaultProps = (0, _extends3['default'])({}, _CalendarMixin.calendarMix
 });
 
 var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
+  var _this2 = this;
 
   this.onPanelChange = function (value, mode) {
-    var props = _this3.props,
-        state = _this3.state;
+    var props = _this2.props,
+        state = _this2.state;
 
     if (!('mode' in props)) {
-      _this3.setState({ mode: mode });
+      _this2.setState({ mode: mode });
     }
     props.onPanelChange(value || state.value, mode);
   };
@@ -411,109 +411,112 @@ var _initialiseProps = function _initialiseProps() {
     var keyCode = event.keyCode;
     // mac
     var ctrlKey = event.ctrlKey || event.metaKey;
-    var disabledDate = _this3.props.disabledDate;
-    var value = _this3.state.value;
+    var disabledDate = _this2.props.disabledDate;
+    var value = _this2.state.value;
 
     switch (keyCode) {
       case _KeyCode2['default'].DOWN:
-        _this3.goTime(1, 'weeks');
+        _this2.goTime(1, 'weeks');
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].UP:
-        _this3.goTime(-1, 'weeks');
+        _this2.goTime(-1, 'weeks');
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].LEFT:
         if (ctrlKey) {
-          _this3.goTime(-1, 'years');
+          _this2.goTime(-1, 'years');
         } else {
-          _this3.goTime(-1, 'days');
+          _this2.goTime(-1, 'days');
         }
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].RIGHT:
         if (ctrlKey) {
-          _this3.goTime(1, 'years');
+          _this2.goTime(1, 'years');
         } else {
-          _this3.goTime(1, 'days');
+          _this2.goTime(1, 'days');
         }
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].HOME:
-        _this3.setValue((0, _toTime.goStartMonth)(_this3.state.value));
+        _this2.setValue((0, _toTime.goStartMonth)(_this2.state.value));
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].END:
-        _this3.setValue((0, _toTime.goEndMonth)(_this3.state.value));
+        _this2.setValue((0, _toTime.goEndMonth)(_this2.state.value));
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].PAGE_DOWN:
-        _this3.goTime(1, 'month');
+        _this2.goTime(1, 'month');
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].PAGE_UP:
-        _this3.goTime(-1, 'month');
+        _this2.goTime(-1, 'month');
         event.preventDefault();
         return 1;
       case _KeyCode2['default'].ENTER:
         if (!disabledDate || !disabledDate(value)) {
-          _this3.onSelect(value, {
+          _this2.onSelect(value, {
             source: 'keyboard'
           });
         }
         event.preventDefault();
         return 1;
       default:
-        _this3.props.onKeyDown(event);
+        _this2.props.onKeyDown(event);
         return 1;
     }
   };
 
   this.onClear = function () {
-    _this3.onSelect(null);
-    _this3.props.onClear();
-    _this3.setState({ currentStatus: _util.CALENDAR_STATUS.CURRENT_TIME });
+    _this2.onSelect(null);
+    _this2.props.onClear();
+    _this2.setState({ currentStatus: _util.CALENDAR_STATUS.CURRENT_TIME });
   };
 
   this.onOk = function () {
-    var selectedValue = _this3.state.selectedValue;
+    var selectedValue = _this2.state.selectedValue;
 
-    if (_this3.isAllowedDate(selectedValue)) {
-      _this3.props.onOk(selectedValue);
+    if (_this2.isAllowedDate(selectedValue)) {
+      _this2.props.onOk(selectedValue);
     }
   };
 
   this.onDateInputChange = function (value) {
-    _this3.onSelect(value, {
+    var now = (0, _dayjs2['default'])();
+    if (value && value.hour() === 0 && value.minute() === 0 && value.second() === 0) {
+      value = value.hour(now.hour()).minute(now.minute()).second(now.second());
+    }
+    _this2.onSelect(value, {
       source: 'dateInput'
     });
   };
 
   this.onDateInputSelect = function (value) {
-    _this3.onSelect(value, {
+    var now = (0, _dayjs2['default'])();
+    if (value && value.hour() === 0 && value.minute() === 0 && value.second() === 0) {
+      value = value.hour(now.hour()).minute(now.minute()).second(now.second());
+    }
+    _this2.onSelect(value, {
       source: 'dateInputSelect'
     });
   };
 
   this.onDateTableSelect = function (value) {
-    var timePicker = _this3.props.timePicker;
-    var selectedValue = _this3.state.selectedValue;
-
-    _this3.setState({ currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME });
-    if (!selectedValue && timePicker) {
-      var timePickerDefaultValue = timePicker.props.defaultValue;
-      if (timePickerDefaultValue) {
-        (0, _util.syncTime)(timePickerDefaultValue, value);
-      }
+    _this2.setState({ currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME });
+    var now = (0, _dayjs2['default'])();
+    if (value && value.hour() === 0 && value.minute() === 0 && value.second() === 0) {
+      value = value.hour(now.hour()).minute(now.minute()).second(now.second());
     }
-    _this3.onSelect(value);
+    _this2.onSelect(value);
   };
 
   this.onToday = function () {
-    var value = _this3.state.value;
+    var value = _this2.state.value;
 
     var now = (0, _util.getTodayTime)(value);
-    _this3.onSelect(now, {
+    _this2.onSelect(now, {
       source: 'todayButton'
     });
   };
@@ -522,41 +525,41 @@ var _initialiseProps = function _initialiseProps() {
     setTimeout(function () {
       var dateInput = _DateInput2['default'].getInstance();
       var timeInput = _TimeInput2['default'].getInstance && _TimeInput2['default'].getInstance();
-      var rootInstance = _this3.rootInstance;
+      var rootInstance = _this2.rootInstance;
 
       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 (_this3.props.onBlur) {
-        _this3.props.onBlur(event);
+      if (_this2.props.onBlur) {
+        _this2.props.onBlur(event);
       }
     }, 0);
   };
 
   this.onTimeInputChange = function (value) {
-    _this3.onSelect(value, { source: 'timeInputChange' });
+    _this2.onSelect(value, { source: 'timeInputChange' });
   };
 
   this.onTimeInputSelect = function (value) {
-    _this3.onSelect(value, { source: 'timeInputSelect' });
+    _this2.onSelect(value, { source: 'timeInputSelect' });
   };
 
   this.getRootDOMNode = function () {
-    return _reactDom2['default'].findDOMNode(_this3);
+    return _reactDom2['default'].findDOMNode(_this2);
   };
 
   this.openTimePicker = function () {
-    _this3.onPanelChange(null, 'time');
+    _this2.onPanelChange(null, 'time');
   };
 
   this.closeTimePicker = function () {
-    _this3.onPanelChange(null, 'date');
+    _this2.onPanelChange(null, 'date');
   };
 
   this.goTime = function (direction, unit) {
-    _this3.setValue((0, _toTime.goTime)(_this3.state.value, direction, unit));
+    _this2.setValue((0, _toTime.goTime)(_this2.state.value, direction, unit));
   };
 };
 

package/lib/calendar/CalendarHeader.js

@@ -132,7 +132,7 @@ var CalendarHeader = function (_React$Component) {
       { className: prefixCls + '-header' },
       _react2['default'].createElement(
         'div',
-        { style: { position: 'relative' } },
+        { style: { position: 'relative', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
         showIf(enablePrev && !showTimePicker, _react2['default'].createElement('a', {
           className: prefixCls + '-prev-year-btn',
           role: 'button',

package/lib/calendar/CalendarRightPanel.js

@@ -49,9 +49,10 @@ var CalendarRightPanel = function (_React$Component) {
     };
 
     _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 base = _this.props.selectedValue || _this.state.highlightTime || _this.props.value || (0, _dayjs2['default'])();
+      var selectedHour = _this.getSelectedHour();
+      var h = selectedHour !== null ? parseInt(selectedHour, 10) : (0, _dayjs2['default'])().hour();
+      var m = parseInt(minute, 10);
       var current = base.clone().hour(h).minute(m);
       _this.skipScrollUpdates = 2;
       _this.setState({ highlightTime: current });
@@ -62,9 +63,10 @@ var CalendarRightPanel = function (_React$Component) {
     };
 
     _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 base = _this.props.selectedValue || _this.state.highlightTime || (0, _dayjs2['default'])();
+      var h = parseInt(hour, 10);
+      var selectedMinute = _this.getSelectedMinute();
+      var m = selectedMinute !== null ? parseInt(selectedMinute, 10) : (0, _dayjs2['default'])().minute();
       var current = base.clone().hour(h).minute(m);
       _this.skipScrollUpdates = 2;
       _this.setState({ highlightTime: current });
@@ -85,27 +87,23 @@ var CalendarRightPanel = function (_React$Component) {
 
     _this.getSelectedHour = function () {
       var highlightTime = _this.state.highlightTime;
-      var _this$props = _this.props,
-          value = _this$props.value,
-          selectedValue = _this$props.selectedValue;
+      var selectedValue = _this.props.selectedValue;
 
-      var v = highlightTime || selectedValue || value;
-      return v ? v.format('HH') : '00';
+      var v = highlightTime || selectedValue || null;
+      return v ? v.format('HH') : null;
     };
 
     _this.getSelectedMinute = function () {
       var highlightTime = _this.state.highlightTime;
-      var _this$props2 = _this.props,
-          value = _this$props2.value,
-          selectedValue = _this$props2.selectedValue;
+      var selectedValue = _this.props.selectedValue;
 
-      var v = highlightTime || selectedValue || value;
-      return v ? v.format('mm') : '00';
+      var v = highlightTime || selectedValue || null;
+      return v ? v.format('mm') : null;
     };
 
     var format = Array.isArray(_this.props.format) ? _this.props.format[0] : _this.props.format;
     _this.state = {
-      highlightTime: _this.props.selectedValue || _this.props.value || null,
+      highlightTime: _this.props.selectedValue || null,
       localeFormat: format
     };
 
@@ -132,10 +130,9 @@ var CalendarRightPanel = function (_React$Component) {
 
     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 baseTime = defaultMinutesTime || (selectedValue ? selectedValue.format('HH:mm') : (0, _dayjs2['default'])().format('HH:mm'));
     var base = baseTime.split(':');
     var hIdx = this.hours.findIndex(function (h) {
       return h === base[0];
@@ -160,8 +157,8 @@ var CalendarRightPanel = function (_React$Component) {
   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 prevV = prevState.highlightTime || prevProps.selectedValue || (0, _dayjs2['default'])();
+    var currV = this.state.highlightTime || this.props.selectedValue || (0, _dayjs2['default'])();
 
     var prevH = prevV ? prevV.format('HH') : '00';
     var prevM = prevV ? prevV.format('mm') : '00';
@@ -207,15 +204,20 @@ var CalendarRightPanel = function (_React$Component) {
 
     var selectedHour = this.getSelectedHour();
     var selectedMinute = this.getSelectedMinute();
+    var currentHour = (0, _dayjs2['default'])().format('HH');
+    var currentMinute = (0, _dayjs2['default'])().format('mm');
+    var displayHour = selectedHour || currentHour;
+    var displayMinute = selectedMinute || currentMinute;
+
     return _react2['default'].createElement(
       'div',
       { className: prefixCls + '-right-panel' },
       _react2['default'].createElement(
         'div',
-        { className: prefixCls + '-right-panel-time-header' },
-        selectedHour,
+        { className: prefixCls + '-right-panel-header ' + prefixCls + '-header' },
+        displayHour,
         ':',
-        selectedMinute
+        displayMinute
       ),
       _react2['default'].createElement(
         'div',
@@ -227,6 +229,9 @@ var CalendarRightPanel = function (_React$Component) {
             'ul',
             null,
             this.hours.map(function (h) {
+              var isSelected = selectedHour && h === selectedHour;
+              var isCurrent = !selectedHour && h === currentHour;
+              var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
               return _react2['default'].createElement(
                 'li',
                 {
@@ -234,10 +239,14 @@ var CalendarRightPanel = function (_React$Component) {
                   onClick: function onClick() {
                     return _this4.onSelectHour(h);
                   },
-                  className: prefixCls + '-right-panel-item ' + (h === selectedHour ? prefixCls + '-right-panel-item-selected' : ''),
+                  className: prefixCls + '-right-panel-item',
                   title: h
                 },
-                h
+                _react2['default'].createElement(
+                  'span',
+                  { className: className },
+                  h
+                )
               );
             })
           )
@@ -249,6 +258,9 @@ var CalendarRightPanel = function (_React$Component) {
             'ul',
             null,
             this.minutes.map(function (m) {
+              var isSelected = selectedMinute && m === selectedMinute;
+              var isCurrent = !selectedMinute && m === currentMinute;
+              var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
               return _react2['default'].createElement(
                 'li',
                 {
@@ -256,10 +268,14 @@ var CalendarRightPanel = function (_React$Component) {
                   onClick: function onClick() {
                     return _this4.onSelectMinute(m);
                   },
-                  className: prefixCls + '-right-panel-item ' + (m === selectedMinute ? prefixCls + '-right-panel-item-selected' : ''),
+                  className: prefixCls + '-right-panel-item',
                   title: m
                 },
-                m
+                _react2['default'].createElement(
+                  'span',
+                  { className: className },
+                  m
+                )
               );
             })
           )

package/lib/date/DateInput.js

@@ -119,6 +119,7 @@ var DateInput = function (_React$Component) {
         'div',
         { className: prefixCls + '-date-input-wrap' },
         _react2['default'].createElement('input', {
+          id: 'date-input',
           ref: this.saveDateInput,
           className: prefixCls + '-input',
           value: str,

package/lib/time/TimeInput.js

@@ -165,22 +165,27 @@ var TimeInput = function (_React$Component) {
         disabled = _props.disabled,
         className = _props.className;
 
-    var inputCls = className || prefixCls + '-time-input ' + prefixCls + '-text-input';
+    var inputCls = className || prefixCls + '-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
-      })
+      { className: prefixCls + '-input-wrap' },
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-time-input-wrap' },
+        _react2['default'].createElement('input', {
+          id: 'time-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
+        })
+      )
     );
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-calendar",
-  "version": "1.0.1-beta.4",
+  "version": "1.0.2-alpha.1",
   "description": "React Calendar",
   "keywords": [
     "react",