@seafile/seafile-calendar 0.0.29-alpha.2 → 0.0.29-alpha.4

package/lib/date/DateConstants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+var DATE_ROW_COLUMN_COUNT = {
+  DATE_ROW_COUNT: 6,
+  DATE_COL_COUNT: 7
+};
+
+var DAY_NAME_TO_INDEX = {
+  Sunday: 0,
+  Monday: 1,
+  Tuesday: 2,
+  Wednesday: 3,
+  Thursday: 4,
+  Friday: 5,
+  Saturday: 6
+};
+
+exports["default"] = {
+  DATE_ROW_COLUMN_COUNT: DATE_ROW_COLUMN_COUNT,
+  DAY_NAME_TO_INDEX: DAY_NAME_TO_INDEX
+};
+module.exports = exports['default'];

package/lib/date/DateInput.js

@@ -0,0 +1,265 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+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);
+
+var _KeyCode = require('rc-util/lib/KeyCode');
+
+var _KeyCode2 = _interopRequireDefault(_KeyCode);
+
+var _reactLifecyclesCompat = require('react-lifecycles-compat');
+
+var _dayjs = require('dayjs');
+
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+var _util = require('../util');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var cachedSelectionStart = void 0;
+var cachedSelectionEnd = void 0;
+var dateInputInstance = void 0;
+
+var DateInput = function (_React$Component) {
+  (0, _inherits3['default'])(DateInput, _React$Component);
+
+  function DateInput(props) {
+    (0, _classCallCheck3['default'])(this, DateInput);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var selectedValue = props.selectedValue;
+
+    _this.state = {
+      str: (0, _util.formatDate)(selectedValue, _this.props.format),
+      invalid: false,
+      hasFocus: false
+    };
+    return _this;
+  }
+
+  DateInput.prototype.componentDidUpdate = function componentDidUpdate() {
+    if (dateInputInstance && this.state.hasFocus && !this.state.invalid && !(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) {
+      newState = {
+        str: (0, _util.formatDate)(selectedValue, nextProps.format),
+        invalid: false
+      };
+    }
+
+    return newState;
+  };
+
+  DateInput.getInstance = function getInstance() {
+    return dateInputInstance;
+  };
+
+  DateInput.prototype.render = function render() {
+    var props = this.props;
+    var _state = this.state,
+        invalid = _state.invalid,
+        str = _state.str;
+    var locale = props.locale,
+        prefixCls = props.prefixCls,
+        placeholder = props.placeholder,
+        clearIcon = props.clearIcon,
+        inputMode = props.inputMode;
+
+    var invalidClass = invalid ? prefixCls + '-input-invalid' : '';
+    return _react2['default'].createElement(
+      'div',
+      { className: prefixCls + '-input-wrap' },
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-date-input-wrap' },
+        _react2['default'].createElement('input', {
+          ref: this.saveDateInput,
+          className: prefixCls + '-input ' + invalidClass,
+          value: str,
+          disabled: props.disabled,
+          placeholder: placeholder,
+          onChange: this.onInputChange,
+          onKeyDown: this.onKeyDown,
+          onFocus: this.onFocus,
+          onBlur: this.onBlur,
+          inputMode: inputMode
+        })
+      ),
+      props.showClear ? _react2['default'].createElement(
+        'a',
+        {
+          role: 'button',
+          title: locale.clear,
+          onClick: this.onClear
+        },
+        clearIcon || _react2['default'].createElement('span', { className: prefixCls + '-clear-btn' })
+      ) : null
+    );
+  };
+
+  return DateInput;
+}(_react2['default'].Component);
+
+DateInput.propTypes = {
+  prefixCls: _propTypes2['default'].string,
+  timePicker: _propTypes2['default'].object,
+  value: _propTypes2['default'].object,
+  disabledTime: _propTypes2['default'].any,
+  format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]),
+  locale: _propTypes2['default'].object,
+  disabledDate: _propTypes2['default'].func,
+  onChange: _propTypes2['default'].func,
+  onClear: _propTypes2['default'].func,
+  placeholder: _propTypes2['default'].string,
+  onSelect: _propTypes2['default'].func,
+  selectedValue: _propTypes2['default'].object,
+  clearIcon: _propTypes2['default'].node,
+  inputMode: _propTypes2['default'].string
+};
+
+var _initialiseProps = function _initialiseProps() {
+  var _this2 = this;
+
+  this.onClear = function () {
+    _this2.setState({
+      str: ''
+    });
+    _this2.props.onClear(null);
+  };
+
+  this.onInputChange = function (event) {
+    var str = event.target.value;
+    var _props = _this2.props,
+        disabledDate = _props.disabledDate,
+        format = _props.format,
+        onChange = _props.onChange,
+        selectedValue = _props.selectedValue;
+
+    // 没有内容，合法并直接退出
+
+    if (!str) {
+      onChange(null);
+      _this2.setState({
+        invalid: false,
+        str: str
+      });
+      return;
+    }
+
+    // 不合法直接退出
+    var parsed = (0, _dayjs2['default'])(str, format, true);
+    if (!parsed.isValid()) {
+      _this2.setState({
+        invalid: true,
+        str: str
+      });
+      return;
+    }
+
+    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 (!value || disabledDate && disabledDate(value)) {
+      _this2.setState({
+        invalid: true,
+        str: str
+      });
+      return;
+    }
+
+    if (selectedValue !== value || selectedValue && value && !selectedValue.isSame(value)) {
+      _this2.setState({
+        invalid: false,
+        str: str
+      });
+      onChange(value);
+    }
+  };
+
+  this.onFocus = function () {
+    _this2.setState({ hasFocus: true });
+  };
+
+  this.onBlur = function () {
+    _this2.setState(function (prevState, prevProps) {
+      return {
+        hasFocus: false,
+        str: (0, _util.formatDate)(prevProps.value, prevProps.format)
+      };
+    });
+  };
+
+  this.onKeyDown = function (event) {
+    var keyCode = event.keyCode;
+    var _props2 = _this2.props,
+        onSelect = _props2.onSelect,
+        value = _props2.value,
+        disabledDate = _props2.disabledDate;
+
+    if (keyCode === _KeyCode2['default'].ENTER && onSelect) {
+      var validateDate = !disabledDate || !disabledDate(value);
+      if (validateDate) {
+        onSelect(value.clone());
+      }
+      event.preventDefault();
+    }
+  };
+
+  this.getRootDOMNode = function () {
+    return _reactDom2['default'].findDOMNode(_this2);
+  };
+
+  this.focus = function () {
+    if (dateInputInstance) {
+      dateInputInstance.focus();
+    }
+  };
+
+  this.saveDateInput = function (dateInput) {
+    dateInputInstance = dateInput;
+  };
+};
+
+(0, _reactLifecyclesCompat.polyfill)(DateInput);
+
+exports['default'] = DateInput;
+module.exports = exports['default'];

