@seafile/seafile-calendar 0.0.30-beta.1 → 0.0.30-beta.3

package/es/date/DateInput.js

@@ -0,0 +1,444 @@
+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 KeyCode from 'rc-util/es/KeyCode';
+import { polyfill } from 'react-lifecycles-compat';
+import dayjs from 'dayjs';
+import { formatDate, DATE_FORMATS, currentDate, currentMonth, currentYear, stringCurrentDate, stringCurrentMonth, formatDateLocal, hasSpecialChar, isValidMonth, isValidDay, fullValidYear, getDateFormatByStr, isCurrentYear, validateTime, delimate } from '../util';
+
+var cachedSelectionStart = void 0;
+var cachedSelectionEnd = void 0;
+var dateInputInstance = void 0;
+
+var DateInput = function (_React$Component) {
+  _inherits(DateInput, _React$Component);
+
+  function DateInput(props) {
+    _classCallCheck(this, DateInput);
+
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var selectedValue = props.selectedValue;
+    var formatPrefix = _this.props.format[0];
+    _this.state = {
+      timeStr: '',
+      dateStr: '',
+      str: formatDate(selectedValue, _this.props.format),
+      hasFocus: false,
+      localeFormat: formatPrefix,
+      delimiter: delimate(formatPrefix),
+      cananderIput: ''
+    };
+    return _this;
+  }
+
+  DateInput.prototype.componentDidUpdate = function componentDidUpdate() {
+    if (dateInputInstance && this.state.hasFocus && !(cachedSelectionStart === 0 && cachedSelectionEnd === 0)) {
+      dateInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd);
+    }
+  };
+
+  DateInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
+    var newState = {};
+
+    if (dateInputInstance) {
+      cachedSelectionStart = dateInputInstance.selectionStart;
+      cachedSelectionEnd = dateInputInstance.selectionEnd;
+    }
+    // when popup show, click body will call this, bug!
+    var selectedValue = nextProps.selectedValue;
+    if (!state.hasFocus) {
+      var timeStr = formatDate(selectedValue, nextProps.format).split(' ')[0];
+      var parts = timeStr.split(state.delimiter);
+      var timeParts = formatDate(selectedValue, nextProps.format).split(' ')[1];
+      if (parts.length === 3) {
+        if (state.localeFormat === DATE_FORMATS.ISO) {
+          newState = { str: parts[0].padStart(4, 0) + '-' + parts[1] + '-' + parts[2] };
+        } else if (state.localeFormat === DATE_FORMATS.ISOAndTime) {
+          newState = {
+            str: parts[0].padStart(4, 0) + '-' + parts[1] + '-' + parts[2] + ' ' + (nextProps.showHourAndMinute ? timeParts : ''), // eslint-disable-line max-len
+            dateStr: parts[0].padStart(4, 0) + '-' + parts[1] + '-' + parts[2]
+          };
+        } else if (state.localeFormat === DATE_FORMATS.US) {
+          newState = { str: Number(parts[0]) + '/' + Number(parts[1]) + '/' + parts[2].padStart(4, 0) };
+        } else if (state.localeFormat === DATE_FORMATS.USAndTime) {
+          newState = {
+            str: Number(parts[0]) + '/' + Number(parts[1]) + '/' + parts[2].padStart(4, 0) + ' ' + (nextProps.showHourAndMinute ? timeParts : ''), // eslint-disable-line max-len
+            dateStr: Number(parts[0]) + '/' + Number(parts[1]) + '/' + parts[2].padStart(4, 0)
+          };
+        } else if (state.localeFormat === DATE_FORMATS.European || state.localeFormat === DATE_FORMATS.Germany_Russia_etc) {
+          newState = { str: '' + Number(parts[0]) + state.delimiter + Number(parts[1]) + state.delimiter + parts[2].padStart(4, 0) }; // eslint-disable-line max-len
+        } else if (state.localeFormat === DATE_FORMATS.EuropeanAndTime || state.localeFormat === DATE_FORMATS.Germany_Russia_etcAndTime) {
+          newState = {
+            str: '' + Number(parts[0]) + state.delimiter + Number(parts[1]) + state.delimiter + parts[2].padStart(4, 0) + ' ' + (nextProps.showHourAndMinute ? timeParts : ''), // eslint-disable-line max-len
+            dateStr: '' + Number(parts[0]) + state.delimiter + Number(parts[1]) + state.delimiter + parts[2].padStart(4, 0) // eslint-disable-line max-len
+          };
+        }
+      }
+    }
+    return newState;
+  };
+
+  DateInput.getInstance = function getInstance() {
+    return dateInputInstance;
+  };
+
+  DateInput.prototype.normalizeDateInput = function normalizeDateInput(str) {
+    var day = void 0;
+    var month = void 0;
+    var year = void 0;
+    var parts = formatDateLocal(str, this.state.localeFormat, DATE_FORMATS);
+    var delimiter = this.state.delimiter;
+    var hasSpecial = hasSpecialChar(str);
+    if (this.state.localeFormat === DATE_FORMATS.ISO || this.state.localeFormat === DATE_FORMATS.ISOAndTime) {
+      var numStr = str.replace(/[^0-9]/g, '');
+      if (numStr.length === 7) {
+        year = numStr.slice(0, 4);
+        month = numStr.slice(4, 6).padStart(2, '0');
+        day = numStr.slice(6, 7).padStart(2, '0');
+        if (!isValidDay(day)) {
+          return year + '-' + stringCurrentMonth + '-' + stringCurrentDate;
+        }
+        return year + '-' + month + '-' + day;
+      }
+      if (hasSpecial) {
+        year = fullValidYear(parts[0]);
+        month = Number(parts[1]);
+        day = Number(parts[2]);
+        if (month >= 1 && month <= 12) {
+          if (isValidDay(day)) {
+            return year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
+          }
+          return year + '-' + String(month).padStart(2, '0') + '-01';
+        }
+        if ((month >= 13 || month < 1) && isNaN(day)) {
+          return year + '-' + stringCurrentMonth + '-' + stringCurrentDate;
+        }
+        if (!month && !day) {
+          return year + '-01-01';
+        }
+      }
+      if (str.length >= 1 && str.length <= 8) {
+        year = fullValidYear(str.slice(0, 4));
+        month = str.slice(4, 6);
+        day = Number(str.slice(6, 8));
+        if (str.length === 5 && Number(month) < 1) {
+          return year + '-' + stringCurrentMonth + '-' + stringCurrentDate + ' ';
+        }
+        if (str.length === 6 && Number(month) < 1) {
+          return year + '-' + stringCurrentMonth + '-' + stringCurrentDate;
+        }
+        if (str.length === 7) {
+          if (!isValidDay(day)) {
+            return year + '-' + String(isValidMonth(month)).padStart(2, '0') + '-' + stringCurrentDate;
+          }
+          return year + '-' + String(isValidMonth(month)).padStart(2, '0') + '-' + String(day).padStart(2, '0'); // eslint-disable-line max-len
+        }
+        if (str.length === 8) {
+          if (!isValidDay(day)) {
+            return isCurrentYear(year, month, day) + '-' + String(isValidMonth(month)).padStart(2, '0') + '-' + stringCurrentDate; // eslint-disable-line max-len
+          }
+          return isCurrentYear(year, month, day) + '-' + String(isValidMonth(month)).padStart(2, '0') + '-' + String(day).padStart(2, '0'); // eslint-disable-line max-len
+        }
+        if (Number(month) >= 1 && Number(month) <= 12 && isValidDay(day)) {
+          return year + '-' + month.padStart(2, '0') + '-' + String(day).padStart(2, '0');
+        }
+        return year + '-' + (month ? month.padStart(2, '0') : '01') + '-' + (day ? String(day).padStart(2, '0') : '01'); // eslint-disable-line max-len
+      }
+      return currentYear + '/' + stringCurrentMonth + '/' + stringCurrentDate;
+    }
+    if (this.state.localeFormat === DATE_FORMATS.US || this.state.localeFormat === DATE_FORMATS.USAndTime) {
+      if (hasSpecial) {
+        month = Number(parts[0]);
+        day = Number(parts[1]);
+        year = fullValidYear(parts[2]);
+        if (month >= 1 && month <= 12 && isValidDay(day)) {
+          return month + '/' + day + '/' + year;
+        }
+        return currentMonth + '/' + currentDate + '/' + currentYear;
+      }
+      if (str.length >= 1 && str.length <= 8) {
+        month = Number(str.slice(0, 2));
+        day = Number(str.slice(2, 4));
+        year = fullValidYear(str.slice(4, str.length));
+        if (month >= 1 && month <= 12) {
+          if (isValidDay(day)) {
+            return month + '/' + day + '/' + year;
+          }
+          if (!day) {
+            return month + '/1/' + year;
+          }
+          return currentMonth + '/' + currentDate + '/' + currentYear;
+        }
+      }
+      return currentMonth + '/' + currentDate + '/' + currentYear;
+    }
+    if (this.state.localeFormat === DATE_FORMATS.European || this.state.localeFormat === DATE_FORMATS.EuropeanAndTime || this.state.localeFormat === DATE_FORMATS.Germany_Russia_etcAndTime || this.state.localeFormat === DATE_FORMATS.Germany_Russia_etc) {
+      if (hasSpecial) {
+        day = parts[0];
+        month = parts[1];
+        year = fullValidYear(parts[2]);
+        if (isValidDay(day) && Number(month) >= 1 && Number(month) <= 12) {
+          return '' + Number(day) + delimiter + Number(month) + delimiter + year;
+        }
+        return '' + currentDate + delimiter + currentMonth + delimiter + currentYear;
+      }
+      if (str.length >= 1 && str.length <= 8) {
+        day = Number(str.slice(0, 2));
+        var monthStr = str.slice(2, 4);
+        month = isValidMonth(monthStr);
+        var yearStr = str.slice(4, str.length);
+        year = fullValidYear(yearStr);
+        if (Number(monthStr) >= 1 && Number(monthStr) <= 12 && isValidDay(day)) {
+          return '' + Number(day) + delimiter + Number(month) + delimiter + year;
+        }
+      }
+      return '' + currentDate + delimiter + currentMonth + delimiter + currentYear;
+    }
+  };
+
+  DateInput.prototype.render = function render() {
+    var props = this.props;
+    var _state = this.state,
+        str = _state.str,
+        dateStr = _state.dateStr,
+        timeStr = _state.timeStr;
+    var locale = props.locale,
+        prefixCls = props.prefixCls,
+        placeholder = props.placeholder,
+        clearIcon = props.clearIcon,
+        inputMode = props.inputMode,
+        showHourAndMinute = props.showHourAndMinute;
+
+    return React.createElement(
+      'div',
+      { className: prefixCls + '-input-wrap' },
+      showHourAndMinute ? React.createElement(
+        'div',
+        { className: prefixCls + '-date-input-wrap', style: { display: 'flex' } },
+        React.createElement(
+          'div',
+          null,
+          React.createElement('input', {
+            ref: this.saveDateInput,
+            className: prefixCls + '-input',
+            value: dateStr,
+            disabled: props.disabled,
+            placeholder: placeholder.slice(0, 10),
+            onChange: this.onInputChangeDate,
+            onKeyDown: this.onKeyDown,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            inputMode: inputMode
+          })
+        ),
+        React.createElement(
+          'div',
+          null,
+          React.createElement('input', {
+            ref: this.saveDateInput,
+            className: prefixCls + '-input',
+            value: timeStr,
+            disabled: props.disabled,
+            placeholder: 'HH:mm',
+            onChange: this.onInputChangeHourMinute,
+            onKeyDown: this.onKeyDown,
+            onFocus: this.onFocus,
+            onBlur: this.TimeBlure,
+            inputMode: inputMode
+          })
+        )
+      ) : React.createElement(
+        'div',
+        { className: prefixCls + '-date-input-wrap', style: { display: 'flex' } },
+        React.createElement('input', {
+          ref: this.saveDateInput,
+          className: prefixCls + '-input',
+          value: str,
+          disabled: props.disabled,
+          placeholder: placeholder,
+          onChange: this.onInputChangeAll,
+          onKeyDown: this.onKeyDown,
+          onFocus: this.onFocus,
+          onBlur: this.onBlur,
+          inputMode: inputMode
+        })
+      ),
+      props.showClear ? React.createElement(
+        'a',
+        {
+          role: 'button',
+          title: locale.clear,
+          onClick: this.onClear
+        },
+        clearIcon || React.createElement('span', { className: prefixCls + '-clear-btn' })
+      ) : null
+    );
+  };
+
+  return DateInput;
+}(React.Component);
+
+DateInput.propTypes = {
+  prefixCls: PropTypes.string,
+  timePicker: PropTypes.object,
+  value: PropTypes.object,
+  disabledTime: PropTypes.any,
+  format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  locale: PropTypes.object,
+  disabledDate: PropTypes.func,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  placeholder: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectedValue: PropTypes.object,
+  clearIcon: PropTypes.node,
+  inputMode: PropTypes.string,
+  showHourAndMinute: PropTypes.bool,
+  onChangeCananderIput: PropTypes.func
+};
+
+var _initialiseProps = function _initialiseProps() {
+  var _this2 = this;
+
+  this.onClear = function () {
+    var _props = _this2.props,
+        showHourAndMinute = _props.showHourAndMinute,
+        onClear = _props.onClear;
+
+    if (showHourAndMinute) {
+      _this2.setState({
+        dateStr: '',
+        timeStr: ''
+      });
+    } else {
+      _this2.setState({
+        str: ''
+      });
+    }
+    onClear(null);
+  };
+
+  this.onInputChange = function (str) {
+    var cananderStr = _this2.normalizeDateInput(str, _this2.props.showHourAndMinute);
+    var _props2 = _this2.props,
+        disabledDate = _props2.disabledDate,
+        onChange = _props2.onChange,
+        selectedValue = _props2.selectedValue;
+
+    var parts = formatDateLocal(cananderStr, _this2.state.localeFormat);
+    var hourMinuteStr = validateTime(_this2.state.timeStr);
+    _this2.setState({ timeStr: hourMinuteStr });
+    cananderStr = cananderStr + ' ' + hourMinuteStr;
+    // 没有内容，合法并直接退出
+    if (!str) {
+      onChange(null);
+      _this2.setState({ str: str });
+      return;
+    }
+    // 不合法直接退出
+    var format = getDateFormatByStr(cananderStr, _this2.state.localeFormat);
+    var parsed = dayjs(cananderStr, format);
+    var value = _this2.props.value.clone();
+    value = value.year(parsed.year()).month(parsed.month()).date(parsed.date()).hour(parsed.hour()).minute(parsed.minute()).second(parsed.second());
+
+    if (_this2.state.localeFormat === DATE_FORMATS.ISO || _this2.state.localeFormat === DATE_FORMATS.ISOAndTime) {
+      if (parts[0] && parts[0].length === 4 && (parts[0].slice(0, 3) === '000' || parts[0].slice(0, 2) === '00')) {
+        value.year(parts[0]);
+      }
+    }
+    if (_this2.state.localeFormat === DATE_FORMATS.European || _this2.state.localeFormat === DATE_FORMATS.EuropeanAndTime || _this2.state.localeFormat === DATE_FORMATS.US || _this2.state.localeFormat === DATE_FORMATS.USAndTime || _this2.state.localeFormat === DATE_FORMATS.Germany_Russia_etc || _this2.state.localeFormat === DATE_FORMATS.Germany_Russia_etcAndTime) {
+      if (parts[2] && parts[2].length === 4 && (parts[2].slice(0, 3) === '000' || parts[2].slice(0, 2) === '00')) {
+        value.year(parts[2]);
+      }
+    }
+    if (!value || disabledDate && disabledDate(value)) {
+      _this2.setState({ str: str });
+      return;
+    }
+
+    if (selectedValue !== value || selectedValue && value && !selectedValue.isSame(value)) {
+      _this2.setState({ str: str });
+      onChange(value);
+    }
+  };
+
+  this.onInputChangeAll = function (event) {
+    var str = event.target.value;
+    _this2.onInputChange(str);
+  };
+
+  this.onInputChangeDate = function (event) {
+    var dateStr = event.target.value;
+    _this2.setState({ dateStr: dateStr });
+    _this2.onInputChange(dateStr);
+  };
+
+  this.onInputChangeHourMinute = function (e) {
+    var timeStr = e.target.value;
+    _this2.setState({ timeStr: timeStr });
+  };
+
+  this.onFocus = function () {
+    _this2.setState({ hasFocus: true });
+  };
+
+  this.onBlur = function () {
+    _this2.setState(function (prevState, prevProps) {
+      return {
+        hasFocus: false,
+        str: formatDate(prevProps.value, prevProps.format)
+      };
+    });
+  };
+
+  this.onKeyDown = function (event) {
+    var keyCode = event.keyCode;
+    var _props3 = _this2.props,
+        onSelect = _props3.onSelect,
+        value = _props3.value,
+        disabledDate = _props3.disabledDate;
+
+    if (keyCode === KeyCode.ENTER && onSelect) {
+      var validateDate = !disabledDate || !disabledDate(value);
+      if (validateDate) {
+        onSelect(value.clone());
+      }
+      event.preventDefault();
+    }
+  };
+
+  this.getRootDOMNode = function () {
+    return ReactDOM.findDOMNode(_this2);
+  };
+
+  this.focus = function () {
+    if (dateInputInstance) {
+      dateInputInstance.focus();
+    }
+  };
+
+  this.TimeBlure = function () {
+    var hourMinuteStr = validateTime(_this2.state.timeStr);
+    _this2.setState({ timeStr: hourMinuteStr }, function () {
+      _this2.onInputChange(_this2.state.str);
+    });
+  };
+
+  this.focusTimeInput = function (timeStr) {
+    _this2.setState({ timeStr: timeStr });
+  };
+
+  this.saveDateInput = function (dateInput) {
+    dateInputInstance = dateInput;
+  };
+};
+
+polyfill(DateInput);
+
+export default DateInput;