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

React Calendar

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';
import { tokenizeFormattedDate } from '../util';

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

    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 = 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, 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 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 parts = tokenizeFormattedDate(selectedDate, _this2.state.localeFormat);
            var current = dayjs(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 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,
  format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
};
export default CalendarRightPanel;