package/lib/date/DateTBody.js

@@ -0,0 +1,307 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _DateConstants = require('./DateConstants');
+
+var _DateConstants2 = _interopRequireDefault(_DateConstants);
+
+var _util = require('../util/');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var DATE_ROW_COLUMN_COUNT = _DateConstants2['default'].DATE_ROW_COLUMN_COUNT,
+    DAY_NAME_TO_INDEX = _DateConstants2['default'].DAY_NAME_TO_INDEX;
+
+
+function isSameDay(one, two) {
+  return one && two && one.isSame(two, 'day');
+}
+
+function beforeCurrentMonthYear(current, today) {
+  if (current.year() < today.year()) {
+    return 1;
+  }
+  return current.year() === today.year() && current.month() < today.month();
+}
+
+function afterCurrentMonthYear(current, today) {
+  if (current.year() > today.year()) {
+    return 1;
+  }
+  return current.year() === today.year() && current.month() > today.month();
+}
+
+function getIdFromDate(date) {
+  return 'rc-calendar-' + date.year() + '-' + date.month() + '-' + date.date();
+}
+
+var DateTBody = function (_React$Component) {
+  (0, _inherits3['default'])(DateTBody, _React$Component);
+
+  function DateTBody() {
+    (0, _classCallCheck3['default'])(this, DateTBody);
+    return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments));
+  }
+
+  DateTBody.prototype.render = function render() {
+    var props = this.props;
+    var contentRender = props.contentRender,
+        prefixCls = props.prefixCls,
+        selectedValue = props.selectedValue,
+        value = props.value,
+        showWeekNumber = props.showWeekNumber,
+        dateRender = props.dateRender,
+        disabledDate = props.disabledDate,
+        hoverValue = props.hoverValue,
+        firstDayOfWeek = props.firstDayOfWeek;
+
+    var iIndex = void 0;
+    var jIndex = void 0;
+    var current = void 0;
+    var dateTable = [];
+    var today = (0, _util.getTodayTime)(value);
+    var cellClass = prefixCls + '-cell';
+    var weekNumberCellClass = prefixCls + '-week-number-cell';
+    var dateClass = prefixCls + '-date';
+    var todayClass = prefixCls + '-today';
+    var selectedClass = prefixCls + '-selected-day';
+    var selectedDateClass = prefixCls + '-selected-date'; // do not move with mouse operation
+    var selectedStartDateClass = prefixCls + '-selected-start-date';
+    var selectedEndDateClass = prefixCls + '-selected-end-date';
+    var inRangeClass = prefixCls + '-in-range-cell';
+    var lastMonthDayClass = prefixCls + '-last-month-cell';
+    var nextMonthDayClass = prefixCls + '-next-month-btn-day';
+    var disabledClass = prefixCls + '-disabled-cell';
+    var firstDisableClass = prefixCls + '-disabled-cell-first-of-row';
+    var lastDisableClass = prefixCls + '-disabled-cell-last-of-row';
+    var lastDayOfMonthClass = prefixCls + '-last-day-of-month';
+    var month1 = value.clone();
+    month1 = month1.date(1);
+    var day = month1.day();
+    var firstDayName = typeof firstDayOfWeek === 'string' ? firstDayOfWeek[0].toUpperCase() + firstDayOfWeek.slice(1) : 'Sunday';
+    var firstDayIndex = DAY_NAME_TO_INDEX[firstDayName] ? DAY_NAME_TO_INDEX[firstDayName] : 0;
+    var lastMonthDiffDay = (day + 7 - firstDayIndex) % 7;
+    // calculate last month
+    var lastMonth1 = month1.clone();
+    lastMonth1 = lastMonth1.add(0 - lastMonthDiffDay, 'days');
+    var passed = 0;
+
+    for (iIndex = 0; iIndex < DATE_ROW_COLUMN_COUNT.DATE_ROW_COUNT; iIndex++) {
+      for (jIndex = 0; jIndex < DATE_ROW_COLUMN_COUNT.DATE_COL_COUNT; jIndex++) {
+        current = lastMonth1;
+        if (passed) {
+          current = current.clone();
+          current = current.add(passed, 'days');
+        }
+        dateTable.push(current);
+        passed++;
+      }
+    }
+    var tableHtml = [];
+    passed = 0;
+
+    for (iIndex = 0; iIndex < DATE_ROW_COLUMN_COUNT.DATE_ROW_COUNT; iIndex++) {
+      var _cx;
+
+      var isCurrentWeek = void 0;
+      var weekNumberCell = void 0;
+      var isActiveWeek = false;
+      var dateCells = [];
+      if (showWeekNumber) {
+        weekNumberCell = _react2['default'].createElement(
+          'td',
+          {
+            key: dateTable[passed].week(),
+            role: 'gridcell',
+            className: weekNumberCellClass
+          },
+          dateTable[passed].week()
+        );
+      }
+      for (jIndex = 0; jIndex < DATE_ROW_COLUMN_COUNT.DATE_COL_COUNT; jIndex++) {
+        var next = null;
+        var last = null;
+        current = dateTable[passed];
+        if (jIndex < DATE_ROW_COLUMN_COUNT.DATE_COL_COUNT - 1) {
+          next = dateTable[passed + 1];
+        }
+        if (jIndex > 0) {
+          last = dateTable[passed - 1];
+        }
+        var cls = cellClass;
+        var disabled = false;
+        var selected = false;
+
+        if (isSameDay(current, today)) {
+          cls += ' ' + todayClass;
+          isCurrentWeek = true;
+        }
+
+        var isBeforeCurrentMonthYear = beforeCurrentMonthYear(current, value);
+        var isAfterCurrentMonthYear = afterCurrentMonthYear(current, value);
+
+        if (selectedValue && Array.isArray(selectedValue)) {
+          var rangeValue = hoverValue.length ? hoverValue : selectedValue;
+          if (!isBeforeCurrentMonthYear && !isAfterCurrentMonthYear) {
+            var startValue = rangeValue[0];
+            var endValue = rangeValue[1];
+            if (startValue) {
+              if (isSameDay(current, startValue)) {
+                selected = true;
+                isActiveWeek = true;
+                cls += ' ' + selectedStartDateClass;
+              }
+            }
+            if (startValue || endValue) {
+              if (isSameDay(current, endValue)) {
+                selected = true;
+                isActiveWeek = true;
+                cls += ' ' + selectedEndDateClass;
+              } else if ((startValue === null || startValue === undefined) && current.isBefore(endValue, 'day')) {
+                cls += ' ' + inRangeClass;
+              } else if ((endValue === null || endValue === undefined) && current.isAfter(startValue, 'day')) {
+                cls += ' ' + inRangeClass;
+              } else if (current.isAfter(startValue, 'day') && current.isBefore(endValue, 'day')) {
+                cls += ' ' + inRangeClass;
+              }
+            }
+          }
+        } else if (isSameDay(current, value)) {
+          // keyboard change value, highlight works
+          selected = true;
+          isActiveWeek = true;
+        }
+
+        if (isSameDay(current, selectedValue)) {
+          cls += ' ' + selectedDateClass;
+        }
+
+        if (isBeforeCurrentMonthYear) {
+          cls += ' ' + lastMonthDayClass;
+        }
+
+        if (isAfterCurrentMonthYear) {
+          cls += ' ' + nextMonthDayClass;
+        }
+
+        if (current.clone().endOf('month').date() === current.date()) {
+          cls += ' ' + lastDayOfMonthClass;
+        }
+
+        if (disabledDate) {
+          if (disabledDate(current, value)) {
+            disabled = true;
+
+            if (!last || !disabledDate(last, value)) {
+              cls += ' ' + firstDisableClass;
+            }
+
+            if (!next || !disabledDate(next, value)) {
+              cls += ' ' + lastDisableClass;
+            }
+          }
+        }
+
+        if (selected) {
+          cls += ' ' + selectedClass;
+        }
+
+        if (disabled) {
+          cls += ' ' + disabledClass;
+        }
+
+        var dateHtml = void 0;
+        if (dateRender) {
+          dateHtml = dateRender(current, value);
+        } else {
+          var content = contentRender ? contentRender(current, value) : current.date();
+          dateHtml = _react2['default'].createElement(
+            'div',
+            {
+              key: getIdFromDate(current),
+              className: dateClass,
+              'aria-selected': selected,
+              'aria-disabled': disabled
+            },
+            content
+          );
+        }
+
+        dateCells.push(_react2['default'].createElement(
+          'td',
+          {
+            key: passed,
+            onClick: disabled ? undefined : props.onSelect.bind(null, current),
+            onMouseEnter: disabled ? undefined : props.onDayHover && props.onDayHover.bind(null, current) || undefined,
+            role: 'gridcell',
+            title: (0, _util.getTitleString)(current),
+            className: cls
+          },
+          dateHtml
+        ));
+
+        passed++;
+      }
+
+      tableHtml.push(_react2['default'].createElement(
+        'tr',
+        {
+          key: iIndex,
+          role: 'row',
+          className: (0, _classnames2['default'])((_cx = {}, _cx[prefixCls + '-current-week'] = isCurrentWeek, _cx[prefixCls + '-active-week'] = isActiveWeek, _cx))
+        },
+        weekNumberCell,
+        dateCells
+      ));
+    }
+    return _react2['default'].createElement(
+      'tbody',
+      { className: prefixCls + '-tbody' },
+      tableHtml
+    );
+  };
+
+  return DateTBody;
+}(_react2['default'].Component);
+
+DateTBody.propTypes = {
+  contentRender: _propTypes2['default'].func,
+  dateRender: _propTypes2['default'].func,
+  disabledDate: _propTypes2['default'].func,
+  prefixCls: _propTypes2['default'].string,
+  selectedValue: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].arrayOf(_propTypes2['default'].object)]),
+  value: _propTypes2['default'].object,
+  hoverValue: _propTypes2['default'].any,
+  showWeekNumber: _propTypes2['default'].bool,
+  firstDayOfWeek: _propTypes2['default'].string
+};
+DateTBody.defaultProps = {
+  hoverValue: []
+};
+exports['default'] = DateTBody;
+module.exports = exports['default'];

