@seafile/seafile-calendar 1.0.23-avb.74 → 1.0.24

package/assets/index.css

@@ -121,7 +121,7 @@
   --rc-calendar-input-border-color: rgba(0, 40, 100, 0.12);
   --rc-calendar-input-focus-border-color: #3e84f7;
   --rc-calendar-divider-color: #eee;
-  --rc-calendar-disabled-bg: rgba(0, 0, 0, 0.05);
+  --rc-calendar-disabled-bg: #f5f5f5;
   --rc-calendar-disabled-color: #c2c2c2;
   --rc-calendar-out-range-color: #c2c2c2;
 }
@@ -157,7 +157,7 @@
   --rc-calendar-input-border-color: rgba(0, 40, 100, 0.12);
   --rc-calendar-input-focus-border-color: #3e84f7;
   --rc-calendar-divider-color: #eee;
-  --rc-calendar-disabled-bg: rgba(0, 0, 0, 0.05);
+  --rc-calendar-disabled-bg: #f5f5f5;
   --rc-calendar-disabled-color: #c2c2c2;
   --rc-calendar-out-range-color: #c2c2c2;
 }
@@ -290,9 +290,8 @@
   border: 1px solid var(--rc-calendar-popover-border-color, #eee);
   line-height: 1.5;
   overflow: hidden;
-  width: -moz-fit-content;
-  width: fit-content;
   /* Layout wrappers */
+  /* Top inputs row */
   /* Date grid area */
   /* Right time panel */
   /* Footer */
@@ -301,47 +300,42 @@
   width: 367px;
 }
 .rc-calendar-panel {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: stretch;
-      align-items: stretch;
-}
-.rc-calendar-date-panel-column,
-.rc-calendar-time-panel-column {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
       flex-direction: column;
 }
