@seafile/seafile-calendar 1.0.0-alpha.0 → 1.0.0-alpha.1

package/assets/index.css

@@ -251,7 +251,7 @@
 }
 .rc-calendar-time-input-col {
   width: 122px;
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #eee;
 }
 .rc-calendar-date-input,
 .rc-calendar-time-input-outer {
@@ -272,13 +272,10 @@
   height: 30px;
   width: 100%;
   padding: 4px 10px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #eee;
   border-radius: 3px;
   line-height: 1.5;
 }
-.rc-calendar-date-input input:hover {
-  border-color: #ed7109;
-}
 .rc-calendar-date-input input:focus {
   border-color: #ed7109;
   box-shadow: 0 0 3px #ed7109;
@@ -291,15 +288,12 @@
   margin: 0;
   padding: 4px 10px;
   border-radius: 6px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #eee;
   background: #fff;
   color: #666;
   line-height: 1.5;
   transition: border 0.3s, background 0.3s, box-shadow 0.3s;
 }
-.rc-calendar-text-input:hover {
-  border-color: #ed7109;
-}
 .rc-calendar-text-input:focus {
   border-color: #ed7109;
   box-shadow: 0 0 3px #ed7109;
@@ -314,7 +308,7 @@
    -ms-user-select: none;
        user-select: none;
   -webkit-user-select: none;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #eee;
 }
 .rc-calendar-header > a {
   font-weight: 600;
@@ -356,7 +350,7 @@
 .rc-calendar-month-select:hover,
 .rc-calendar-day-select:hover {
   cursor: pointer;
-  color: #ed7109;
+  color: #f09f4f;
 }
 .rc-calendar-year-select.rc-calendar-time-status:hover,
 .rc-calendar-month-select.rc-calendar-time-status:hover,
@@ -382,7 +376,7 @@
 .rc-calendar-next-month-btn:hover,
 .rc-calendar-prev-year-btn:hover,
 .rc-calendar-next-year-btn:hover {
-  color: #ed7109;
+  color: #555;
 }
 .rc-calendar-next-year-btn {
   right: 0;
@@ -432,6 +426,7 @@
 }
 .rc-calendar-cell {
   height: 36px;
+  padding: 0;
 }
 .rc-calendar-date {
   display: block;
@@ -484,7 +479,7 @@
 }
 .rc-calendar-right-panel {
   height: inherit;
-  border-left: 1px solid #ccc;
+  border-left: 1px solid #eee;
 }
 .rc-calendar-right-panel-time-header {
   height: 40px;
@@ -499,6 +494,7 @@
   display: -ms-flexbox;
   display: flex;
   padding: 4px;
+  scrollbar-color: auto;
 }
 .rc-calendar-right-panel-col {
   overflow-y: auto;
@@ -534,7 +530,7 @@
   height: 0;
 }
 .rc-calendar-footer {
-  border-top: 1px solid #ccc;
+  border-top: 1px solid #eee;
   padding: 8px 0;
   text-align: center;
   position: relative;
@@ -581,16 +577,13 @@
   margin: 0 0;
   padding: 4px 10px;
   border-radius: 3px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid #eee;
   background-color: #ffffff;
   color: #666;
   line-height: 1.5;
   transform: border 0.3s cubic-bezier(0.35, 0, 0.25, 1), background 0.3s cubic-bezier(0.35, 0, 0.25, 1), box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1);
   width: 100%;
 }
-.rc-calendar-time-input:hover {
-  border-color: #ed7109;
-}
 .rc-calendar-time-input:focus {
   border-color: #ed7109;
   box-shadow: 0 0 3px #ed7109;

package/es/Calendar.js

@@ -48,8 +48,7 @@ var Calendar = function (_React$Component) {
       mode: _this.props.mode || 'date',
       value: getMomentObjectIfValid(props.value) || getMomentObjectIfValid(props.defaultValue) || dayjs(),
       selectedValue: props.selectedValue || props.defaultSelectedValue,
-      currentStatus: CALENDAR_STATUS.SPECIFIC_TIME,
-      hasExplicitTime: false
+      currentStatus: CALENDAR_STATUS.SPECIFIC_TIME
     };
     return _this;
   }
