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

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.centerScroll = function (container, index) {
      if (!container || index < 0) return;
      var firstItem = container.querySelector('li');
      var itemHeight = firstItem && firstItem.offsetHeight || 32;
      var containerHeight = container.clientHeight || 0;
      var maxScroll = Math.max(0, container.scrollHeight - containerHeight);
      var target = index * itemHeight - (containerHeight / 2 - itemHeight / 2);
      if (target < 0) target = 0;
      if (target > maxScroll) target = maxScroll;
      container.scrollTop = target;
    };

    _this.onSelectMinute = function (minute) {
      var base = _this.props.selectedValue || _this.state.highlightTime || _this.props.value || (0, _dayjs2['default'])();
      var selectedHour = _this.getSelectedHour();
      var h = selectedHour !== null ? parseInt(selectedHour, 10) : (0, _dayjs2['default'])().hour();
      var m = parseInt(minute, 10);
      var current = base.clone().hour(h).minute(m);
      _this.skipScrollUpdates = 2;
      _this.setState({ highlightTime: current });
      _this.props.onSelect(current);
      if (_this.props.onClickRightPanelTime) {
        _this.props.onClickRightPanelTime();
      }
    };

    _this.onSelectHour = function (hour) {
      var base = _this.props.selectedValue || _this.state.highlightTime || (0, _dayjs2['default'])();
      var h = parseInt(hour, 10);
      var selectedMinute = _this.getSelectedMinute();
      var m = selectedMinute !== null ? parseInt(selectedMinute, 10) : (0, _dayjs2['default'])().minute();
      var current = base.clone().hour(h).minute(m);
      _this.skipScrollUpdates = 2;
      _this.setState({ highlightTime: current });
      _this.props.onSelect(current);
    };

    _this.getHours = function () {
      return Array.from({ length: 24 }, function (_, i) {
        return String(i).padStart(2, '0');
      });
    };

    _this.getMinutes = function () {
      return Array.from({ length: 60 }, function (_, i) {
        return String(i).padStart(2, '0');
      });
    };

    _this.getSelectedHour = function () {
      var highlightTime = _this.state.highlightTime;
      var selectedValue = _this.props.selectedValue;

      var v = highlightTime || selectedValue || null;
      return v ? v.format('HH') : null;
    };

    _this.getSelectedMinute = function () {
      var highlightTime = _this.state.highlightTime;
      var selectedValue = _this.props.selectedValue;

      var v = highlightTime || selectedValue || null;
      return v ? v.format('mm') : null;
    };

    var format = Array.isArray(_this.props.format) ? _this.props.format[0] : _this.props.format;
    _this.state = {
      highlightTime: _this.props.selectedValue || null,
      localeFormat: format
    };

    _this.hoursRef = _react2['default'].createRef();
    _this.minutesRef = _react2['default'].createRef();
    _this.hours = _this.getHours();
    _this.minutes = _this.getMinutes();

    _this.skipScrollUpdates = 0;
    return _this;
  }

  CalendarRightPanel.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.selectedValue) {
      if (!prevState.highlightTime || !prevState.highlightTime.isSame(nextProps.selectedValue)) {
        return { highlightTime: nextProps.selectedValue };
      }
    }
    return null;
  };

  CalendarRightPanel.prototype.componentDidMount = function componentDidMount() {
    var _this2 = this;

    var _props = this.props,
        defaultMinutesTime = _props.defaultMinutesTime,
        selectedValue = _props.selectedValue;

    var baseTime = defaultMinutesTime || (selectedValue ? selectedValue.format('HH:mm') : (0, _dayjs2['default'])().format('HH:mm'));
    var base = baseTime.split(':');
    var hIdx = this.hours.findIndex(function (h) {
      return h === base[0];
    });
    var mIdx = this.minutes.findIndex(function (m) {
      return m === base[1];
    });
    var hourIndex = hIdx > -1 ? hIdx : 0;
    var minuteIndex = mIdx > -1 ? mIdx : 0;

    if (typeof window !== 'undefined' && window.requestAnimationFrame) {
      window.requestAnimationFrame(function () {
        _this2.centerScroll(_this2.hoursRef.current, hourIndex);
        _this2.centerScroll(_this2.minutesRef.current, minuteIndex);
      });
    } else {
      this.centerScroll(this.hoursRef.current, hourIndex);
      this.centerScroll(this.minutesRef.current, minuteIndex);
    }
  };

  CalendarRightPanel.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
    var _this3 = this;

    var prevV = prevState.highlightTime || prevProps.selectedValue || (0, _dayjs2['default'])();
    var currV = this.state.highlightTime || this.props.selectedValue || (0, _dayjs2['default'])();

    var prevH = prevV ? prevV.format('HH') : '00';
    var prevM = prevV ? prevV.format('mm') : '00';
    var currH = currV ? currV.format('HH') : '00';
    var currM = currV ? currV.format('mm') : '00';

    if (this.skipScrollUpdates > 0) {
      this.skipScrollUpdates -= 1;
      return;
    }

    var hChanged = prevH !== currH;
    var mChanged = prevM !== currM;
    if (hChanged || mChanged) {
      var scrollHours = function scrollHours() {
        if (hChanged) {
          var hIdx = _this3.hours.findIndex(function (h) {
            return h === currH;
          });
          var hourIndex = hIdx > -1 ? hIdx : 0;
          _this3.centerScroll(_this3.hoursRef.current, hourIndex);
        }
        if (mChanged) {
          var mIdx = _this3.minutes.findIndex(function (m) {
            return m === currM;
          });
          var minuteIndex = mIdx > -1 ? mIdx : 0;
          _this3.centerScroll(_this3.minutesRef.current, minuteIndex);
        }
      };
      if (typeof window !== 'undefined' && window.requestAnimationFrame) {
        window.requestAnimationFrame(scrollHours);
      } else {
        scrollHours();
      }
    }
  };

  CalendarRightPanel.prototype.render = function render() {
    var _this4 = this;

    var prefixCls = this.props.prefixCls;

    var selectedHour = this.getSelectedHour();
    var selectedMinute = this.getSelectedMinute();
    var currentHour = (0, _dayjs2['default'])().format('HH');
    var currentMinute = (0, _dayjs2['default'])().format('mm');
    var displayHour = selectedHour || currentHour;
    var displayMinute = selectedMinute || currentMinute;

    return _react2['default'].createElement(
      'div',
      { className: prefixCls + '-right-panel' },
      _react2['default'].createElement(
        'div',
        { className: prefixCls + '-right-panel-header ' + prefixCls + '-header' },
        displayHour,
        ':',
        displayMinute
      ),
      _react2['default'].createElement(
        'div',
        { className: prefixCls + '-right-panel-body' },
        _react2['default'].createElement(
          'div',
          { className: prefixCls + '-right-panel-col', ref: this.hoursRef },
          _react2['default'].createElement(
            'ul',
            null,
            this.hours.map(function (h) {
              var isSelected = selectedHour && h === selectedHour;
              var isCurrent = !selectedHour && h === currentHour;
              var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
              return _react2['default'].createElement(
                'li',
                {
                  key: h,
                  onClick: function onClick() {
                    return _this4.onSelectHour(h);
                  },
                  className: prefixCls + '-right-panel-item',
                  title: h
                },
                _react2['default'].createElement(
                  'span',
                  { className: className },
                  h
                )
              );
            })
          )
        ),
        _react2['default'].createElement(
          'div',
          { className: prefixCls + '-right-panel-col', ref: this.minutesRef },
          _react2['default'].createElement(
            'ul',
            null,
            this.minutes.map(function (m) {
              var isSelected = selectedMinute && m === selectedMinute;
              var isCurrent = !selectedMinute && m === currentMinute;
              var className = prefixCls + '-right-panel-item-text ' + (isSelected ? prefixCls + '-right-panel-item-selected' : '') + ' ' + (isCurrent ? prefixCls + '-right-panel-item-current' : '');
              return _react2['default'].createElement(
                'li',
                {
                  key: m,
                  onClick: function onClick() {
                    return _this4.onSelectMinute(m);
                  },
                  className: prefixCls + '-right-panel-item',
                  title: m
                },
                _react2['default'].createElement(
                  'span',
                  { className: className },
                  m
                )
              );
            })
          )
        )
      )
    );
  };

  return CalendarRightPanel;
}(_react2['default'].Component);

CalendarRightPanel.propTypes = {
  prefixCls: _propTypes2['default'].string,
  value: _propTypes2['default'].object,
  selectedValue: _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'];