@seafile/seafile-calendar/lib/calendar/CalendarRightPanel.js

React Calendar

'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);

var _util = require('../util');

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 selectedDate = value.format().slice(0, String(value.format()).indexOf('T'));
    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 parts = (0, _util.tokenizeFormattedDate)(selectedDate, _this2.state.localeFormat);
            var current = (0, _dayjs2['default'])(selectedDate + ' ' + time).year(parts[0]).month(parts[1] - 1).date(parts[2]); // eslint-disable-line max-len
            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'];