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

package/es/calendar/CalendarFooter.js

@@ -0,0 +1,93 @@
+import _extends from 'babel-runtime/helpers/extends';
+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 toFragment from 'rc-util/es/Children/mapSelf';
+import cx from 'classnames';
+import TodayButton from '../calendar/TodayButton';
+import OkButton from '../calendar/OkButton';
+import TimePickerButton from '../calendar/TimePickerButton';
+
+var CalendarFooter = function (_React$Component) {
+  _inherits(CalendarFooter, _React$Component);
+
+  function CalendarFooter() {
+    _classCallCheck(this, CalendarFooter);
+
+    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+  }
+
+  CalendarFooter.prototype.onSelect = function onSelect(value) {
+    this.props.onSelect(value);
+  };
+
+  CalendarFooter.prototype.getRootDOMNode = function getRootDOMNode() {
+    return ReactDOM.findDOMNode(this);
+  };
+
+  CalendarFooter.prototype.render = function render() {
+    var props = this.props;
+    var value = props.value,
+        prefixCls = props.prefixCls,
+        showOk = props.showOk,
+        timePicker = props.timePicker,
+        renderFooter = props.renderFooter,
+        mode = props.mode;
+
+    var footerEl = null;
+    var extraFooter = renderFooter && renderFooter(mode);
+    if (props.showToday || timePicker || extraFooter) {
+      var _cx;
+
+      var nowEl = void 0;
+      if (props.showToday) {
+        nowEl = React.createElement(TodayButton, _extends({}, props, { value: value }));
+      }
+      var okBtn = void 0;
+      if (showOk === true || showOk !== false && !!props.timePicker) {
+        okBtn = React.createElement(OkButton, props);
+      }
+      var timePickerBtn = void 0;
+      if (!!props.timePicker) {
+        timePickerBtn = React.createElement(TimePickerButton, props);
+      }
+
+      var footerBtn = void 0;
+      if (nowEl || timePickerBtn || okBtn || extraFooter) {
+        footerBtn = React.createElement(
+          'span',
+          { className: prefixCls + '-footer-btn' },
+          extraFooter,
+          toFragment([nowEl, timePickerBtn, okBtn])
+        );
+      }
+      var cls = cx(prefixCls + '-footer', (_cx = {}, _cx[prefixCls + '-footer-show-ok'] = okBtn, _cx));
+      footerEl = React.createElement(
+        'div',
+        { className: cls },
+        footerBtn
+      );
+    }
+    return footerEl;
+  };
+
+  return CalendarFooter;
+}(React.Component);
+
+CalendarFooter.propTypes = {
+  prefixCls: PropTypes.string,
+  showDateInput: PropTypes.bool,
+  disabledTime: PropTypes.any,
+  timePicker: PropTypes.element,
+  selectedValue: PropTypes.any,
+  showOk: PropTypes.bool,
+  onSelect: PropTypes.func,
+  value: PropTypes.object,
+  renderFooter: PropTypes.func,
+  defaultValue: PropTypes.object,
+  mode: PropTypes.string
+};
+export default CalendarFooter;

package/es/calendar/CalendarHeader.js