-.rc-calendar-time-panel-column {
-  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
+.rc-calendar-date-panel-container {
+  display: -ms-flexbox;
+  display: flex;
 }
 .rc-calendar-date-panel {
   display: block;
-  width: 100%;
+  width: 276px;
+}
+.rc-calendar-inputs {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: stretch;
+      align-items: stretch;
 }
 .rc-calendar-date-input-col {
-  height: 48px;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
 }
 .rc-calendar-time-input-col {
-  height: 56px;
-}
-.rc-calendar-date-input {
-  box-sizing: border-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-      align-items: center;
-  padding: 12px 12px 4px 12px;
+  width: 89px;
+  border-left: 1px solid var(--rc-calendar-divider-color, #eee);
 }
+.rc-calendar-date-input,
 .rc-calendar-time-input {
-  box-sizing: border-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
   height: 100%;
-  padding: 12px;
+  padding: 12px 12px 0 12px;
+  margin-bottom: 4px;
 }
 .rc-calendar-date-input input,
 .rc-calendar-time-input input {
@@ -365,7 +359,7 @@
   outline: none;
 }
 .rc-calendar-header {
-  padding: 0 18px;
+  padding: 0 12px;
   height: 48px;
   line-height: 24px;
   text-align: center;
@@ -462,7 +456,7 @@
   left: 0;
 }
 .rc-calendar-body {
-  padding: 0 12px 12px;
+  padding: 0 12px;
   height: 260px;
 }
 .rc-calendar table {
@@ -474,10 +468,9 @@
 }
 .rc-calendar table td {
   padding: 0;
-  vertical-align: middle;
 }
 .rc-calendar table tr {
-  height: 36px;
+  height: 1.75rem !important;
 }
 .rc-calendar table,
 .rc-calendar td,
@@ -505,7 +498,7 @@
 }
 .rc-calendar-cell {
   width: 32px;
-  height: 36px;
+  height: auto;
 }
 .rc-calendar-date {
   display: block;
@@ -517,7 +510,7 @@
   padding: 0;
   background: transparent;
   text-align: center;
-  margin: 2px 2px 2px 2px;
+  margin: 2px;
 }
 .rc-calendar-date:hover {
   background: var(--rc-calendar-icon-btn-hover-bg-color, rgba(0, 0, 0, 0.04));
@@ -558,40 +551,40 @@
   border-radius: 50%;
 }
 .rc-calendar-right-panel {
-  height: 300px;
+  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;
 }
 .rc-calendar-right-panel-body {
+  height: 260px;
   display: -ms-flexbox;
   display: flex;
-  height: 100%;
-  box-sizing: border-box;
-  border-top: 1px solid var(--rc-calendar-divider-color, #eee);
+  padding: 0 4px 16px;
+  scrollbar-color: auto;
 }
 .rc-calendar-right-panel-col {
-  -ms-flex: 1 1 0px;
-      flex: 1 1 0;
-  min-width: 0;
   overflow-y: auto;
-  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 16px 16px;
+  padding: 4px;
 }
 .rc-calendar-right-panel-item {
   width: 32px;
   height: 32px;
   padding: 4px 0;
-  margin-top: 4px;
   cursor: pointer;
 }
-.rc-calendar-right-panel-item:first-child {
-  margin-top: 0;
-}
 .rc-calendar-right-panel-item-text {
   width: 100%;
   height: 100%;
@@ -612,6 +605,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

@@ -164,93 +164,89 @@ var Calendar = function (_React$Component) {
       children.push(props.renderSidebar());
     }
 
-    var showTimeControls = true;
+    var showTimeControls = showHourAndMinute && mode === 'date';
 
     children.push(React.createElement(
-      React.Fragment,
-      { key: 'panel' },
+      'div',
+      { className: prefixCls + '-panel', key: 'panel' },
       React.createElement(
         'div',
-        { className: prefixCls + '-panel' },
+        { className: prefixCls + '-inputs' },
         React.createElement(
           'div',
-          { className: prefixCls + '-date-panel-column' },
-          dateInputElement && React.createElement(
-            'div',
-            { className: prefixCls + '-date-input-col' },
-            React.createElement(
-              'div',
-              { className: prefixCls + '-date-input' },
-              dateInputElement
-            )
-          ),
+          { className: prefixCls + '-date-input-col' },
           React.createElement(
             'div',
-            {
-              tabIndex: this.props.focusablePanel ? 0 : undefined,
-              className: prefixCls + '-date-panel'
-            },
-            React.createElement(CalendarHeader, {
-              locale: locale,
-              value: value,
-              prefixCls: prefixCls,
-              mode: mode,
-              onValueChange: this.setValue,
-              onPanelChange: this.onPanelChange,
-              renderFooter: renderFooter,
-              showTimePicker: showTimePicker,
-              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
-              })
-            )
+            { className: prefixCls + '-date-input' },
+            dateInputElement
           )
         ),
         showTimeControls && React.createElement(
           'div',
-          { className: prefixCls + '-time-panel-column' },
+          { className: prefixCls + '-time-input-col' },
           React.createElement(
             'div',
-            { className: prefixCls + '-time-input-col' },
+            { className: prefixCls + '-time-input' },
+            timeInputTopElement
+          )
+        )
+      ),
+      React.createElement(
+        'div',
+        { className: prefixCls + '-date-panel-container' },
+        React.createElement(
+          'div',
+          {
+            tabIndex: this.props.focusablePanel ? 0 : undefined,
+            className: prefixCls + '-date-panel'
+          },
+          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-picker' },
             React.createElement(
               'div',
-              { className: prefixCls + '-time-input' },
-              timeInputTopElement
+              { className: prefixCls + '-time-picker-panel' },
+              timePickerEle
             )
-          ),
-          React.createElement(CalendarRightPanel, {
-            prefixCls: prefixCls,
-            value: value,
-            selectedValue: selectedValue,
-            locale: locale,
-            onSelect: this.onDateTableSelect,
-            onClickRightPanelTime: onClickRightPanelTime,
-            defaultMinutesTime: this.props.defaultMinutesTime,
-            format: inputFormat
-          })
-        )
+          ) : 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
+        })
       ),
       React.createElement(CalendarFooter, {
         showOk: props.showOk,

package/es/calendar/CalendarRightPanel.js

@@ -183,9 +183,19 @@ 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
+      ),
       React.createElement(
         'div',
         { className: prefixCls + '-right-panel-body' },

package/lib/Calendar.js

@@ -228,93 +228,89 @@ var Calendar = function (_React$Component) {
       children.push(props.renderSidebar());
     }
 
-    var showTimeControls = true;
+    var showTimeControls = showHourAndMinute && mode === 'date';
 
     children.push(_react2['default'].createElement(
-      _react2['default'].Fragment,
-      { key: 'panel' },
+      'div',
+      { className: prefixCls + '-panel', key: 'panel' },
       _react2['default'].createElement(
         'div',
-        { className: prefixCls + '-panel' },
+        { className: prefixCls + '-inputs' },
         _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-date-panel-column' },
-          dateInputElement && _react2['default'].createElement(
-            'div',
-            { className: prefixCls + '-date-input-col' },
-            _react2['default'].createElement(
-              'div',
-              { className: prefixCls + '-date-input' },
-              dateInputElement
-            )
-          ),
+          { className: prefixCls + '-date-input-col' },
           _react2['default'].createElement(
             'div',
-            {
-              tabIndex: this.props.focusablePanel ? 0 : undefined,
-              className: prefixCls + '-date-panel'
-            },
-            _react2['default'].createElement(_CalendarHeader2['default'], {
-              locale: locale,
-              value: value,
-              prefixCls: prefixCls,
-              mode: mode,
-              onValueChange: this.setValue,
-              onPanelChange: this.onPanelChange,
-              renderFooter: renderFooter,
-              showTimePicker: showTimePicker,
-              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
-              })
-            )
+            { className: prefixCls + '-date-input' },
+            dateInputElement
           )
         ),
         showTimeControls && _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-time-panel-column' },
+          { className: prefixCls + '-time-input-col' },
           _react2['default'].createElement(
             'div',
-            { className: prefixCls + '-time-input-col' },
+            { className: prefixCls + '-time-input' },
+            timeInputTopElement
+          )
+        )
+      ),
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-date-panel-container' },
+        _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-input' },
-              timeInputTopElement
+              { className: prefixCls + '-time-picker-panel' },
+              timePickerEle
             )
-          ),
-          _react2['default'].createElement(_CalendarRightPanel2['default'], {
-            prefixCls: prefixCls,
-            value: value,
-            selectedValue: selectedValue,
-            locale: locale,
-            onSelect: this.onDateTableSelect,
-            onClickRightPanelTime: onClickRightPanelTime,
-            defaultMinutesTime: this.props.defaultMinutesTime,
-            format: inputFormat
-          })
-        )
+          ) : 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
+        })
       ),
       _react2['default'].createElement(_CalendarFooter2['default'], {
         showOk: props.showOk,

package/lib/calendar/CalendarRightPanel.js

@@ -206,9 +206,19 @@ 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
+      ),
       _react2['default'].createElement(
         'div',
         { className: prefixCls + '-right-panel-body' },

package/package.json

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