@seafile/seafile-calendar 1.0.2-beta.2 → 1.0.2-beta.4

package/assets/index.css

@@ -212,8 +212,7 @@
   position: relative;
   outline: none;
   font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
-  width: -moz-fit-content;
-  width: fit-content;
+  width: 260px;
   list-style: none;
   font-size: 14px;
   text-align: left;
@@ -229,6 +228,9 @@
   /* Right time panel */
   /* Footer */
 }
+.rc-calendar-with-time-panel {
+  width: 349px;
+}
 .rc-calendar-panel {
   display: -ms-flexbox;
   display: flex;
@@ -291,6 +293,16 @@
        user-select: none;
   -webkit-user-select: none;
 }
+.rc-calendar-header-nav-wrap {
+  position: relative;
+  height: 100%;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+}
 .rc-calendar-header > a {
   font-weight: 600;
   display: inline-block;
@@ -628,8 +640,8 @@
   left: 0;
   top: 0;
   bottom: 0;
-  right: auto;
-  width: 260px;
+  right: 0;
+  width: 100%;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -685,6 +697,7 @@
 }
 .rc-calendar-month-panel-prev-year-btn:hover,
 .rc-calendar-month-panel-next-year-btn:hover {
+  color: #999;
   background-color: #f5f5f5;
 }
 .rc-calendar-month-panel-next-year-btn {
@@ -737,10 +750,10 @@
 }
 .rc-calendar-month-panel-cell .rc-calendar-month-panel-month {
   display: block;
-  width: 46px;
+  width: 64px;
   margin: 0 auto;
   color: #212529;
-  border-radius: 4px 4px;
+  border-radius: 4px;
   height: 36px;
   padding: 0;
   background: transparent;
@@ -774,8 +787,8 @@
   left: 0;
   top: 0;
   bottom: 0;
-  right: auto;
-  width: 260px;
+  right: 0;
+  width: 100%;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -881,7 +894,7 @@
 }
 .rc-calendar-year-panel-year {
   display: block;
-  width: 46px;
+  width: 64px;
   margin: 0 auto;
   color: #212529;
   border-radius: 4px;
@@ -908,8 +921,8 @@
   left: 0;
   top: 0;
   bottom: 0;
-  right: auto;
-  width: 260px;
+  right: 0;
+  width: 100%;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -946,9 +959,11 @@
       justify-content: center;
   -ms-flex-align: center;
       align-items: center;
-  color: #212529;
   cursor: pointer;
 }
+.rc-calendar-decade-panel-century {
+  color: #212529;
+}
 .rc-calendar-decade-panel-prev-century-btn,
 .rc-calendar-decade-panel-next-century-btn {
   width: 20px;
@@ -1002,12 +1017,13 @@
   display: block;
   margin: 0 auto;
   color: #212529;
-  border-radius: 4px 4px;
+  border-radius: 4px;
   height: 36px;
   padding: 0;
   background: transparent;
   line-height: 36px;
   text-align: center;
+  width: 105px;
 }
 .rc-calendar-decade-panel-decade:hover {
   background: #f5f5f5;

package/es/Calendar.js

@@ -207,7 +207,8 @@ var Calendar = function (_React$Component) {
             onPanelChange: this.onPanelChange,
             renderFooter: renderFooter,
             showTimePicker: showTimePicker,
-            prefixCls: prefixCls
+            prefixCls: prefixCls,
+            showHourAndMinute: showHourAndMinute
           }),
           timePicker && showTimePicker ? React.createElement(
             'div',
@@ -271,7 +272,7 @@ var Calendar = function (_React$Component) {
 
     return this.renderRoot({
       children: children,
-      className: props.showWeekNumber ? prefixCls + '-week-number' : ''
+      className: ((props.showWeekNumber ? prefixCls + '-week-number' : '') + ' ' + (showHourAndMinute ? prefixCls + '-with-time-panel' : '')).trim()
     });
   };
 

package/es/calendar/CalendarHeader.js

@@ -82,7 +82,8 @@ var CalendarHeader = function (_React$Component) {
         rootPrefixCls: prefixCls,
         onSelect: this.onYearSelect,
         onDecadePanelShow: this.showDecadePanel,
-        renderFooter: renderFooter
+        renderFooter: renderFooter,
+        showHourAndMinute: props.showHourAndMinute
       });
     }
     if (mode === 'decade') {
@@ -91,7 +92,8 @@ var CalendarHeader = function (_React$Component) {
         defaultValue: value,
         rootPrefixCls: prefixCls,
         onSelect: this.onDecadeSelect,
-        renderFooter: renderFooter
+        renderFooter: renderFooter,
+        showHourAndMinute: props.showHourAndMinute
       });
     }
 