@@ -0,0 +1,257 @@
+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 toFragment from 'rc-util/es/Children/mapSelf';
+import MonthPanel from '../month/MonthPanel';
+import YearPanel from '../year/YearPanel';
+import DecadePanel from '../decade/DecadePanel';
+
+function goMonth(direction) {
+  var next = this.props.value.clone();
+  next = next.add(direction, 'months');
+  this.props.onValueChange(next);
+}
+
+function goYear(direction) {
+  var next = this.props.value.clone();
+  next = next.add(direction, 'years');
+  this.props.onValueChange(next);
+}
+
+function showIf(condition, el) {
+  return condition ? el : null;
+}
+
+var CalendarHeader = function (_React$Component) {
+  _inherits(CalendarHeader, _React$Component);
+
+  function CalendarHeader(props) {
+    _classCallCheck(this, CalendarHeader);
+
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+    _initialiseProps.call(_this);
+
+    _this.nextMonth = goMonth.bind(_this, 1);
+    _this.previousMonth = goMonth.bind(_this, -1);
+    _this.nextYear = goYear.bind(_this, 1);
+    _this.previousYear = goYear.bind(_this, -1);
+
+    _this.state = { yearPanelReferer: null };
+    return _this;
+  }
+
+  CalendarHeader.prototype.render = function render() {
+    var _this2 = this;
+
+    var props = this.props;
+    var prefixCls = props.prefixCls,
+        locale = props.locale,
+        mode = props.mode,
+        value = props.value,
+        showTimePicker = props.showTimePicker,
+        enableNext = props.enableNext,
+        enablePrev = props.enablePrev,
+        disabledMonth = props.disabledMonth,
+        renderFooter = props.renderFooter;
+
+
+    var panel = null;
+    if (mode === 'month') {
+      panel = React.createElement(MonthPanel, {
+        locale: locale,
+        value: value,
+        rootPrefixCls: prefixCls,
+        onSelect: this.onMonthSelect,
+        onYearPanelShow: function onYearPanelShow() {
+          return _this2.showYearPanel('month');
+        },
+        disabledDate: disabledMonth,
+        cellRender: props.monthCellRender,
+        contentRender: props.monthCellContentRender,
+        renderFooter: renderFooter,
+        changeYear: this.changeYear
+      });
+    }
+    if (mode === 'year') {
+      panel = React.createElement(YearPanel, {
+        locale: locale,
+        defaultValue: value,
+        rootPrefixCls: prefixCls,
+        onSelect: this.onYearSelect,
+        onDecadePanelShow: this.showDecadePanel,
+        renderFooter: renderFooter
+      });
+    }
+    if (mode === 'decade') {
+      panel = React.createElement(DecadePanel, {
+        locale: locale,
+        defaultValue: value,
+        rootPrefixCls: prefixCls,
+        onSelect: this.onDecadeSelect,
+        renderFooter: renderFooter
+      });
+    }
+
+    return React.createElement(
+      'div',
+      { className: prefixCls + '-header' },
+      React.createElement(
+        'div',
+        { style: { position: 'relative' } },
+        showIf(enablePrev && !showTimePicker, React.createElement('a', {
+          className: prefixCls + '-prev-year-btn',
+          role: 'button',
+          onClick: this.previousYear,
+          title: locale.previousYear
+        })),
+        showIf(enablePrev && !showTimePicker, React.createElement('a', {
+          className: prefixCls + '-prev-month-btn',
+          role: 'button',
+          onClick: this.previousMonth,
+          title: locale.previousMonth
+        })),
+        this.monthYearElement(showTimePicker),
+        showIf(enableNext && !showTimePicker, React.createElement('a', {
+          className: prefixCls + '-next-month-btn',
+          onClick: this.nextMonth,
+          title: locale.nextMonth
+        })),
+        showIf(enableNext && !showTimePicker, React.createElement('a', {
+          className: prefixCls + '-next-year-btn',
+          onClick: this.nextYear,
+          title: locale.nextYear
+        }))
+      ),
+      panel
+    );
+  };
+
+  return CalendarHeader;
+}(React.Component);
+
+CalendarHeader.propTypes = {
+  prefixCls: PropTypes.string,
+  value: PropTypes.object,
+  onValueChange: PropTypes.func,
+  showTimePicker: PropTypes.bool,
+  onPanelChange: PropTypes.func,
+  locale: PropTypes.object,
+  enablePrev: PropTypes.any,
+  enableNext: PropTypes.any,
+  disabledMonth: PropTypes.func,
+  renderFooter: PropTypes.func,
+  onMonthSelect: PropTypes.func
+};
+CalendarHeader.defaultProps = {
+  enableNext: 1,
+  enablePrev: 1,
+  onPanelChange: function onPanelChange() {},
+  onValueChange: function onValueChange() {}
+};
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.onMonthSelect = function (value) {
+    _this3.props.onPanelChange(value, 'date');
+    if (_this3.props.onMonthSelect) {
+      _this3.props.onMonthSelect(value);
+    } else {
+      _this3.props.onValueChange(value);
+    }
+  };
+
+  this.onYearSelect = function (value) {
+    var referer = _this3.state.yearPanelReferer;
+    _this3.setState({ yearPanelReferer: null });
+    _this3.props.onPanelChange(value, referer);
+    _this3.props.onValueChange(value);
+  };
+
+  this.onDecadeSelect = function (value) {
+    _this3.props.onPanelChange(value, 'year');
+    _this3.props.onValueChange(value);
+  };
+
+  this.changeYear = function (direction) {
+    if (direction > 0) {
+      _this3.nextYear();
+    } else {
+      _this3.previousYear();
+    }
+  };
+
+  this.monthYearElement = function (showTimePicker) {
+    var props = _this3.props;
+    var prefixCls = props.prefixCls;
+    var locale = props.locale;
+    var value = props.value;
+    var localeData = value.localeData();
+    var monthBeforeYear = locale.monthBeforeYear;
+    var selectClassName = prefixCls + '-' + (monthBeforeYear ? 'my-select' : 'ym-select');
+    var timeClassName = showTimePicker ? ' ' + prefixCls + '-time-status' : '';
+    var year = React.createElement(
+      'a',
+      {
+        className: prefixCls + '-year-select' + timeClassName,
+        role: 'button',
+        onClick: showTimePicker ? null : function () {
+          return _this3.showYearPanel('date');
+        },
+        title: showTimePicker ? null : locale.yearSelect
+      },
+      value.format(locale.yearFormat)
+    );
+    var month = React.createElement(
+      'a',
+      {
+        className: prefixCls + '-month-select' + timeClassName,
+        role: 'button',
+        onClick: showTimePicker ? null : _this3.showMonthPanel,
+        title: showTimePicker ? null : locale.monthSelect
+      },
+      locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)
+    );
+    var day = void 0;
+    if (showTimePicker) {
+      day = React.createElement(
+        'a',
+        {
+          className: prefixCls + '-day-select' + timeClassName,
+          role: 'button'
+        },
+        value.format(locale.dayFormat)
+      );
+    }
+    var my = [];
+    if (monthBeforeYear) {
+      my = [month, day, year];
+    } else {
+      my = [year, month, day];
+    }
+    return React.createElement(
+      'span',
+      { className: selectClassName },
+      toFragment(my)
+    );
+  };
+
+  this.showMonthPanel = function () {
+    // null means that users' interaction doesn't change value
+    _this3.props.onPanelChange(null, 'month');
+  };
+
+  this.showYearPanel = function (referer) {
+    _this3.setState({ yearPanelReferer: referer });
+    _this3.props.onPanelChange(null, 'year');
+  };
+
+  this.showDecadePanel = function () {
+    _this3.props.onPanelChange(null, 'decade');
+  };
+};
+
+export default CalendarHeader;