package/lib/date/DateTHead.js

@@ -0,0 +1,105 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _DateConstants = require('./DateConstants');
+
+var _DateConstants2 = _interopRequireDefault(_DateConstants);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var DAY_NAME_TO_INDEX = _DateConstants2['default'].DAY_NAME_TO_INDEX,
+    DATE_ROW_COLUMN_COUNT = _DateConstants2['default'].DATE_ROW_COLUMN_COUNT;
+
+var DateTHead = function (_React$Component) {
+  (0, _inherits3['default'])(DateTHead, _React$Component);
+
+  function DateTHead() {
+    (0, _classCallCheck3['default'])(this, DateTHead);
+    return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments));
+  }
+
+  DateTHead.prototype.render = function render() {
+    var props = this.props;
+    var value = props.value;
+    var localeData = value.localeData();
+    var prefixCls = props.prefixCls;
+    var veryShortWeekdays = [];
+    var weekDays = [];
+
+    var allWeekdaysMin = localeData.weekdaysMin();
+    var allWeekdaysShort = localeData.weekdaysShort();
+
+    var firstDayName = typeof props.firstDayOfWeek === 'string' ? props.firstDayOfWeek[0].toUpperCase() + props.firstDayOfWeek.slice(1) : 'Sunday';
+    var firstDay = DAY_NAME_TO_INDEX[firstDayName] ? DAY_NAME_TO_INDEX[firstDayName] : 0;
+
+    var showWeekNumberEl = void 0;
+    for (var dateColIndex = 0; dateColIndex < DATE_ROW_COLUMN_COUNT.DATE_COL_COUNT; dateColIndex++) {
+      var index = (firstDay + dateColIndex) % DATE_ROW_COLUMN_COUNT.DATE_COL_COUNT;
+      veryShortWeekdays[dateColIndex] = allWeekdaysMin[index];
+      weekDays[dateColIndex] = allWeekdaysShort[index];
+    }
+
+    if (props.showWeekNumber) {
+      showWeekNumberEl = _react2['default'].createElement(
+        'th',
+        {
+          role: 'columnheader',
+          className: prefixCls + '-column-header ' + prefixCls + '-week-number-header'
+        },
+        _react2['default'].createElement(
+          'span',
+          { className: prefixCls + '-column-header-inner' },
+          'x'
+        )
+      );
+    }
+    var weekDaysEls = weekDays.map(function (day, xindex) {
+      return _react2['default'].createElement(
+        'th',
+        {
+          key: xindex,
+          role: 'columnheader',
+          title: day,
+          className: prefixCls + '-column-header'
+        },
+        _react2['default'].createElement(
+          'span',
+          { className: prefixCls + '-column-header-inner' },
+          veryShortWeekdays[xindex]
+        )
+      );
+    });
+    return _react2['default'].createElement(
+      'thead',
+      null,
+      _react2['default'].createElement(
+        'tr',
+        { role: 'row' },
+        showWeekNumberEl,
+        weekDaysEls
+      )
+    );
+  };
+
+  return DateTHead;
+}(_react2['default'].Component);
+
+exports['default'] = DateTHead;
+module.exports = exports['default'];