@@ -100,7 +102,7 @@ var CalendarHeader = function (_React$Component) {
       { className: prefixCls + '-header' },
       React.createElement(
         'div',
-        { style: { position: 'relative', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
+        { className: prefixCls + '-header-nav-wrap' },
         showIf(enablePrev && !showTimePicker, React.createElement('a', {
           className: prefixCls + '-prev-year-btn',
           role: 'button',
@@ -143,7 +145,8 @@ CalendarHeader.propTypes = {
   enableNext: PropTypes.any,
   disabledMonth: PropTypes.func,
   renderFooter: PropTypes.func,
-  onMonthSelect: PropTypes.func
+  onMonthSelect: PropTypes.func,
+  showHourAndMinute: PropTypes.bool
 };
 CalendarHeader.defaultProps = {
   enableNext: 1,

package/es/decade/DecadePanel.js

@@ -48,7 +48,8 @@ var DecadePanel = function (_React$Component) {
     var value = this.state.value;
     var _props = this.props,
         locale = _props.locale,
-        renderFooter = _props.renderFooter;
+        renderFooter = _props.renderFooter,
+        showHourAndMinute = _props.showHourAndMinute;
 
     var currentYear = value.year();
     var startYear = parseInt(currentYear / 100, 10) * 100;
@@ -57,10 +58,12 @@ var DecadePanel = function (_React$Component) {
     var decades = [];
     var index = 0;
     var prefixCls = this.prefixCls;
+    var col = showHourAndMinute ? 3 : 2;
+    var row = showHourAndMinute ? 4 : 5;
 
-    for (var rowIndex = 0; rowIndex < ROW; rowIndex++) {
+    for (var rowIndex = 0; rowIndex < row; rowIndex++) {
       decades[rowIndex] = [];
-      for (var colIndex = 0; colIndex < COL; colIndex++) {
+      for (var colIndex = 0; colIndex < col; colIndex++) {
         var startDecade = preYear + index * 10;
         var endDecade = preYear + index * 10 + 9;
         decades[rowIndex][colIndex] = {
@@ -117,7 +120,7 @@ var DecadePanel = function (_React$Component) {
 
     return React.createElement(
       'div',
-      { className: this.prefixCls },
+      { className: prefixCls },
       React.createElement(
         'div',
         { className: prefixCls + '-header' },
@@ -173,7 +176,8 @@ DecadePanel.propTypes = {
   value: PropTypes.object,
   defaultValue: PropTypes.object,
   rootPrefixCls: PropTypes.string,
-  renderFooter: PropTypes.func
+  renderFooter: PropTypes.func,
+  showHourAndMinute: PropTypes.bool
 };
 
 DecadePanel.defaultProps = {

package/es/year/YearPanel.js

@@ -49,9 +49,11 @@ var YearPanel = function (_React$Component) {
     var previousYear = startYear - 1;
     var years = [];
     var index = 0;
-    for (var rowIndex = 0; rowIndex < ROW; rowIndex++) {
+    var col = this.props.showHourAndMinute ? 4 : 3;
+    var row = this.props.showHourAndMinute ? 3 : 4;
+    for (var rowIndex = 0; rowIndex < row; rowIndex++) {
       years[rowIndex] = [];
-      for (var colIndex = 0; colIndex < COL; colIndex++) {
+      for (var colIndex = 0; colIndex < col; colIndex++) {
         var year = previousYear + index;
         var content = String(year);
         years[rowIndex][colIndex] = {
@@ -113,7 +115,7 @@ var YearPanel = function (_React$Component) {
 
     return React.createElement(
       'div',
-      { className: this.prefixCls },
+      { className: prefixCls },
       React.createElement(
         'div',
         null,
@@ -186,7 +188,8 @@ YearPanel.propTypes = {
   rootPrefixCls: PropTypes.string,
   value: PropTypes.object,
   defaultValue: PropTypes.object,
-  renderFooter: PropTypes.func
+  renderFooter: PropTypes.func,
+  showHourAndMinute: PropTypes.bool
 };
 
 YearPanel.defaultProps = {

package/lib/Calendar.js

@@ -272,7 +272,8 @@ var Calendar = function (_React$Component) {
             onPanelChange: this.onPanelChange,
             renderFooter: renderFooter,
             showTimePicker: showTimePicker,
-            prefixCls: prefixCls
+            prefixCls: prefixCls,
+            showHourAndMinute: showHourAndMinute
           }),
           timePicker && showTimePicker ? _react2['default'].createElement(
             'div',
@@ -336,7 +337,7 @@ var Calendar = function (_React$Component) {
 
     return this.renderRoot({
       children: children,
-      className: props.showWeekNumber ? prefixCls + '-week-number' : ''
+      className: ((props.showWeekNumber ? prefixCls + '-week-number' : '') + ' ' + (showHourAndMinute ? prefixCls + '-with-time-panel' : '')).trim()
     });
   };
 

package/lib/calendar/CalendarHeader.js

@@ -114,7 +114,8 @@ var CalendarHeader = function (_React$Component) {
         rootPrefixCls: prefixCls,
         onSelect: this.onYearSelect,
         onDecadePanelShow: this.showDecadePanel,
-        renderFooter: renderFooter
+        renderFooter: renderFooter,
+        showHourAndMinute: props.showHourAndMinute
       });
     }
     if (mode === 'decade') {
@@ -123,7 +124,8 @@ var CalendarHeader = function (_React$Component) {
         defaultValue: value,
         rootPrefixCls: prefixCls,
         onSelect: this.onDecadeSelect,
-        renderFooter: renderFooter
+        renderFooter: renderFooter,
+        showHourAndMinute: props.showHourAndMinute
       });
     }
 
@@ -132,7 +134,7 @@ var CalendarHeader = function (_React$Component) {
       { className: prefixCls + '-header' },
       _react2['default'].createElement(
         'div',
-        { style: { position: 'relative', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
+        { className: prefixCls + '-header-nav-wrap' },
         showIf(enablePrev && !showTimePicker, _react2['default'].createElement('a', {
           className: prefixCls + '-prev-year-btn',
           role: 'button',
@@ -175,7 +177,8 @@ CalendarHeader.propTypes = {
   enableNext: _propTypes2['default'].any,
   disabledMonth: _propTypes2['default'].func,
   renderFooter: _propTypes2['default'].func,
-  onMonthSelect: _propTypes2['default'].func
+  onMonthSelect: _propTypes2['default'].func,
+  showHourAndMinute: _propTypes2['default'].bool
 };
 CalendarHeader.defaultProps = {
   enableNext: 1,

package/lib/decade/DecadePanel.js

@@ -73,7 +73,8 @@ var DecadePanel = function (_React$Component) {
     var value = this.state.value;
     var _props = this.props,
         locale = _props.locale,
-        renderFooter = _props.renderFooter;
+        renderFooter = _props.renderFooter,
+        showHourAndMinute = _props.showHourAndMinute;
 
     var currentYear = value.year();
     var startYear = parseInt(currentYear / 100, 10) * 100;
@@ -82,10 +83,12 @@ var DecadePanel = function (_React$Component) {
     var decades = [];
     var index = 0;
     var prefixCls = this.prefixCls;
+    var col = showHourAndMinute ? 3 : 2;
+    var row = showHourAndMinute ? 4 : 5;
 
-    for (var rowIndex = 0; rowIndex < ROW; rowIndex++) {
+    for (var rowIndex = 0; rowIndex < row; rowIndex++) {
       decades[rowIndex] = [];
-      for (var colIndex = 0; colIndex < COL; colIndex++) {
+      for (var colIndex = 0; colIndex < col; colIndex++) {
         var startDecade = preYear + index * 10;
         var endDecade = preYear + index * 10 + 9;
         decades[rowIndex][colIndex] = {
@@ -142,7 +145,7 @@ var DecadePanel = function (_React$Component) {
 
     return _react2['default'].createElement(
       'div',
-      { className: this.prefixCls },
+      { className: prefixCls },
       _react2['default'].createElement(
         'div',
         { className: prefixCls + '-header' },
@@ -198,7 +201,8 @@ DecadePanel.propTypes = {
   value: _propTypes2['default'].object,
   defaultValue: _propTypes2['default'].object,
   rootPrefixCls: _propTypes2['default'].string,
-  renderFooter: _propTypes2['default'].func
+  renderFooter: _propTypes2['default'].func,
+  showHourAndMinute: _propTypes2['default'].bool
 };
 
 DecadePanel.defaultProps = {

package/lib/year/YearPanel.js

@@ -73,9 +73,11 @@ var YearPanel = function (_React$Component) {
     var previousYear = startYear - 1;
     var years = [];
     var index = 0;
-    for (var rowIndex = 0; rowIndex < ROW; rowIndex++) {
+    var col = this.props.showHourAndMinute ? 4 : 3;
+    var row = this.props.showHourAndMinute ? 3 : 4;
+    for (var rowIndex = 0; rowIndex < row; rowIndex++) {
       years[rowIndex] = [];
-      for (var colIndex = 0; colIndex < COL; colIndex++) {
+      for (var colIndex = 0; colIndex < col; colIndex++) {
         var year = previousYear + index;
         var content = String(year);
         years[rowIndex][colIndex] = {
@@ -137,7 +139,7 @@ var YearPanel = function (_React$Component) {
 
     return _react2['default'].createElement(
       'div',
-      { className: this.prefixCls },
+      { className: prefixCls },
       _react2['default'].createElement(
         'div',
         null,
@@ -210,7 +212,8 @@ YearPanel.propTypes = {
   rootPrefixCls: _propTypes2['default'].string,
   value: _propTypes2['default'].object,
   defaultValue: _propTypes2['default'].object,
-  renderFooter: _propTypes2['default'].func
+  renderFooter: _propTypes2['default'].func,
+  showHourAndMinute: _propTypes2['default'].bool
 };
 
 YearPanel.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-calendar",
-  "version": "1.0.2-beta.2",
+  "version": "1.0.2-beta.4",
   "description": "React Calendar",
   "keywords": [
     "react",