@seafile/seafile-calendar 1.0.26-alphaa.1 → 1.0.27

package/assets/index.css

@@ -18,7 +18,7 @@
 .rc-calendar-input-wrap a {
   position: absolute;
   top: 0;
-  right: 12px;
+  right: 6px;
   bottom: 0;
   height: 32px;
   line-height: 32px;
@@ -136,6 +136,23 @@
   --rc-calendar-disabled-color: #c2c2c2;
   --rc-calendar-out-range-color: #c2c2c2;
 }
+@media (prefers-color-scheme: dark) {
+  .rc-calendar {
+    --rc-calendar-popover-bg: #1c1d1f;
+    --rc-calendar-popover-border-color: rgba(255, 255, 255, 0.1);
+    --rc-calendar-popover-box-shadow: none;
+    --rc-calendar-body-color: rgba(255, 255, 255, 0.9);
+    --rc-calendar-icon-color: rgba(255, 255, 255, 0.7);
+    --rc-calendar-icon-secondary-color: rgba(255, 255, 255, 0.5);
+    --rc-calendar-icon-btn-hover-bg-color: rgba(255, 255, 255, 0.1);
+    --rc-calendar-input-border-color: rgba(255, 255, 255, 0.1);
+    --rc-calendar-input-focus-border-color: #3e84f7;
+    --rc-calendar-divider-color: rgba(255, 255, 255, 0.1);
+    --rc-calendar-disabled-bg: rgba(255, 255, 255, 0.08);
+    --rc-calendar-disabled-color: rgba(255, 255, 255, 0.2);
+    --rc-calendar-out-range-color: rgba(255, 255, 255, 0.2);
+  }
+}
 /* Explicit theme values take precedence over the system preference. */
 [data-bs-theme='light'] .rc-calendar,
 .rc-calendar[data-bs-theme='light'] {
@@ -284,43 +301,52 @@
   border: 1px solid var(--rc-calendar-popover-border-color, #eee);
   line-height: 1.5;
   overflow: hidden;
-  width: 278px;
   /* Layout wrappers */
+  /* Top inputs row */
   /* Date grid area */
   /* Right time panel */
   /* Footer */
 }
 .rc-calendar-with-time-panel {
-  width: 404px;
+  width: 367px;
 }
 .rc-calendar-panel {
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: stretch;
-      align-items: stretch;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+.rc-calendar-date-panel-container {
+  display: -ms-flexbox;
+  display: flex;
 }
 .rc-calendar-date-panel {
   display: block;
-  -ms-flex: none;
-      flex: none;
-  width: 273px;
+  width: 276px;
 }
-.rc-calendar-date-input {
+.rc-calendar-inputs {
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
-      align-items: center;
-  box-sizing: border-box;
-  padding: 12px 12px 0;
+  -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);
+}
+.rc-calendar-date-input,
 .rc-calendar-time-input {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
-  box-sizing: border-box;
-  padding: 12px;
-  border-bottom: 1px solid var(--rc-calendar-divider-color, #eee);
+  height: 100%;
+  padding: 12px 12px 0 12px;
+  margin-bottom: 4px;
 }
 .rc-calendar-date-input input,
 .rc-calendar-time-input input {
@@ -344,7 +370,7 @@
   outline: none;
 }
 .rc-calendar-header {
-  padding: 0 18px;
+  padding: 0 12px;
   height: 48px;
   line-height: 24px;
   text-align: center;
@@ -352,7 +378,6 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  margin-top: 4px;
 }
 .rc-calendar-header-nav-wrap {
   position: relative;
@@ -442,7 +467,7 @@
   left: 0;
 }
 .rc-calendar-body {
-  padding: 0 12px 12px;
+  padding: 0 12px;
   height: 260px;
 }
 .rc-calendar table {
@@ -537,48 +562,39 @@
   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-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);
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
+  color: var(--rc-calendar-body-color, #212529);
+  font-weight: 600;
 }
 .rc-calendar-right-panel-body {
-  -ms-flex: 1;
-      flex: 1;
-  min-height: 0;
+  height: 260px;
   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 16px;
+  padding: 4px;
 }
 .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%;
@@ -600,6 +616,10 @@
   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,89 +171,109 @@ var Calendar = function (_React$Component) {
       { className: prefixCls + '-panel', key: 'panel' },
       React.createElement(
         'div',
-        {
-          tabIndex: this.props.focusablePanel ? 0 : undefined,
-          className: prefixCls + '-date-panel'
-        },
+        { className: prefixCls + '-inputs' },
         React.createElement(
           'div',
-          { className: prefixCls + '-date-input' },
-          dateInputElement
+          { className: prefixCls + '-date-input-col' },
+          React.createElement(
+            'div',
+            { className: prefixCls + '-date-input' },
+            dateInputElement
+          )
         ),
-        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(
+        showTimeControls && React.createElement(
           'div',
-          { className: prefixCls + '-time-picker' },
+          { className: prefixCls + '-time-input-col' },
           React.createElement(
             'div',
-            { className: prefixCls + '-time-picker-panel' },
-            timePickerEle
+            { className: prefixCls + '-time-input' },
+            timeInputTopElement
           )
-        ) : null,
+        )
+      ),
+      React.createElement(
+        'div',
+        { className: prefixCls + '-date-panel-container' },
         React.createElement(
           'div',
-          { className: prefixCls + '-body' },
-          React.createElement(DateTable, {
+          {
+            tabIndex: this.props.focusablePanel ? 0 : undefined,
+            className: prefixCls + '-date-panel'
+          },
+          React.createElement(CalendarHeader, {
             locale: locale,
+            mode: mode,
             value: value,
-            selectedValue: selectedValue,
+            onValueChange: this.setValue,
+            onPanelChange: this.onPanelChange,
+            renderFooter: renderFooter,
+            showTimePicker: showTimePicker,
             prefixCls: prefixCls,
-            dateRender: props.dateRender,
-            onSelect: this.onDateTableSelect,
-            disabledDate: disabledDate,
-            showWeekNumber: showWeekNumber,
-            firstDayOfWeek: firstDayOfWeek,
-            currentStatus: currentStatus
-          })
-        )
+            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
+        })
       ),
-      showTimeControls && React.createElement(CalendarRightPanel, {
+      React.createElement(CalendarFooter, {
+        showOk: props.showOk,
+        mode: mode,
+        renderFooter: props.renderFooter,
+        locale: locale,
         prefixCls: prefixCls,
-        value: value,
+        showToday: props.showToday,
+        disabledTime: disabledTime,
+        showTimePicker: showTimePicker,
+        showDateInput: props.showDateInput,
+        timePicker: timePicker,
         selectedValue: selectedValue,
-        locale: locale,
-        onSelect: this.onDateTableSelect,
-        onClickRightPanelTime: onClickRightPanelTime,
-        defaultMinutesTime: this.props.defaultMinutesTime,
-        format: inputFormat,
-        timeInput: timeInputTopElement
+        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
       })
     ));
-    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' : '') + ' ' + (showTimeControls ? prefixCls + '-with-time-panel' : '')).trim()
+      className: ((props.showWeekNumber ? prefixCls + '-week-number' : '') + ' ' + (showHourAndMinute ? prefixCls + '-with-time-panel' : '')).trim()
     });
   };
 

package/es/calendar/CalendarRightPanel.js

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

package/lib/Calendar.js

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

package/lib/calendar/CalendarRightPanel.js

@@ -206,13 +206,18 @@ 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 + '-time-input' },
-        this.props.timeInput
+        { className: prefixCls + '-right-panel-header ' + prefixCls + '-header' },
+        displayHour,
+        ':',
+        displayMinute
       ),
       _react2['default'].createElement(
         'div',
@@ -290,8 +295,7 @@ 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)]),
-  timeInput: _propTypes2['default'].node
+  format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)])
 };
 exports['default'] = CalendarRightPanel;
 module.exports = exports['default'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-calendar",
-  "version": "1.0.26alphaa.1",
+  "version": "1.0.27",
   "description": "React Calendar",
   "keywords": [
     "react",