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

package/es/calendar/CalendarRightPanel.js

@@ -1,3 +1,4 @@
+import _extends from 'babel-runtime/helpers/extends';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _inherits from 'babel-runtime/helpers/inherits';
@@ -5,6 +6,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 
+var MIN_SCROLLBAR_THUMB_HEIGHT = 24;
+
 var CalendarRightPanel = function (_React$Component) {
   _inherits(CalendarRightPanel, _React$Component);
 
@@ -13,6 +16,90 @@ var CalendarRightPanel = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(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: _extends({}, 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: _extends({}, prevState.scrollbars, (_extends3 = {}, _extends3[type] = _extends({}, 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');
@@ -78,10 +165,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 React.createElement(
+        'div',
+        { className: className, 'aria-hidden': 'true' },
+        React.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 = React.createRef();
@@ -90,6 +202,8 @@ var CalendarRightPanel = function (_React$Component) {
     _this.minutes = _this.getMinutes();
 
     _this.skipScrollUpdates = 0;
+    _this.scrollbarTimeouts = {};
+    _this.draggingScrollbar = null;
     return _this;
   }
 
@@ -174,88 +288,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 = dayjs().format('HH');
     var currentMinute = dayjs().format('mm');
-    var displayHour = selectedHour || currentHour;
-    var displayMinute = selectedMinute || currentMinute;
 
     return React.createElement(
       'div',
       { className: prefixCls + '-right-panel' },
-      React.createElement(
-        'div',
-        { className: prefixCls + '-right-panel-header ' + prefixCls + '-header' },
-        displayHour,
-        ':',
-        displayMinute
-      ),
       React.createElement(
         'div',
         { className: prefixCls + '-right-panel-body' },
         React.createElement(
           'div',
-          { className: prefixCls + '-right-panel-col', ref: this.hoursRef },
+          { className: prefixCls + '-right-panel-col-wrap ' + prefixCls + '-right-panel-col-hour' },
           React.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 React.createElement(
-                'li',
-                {
-                  key: h,
-                  onClick: function onClick() {
-                    return _this4.onSelectHour(h);
-                  },
-                  className: prefixCls + '-right-panel-item',
-                  title: h
-                },
-                React.createElement(
-                  'span',
-                  { className: className },
-                  h
-                )
-              );
-            })
-          )
+            'div',
+            {
+              className: prefixCls + '-right-panel-col',
+              ref: this.hoursRef,
+              onScroll: function onScroll(event) {
+                return _this5.onTimeColumnScroll('hour', event.currentTarget);
+              }
+            },
+            React.createElement(
+              'div',
+              { className: prefixCls + '-right-panel-col-item' },
+              React.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 React.createElement(
+                    'li',
+                    {
+                      key: h,
+                      onClick: function onClick() {
+                        return _this5.onSelectHour(h);
+                      },
+                      className: prefixCls + '-right-panel-item',
+                      title: h
+                    },
+                    React.createElement(
+                      'span',
+                      { className: className },
+                      h
+                    )
+                  );
+                })
+              )
+            )
+          ),
+          this.renderScrollbar('hour', prefixCls)
         ),
         React.createElement(
           'div',
-          { className: prefixCls + '-right-panel-col', ref: this.minutesRef },
+          { className: prefixCls + '-right-panel-col-wrap' },
           React.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 React.createElement(
-                'li',
-                {
-                  key: m,
-                  onClick: function onClick() {
-                    return _this4.onSelectMinute(m);
-                  },
-                  className: prefixCls + '-right-panel-item',
-                  title: m
-                },
-                React.createElement(
-                  'span',
-                  { className: className },
-                  m
-                )
-              );
-            })
-          )
+            'div',
+            {
+              className: prefixCls + '-right-panel-col',
+              ref: this.minutesRef,
+              onScroll: function onScroll(event) {
+                return _this5.onTimeColumnScroll('minute', event.currentTarget);
+              }
+            },
+            React.createElement(
+              'div',
+              { className: prefixCls + '-right-panel-col-item' },
+              React.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 React.createElement(
+                    'li',
+                    {
+                      key: m,
+                      onClick: function onClick() {
+                        return _this5.onSelectMinute(m);
+                      },
+                      className: prefixCls + '-right-panel-item',
+                      title: m
+                    },
+                    React.createElement(
+                      'span',
+                      { className: className },
+                      m
+                    )
+                  );
+                })
+              )
+            )
+          ),
+          this.renderScrollbar('minute', prefixCls)
         )
       )
     );

package/es/date/DateTHead.js

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

package/es/time/TimeInput.js

@@ -116,8 +116,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 || dayjs();
+      newState = { str: formatTime(base, nextProps.format) };
     }
     return newState;
   };

package/lib/Calendar.js

@@ -229,79 +229,81 @@ var Calendar = function (_React$Component) {
     }
 
     var showTimeControls = showHourAndMinute && mode === 'date';
