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

package/es/date/DateInput.js

@@ -0,0 +1,233 @@
+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 } 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;
+
+    _this.state = {
+      str: 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: 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 React.createElement(
+      'div',
+      { className: prefixCls + '-input-wrap' },
+      React.createElement(
+        'div',
+        { className: prefixCls + '-date-input-wrap' },
+        React.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 ? 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
+};
+
+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 = dayjs(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: 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 === 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.saveDateInput = function (dateInput) {
+    dateInputInstance = dateInput;
+  };
+};
+
+polyfill(DateInput);
+
+export default DateInput;

package/es/date/DateTBody.js

@@ -0,0 +1,280 @@
+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 PropTypes from 'prop-types';
+import cx from 'classnames';
+import DateConstants from './DateConstants';
+import { getTitleString, getTodayTime } from '../util/';
+
+var DATE_ROW_COLUMN_COUNT = DateConstants.DATE_ROW_COLUMN_COUNT,
+    DAY_NAME_TO_INDEX = DateConstants.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) {
+  _inherits(DateTBody, _React$Component);
+
+  function DateTBody() {
+    _classCallCheck(this, DateTBody);
+
+    return _possibleConstructorReturn(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 = 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 = React.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 = React.createElement(
+            'div',
+            {
+              key: getIdFromDate(current),
+              className: dateClass,
+              'aria-selected': selected,
+              'aria-disabled': disabled
+            },
+            content
+          );
+        }
+
+        dateCells.push(React.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: getTitleString(current),
+            className: cls
+          },
+          dateHtml
+        ));
+
+        passed++;
+      }
+
+      tableHtml.push(React.createElement(
+        'tr',
+        {
+          key: iIndex,
+          role: 'row',
+          className: cx((_cx = {}, _cx[prefixCls + '-current-week'] = isCurrentWeek, _cx[prefixCls + '-active-week'] = isActiveWeek, _cx))
+        },
+        weekNumberCell,
+        dateCells
+      ));
+    }
+    return React.createElement(
+      'tbody',
+      { className: prefixCls + '-tbody' },
+      tableHtml
+    );
+  };
+
+  return DateTBody;
+}(React.Component);
+
+DateTBody.propTypes = {
+  contentRender: PropTypes.func,
+  dateRender: PropTypes.func,
+  disabledDate: PropTypes.func,
+  prefixCls: PropTypes.string,
+  selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
+  value: PropTypes.object,
+  hoverValue: PropTypes.any,
+  showWeekNumber: PropTypes.bool,
+  firstDayOfWeek: PropTypes.string
+};
+DateTBody.defaultProps = {
+  hoverValue: []
+};
+export default DateTBody;

package/es/date/DateTHead.js

@@ -0,0 +1,85 @@
+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 DateConstants from './DateConstants';
+
+var DAY_NAME_TO_INDEX = DateConstants.DAY_NAME_TO_INDEX,
+    DATE_ROW_COLUMN_COUNT = DateConstants.DATE_ROW_COLUMN_COUNT;
+
+var DateTHead = function (_React$Component) {
+  _inherits(DateTHead, _React$Component);
+
+  function DateTHead() {
+    _classCallCheck(this, DateTHead);
+
+    return _possibleConstructorReturn(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 = React.createElement(
+        'th',
+        {
+          role: 'columnheader',
+          className: prefixCls + '-column-header ' + prefixCls + '-week-number-header'
+        },
+        React.createElement(
+          'span',
+          { className: prefixCls + '-column-header-inner' },
+          'x'
+        )
+      );
+    }
+    var weekDaysEls = weekDays.map(function (day, xindex) {
+      return React.createElement(
+        'th',
+        {
+          key: xindex,
+          role: 'columnheader',
+          title: day,
+          className: prefixCls + '-column-header'
+        },
+        React.createElement(
+          'span',
+          { className: prefixCls + '-column-header-inner' },
+          veryShortWeekdays[xindex]
+        )
+      );
+    });
+    return React.createElement(
+      'thead',
+      null,
+      React.createElement(
+        'tr',
+        { role: 'row' },
+        showWeekNumberEl,
+        weekDaysEls
+      )
+    );
+  };
+
+  return DateTHead;
+}(React.Component);
+
+export default DateTHead;

package/es/date/DateTable.js

@@ -0,0 +1,32 @@
+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 DateTHead from './DateTHead';
+import DateTBody from './DateTBody';
+
+var DateTable = function (_React$Component) {
+  _inherits(DateTable, _React$Component);
+
+  function DateTable() {
+    _classCallCheck(this, DateTable);
+
+    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+  }
+
+  DateTable.prototype.render = function render() {
+    var props = this.props;
+    var prefixCls = props.prefixCls;
+    return React.createElement(
+      'table',
+      { className: prefixCls + '-table', cellSpacing: '0', role: 'grid' },
+      React.createElement(DateTHead, props),
+      React.createElement(DateTBody, props)
+    );
+  };
+
+  return DateTable;
+}(React.Component);
+
+export default DateTable;