@seafile/seafile-calendar 1.0.21 → 1.0.23-avb.71

package/lib/calendar/CalendarRightPanel.js

@@ -2,6 +2,10 @@
 
 exports.__esModule = true;
 
+var _extends4 = require('babel-runtime/helpers/extends');
+
+var _extends5 = _interopRequireDefault(_extends4);
+
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
 var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
@@ -28,6 +32,8 @@ var _dayjs2 = _interopRequireDefault(_dayjs);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
+var MIN_SCROLLBAR_THUMB_HEIGHT = 24;
+
 var CalendarRightPanel = function (_React$Component) {
   (0, _inherits3['default'])(CalendarRightPanel, _React$Component);
 
@@ -36,6 +42,90 @@ var CalendarRightPanel = function (_React$Component) {
 
     var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));
 
+    _this.getTimeColumnContainer = function (type) {
+      return type === 'hour' ? _this.hoursRef.current : _this.minutesRef.current;
+    };
+
+    _this.onTimeColumnScroll = function (type, container) {
+      var clientHeight = container.clientHeight,
+          scrollHeight = container.scrollHeight,
+          scrollTop = container.scrollTop;
+
+      if (scrollHeight <= clientHeight) return;
+
+      var trackHeight = clientHeight;
+      var height = Math.min(trackHeight, Math.max(MIN_SCROLLBAR_THUMB_HEIGHT, clientHeight / scrollHeight * trackHeight));
+      var maxTop = trackHeight - height;
+      var maxScrollTop = scrollHeight - clientHeight;
+      var top = maxScrollTop > 0 ? scrollTop / maxScrollTop * maxTop : 0;
+
+      clearTimeout(_this.scrollbarTimeouts[type]);
+      _this.setState(function (prevState) {
+        var _extends2;
+
+        return {
+          scrollbars: (0, _extends5['default'])({}, prevState.scrollbars, (_extends2 = {}, _extends2[type] = { visible: true, top: top, height: height }, _extends2))
+        };
+      });
+      _this.scrollbarTimeouts[type] = setTimeout(function () {
+        _this.setState(function (prevState) {
+          var _extends3;
+
+          return {
+            scrollbars: (0, _extends5['default'])({}, prevState.scrollbars, (_extends3 = {}, _extends3[type] = (0, _extends5['default'])({}, prevState.scrollbars[type], { visible: false }), _extends3))
+          };
+        });
+      }, 800);
+    };
+
+    _this.onScrollbarThumbMouseDown = function (type, event) {
+      var container = _this.getTimeColumnContainer(type);
+      var _this$state$scrollbar = _this.state.scrollbars[type],
+          top = _this$state$scrollbar.top,
+          height = _this$state$scrollbar.height;
+
+      if (!container || !height) return;
+
+      event.preventDefault();
+      _this.draggingScrollbar = {
+        type: type,
+        startClientY: event.clientY,
+        startTop: top
+      };
+      window.addEventListener('mousemove', _this.onScrollbarThumbMouseMove);
+      window.addEventListener('mouseup', _this.onScrollbarThumbMouseUp);
+    };
+
+    _this.onScrollbarThumbMouseMove = function (event) {
+      if (!_this.draggingScrollbar) return;
+
+      var _this$draggingScrollb = _this.draggingScrollbar,
+          type = _this$draggingScrollb.type,
+          startClientY = _this$draggingScrollb.startClientY,
+          startTop = _this$draggingScrollb.startTop;
+
+      var container = _this.getTimeColumnContainer(type);
+      var height = _this.state.scrollbars[type].height;
+
+      if (!container) return;
+
+      var maxTop = Math.max(0, container.clientHeight - height);
+      var top = Math.max(0, Math.min(maxTop, startTop + event.clientY - startClientY));
+      var maxScrollTop = container.scrollHeight - container.clientHeight;
+      container.scrollTop = maxTop > 0 ? top / maxTop * maxScrollTop : 0;
+      _this.onTimeColumnScroll(type, container);
+    };
+
+    _this.onScrollbarThumbMouseUp = function () {
+      _this.draggingScrollbar = null;
+      _this.removeScrollbarDragListeners();
+    };
+
+    _this.removeScrollbarDragListeners = function () {
+      window.removeEventListener('mousemove', _this.onScrollbarThumbMouseMove);
+      window.removeEventListener('mouseup', _this.onScrollbarThumbMouseUp);
+    };
+
     _this.centerScroll = function (container, index) {
       if (!container || index < 0) return;
       var firstItem = container.querySelector('li');
@@ -101,10 +191,35 @@ var CalendarRightPanel = function (_React$Component) {
       return v ? v.format('mm') : null;
     };
 
+    _this.renderScrollbar = function (type, prefixCls) {
+      var _this$state$scrollbar2 = _this.state.scrollbars[type],
+          visible = _this$state$scrollbar2.visible,
+          top = _this$state$scrollbar2.top,
+          height = _this$state$scrollbar2.height;
+
+      var visibleClassName = prefixCls + '-right-panel-scrollbar-visible';
+      var className = prefixCls + '-right-panel-scrollbar' + (visible ? ' ' + visibleClassName : '');
+      return _react2['default'].createElement(
+        'div',
+        { className: className, 'aria-hidden': 'true' },
+        _react2['default'].createElement('div', {
+          className: prefixCls + '-right-panel-scrollbar-thumb',
+          style: { height: height, transform: 'translateY(' + top + 'px)' },
+          onMouseDown: function onMouseDown(event) {
+            return _this.onScrollbarThumbMouseDown(type, event);
+          }
+        })
+      );
+    };
+
     var format = Array.isArray(_this.props.format) ? _this.props.format[0] : _this.props.format;
     _this.state = {
       highlightTime: _this.props.selectedValue || null,
-      localeFormat: format
+      localeFormat: format,
+      scrollbars: {
+        hour: { visible: false, top: 0, height: 0 },
+        minute: { visible: false, top: 0, height: 0 }
+      }
     };
 
     _this.hoursRef = _react2['default'].createRef();
@@ -113,6 +228,8 @@ var CalendarRightPanel = function (_React$Component) {
     _this.minutes = _this.getMinutes();
 
     _this.skipScrollUpdates = 0;
+    _this.scrollbarTimeouts = {};
+    _this.draggingScrollbar = null;
     return _this;
   }
 
@@ -197,88 +314,118 @@ var CalendarRightPanel = function (_React$Component) {
     }
   };
 