-
-    children.push(_react2['default'].createElement(
+    var dateInputColumnElement = _react2['default'].createElement(
       'div',
-      { className: prefixCls + '-panel', key: 'panel' },
+      { className: prefixCls + '-date-input-col' },
       _react2['default'].createElement(
         'div',
-        { className: prefixCls + '-inputs' },
+        { className: prefixCls + '-date-input' },
+        dateInputElement
+      )
+    );
+    var datePanelElement = _react2['default'].createElement(
+      'div',
+      {
+        tabIndex: this.props.focusablePanel ? 0 : undefined,
+        className: prefixCls + '-date-panel'
+      },
+      _react2['default'].createElement(_CalendarHeader2['default'], {
+        locale: locale,
+        mode: mode,
+        value: value,
+        onValueChange: this.setValue,
+        onPanelChange: this.onPanelChange,
+        renderFooter: renderFooter,
+        showTimePicker: showTimePicker,
+        prefixCls: prefixCls,
+        showHourAndMinute: showHourAndMinute
+      }),
+      timePicker && showTimePicker ? _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-time-picker' },
         _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-date-input-col' },
-          _react2['default'].createElement(
-            'div',
-            { className: prefixCls + '-date-input' },
-            dateInputElement
-          )
-        ),
-        showTimeControls && _react2['default'].createElement(
-          'div',
-          { className: prefixCls + '-time-input-col' },
-          _react2['default'].createElement(
-            'div',
-            { className: prefixCls + '-time-input' },
-            timeInputTopElement
-          )
+          { className: prefixCls + '-time-picker-panel' },
+          timePickerEle
         )
+      ) : null,
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-body' },
+        _react2['default'].createElement(_DateTable2['default'], {
+          locale: locale,
+          value: value,
+          selectedValue: selectedValue,
+          prefixCls: prefixCls,
+          dateRender: props.dateRender,
+          onSelect: this.onDateTableSelect,
+          disabledDate: disabledDate,
+          showWeekNumber: showWeekNumber,
+          firstDayOfWeek: firstDayOfWeek,
+          currentStatus: currentStatus
+        })
+      )
+    );
+
+    var dateTimePanelElement = showTimeControls ? _react2['default'].createElement(
+      'div',
+      { className: prefixCls + '-date-time-panel' },
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-date-panel-column' },
+        dateInputColumnElement,
+        datePanelElement
       ),
       _react2['default'].createElement(
         'div',
-        { className: prefixCls + '-date-panel-container' },
+        { className: prefixCls + '-time-panel-column' },
         _react2['default'].createElement(
           'div',
-          {
-            tabIndex: this.props.focusablePanel ? 0 : undefined,
-            className: prefixCls + '-date-panel'
-          },
-          _react2['default'].createElement(_CalendarHeader2['default'], {
-            locale: locale,
-            mode: mode,
-            value: value,
-            onValueChange: this.setValue,
-            onPanelChange: this.onPanelChange,
-            renderFooter: renderFooter,
-            showTimePicker: showTimePicker,
-            prefixCls: prefixCls,
-            showHourAndMinute: showHourAndMinute
-          }),
-          timePicker && showTimePicker ? _react2['default'].createElement(
-            'div',
-            { className: prefixCls + '-time-picker' },
-            _react2['default'].createElement(
-              'div',
-              { className: prefixCls + '-time-picker-panel' },
-              timePickerEle
-            )
-          ) : null,
+          { className: prefixCls + '-time-input-col' },
           _react2['default'].createElement(
             'div',
-            { className: prefixCls + '-body' },
-            _react2['default'].createElement(_DateTable2['default'], {
-              locale: locale,
-              value: value,
-              selectedValue: selectedValue,
-              prefixCls: prefixCls,
-              dateRender: props.dateRender,
-              onSelect: this.onDateTableSelect,
-              disabledDate: disabledDate,
-              showWeekNumber: showWeekNumber,
-              firstDayOfWeek: firstDayOfWeek,
-              currentStatus: currentStatus
-            })
+            { className: prefixCls + '-time-input' },
+            timeInputTopElement
           )
         ),
-        showTimeControls && _react2['default'].createElement(_CalendarRightPanel2['default'], {
+        _react2['default'].createElement(_CalendarRightPanel2['default'], {
           prefixCls: prefixCls,
           value: value,
           selectedValue: selectedValue,
@@ -311,7 +313,26 @@ var Calendar = function (_React$Component) {
           defaultMinutesTime: this.props.defaultMinutesTime,
           format: inputFormat
         })
+      )
+    ) : _react2['default'].createElement(
+      _react2['default'].Fragment,
+      null,
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-inputs' },
+        dateInputColumnElement
       ),
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-date-panel-container' },
+        datePanelElement
+      )
+    );
+
+    children.push(_react2['default'].createElement(
+      'div',
+      { className: prefixCls + '-panel', key: 'panel' },
+      dateTimePanelElement,
       _react2['default'].createElement(_CalendarFooter2['default'], {
         showOk: props.showOk,
         mode: mode,