@seafile/seafile-calendar 1.0.28 → 1.0.30

package/assets/index.css

@@ -300,51 +300,41 @@
   line-height: 1.5;
   overflow: hidden;
   /* Layout wrappers */
-  /* Top inputs row */
   /* Date grid area */
   /* Right time panel */
   /* Footer */
 }
 .rc-calendar-with-time-panel {
-  width: 367px;
+  width: 404px;
 }
 .rc-calendar-panel {
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
-}
-.rc-calendar-date-panel-container {
-  display: -ms-flexbox;
-  display: flex;
+  -ms-flex-align: stretch;
+      align-items: stretch;
 }
 .rc-calendar-date-panel {
   display: block;
-  width: 276px;
+  -ms-flex: none;
+      flex: none;
+  width: 273px;
 }
-.rc-calendar-inputs {
+.rc-calendar-date-input {
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: stretch;
-      align-items: stretch;
-}
-.rc-calendar-date-input-col {
-  -ms-flex: 1 1 auto;
-      flex: 1 1 auto;
-}
-.rc-calendar-time-input-col {
-  width: 89px;
-  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
+  -ms-flex-align: center;
+      align-items: center;
+  box-sizing: border-box;
+  padding: 12px 12px 0;
 }
-.rc-calendar-date-input,
 .rc-calendar-time-input {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
-  height: 100%;
-  padding: 12px 12px 0 12px;
-  margin-bottom: 4px;
+  box-sizing: border-box;
+  padding: 12px;
+  border-bottom: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-date-input input,
 .rc-calendar-time-input input {
@@ -368,7 +358,7 @@
   outline: none;
 }
 .rc-calendar-header {
-  padding: 0 12px;
+  padding: 0 18px;
   height: 48px;
   line-height: 24px;
   text-align: center;
@@ -376,6 +366,7 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
+  margin-top: 4px;
 }
 .rc-calendar-header-nav-wrap {
   position: relative;
@@ -465,7 +456,7 @@
   left: 0;
 }
 .rc-calendar-body {
-  padding: 0 12px;
+  padding: 0 12px 12px;
   height: 260px;
 }
 .rc-calendar table {
@@ -556,43 +547,53 @@
   color: var(--rc-calendar-out-range-color);
 }
 .rc-calendar-today .rc-calendar-date {
+  line-height: 30px;
   border: 1px solid var(--rc-calendar-sf-orange, #ff8000);
   border-radius: 50%;
 }
 .rc-calendar-right-panel {
-  height: inherit;
-  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
-}
-.rc-calendar-right-panel-header {
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-pack: center;
-      justify-content: center;
-  -ms-flex-align: center;
-      align-items: center;
-  color: var(--rc-calendar-body-color, #212529);
-  font-weight: 600;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex: 1;
+      flex: 1;
+  min-width: 0;
+  height: 356px;
+  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-right-panel-body {
-  height: 260px;
+  -ms-flex: 1;
+      flex: 1;
+  min-height: 0;
   display: -ms-flexbox;
   display: flex;
-  padding: 0 4px 16px;
-  scrollbar-color: auto;
 }
 .rc-calendar-right-panel-col {
+  -ms-flex: 1;
+      flex: 1;
+  min-width: 0;
   overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+}
+.rc-calendar-right-panel-col + .rc-calendar-right-panel-col {
+  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
 }
 .rc-calendar-right-panel-col ul {
   list-style: none;
   margin: 0;
-  padding: 4px;
+  padding: 4px 16px;
 }
 .rc-calendar-right-panel-item {
   width: 32px;
   height: 32px;
   padding: 4px 0;
   cursor: pointer;
+  margin-top: 4px;
+}
+.rc-calendar-right-panel-item:first-child {
+  margin-top: -2px;
 }
 .rc-calendar-right-panel-item-text {
   width: 100%;
@@ -614,10 +615,6 @@
   border-radius: 4px;
   color: #fff;
 }
-.rc-calendar-right-panel-col::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
 .rc-calendar-right-panel-item-current {
   border: 1px solid var(--rc-calendar-sf-orange, #ff8000);
   border-radius: 4px;

package/es/Calendar.js

@@ -171,109 +171,89 @@ var Calendar = function (_React$Component) {
       { className: prefixCls + '-panel', key: 'panel' },
       React.createElement(
         'div',
-        { className: prefixCls + '-inputs' },
+        {
+          tabIndex: this.props.focusablePanel ? 0 : undefined,
+          className: prefixCls + '-date-panel'
+        },
         React.createElement(
           'div',
-          { className: prefixCls + '-date-input-col' },
-          React.createElement(
-            'div',
-            { className: prefixCls + '-date-input' },
-            dateInputElement
-          )
+          { className: prefixCls + '-date-input' },
+          dateInputElement
         ),
-        showTimeControls && React.createElement(
+        React.createElement(CalendarHeader, {
+          locale: locale,
+          mode: mode,
+          value: value,
+          onValueChange: this.setValue,
+          onPanelChange: this.onPanelChange,
+          renderFooter: renderFooter,
+          showTimePicker: showTimePicker,
+          prefixCls: prefixCls,
+          showHourAndMinute: showHourAndMinute
+        }),
+        timePicker && showTimePicker ? React.createElement(
           'div',
-          { className: prefixCls + '-time-input-col' },
+          { className: prefixCls + '-time-picker' },
           React.createElement(
             'div',
-            { className: prefixCls + '-time-input' },
-            timeInputTopElement
+            { className: prefixCls + '-time-picker-panel' },
+            timePickerEle
           )
-        )
-      ),
-      React.createElement(
-        'div',
-        { className: prefixCls + '-date-panel-container' },
+        ) : null,
         React.createElement(
           'div',
-          {
-            tabIndex: this.props.focusablePanel ? 0 : undefined,
-            className: prefixCls + '-date-panel'
-          },
-          React.createElement(CalendarHeader, {
+          { className: prefixCls + '-body' },
+          React.createElement(DateTable, {
             locale: locale,
-            mode: mode,
             value: value,
-            onValueChange: this.setValue,
-            onPanelChange: this.onPanelChange,
-            renderFooter: renderFooter,
-            showTimePicker: showTimePicker,
+            selectedValue: selectedValue,
             prefixCls: prefixCls,
-            showHourAndMinute: showHourAndMinute
-          }),
-          timePicker && showTimePicker ? React.createElement(
-            'div',
-            { className: prefixCls + '-time-picker' },
-            React.createElement(
-              'div',
-              { className: prefixCls + '-time-picker-panel' },
-              timePickerEle
-            )
-          ) : null,
-          React.createElement(
-            'div',
-            { className: prefixCls + '-body' },
-            React.createElement(DateTable, {
-              locale: locale,
-              value: value,
-              selectedValue: selectedValue,
-              prefixCls: prefixCls,
-              dateRender: props.dateRender,
-              onSelect: this.onDateTableSelect,
-              disabledDate: disabledDate,
-              showWeekNumber: showWeekNumber,
-              firstDayOfWeek: firstDayOfWeek,
-              currentStatus: currentStatus
-            })
-          )
-        ),
-        showTimeControls && React.createElement(CalendarRightPanel, {
-          prefixCls: prefixCls,
-          value: value,
-          selectedValue: selectedValue,
-          locale: locale,
-          onSelect: this.onDateTableSelect,
-          onClickRightPanelTime: onClickRightPanelTime,
-          defaultMinutesTime: this.props.defaultMinutesTime,
-          format: inputFormat
-        })
+            dateRender: props.dateRender,
+            onSelect: this.onDateTableSelect,
+            disabledDate: disabledDate,
+            showWeekNumber: showWeekNumber,
+            firstDayOfWeek: firstDayOfWeek,
+            currentStatus: currentStatus
+          })
+        )
       ),
-      React.createElement(CalendarFooter, {
-        showOk: props.showOk,
-        mode: mode,
-        renderFooter: props.renderFooter,
-        locale: locale,
+      showTimeControls && React.createElement(CalendarRightPanel, {
         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
+        selectedValue: selectedValue,
+        locale: locale,
+        onSelect: this.onDateTableSelect,
+        onClickRightPanelTime: onClickRightPanelTime,
+        defaultMinutesTime: this.props.defaultMinutesTime,
+        format: inputFormat,
+        timeInput: timeInputTopElement
       })
     ));
+    children.push(React.createElement(CalendarFooter, {
+      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({
       children: children,
-      className: ((props.showWeekNumber ? prefixCls + '-week-number' : '') + ' ' + (showHourAndMinute ? prefixCls + '-with-time-panel' : '')).trim()
+      className: ((props.showWeekNumber ? prefixCls + '-week-number' : '') + ' ' + (showTimeControls ? prefixCls + '-with-time-panel' : '')).trim()
     });
   };
 

package/es/calendar/CalendarRightPanel.js

@@ -183,18 +183,13 @@ var CalendarRightPanel = function (_React$Component) {
     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
+        { className: prefixCls + '-time-input' },
+        this.props.timeInput
       ),
       React.createElement(
         'div',
@@ -272,6 +267,7 @@ CalendarRightPanel.propTypes = {
   onClickRightPanelTime: PropTypes.func,
   locale: PropTypes.object,
   defaultMinutesTime: PropTypes.string,
-  format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
+  format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  timeInput: PropTypes.node
 };
 export default CalendarRightPanel;

package/lib/Calendar.js

@@ -235,109 +235,89 @@ var Calendar = function (_React$Component) {
       { className: prefixCls + '-panel', key: 'panel' },
       _react2['default'].createElement(
         'div',
-        { className: prefixCls + '-inputs' },
+        {
+          tabIndex: this.props.focusablePanel ? 0 : undefined,
+          className: prefixCls + '-date-panel'
+        },
         _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-date-input-col' },
-          _react2['default'].createElement(
-            'div',
-            { className: prefixCls + '-date-input' },
-            dateInputElement
-          )
+          { className: prefixCls + '-date-input' },
+          dateInputElement
         ),
-        showTimeControls && _react2['default'].createElement(
+        _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-input-col' },
+          { className: prefixCls + '-time-picker' },
           _react2['default'].createElement(
             'div',
-            { className: prefixCls + '-time-input' },
-            timeInputTopElement
+            { className: prefixCls + '-time-picker-panel' },
+            timePickerEle
           )
-        )
-      ),
-      _react2['default'].createElement(
-        'div',
-        { className: prefixCls + '-date-panel-container' },
+        ) : null,
         _react2['default'].createElement(
           'div',
-          {
-            tabIndex: this.props.focusablePanel ? 0 : undefined,
-            className: prefixCls + '-date-panel'
-          },
-          _react2['default'].createElement(_CalendarHeader2['default'], {
+          { className: prefixCls + '-body' },
+          _react2['default'].createElement(_DateTable2['default'], {
             locale: locale,
-            mode: mode,
             value: value,
-            onValueChange: this.setValue,
-            onPanelChange: this.onPanelChange,
-            renderFooter: renderFooter,
-            showTimePicker: showTimePicker,
+            selectedValue: selectedValue,
             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,
-          _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
-            })
-          )
-        ),
-        showTimeControls && _react2['default'].createElement(_CalendarRightPanel2['default'], {
-          prefixCls: prefixCls,
-          value: value,
-          selectedValue: selectedValue,
-          locale: locale,
-          onSelect: this.onDateTableSelect,
-          onClickRightPanelTime: onClickRightPanelTime,
-          defaultMinutesTime: this.props.defaultMinutesTime,
-          format: inputFormat
-        })
+            dateRender: props.dateRender,
+            onSelect: this.onDateTableSelect,
+            disabledDate: disabledDate,
+            showWeekNumber: showWeekNumber,
+            firstDayOfWeek: firstDayOfWeek,
+            currentStatus: currentStatus
+          })
+        )
       ),
-      _react2['default'].createElement(_CalendarFooter2['default'], {
-        showOk: props.showOk,
-        mode: mode,
-        renderFooter: props.renderFooter,
-        locale: locale,
+      showTimeControls && _react2['default'].createElement(_CalendarRightPanel2['default'], {
         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
+        selectedValue: selectedValue,
+        locale: locale,
+        onSelect: this.onDateTableSelect,
+        onClickRightPanelTime: onClickRightPanelTime,
+        defaultMinutesTime: this.props.defaultMinutesTime,
+        format: inputFormat,
+        timeInput: timeInputTopElement
       })
     ));
+    children.push(_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({
       children: children,
-      className: ((props.showWeekNumber ? prefixCls + '-week-number' : '') + ' ' + (showHourAndMinute ? prefixCls + '-with-time-panel' : '')).trim()
+      className: ((props.showWeekNumber ? prefixCls + '-week-number' : '') + ' ' + (showTimeControls ? prefixCls + '-with-time-panel' : '')).trim()
     });
   };
 

package/lib/calendar/CalendarRightPanel.js

@@ -206,18 +206,13 @@ var CalendarRightPanel = function (_React$Component) {
     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
+        { className: prefixCls + '-time-input' },
+        this.props.timeInput
       ),
       _react2['default'].createElement(
         'div',
@@ -295,7 +290,8 @@ CalendarRightPanel.propTypes = {
   onClickRightPanelTime: _propTypes2['default'].func,
   locale: _propTypes2['default'].object,
   defaultMinutesTime: _propTypes2['default'].string,
-  format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)])
+  format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]),
+  timeInput: _propTypes2['default'].node
 };
 exports['default'] = CalendarRightPanel;
 module.exports = exports['default'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-calendar",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "React Calendar",
   "keywords": [
     "react",