package/es/calendar/CalendarRightPanel.js

@@ -0,0 +1,121 @@
+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 dayjs from 'dayjs';
+
+var CalendarRightPanel = function (_React$Component) {
+  _inherits(CalendarRightPanel, _React$Component);
+
+  function CalendarRightPanel(props) {
+    _classCallCheck(this, CalendarRightPanel);
+
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+    _this.onSelect = function (value) {
+      _this.setState({
+        highlightTime: value
+      });
+      _this.props.onSelect(value);
+      _this.props.onClickRightPanelTime();
+    };
+
+    _this.getTimes = function () {
+      var times = [];
+      for (var i = 0; i < 24; i++) {
+        var str = (String(i) + ':00').padStart(5, '0');
+        var str1 = (String(i) + ':30').padStart(5, '0');
+        times.push(str);
+        times.push(str1);
+      }
+      return times;
+    };
+
+    _this.scrollUp = function () {
+      _this.timeRef.current.scrollBy(0, -200);
+    };
+
+    _this.scrollDown = function () {
+      _this.timeRef.current.scrollBy(0, 200);
+    };
+
+    _this.state = {
+      highlightTime: _this.props.value || null
+    };
+    _this.timeRef = React.createRef();
+    _this.times = _this.getTimes();
+    return _this;
+  }
+
+  CalendarRightPanel.prototype.componentDidMount = function componentDidMount() {
+    var defaultMinutesTime = this.props.defaultMinutesTime;
+
+    var showTimeIndex = this.times.findIndex(function (item) {
+      return item >= defaultMinutesTime;
+    });
+    var scrollTimeIndex = showTimeIndex > -1 ? showTimeIndex - 1 : 16;
+    this.timeRef.current.scrollTo(0, 34 * scrollTimeIndex);
+  };
+
+  CalendarRightPanel.prototype.render = function render() {
+    var _this2 = this;
+
+    var _props = this.props,
+        value = _props.value,
+        prefixCls = _props.prefixCls,
+        locale = _props.locale;
+
+    var selectedDate = value.format().slice(0, 10);
+    var highlight = this.state.highlightTime;
+    var highlightTime = highlight ? highlight.format().slice(11, 16) : null;
+    var isZhcn = locale && locale.today === '今天';
+    return React.createElement(
+      'div',
+      { className: prefixCls + '-right-panel' },
+      React.createElement(
+        'div',
+        { className: prefixCls + '-right-panel-header', onClick: this.scrollUp },
+        React.createElement('span', null)
+      ),
+      React.createElement(
+        'div',
+        { className: prefixCls + '-right-panel-body', ref: this.timeRef },
+        React.createElement(
+          'ul',
+          null,
+          this.times.map(function (time) {
+            var current = dayjs(selectedDate + ' ' + time);
+            current = isZhcn ? current.locale('zh-cn') : current.locale('en-gb');
+            return React.createElement(
+              'li',
+              {
+                key: time,
+                onClick: _this2.onSelect.bind(_this2, current),
+                className: '' + (highlightTime === time ? prefixCls + '-selected-time' : '')
+              },
+              time
+            );
+          })
+        )
+      ),
+      React.createElement(
+        'div',
+        { className: prefixCls + '-right-panel-footer', onClick: this.scrollDown },
+        React.createElement('span', null)
+      )
+    );
+  };
+
+  return CalendarRightPanel;
+}(React.Component);
+
+CalendarRightPanel.propTypes = {
+  prefixCls: PropTypes.string,
+  value: PropTypes.object,
+  onSelect: PropTypes.func,
+  onClickRightPanelTime: PropTypes.func,
+  locale: PropTypes.object,
+  defaultMinutesTime: PropTypes.string
+};
+export default CalendarRightPanel;

