@seafile/seafile-calendar 0.1.0 → 0.1.2-beta.0

package/lib/calendar/CalendarFooter.js

@@ -0,0 +1,134 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _mapSelf = require('rc-util/lib/Children/mapSelf');
+
+var _mapSelf2 = _interopRequireDefault(_mapSelf);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _TodayButton = require('../calendar/TodayButton');
+
+var _TodayButton2 = _interopRequireDefault(_TodayButton);
+
+var _OkButton = require('../calendar/OkButton');
+
+var _OkButton2 = _interopRequireDefault(_OkButton);
+
+var _TimePickerButton = require('../calendar/TimePickerButton');
+
+var _TimePickerButton2 = _interopRequireDefault(_TimePickerButton);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var CalendarFooter = function (_React$Component) {
+  (0, _inherits3['default'])(CalendarFooter, _React$Component);
+
+  function CalendarFooter() {
+    (0, _classCallCheck3['default'])(this, CalendarFooter);
+    return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments));
+  }
+
+  CalendarFooter.prototype.onSelect = function onSelect(value) {
+    this.props.onSelect(value);
+  };
+
+  CalendarFooter.prototype.getRootDOMNode = function getRootDOMNode() {
+    return _reactDom2['default'].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 = _react2['default'].createElement(_TodayButton2['default'], (0, _extends3['default'])({}, props, { value: value }));
+      }
+      var okBtn = void 0;
+      if (showOk === true || showOk !== false && !!props.timePicker) {
+        okBtn = _react2['default'].createElement(_OkButton2['default'], props);
+      }
+      var timePickerBtn = void 0;
+      if (!!props.timePicker) {
+        timePickerBtn = _react2['default'].createElement(_TimePickerButton2['default'], props);
+      }
+
+      var footerBtn = void 0;
+      if (nowEl || timePickerBtn || okBtn || extraFooter) {
+        footerBtn = _react2['default'].createElement(
+          'span',
+          { className: prefixCls + '-footer-btn' },
+          extraFooter,
+          (0, _mapSelf2['default'])([nowEl, timePickerBtn, okBtn])
+        );
+      }
+      var cls = (0, _classnames2['default'])(prefixCls + '-footer', (_cx = {}, _cx[prefixCls + '-footer-show-ok'] = okBtn, _cx));
+      footerEl = _react2['default'].createElement(
+        'div',
+        { className: cls },
+        footerBtn
+      );
+    }
+    return footerEl;
+  };
+
+  return CalendarFooter;
+}(_react2['default'].Component);
+
+CalendarFooter.propTypes = {
+  prefixCls: _propTypes2['default'].string,
+  showDateInput: _propTypes2['default'].bool,
+  disabledTime: _propTypes2['default'].any,
+  timePicker: _propTypes2['default'].element,
+  selectedValue: _propTypes2['default'].any,
+  showOk: _propTypes2['default'].bool,
+  onSelect: _propTypes2['default'].func,
+  value: _propTypes2['default'].object,
+  renderFooter: _propTypes2['default'].func,
+  defaultValue: _propTypes2['default'].object,
+  mode: _propTypes2['default'].string
+};
+exports['default'] = CalendarFooter;
+module.exports = exports['default'];

package/lib/calendar/CalendarHeader.js