-  CalendarRightPanel.prototype.render = function render() {
+  CalendarRightPanel.prototype.componentWillUnmount = function componentWillUnmount() {
     var _this4 = this;
 
+    Object.keys(this.scrollbarTimeouts).forEach(function (type) {
+      clearTimeout(_this4.scrollbarTimeouts[type]);
+    });
+    this.removeScrollbarDragListeners();
+  };
+
+  CalendarRightPanel.prototype.render = function render() {
+    var _this5 = this;
+
     var prefixCls = this.props.prefixCls;
 
     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-header ' + prefixCls + '-header' },
-        displayHour,
-        ':',
-        displayMinute
-      ),
       _react2['default'].createElement(
         'div',
         { className: prefixCls + '-right-panel-body' },
         _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-right-panel-col', ref: this.hoursRef },
+          { className: prefixCls + '-right-panel-col-wrap ' + prefixCls + '-right-panel-col-hour' },
           _react2['default'].createElement(
-            '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',
-                {
-                  key: h,
-                  onClick: function onClick() {
-                    return _this4.onSelectHour(h);
-                  },
-                  className: prefixCls + '-right-panel-item',
-                  title: h
-                },
-                _react2['default'].createElement(
-                  'span',
-                  { className: className },
-                  h
-                )
-              );
-            })
-          )
+            'div',
+            {
+              className: prefixCls + '-right-panel-col',
+              ref: this.hoursRef,
+              onScroll: function onScroll(event) {
+                return _this5.onTimeColumnScroll('hour', event.currentTarget);
+              }
+            },
+            _react2['default'].createElement(
+              'div',
+              { className: prefixCls + '-right-panel-col-item' },
+              _react2['default'].createElement(
+                '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',
+                    {
+                      key: h,
+                      onClick: function onClick() {
+                        return _this5.onSelectHour(h);
+                      },
+                      className: prefixCls + '-right-panel-item',
+                      title: h
+                    },
+                    _react2['default'].createElement(
+                      'span',
+                      { className: className },
+                      h
+                    )
+                  );
+                })
+              )
+            )
+          ),
+          this.renderScrollbar('hour', prefixCls)
         ),
         _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-right-panel-col', ref: this.minutesRef },
+          { className: prefixCls + '-right-panel-col-wrap' },
           _react2['default'].createElement(
-            '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',
-                {
-                  key: m,
-                  onClick: function onClick() {
-                    return _this4.onSelectMinute(m);
-                  },
-                  className: prefixCls + '-right-panel-item',
-                  title: m
-                },
-                _react2['default'].createElement(
-                  'span',
-                  { className: className },
-                  m
-                )
-              );
-            })
-          )
+            'div',
+            {
+              className: prefixCls + '-right-panel-col',
+              ref: this.minutesRef,
+              onScroll: function onScroll(event) {
+                return _this5.onTimeColumnScroll('minute', event.currentTarget);
+              }
+            },
+            _react2['default'].createElement(
+              'div',
+              { className: prefixCls + '-right-panel-col-item' },
+              _react2['default'].createElement(
+                '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',
+                    {
+                      key: m,
+                      onClick: function onClick() {
+                        return _this5.onSelectMinute(m);
+                      },
+                      className: prefixCls + '-right-panel-item',
+                      title: m
+                    },
+                    _react2['default'].createElement(
+                      'span',
+                      { className: className },
+                      m
+                    )
+                  );
+                })
+              )
+            )
+          ),
+          this.renderScrollbar('minute', prefixCls)
         )
       )
     );

package/lib/date/DateTHead.js

@@ -92,7 +92,7 @@ var DateTHead = function (_React$Component) {
       null,
       _react2['default'].createElement(
         'tr',
-        { role: 'row' },
+        { role: 'row', className: prefixCls + '-week-date-header' },
         showWeekNumberEl,
         weekDaysEls
       )

package/lib/time/TimeInput.js

@@ -140,8 +140,8 @@ var TimeInput = function (_React$Component) {
   TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
     var newState = null;
     if (!state.hasFocus) {
-      var base = nextProps.selectedValue || null;
-      newState = { str: base ? formatTime(base, nextProps.format) : '' };
+      var base = nextProps.selectedValue || (0, _dayjs2['default'])();
+      newState = { str: formatTime(base, nextProps.format) };
     }
     return newState;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-calendar",
-  "version": "1.0.21",
+  "version": "1.0.23avb.71",
   "description": "React Calendar",
   "keywords": [
     "react",