@seafile/seafile-calendar 1.0.0-alpha.2 → 1.0.1-beta.1

package/assets/index.css

@@ -205,7 +205,7 @@
 .rc-calendar {
   position: relative;
   outline: none;
-  font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
   width: -moz-fit-content;
   width: fit-content;
   list-style: none;
@@ -277,8 +277,8 @@
   line-height: 1.5;
 }
 .rc-calendar-date-input input:focus {
-  border-color: #ed7109;
-  box-shadow: 0 0 3px #ed7109;
+  border-color: #1991eb;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
   outline: none;
 }
 .rc-calendar-text-input {
@@ -295,8 +295,8 @@
   transition: border 0.3s, background 0.3s, box-shadow 0.3s;
 }
 .rc-calendar-text-input:focus {
-  border-color: #ed7109;
-  box-shadow: 0 0 3px #ed7109;
+  border-color: #1991eb;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
   outline: none;
 }
 .rc-calendar-header {
@@ -350,7 +350,7 @@
 .rc-calendar-month-select:hover,
 .rc-calendar-day-select:hover {
   cursor: pointer;
-  color: #f09f4f;
+  color: #ec7109;
 }
 .rc-calendar-year-select.rc-calendar-time-status:hover,
 .rc-calendar-month-select.rc-calendar-time-status:hover,
@@ -376,7 +376,7 @@
 .rc-calendar-next-month-btn:hover,
 .rc-calendar-prev-year-btn:hover,
 .rc-calendar-next-year-btn:hover {
-  color: #555;
+  color: #ec7109;
 }
 .rc-calendar-next-year-btn {
   right: 0;
@@ -445,11 +445,11 @@
   cursor: pointer;
 }
 .rc-calendar-selected-date .rc-calendar-date {
-  background: #ed7109;
+  background: #ff9800;
   color: #fff;
 }
 .rc-calendar-selected-date .rc-calendar-date:hover {
-  background: #ed7109;
+  background: #ff9800;
 }
 .rc-calendar-disabled-cell .rc-calendar-date {
   cursor: not-allowed;
@@ -478,7 +478,7 @@
 }
 .rc-calendar-today .rc-calendar-date::before {
   content: '';
-  background: #ed7109;
+  background: #ff9800;
   position: absolute;
   width: 4px;
   height: 4px;
@@ -528,12 +528,14 @@
   border-radius: 3px;
 }
 .rc-calendar-right-panel-item:hover {
-  background: rgba(237, 113, 9, 0.1);
+  background: rgba(255, 152, 0, 0.1);
+  color: #212529;
 }
-.rc-calendar-right-panel-item-selected {
-  background: rgba(237, 113, 9, 0.1);
+.rc-calendar-right-panel-item-selected,
+.rc-calendar-right-panel-item-selected:hover {
+  background: #ff9800;
   border-radius: 3px;
-  color: #212529;
+  color: #fff;
 }
 .rc-calendar-right-panel-col::-webkit-scrollbar {
   width: 0;
@@ -595,8 +597,8 @@
   width: 100%;
 }
 .rc-calendar-time-input:focus {
-  border-color: #ed7109;
-  box-shadow: 0 0 3px #ed7109;
+  border-color: #1991eb;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }
 .rc-calendar-time-panel {
   left: 0;
@@ -667,7 +669,8 @@
   left: 0;
   top: 0;
   bottom: 0;
-  right: 0;
+  right: auto;
+  width: 288px;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -704,7 +707,7 @@
 }
 .rc-calendar-month-panel-header > a:hover {
   cursor: pointer;
-  color: #f09f4f;
+  color: #ec7109;
 }
 .rc-calendar-month-panel-prev-year-btn,
 .rc-calendar-month-panel-next-year-btn {
@@ -759,7 +762,7 @@
   display: block;
   width: 46px;
   margin: 0 auto;
-  color: #666;
+  color: #212529;
   border-radius: 4px 4px;
   height: 36px;
   padding: 0;
@@ -768,6 +771,7 @@
   text-align: center;
 }
 .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
+  color: #212529;
   background: #fcecd9;
   cursor: pointer;
 }
@@ -779,7 +783,7 @@
   cursor: not-allowed;
 }
 .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
-  background: #ed7109;
+  background: #ff9800;
   color: #fff;
 }
 .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month:hover {
@@ -794,7 +798,8 @@
   left: 0;
   top: 0;
   bottom: 0;
-  right: 0;
+  right: auto;
+  width: 288px;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -823,15 +828,21 @@
   border-bottom: 1px solid #ccc;
 }
 .rc-calendar-year-panel-header > a {
+  height: 100%;
   font-weight: bold;
-  display: inline-block;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
   padding: 4px 5px;
   text-align: center;
   width: 30px;
 }
 .rc-calendar-year-panel-header > a:hover {
   cursor: pointer;
-  color: #f09f4f;
+  color: #ec7109;
 }
 .rc-calendar-year-panel-prev-decade-btn,
 .rc-calendar-year-panel-next-decade-btn {
@@ -886,7 +897,7 @@
   display: block;
   width: 46px;
   margin: 0 auto;
-  color: #666;
+  color: #212529;
   border-radius: 4px 4px;
   height: 36px;
   padding: 0;
@@ -895,22 +906,24 @@
   text-align: center;
 }
 .rc-calendar-year-panel-year:hover {
+  color: #212529;
   background: #fcecd9;
   cursor: pointer;
 }
 .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year {
-  background: #ed7109;
+  background: #ff9800;
   color: #fff;
 }
 .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year:hover {
-  background: #ed7109;
+  background: #ff9800;
   color: #fff;
 }
 .rc-calendar-decade-panel {
   left: 0;
   top: 0;
   bottom: 0;
-  right: 0;
+  right: auto;
+  width: 288px;
   background: #ffffff;
   z-index: 10;
   position: absolute;
@@ -927,6 +940,12 @@
   padding: 0 10px;
   height: 34px;
   line-height: 34px;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
   position: relative;
   text-align: center;
   -moz-user-select: none;
@@ -936,15 +955,21 @@
   border-bottom: 1px solid #ccc;
 }
 .rc-calendar-decade-panel-header > a {
+  height: 100%;
   font-weight: bold;
-  display: inline-block;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
   padding: 1px 5px;
   text-align: center;
   width: 30px;
 }
 .rc-calendar-decade-panel-header > a:hover {
   cursor: pointer;
-  color: #f09f4f;
+  color: #ec7109;
 }
 .rc-calendar-decade-panel-prev-century-btn,
 .rc-calendar-decade-panel-next-century-btn {
@@ -1005,7 +1030,7 @@
   cursor: pointer;
 }
 .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade {
-  background: #f09f3f;
+  background: #ff9800;
   color: #fff;
 }
 .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade:hover {

package/es/Calendar.js

@@ -164,6 +164,9 @@ var Calendar = function (_React$Component) {
     if (props.renderSidebar) {
       children.push(props.renderSidebar());
     }
+
+    var showTimeControls = showHourAndMinute && mode === 'date';
+
     children.push(React.createElement(
       'div',
       { className: prefixCls + '-panel', key: 'panel' },
@@ -179,7 +182,7 @@ var Calendar = function (_React$Component) {
             dateInputElement
           )
         ),
-        showHourAndMinute && React.createElement(
+        showTimeControls && React.createElement(
           'div',
           { className: prefixCls + '-time-input-col' },
           timeInputTopElement
@@ -230,16 +233,13 @@ var Calendar = function (_React$Component) {
             })
           )
         ),
-        showHourAndMinute && React.createElement(CalendarRightPanel, {
+        showTimeControls && React.createElement(CalendarRightPanel, {
           prefixCls: prefixCls,
           value: value,
           selectedValue: selectedValue,
           locale: locale,
           onSelect: function onSelect(v) {
-            if (!_this2.state.hasExplicitTime) {
-              _this2.setState({ hasExplicitTime: true });
-            }
-            _this2.onDateTableSelect(v);
+            return _this2.onDateTableSelect(v);
           },
           onClickRightPanelTime: onClickRightPanelTime,
           defaultMinutesTime: this.props.defaultMinutesTime,
@@ -407,7 +407,7 @@ var _initialiseProps = function _initialiseProps() {
   this.onClear = function () {
     _this3.onSelect(null);
     _this3.props.onClear();
-    _this3.setState({ currentStatus: CALENDAR_STATUS.CURRENT_TIME, hasExplicitTime: false });
+    _this3.setState({ currentStatus: CALENDAR_STATUS.CURRENT_TIME });
   };
 
   this.onOk = function () {
@@ -471,16 +471,10 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onTimeInputChange = function (value) {
-    if (!_this3.state.hasExplicitTime) {
-      _this3.setState({ hasExplicitTime: true });
-    }
     _this3.onSelect(value, { source: 'timeInputChange' });
   };
 
   this.onTimeInputSelect = function (value) {
-    if (!_this3.state.hasExplicitTime) {
-      _this3.setState({ hasExplicitTime: true });
-    }
     _this3.onSelect(value, { source: 'timeInputSelect' });
   };
 

package/es/calendar/CalendarRightPanel.js

@@ -211,7 +211,8 @@ var CalendarRightPanel = function (_React$Component) {
                   onClick: function onClick() {
                     return _this4.onSelectHour(h);
                   },
-                  className: prefixCls + '-right-panel-item ' + (h === selectedHour ? prefixCls + '-right-panel-item-selected' : '')
+                  className: prefixCls + '-right-panel-item ' + (h === selectedHour ? prefixCls + '-right-panel-item-selected' : ''),
+                  title: h
                 },
                 h
               );
@@ -232,7 +233,8 @@ var CalendarRightPanel = function (_React$Component) {
                   onClick: function onClick() {
                     return _this4.onSelectMinute(m);
                   },
-                  className: prefixCls + '-right-panel-item ' + (m === selectedMinute ? prefixCls + '-right-panel-item-selected' : '')
+                  className: prefixCls + '-right-panel-item ' + (m === selectedMinute ? prefixCls + '-right-panel-item-selected' : ''),
+                  title: m
                 },
                 m
               );

package/es/time/TimeInput.js

@@ -115,8 +115,6 @@ var TimeInput = function (_React$Component) {
     return _this;
   }
 
-  // Do not set state in componentDidMount; derive from props below to avoid being overwritten
-
   TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
     var newState = null;
     if (timeInputInstance) {

package/es/util/dayjs.js

@@ -3,6 +3,7 @@ import localeData from 'dayjs/plugin/localeData';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import utc from 'dayjs/plugin/utc';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import badMutable from 'dayjs/plugin/badMutable';
 import 'dayjs/locale/zh-cn';
@@ -12,6 +13,7 @@ dayjs.extend(localeData);
 dayjs.extend(weekOfYear);
 dayjs.extend(utc);
 dayjs.extend(advancedFormat);
+dayjs.extend(localizedFormat);
 dayjs.extend(customParseFormat);
 dayjs.extend(badMutable);
 export default dayjs;

package/es/util/index.js

@@ -1,8 +1,10 @@
 import _extends from 'babel-runtime/helpers/extends';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
+import localeData from 'dayjs/plugin/localeData';
 
 dayjs.extend(utc);
+dayjs.extend(localeData);
 export var getCurrentDate = function getCurrentDate() {
   return dayjs().date();
 };

package/lib/Calendar.js

@@ -229,6 +229,9 @@ var Calendar = function (_React$Component) {
     if (props.renderSidebar) {
       children.push(props.renderSidebar());
     }
+
+    var showTimeControls = showHourAndMinute && mode === 'date';
+
     children.push(_react2['default'].createElement(
       'div',
       { className: prefixCls + '-panel', key: 'panel' },
@@ -244,7 +247,7 @@ var Calendar = function (_React$Component) {
             dateInputElement
           )
         ),
-        showHourAndMinute && _react2['default'].createElement(
+        showTimeControls && _react2['default'].createElement(
           'div',
           { className: prefixCls + '-time-input-col' },
           timeInputTopElement
@@ -295,16 +298,13 @@ var Calendar = function (_React$Component) {
             })
           )
         ),
-        showHourAndMinute && _react2['default'].createElement(_CalendarRightPanel2['default'], {
+        showTimeControls && _react2['default'].createElement(_CalendarRightPanel2['default'], {
           prefixCls: prefixCls,
           value: value,
           selectedValue: selectedValue,
           locale: locale,
           onSelect: function onSelect(v) {
-            if (!_this2.state.hasExplicitTime) {
-              _this2.setState({ hasExplicitTime: true });
-            }
-            _this2.onDateTableSelect(v);
+            return _this2.onDateTableSelect(v);
           },
           onClickRightPanelTime: onClickRightPanelTime,
           defaultMinutesTime: this.props.defaultMinutesTime,
@@ -472,7 +472,7 @@ var _initialiseProps = function _initialiseProps() {
   this.onClear = function () {
     _this3.onSelect(null);
     _this3.props.onClear();
-    _this3.setState({ currentStatus: _util.CALENDAR_STATUS.CURRENT_TIME, hasExplicitTime: false });
+    _this3.setState({ currentStatus: _util.CALENDAR_STATUS.CURRENT_TIME });
   };
 
   this.onOk = function () {
@@ -536,16 +536,10 @@ var _initialiseProps = function _initialiseProps() {
   };
 
   this.onTimeInputChange = function (value) {
-    if (!_this3.state.hasExplicitTime) {
-      _this3.setState({ hasExplicitTime: true });
-    }
     _this3.onSelect(value, { source: 'timeInputChange' });
   };
 
   this.onTimeInputSelect = function (value) {
-    if (!_this3.state.hasExplicitTime) {
-      _this3.setState({ hasExplicitTime: true });
-    }
     _this3.onSelect(value, { source: 'timeInputSelect' });
   };
 

package/lib/calendar/CalendarRightPanel.js

@@ -234,7 +234,8 @@ var CalendarRightPanel = function (_React$Component) {
                   onClick: function onClick() {
                     return _this4.onSelectHour(h);
                   },
-                  className: prefixCls + '-right-panel-item ' + (h === selectedHour ? prefixCls + '-right-panel-item-selected' : '')
+                  className: prefixCls + '-right-panel-item ' + (h === selectedHour ? prefixCls + '-right-panel-item-selected' : ''),
+                  title: h
                 },
                 h
               );
@@ -255,7 +256,8 @@ var CalendarRightPanel = function (_React$Component) {
                   onClick: function onClick() {
                     return _this4.onSelectMinute(m);
                   },
-                  className: prefixCls + '-right-panel-item ' + (m === selectedMinute ? prefixCls + '-right-panel-item-selected' : '')
+                  className: prefixCls + '-right-panel-item ' + (m === selectedMinute ? prefixCls + '-right-panel-item-selected' : ''),
+                  title: m
                 },
                 m
               );

package/lib/time/TimeInput.js

@@ -139,8 +139,6 @@ var TimeInput = function (_React$Component) {
     return _this;
   }
 
-  // Do not set state in componentDidMount; derive from props below to avoid being overwritten
-
   TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
     var newState = null;
     if (timeInputInstance) {

package/lib/util/dayjs.js

@@ -22,6 +22,10 @@ var _advancedFormat = require('dayjs/plugin/advancedFormat');
 
 var _advancedFormat2 = _interopRequireDefault(_advancedFormat);
 
+var _localizedFormat = require('dayjs/plugin/localizedFormat');
+
+var _localizedFormat2 = _interopRequireDefault(_localizedFormat);
+
 var _customParseFormat = require('dayjs/plugin/customParseFormat');
 
 var _customParseFormat2 = _interopRequireDefault(_customParseFormat);
@@ -40,6 +44,7 @@ _dayjs2['default'].extend(_localeData2['default']);
 _dayjs2['default'].extend(_weekOfYear2['default']);
 _dayjs2['default'].extend(_utc2['default']);
 _dayjs2['default'].extend(_advancedFormat2['default']);
+_dayjs2['default'].extend(_localizedFormat2['default']);
 _dayjs2['default'].extend(_customParseFormat2['default']);
 _dayjs2['default'].extend(_badMutable2['default']);
 exports['default'] = _dayjs2['default'];

package/lib/util/index.js

@@ -35,9 +35,14 @@ var _utc = require('dayjs/plugin/utc');
 
 var _utc2 = _interopRequireDefault(_utc);
 
+var _localeData = require('dayjs/plugin/localeData');
+
+var _localeData2 = _interopRequireDefault(_localeData);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 _dayjs2['default'].extend(_utc2['default']);
+_dayjs2['default'].extend(_localeData2['default']);
 var getCurrentDate = exports.getCurrentDate = function getCurrentDate() {
   return (0, _dayjs2['default'])().date();
 };

package/package.json

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