@@ -87,7 +86,6 @@ var Calendar = function (_React$Component) {
     var locale = props.locale,
         prefixCls = props.prefixCls,
         disabledDate = props.disabledDate,
-        dateInputPlaceholder = props.dateInputPlaceholder,
         timePicker = props.timePicker,
         onClickRightPanelTime = props.onClickRightPanelTime,
         disabledTime = props.disabledTime,
@@ -128,9 +126,14 @@ var Calendar = function (_React$Component) {
     var baseFormat = Array.isArray(this.getFormat()) ? this.getFormat()[0] : this.getFormat();
     var headerDatePlaceholder = baseFormat.replace(/\s*HH:mm(?::ss)?\s*/, '').trim() || 'YYYY-MM-DD';
     var inputFormat = Array.isArray(this.getFormat()) ? this.getFormat() : [this.getFormat()];
+    // For the date input, strip any time tokens from formats so date and time are shown separately
+    var stripTime = function stripTime(f) {
+      return typeof f === 'string' ? f.replace(/\s*HH:mm(?::ss)?\s*/, '').trim() : f;
+    };
+    var dateOnlyFormats = Array.isArray(this.getFormat()) ? this.getFormat().map(stripTime) : [stripTime(this.getFormat())];
 
     var dateInputElement = props.showDateInput ? React.createElement(DateInput, {
-      format: inputFormat,
+      format: dateOnlyFormats,
       key: 'date-input',
       value: value,
       locale: locale,
@@ -152,7 +155,6 @@ var Calendar = function (_React$Component) {
       prefixCls: prefixCls,
       value: value,
       selectedValue: selectedValue,
-      showFromSelected: this.state.hasExplicitTime,
       onChange: this.onTimeInputChange,
       onSelect: this.onTimeInputSelect,
       inputMode: 'numeric'
@@ -177,7 +179,7 @@ var Calendar = function (_React$Component) {
             dateInputElement
           )
         ),
-        React.createElement(
+        showHourAndMinute && React.createElement(
           'div',
           { className: prefixCls + '-time-input-col' },
           timeInputTopElement

package/es/time/TimeInput.js

@@ -2,7 +2,6 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _inherits from 'babel-runtime/helpers/inherits';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
 import dayjs from 'dayjs';
@@ -67,14 +66,10 @@ var TimeInput = function (_React$Component) {
       var timeStr = initializeTime(str);
 
       if (!str || !timeStr) {
-        _this.setState({ str: str, isInputEmpty: true });
+        _this.setState({ str: str });
         return;
       }
 
-      if (_this.state.isInputEmpty) {
-        _this.setState({ isInputEmpty: false });
-      }
-
       var base = _this.props.selectedValue || _this.props.value || dayjs();
       var parsed = dayjs(timeStr, 'HH:mm');
       var next = base.clone().hour(parsed.hour()).minute(parsed.minute());
@@ -102,7 +97,7 @@ var TimeInput = function (_React$Component) {
     };
 
     _this.onBlur = function () {
-      var base = _this.props.showFromSelected ? _this.props.selectedValue || null : null;
+      var base = _this.props.selectedValue ? _this.props.selectedValue : _this.props.value || null;
       _this.setState({
         hasFocus: false,
         str: base ? formatTime(base, _this.props.format) : ''
@@ -113,23 +108,14 @@ var TimeInput = function (_React$Component) {
       timeInputInstance = node;
     };
 
-    _this.getRootDOMNode = function () {
-      return ReactDOM.findDOMNode(_this);
-    };
-
     _this.state = {
       str: '',
-      hasFocus: false,
-      isInputEmpty: true
+      hasFocus: false
     };
     return _this;
   }
 
-  TimeInput.prototype.componentDidUpdate = function componentDidUpdate() {
-    if (timeInputInstance && this.state.hasFocus && !(cachedSelectionStart === 0 && cachedSelectionEnd === 0)) {
-      timeInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd);
-    }
-  };
+  // Do not set state in componentDidMount; derive from props below to avoid being overwritten
 
   TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
     var newState = null;
@@ -139,11 +125,8 @@ var TimeInput = function (_React$Component) {
     }
 
     if (!state.hasFocus) {
-      if (nextProps.showFromSelected && nextProps.selectedValue) {
-        newState = { str: formatTime(nextProps.selectedValue, nextProps.format) };
-      } else {
-        newState = { str: '' };
-      }
+      var base = nextProps.selectedValue || null;
+      newState = { str: base ? formatTime(base, nextProps.format) : '' };
     }
     return newState;
   };
@@ -192,8 +175,7 @@ TimeInput.propTypes = {
   inputMode: PropTypes.string,
   format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   disabled: PropTypes.bool,
-  className: PropTypes.string,
-  showFromSelected: PropTypes.bool
+  className: PropTypes.string
 };
 TimeInput.defaultProps = {
   format: 'HH:mm',

package/lib/Calendar.js

@@ -113,8 +113,7 @@ var Calendar = function (_React$Component) {
       mode: _this.props.mode || 'date',
       value: getMomentObjectIfValid(props.value) || getMomentObjectIfValid(props.defaultValue) || (0, _dayjs2['default'])(),
       selectedValue: props.selectedValue || props.defaultSelectedValue,
-      currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME,
-      hasExplicitTime: false
+      currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME
     };
     return _this;
   }
@@ -152,7 +151,6 @@ var Calendar = function (_React$Component) {
     var locale = props.locale,
         prefixCls = props.prefixCls,
         disabledDate = props.disabledDate,
-        dateInputPlaceholder = props.dateInputPlaceholder,
         timePicker = props.timePicker,
         onClickRightPanelTime = props.onClickRightPanelTime,
         disabledTime = props.disabledTime,
@@ -193,9 +191,14 @@ var Calendar = function (_React$Component) {
     var baseFormat = Array.isArray(this.getFormat()) ? this.getFormat()[0] : this.getFormat();
     var headerDatePlaceholder = baseFormat.replace(/\s*HH:mm(?::ss)?\s*/, '').trim() || 'YYYY-MM-DD';
     var inputFormat = Array.isArray(this.getFormat()) ? this.getFormat() : [this.getFormat()];
+    // For the date input, strip any time tokens from formats so date and time are shown separately
+    var stripTime = function stripTime(f) {
+      return typeof f === 'string' ? f.replace(/\s*HH:mm(?::ss)?\s*/, '').trim() : f;
+    };
+    var dateOnlyFormats = Array.isArray(this.getFormat()) ? this.getFormat().map(stripTime) : [stripTime(this.getFormat())];
 
     var dateInputElement = props.showDateInput ? _react2['default'].createElement(_DateInput2['default'], {
-      format: inputFormat,
+      format: dateOnlyFormats,
       key: 'date-input',
       value: value,
       locale: locale,
@@ -217,7 +220,6 @@ var Calendar = function (_React$Component) {
       prefixCls: prefixCls,
       value: value,
       selectedValue: selectedValue,
-      showFromSelected: this.state.hasExplicitTime,
       onChange: this.onTimeInputChange,
       onSelect: this.onTimeInputSelect,
       inputMode: 'numeric'
@@ -242,7 +244,7 @@ var Calendar = function (_React$Component) {
             dateInputElement
           )
         ),
-        _react2['default'].createElement(
+        showHourAndMinute && _react2['default'].createElement(
           'div',
           { className: prefixCls + '-time-input-col' },
           timeInputTopElement

package/lib/time/TimeInput.js

@@ -18,10 +18,6 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -94,14 +90,10 @@ var TimeInput = function (_React$Component) {
       var timeStr = initializeTime(str);
 
       if (!str || !timeStr) {
-        _this.setState({ str: str, isInputEmpty: true });
+        _this.setState({ str: str });
         return;
       }
 
-      if (_this.state.isInputEmpty) {
-        _this.setState({ isInputEmpty: false });
-      }
-
       var base = _this.props.selectedValue || _this.props.value || (0, _dayjs2['default'])();
       var parsed = (0, _dayjs2['default'])(timeStr, 'HH:mm');
       var next = base.clone().hour(parsed.hour()).minute(parsed.minute());
@@ -129,7 +121,7 @@ var TimeInput = function (_React$Component) {
     };
 
     _this.onBlur = function () {
-      var base = _this.props.showFromSelected ? _this.props.selectedValue || null : null;
+      var base = _this.props.selectedValue ? _this.props.selectedValue : _this.props.value || null;
       _this.setState({
         hasFocus: false,
         str: base ? formatTime(base, _this.props.format) : ''
@@ -140,23 +132,14 @@ var TimeInput = function (_React$Component) {
       timeInputInstance = node;
     };
 
-    _this.getRootDOMNode = function () {
-      return _reactDom2['default'].findDOMNode(_this);
-    };
-
     _this.state = {
       str: '',
-      hasFocus: false,
-      isInputEmpty: true
+      hasFocus: false
     };
     return _this;
   }
 
-  TimeInput.prototype.componentDidUpdate = function componentDidUpdate() {
-    if (timeInputInstance && this.state.hasFocus && !(cachedSelectionStart === 0 && cachedSelectionEnd === 0)) {
-      timeInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd);
-    }
-  };
+  // Do not set state in componentDidMount; derive from props below to avoid being overwritten
 
   TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
     var newState = null;
@@ -166,11 +149,8 @@ var TimeInput = function (_React$Component) {
     }
 
     if (!state.hasFocus) {
-      if (nextProps.showFromSelected && nextProps.selectedValue) {
-        newState = { str: formatTime(nextProps.selectedValue, nextProps.format) };
-      } else {
-        newState = { str: '' };
-      }
+      var base = nextProps.selectedValue || null;
+      newState = { str: base ? formatTime(base, nextProps.format) : '' };
     }
     return newState;
   };
@@ -219,8 +199,7 @@ TimeInput.propTypes = {
   inputMode: _propTypes2['default'].string,
   format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]),
   disabled: _propTypes2['default'].bool,
-  className: _propTypes2['default'].string,
-  showFromSelected: _propTypes2['default'].bool
+  className: _propTypes2['default'].string
 };
 TimeInput.defaultProps = {
   format: 'HH:mm',

package/package.json

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