@@ -0,0 +1,290 @@
+'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 _mapSelf = require('rc-util/lib/Children/mapSelf');
+
+var _mapSelf2 = _interopRequireDefault(_mapSelf);
+
+var _MonthPanel = require('../month/MonthPanel');
+
+var _MonthPanel2 = _interopRequireDefault(_MonthPanel);
+
+var _YearPanel = require('../year/YearPanel');
+
+var _YearPanel2 = _interopRequireDefault(_YearPanel);
+
+var _DecadePanel = require('../decade/DecadePanel');
+
+var _DecadePanel2 = _interopRequireDefault(_DecadePanel);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+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) {
+  (0, _inherits3['default'])(CalendarHeader, _React$Component);
+
+  function CalendarHeader(props) {
+    (0, _classCallCheck3['default'])(this, CalendarHeader);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(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 = _react2['default'].createElement(_MonthPanel2['default'], {
+        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 = _react2['default'].createElement(_YearPanel2['default'], {
+        locale: locale,
+        defaultValue: value,
+        rootPrefixCls: prefixCls,
+        onSelect: this.onYearSelect,
+        onDecadePanelShow: this.showDecadePanel,
+        renderFooter: renderFooter
+      });
+    }
+    if (mode === 'decade') {
+      panel = _react2['default'].createElement(_DecadePanel2['default'], {
+        locale: locale,
+        defaultValue: value,
+        rootPrefixCls: prefixCls,
+        onSelect: this.onDecadeSelect,
+        renderFooter: renderFooter
+      });
+    }
+
+    return _react2['default'].createElement(
+      'div',
+      { className: prefixCls + '-header' },
+      _react2['default'].createElement(
+        'div',
+        { style: { position: 'relative' } },
+        showIf(enablePrev && !showTimePicker, _react2['default'].createElement('a', {
+          className: prefixCls + '-prev-year-btn',
+          role: 'button',
+          onClick: this.previousYear,
+          title: locale.previousYear
+        })),
+        showIf(enablePrev && !showTimePicker, _react2['default'].createElement('a', {
+          className: prefixCls + '-prev-month-btn',
+          role: 'button',
+          onClick: this.previousMonth,
+          title: locale.previousMonth
+        })),
+        this.monthYearElement(showTimePicker),
+        showIf(enableNext && !showTimePicker, _react2['default'].createElement('a', {
+          className: prefixCls + '-next-month-btn',
+          onClick: this.nextMonth,
+          title: locale.nextMonth
+        })),
+        showIf(enableNext && !showTimePicker, _react2['default'].createElement('a', {
+          className: prefixCls + '-next-year-btn',
+          onClick: this.nextYear,
+          title: locale.nextYear
+        }))
+      ),
+      panel
+    );
+  };
+
+  return CalendarHeader;
+}(_react2['default'].Component);
+
+CalendarHeader.propTypes = {
+  prefixCls: _propTypes2['default'].string,
+  value: _propTypes2['default'].object,
+  onValueChange: _propTypes2['default'].func,
+  showTimePicker: _propTypes2['default'].bool,
+  onPanelChange: _propTypes2['default'].func,
+  locale: _propTypes2['default'].object,
+  enablePrev: _propTypes2['default'].any,
+  enableNext: _propTypes2['default'].any,
+  disabledMonth: _propTypes2['default'].func,
+  renderFooter: _propTypes2['default'].func,
+  onMonthSelect: _propTypes2['default'].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 = _react2['default'].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 = _react2['default'].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 = _react2['default'].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 _react2['default'].createElement(
+      'span',
+      { className: selectClassName },
+      (0, _mapSelf2['default'])(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');
+  };
+};
+
+exports['default'] = CalendarHeader;
+module.exports = exports['default'];

package/lib/calendar/CalendarRightPanel.js

@@ -0,0 +1,153 @@
+'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 _dayjs = require('dayjs');
+
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var CalendarRightPanel = function (_React$Component) {
+  (0, _inherits3['default'])(CalendarRightPanel, _React$Component);
+
+  function CalendarRightPanel(props) {
+    (0, _classCallCheck3['default'])(this, CalendarRightPanel);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(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);
+    };
+
+    var format = Array.isArray(_this.props.format) ? _this.props.format[0] : _this.props.format;
+    _this.state = {
+      highlightTime: _this.props.value || null,
+      localeFormat: format
+    };
+    _this.timeRef = _react2['default'].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 highlight = this.state.highlightTime;
+    var highlightTime = highlight ? highlight.format().slice(11, 16) : null;
+    var isZhcn = locale && locale.today === '今天';
+    return _react2['default'].createElement(
+      'div',
+      { className: prefixCls + '-right-panel' },
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-right-panel-header', onClick: this.scrollUp },
+        _react2['default'].createElement('span', null)
+      ),
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-right-panel-body', ref: this.timeRef },
+        _react2['default'].createElement(
+          'ul',
+          null,
+          this.times.map(function (time) {
+            var _time$split$map = time.split(':').map(function (n) {
+              return parseInt(n, 10);
+            }),
+                h = _time$split$map[0],
+                m = _time$split$map[1];
+
+            var current = value.hour(h).minute(m).second(0);
+            current = isZhcn ? current.locale('zh-cn') : current.locale('en-gb');
+            return _react2['default'].createElement(
+              'li',
+              {
+                key: time,
+                onClick: _this2.onSelect.bind(_this2, current),
+                className: '' + (highlightTime === time ? prefixCls + '-selected-time' : '')
+              },
+              time
+            );
+          })
+        )
+      ),
+      _react2['default'].createElement(
+        'div',
+        { className: prefixCls + '-right-panel-footer', onClick: this.scrollDown },
+        _react2['default'].createElement('span', null)
+      )
+    );
+  };
+
+  return CalendarRightPanel;
+}(_react2['default'].Component);
+
+CalendarRightPanel.propTypes = {
+  prefixCls: _propTypes2['default'].string,
+  value: _propTypes2['default'].object,
+  onSelect: _propTypes2['default'].func,
+  onClickRightPanelTime: _propTypes2['default'].func,
+  locale: _propTypes2['default'].object,
+  defaultMinutesTime: _propTypes2['default'].string,
+  format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)])
+};
+exports['default'] = CalendarRightPanel;
+module.exports = exports['default'];

package/lib/calendar/OkButton.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = OkButton;
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _react2["default"].createElement(
+    "a",
+    {
+      className: className,
+      role: "button",
+      onClick: okDisabled ? null : onOk
+    },
+    locale.ok
+  );
+}
+module.exports = exports['default'];

package/lib/calendar/TimePickerButton.js

@@ -0,0 +1,41 @@
+'use strict';
+
+exports.__esModule = true;
+exports['default'] = TimePickerButton;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+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 = (0, _classnames3['default'])((_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 _react2['default'].createElement(
+    'a',
+    {
+      className: className,
+      role: 'button',
+      onClick: onClick
+    },
+    showTimePicker ? locale.dateSelect : locale.timeSelect
+  );
+}
+module.exports = exports['default'];

package/lib/calendar/TodayButton.js

@@ -0,0 +1,39 @@
+'use strict';
+
+exports.__esModule = true;
+exports['default'] = TodayButton;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _util = require('../util/');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+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 && !(0, _util.isAllowedDate)((0, _util.getTodayTime)(value), disabledDate);
+  var isDisabled = disabledToday || disabled;
+  var disabledTodayClass = isDisabled ? prefixCls + '-today-btn-disabled' : '';
+  return _react2['default'].createElement(
+    'a',
+    {
+      className: prefixCls + '-today-btn ' + disabledTodayClass,
+      role: 'button',
+      onClick: isDisabled ? null : onToday,
+      title: (0, _util.getTodayTimeStr)(value)
+    },
+    localeNow
+  );
+}
+module.exports = exports['default'];