package/es/calendar/OkButton.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function OkButton(_ref) {
+  var prefixCls = _ref.prefixCls,
+      locale = _ref.locale,
+      okDisabled = _ref.okDisabled,
+      onOk = _ref.onOk;
+
+  var className = prefixCls + "-ok-btn";
+  if (okDisabled) {
+    className += " " + prefixCls + "-ok-btn-disabled";
+  }
+  return React.createElement(
+    "a",
+    {
+      className: className,
+      role: "button",
+      onClick: okDisabled ? null : onOk
+    },
+    locale.ok
+  );
+}

package/es/calendar/TimePickerButton.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+
+export default function TimePickerButton(_ref) {
+  var _classnames;
+
+  var prefixCls = _ref.prefixCls,
+      locale = _ref.locale,
+      showTimePicker = _ref.showTimePicker,
+      onOpenTimePicker = _ref.onOpenTimePicker,
+      onCloseTimePicker = _ref.onCloseTimePicker,
+      timePickerDisabled = _ref.timePickerDisabled;
+
+  var className = classnames((_classnames = {}, _classnames[prefixCls + '-time-picker-btn'] = true, _classnames[prefixCls + '-time-picker-btn-disabled'] = timePickerDisabled, _classnames));
+  var onClick = null;
+  if (!timePickerDisabled) {
+    onClick = showTimePicker ? onCloseTimePicker : onOpenTimePicker;
+  }
+  return React.createElement(
+    'a',
+    {
+      className: className,
+      role: 'button',
+      onClick: onClick
+    },
+    showTimePicker ? locale.dateSelect : locale.timeSelect
+  );
+}

package/es/calendar/TodayButton.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { getTodayTimeStr, getTodayTime, isAllowedDate } from '../util/';
+
+export default function TodayButton(_ref) {
+  var prefixCls = _ref.prefixCls,
+      locale = _ref.locale,
+      value = _ref.value,
+      timePicker = _ref.timePicker,
+      disabled = _ref.disabled,
+      disabledDate = _ref.disabledDate,
+      onToday = _ref.onToday,
+      text = _ref.text;
+
+  var localeNow = (!text && timePicker ? locale.now : text) || locale.today;
+  var disabledToday = disabledDate && !isAllowedDate(getTodayTime(value), disabledDate);
+  var isDisabled = disabledToday || disabled;
+  var disabledTodayClass = isDisabled ? prefixCls + '-today-btn-disabled' : '';
+  return React.createElement(
+    'a',
+    {
+      className: prefixCls + '-today-btn ' + disabledTodayClass,
+      role: 'button',
+      onClick: isDisabled ? null : onToday,
+      title: getTodayTimeStr(value)
+    },
+    localeNow
+  );
+}

package/es/date/DateConstants.js

@@ -0,0 +1,19 @@
+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
+};
+
+export default {
+  DATE_ROW_COLUMN_COUNT: DATE_ROW_COLUMN_COUNT,
+  DAY_NAME_TO_INDEX: DAY_NAME_TO_INDEX
+};