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

React Calendar

'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 _KeyCode = require('rc-util/lib/KeyCode');

var _KeyCode2 = _interopRequireDefault(_KeyCode);

var _reactLifecyclesCompat = require('react-lifecycles-compat');

var _dayjs = require('dayjs');

var _dayjs2 = _interopRequireDefault(_dayjs);

var _DateTable = require('./date/DateTable');

var _DateTable2 = _interopRequireDefault(_DateTable);

var _CalendarHeader = require('./calendar/CalendarHeader');

var _CalendarHeader2 = _interopRequireDefault(_CalendarHeader);

var _CalendarFooter = require('./calendar/CalendarFooter');

var _CalendarFooter2 = _interopRequireDefault(_CalendarFooter);

var _CalendarRightPanel = require('./calendar/CalendarRightPanel');

var _CalendarRightPanel2 = _interopRequireDefault(_CalendarRightPanel);

var _CalendarMixin = require('./mixin/CalendarMixin');

var _CommonMixin = require('./mixin/CommonMixin');

var _DateInput = require('./date/DateInput');

var _DateInput2 = _interopRequireDefault(_DateInput);

var _TimeInput = require('./time/TimeInput');

var _TimeInput2 = _interopRequireDefault(_TimeInput);

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

var _toTime = require('./util/toTime');

var _localeData = require('dayjs/plugin/localeData');

var _localeData2 = _interopRequireDefault(_localeData);

var _utc = require('dayjs/plugin/utc');

var _utc2 = _interopRequireDefault(_utc);

var _weekOfYear = require('dayjs/plugin/weekOfYear');

var _weekOfYear2 = _interopRequireDefault(_weekOfYear);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

_dayjs2['default'].extend(_utc2['default']);
_dayjs2['default'].extend(_localeData2['default']);
_dayjs2['default'].extend(_weekOfYear2['default']);

function noop() {}

var getMomentObjectIfValid = function getMomentObjectIfValid(date) {
  if (_dayjs2['default'].isDayjs(date) && date.isValid()) {
    return date;
  }
  return false;
};

var Calendar = function (_React$Component) {
  (0, _inherits3['default'])(Calendar, _React$Component);

  function Calendar(props) {
    (0, _classCallCheck3['default'])(this, Calendar);

    var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));

    _initialiseProps.call(_this);

    _this.state = {
      mode: _this.props.mode || 'date',
      value: getMomentObjectIfValid(props.value) || getMomentObjectIfValid(props.defaultValue) || (0, _dayjs2['default'])(),
      selectedValue: props.selectedValue || props.defaultSelectedValue,
      currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME
    };
    return _this;
  }

  Calendar.prototype.componentDidMount = function componentDidMount() {
    if (this.props.showDateInput) {
      this.saveFocusElement(_DateInput2['default'].getInstance());
    }
  };

  Calendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
    var value = nextProps.value,
        selectedValue = nextProps.selectedValue;

    var newState = {};

    if ('mode' in nextProps && state.mode !== nextProps.mode) {
      newState = { mode: nextProps.mode };
    }
    if ('value' in nextProps) {
      newState.value = getMomentObjectIfValid(value) || getMomentObjectIfValid(nextProps.defaultValue) || (0, _CalendarMixin.getNowByCurrentStateValue)(state.value);
    }
    if ('selectedValue' in nextProps) {
      newState.selectedValue = selectedValue;
    }

    return newState;
  };

  Calendar.prototype.render = function render() {
    var props = this.props,
        state = this.state;
    var locale = props.locale,
        prefixCls = props.prefixCls,
        disabledDate = props.disabledDate,
        timePicker = props.timePicker,
        onClickRightPanelTime = props.onClickRightPanelTime,
        disabledTime = props.disabledTime,
        clearIcon = props.clearIcon,
        renderFooter = props.renderFooter,
        inputMode = props.inputMode,
        showHourAndMinute = props.showHourAndMinute,
        firstDayOfWeek = props.firstDayOfWeek,
        showWeekNumber = props.showWeekNumber;
    var value = state.value,
        selectedValue = state.selectedValue,
        mode = state.mode,
        currentStatus = state.currentStatus;

    var showTimePicker = mode === 'time';
    var disabledTimeConfig = showTimePicker && disabledTime && timePicker ? (0, _util.getTimeConfig)(selectedValue, disabledTime) : null;

    var timePickerEle = null;

    if (timePicker && showTimePicker) {
      var timePickerProps = (0, _extends3['default'])({
        showHour: true,
        showSecond: true,
        showMinute: true
      }, timePicker.props, disabledTimeConfig, {
        onChange: this.onDateInputChange,
        value: selectedValue,
        disabledTime: disabledTime
      });

      if (timePicker.props.defaultValue !== undefined) {
        timePickerProps.defaultOpenValue = timePicker.props.defaultValue;
      }

      timePickerEle = _react2['default'].cloneElement(timePicker, timePickerProps);
    }

    var baseFormat = Array.isArray(this.getFormat()) ? this.getFormat()[0] : this.getFormat();
    var headerDatePlaceholder = baseFormat.replace(/\s*HH:mm(?::ss)?\s*/, '').trim() || 'YYYY-MM-DD';
    var inputFormat = Array.isArray(this.getFormat()) ? this.getFormat() : [this.getFormat()];
    // For the date input, strip any time tokens from formats so date and time are shown separately
    var stripTime = function stripTime(f) {
      return typeof f === 'string' ? f.replace(/\s*HH:mm(?::ss)?\s*/, '').trim() : f;
    };
    var dateOnlyFormats = Array.isArray(this.getFormat()) ? this.getFormat().map(stripTime) : [stripTime(this.getFormat())];

    var dateInputElement = props.showDateInput ? _react2['default'].createElement(_DateInput2['default'], {
      format: dateOnlyFormats,
      key: 'date-input',
      value: value,
      locale: locale,
      placeholder: headerDatePlaceholder,
      showClear: true,
      disabledTime: disabledTime,
      disabledDate: disabledDate,
      onClear: this.onClear,
      prefixCls: prefixCls,
      selectedValue: selectedValue,
      onChange: this.onDateInputChange,
      onSelect: this.onDateInputSelect,
      clearIcon: clearIcon,
      inputMode: inputMode
    }) : null;

    var timeInputTopElement = _react2['default'].createElement(_TimeInput2['default'], {
      key: 'time-input-top',
      prefixCls: prefixCls,
      value: value,
      selectedValue: selectedValue,
      onChange: this.onTimeInputChange,
      onSelect: this.onTimeInputSelect,
      inputMode: 'numeric'
    });

    var children = [];
    if (props.renderSidebar) {
      children.push(props.renderSidebar());
    }

    var showTimeControls = showHourAndMinute && mode === 'date';

    children.push(_react2['default'].createElement(
      'div',
      { className: prefixCls + '-panel', key: 'panel' },
      _react2['default'].createElement(
        'div',
        { className: prefixCls + '-inputs' },
        _react2['default'].createElement(
          'div',
          { className: prefixCls + '-date-input-col' },
          _react2['default'].createElement(
            'div',
            { className: prefixCls + '-date-input' },
            dateInputElement
          )
        ),
        showTimeControls && _react2['default'].createElement(
          'div',
          { className: prefixCls + '-time-input-col' },
          _react2['default'].createElement(
            'div',
            { className: prefixCls + '-time-input' },
            timeInputTopElement
          )
        )
      ),
      _react2['default'].createElement(
        'div',
        { className: prefixCls + '-date-panel-container' },
        _react2['default'].createElement(
          'div',
          {
            tabIndex: this.props.focusablePanel ? 0 : undefined,
            className: prefixCls + '-date-panel'
          },
          _react2['default'].createElement(_CalendarHeader2['default'], {
            locale: locale,
            mode: mode,
            value: value,
            onValueChange: this.setValue,
            onPanelChange: this.onPanelChange,
            renderFooter: renderFooter,
            showTimePicker: showTimePicker,
            prefixCls: prefixCls,
            showHourAndMinute: showHourAndMinute
          }),
          timePicker && showTimePicker ? _react2['default'].createElement(
            'div',
            { className: prefixCls + '-time-picker' },
            _react2['default'].createElement(
              'div',
              { className: prefixCls + '-time-picker-panel' },
              timePickerEle
            )
          ) : null,
          _react2['default'].createElement(
            'div',
            { className: prefixCls + '-body' },
            _react2['default'].createElement(_DateTable2['default'], {
              locale: locale,
              value: value,
              selectedValue: selectedValue,
              prefixCls: prefixCls,
              dateRender: props.dateRender,
              onSelect: this.onDateTableSelect,
              disabledDate: disabledDate,
              showWeekNumber: showWeekNumber,
              firstDayOfWeek: firstDayOfWeek,
              currentStatus: currentStatus
            })
          )
        ),
        showTimeControls && _react2['default'].createElement(_CalendarRightPanel2['default'], {
          prefixCls: prefixCls,
          value: value,
          selectedValue: selectedValue,
          locale: locale,
          onSelect: this.onDateTableSelect,
          onClickRightPanelTime: onClickRightPanelTime,
          defaultMinutesTime: this.props.defaultMinutesTime,
          format: inputFormat
        })
      ),
      _react2['default'].createElement(_CalendarFooter2['default'], {
        showOk: props.showOk,
        mode: mode,
        renderFooter: props.renderFooter,
        locale: locale,
        prefixCls: prefixCls,
        showToday: props.showToday,
        disabledTime: disabledTime,
        showTimePicker: showTimePicker,
        showDateInput: props.showDateInput,
        timePicker: timePicker,
        selectedValue: selectedValue,
        value: value,
        disabledDate: disabledDate,
        okDisabled: props.showOk !== false && (!selectedValue || !this.isAllowedDate(selectedValue)),
        onOk: this.onOk,
        onSelect: this.onSelect,
        onToday: this.onToday,
        onOpenTimePicker: this.openTimePicker,
        onCloseTimePicker: this.closeTimePicker
      })
    ));

    return this.renderRoot({
      children: children,
      className: ((props.showWeekNumber ? prefixCls + '-week-number' : '') + ' ' + (showHourAndMinute ? prefixCls + '-with-time-panel' : '')).trim()
    });
  };

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

Calendar.propTypes = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinPropTypes, _CommonMixin.propType, {
  prefixCls: _propTypes2['default'].string,
  className: _propTypes2['default'].string,
  style: _propTypes2['default'].object,
  defaultValue: _propTypes2['default'].object,
  value: _propTypes2['default'].object,
  selectedValue: _propTypes2['default'].object,
  defaultSelectedValue: _propTypes2['default'].object,
  mode: _propTypes2['default'].oneOf(['time', 'date', 'month', 'year', 'decade']),
  locale: _propTypes2['default'].object,
  showDateInput: _propTypes2['default'].bool,
  showWeekNumber: _propTypes2['default'].bool,
  showToday: _propTypes2['default'].bool,
  showOk: _propTypes2['default'].bool,
  showHourAndMinute: _propTypes2['default'].bool,
  defaultMinutesTime: _propTypes2['default'].string,
  onSelect: _propTypes2['default'].func,
  onOk: _propTypes2['default'].func,
  onKeyDown: _propTypes2['default'].func,
  timePicker: _propTypes2['default'].element,
  dateInputPlaceholder: _propTypes2['default'].any,
  onClear: _propTypes2['default'].func,
  onChange: _propTypes2['default'].func,
  onPanelChange: _propTypes2['default'].func,
  disabledDate: _propTypes2['default'].func,
  disabledTime: _propTypes2['default'].any,
  dateRender: _propTypes2['default'].func,
  renderFooter: _propTypes2['default'].func,
  renderSidebar: _propTypes2['default'].func,
  clearIcon: _propTypes2['default'].node,
  focusablePanel: _propTypes2['default'].bool,
  inputMode: _propTypes2['default'].string,
  onBlur: _propTypes2['default'].func,
  onClickRightPanelTime: _propTypes2['default'].func,
  firstDayOfWeek: _propTypes2['default'].string
});
Calendar.defaultProps = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinDefaultProps, _CommonMixin.defaultProp, {
  showToday: true,
  showDateInput: true,
  showHourAndMinute: false,
  timePicker: null,
  onOk: noop,
  onPanelChange: noop,
  onClickRightPanelTime: noop,
  focusablePanel: true,
  firstDayOfWeek: 'Sunday'
});

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.onPanelChange = function (value, mode) {
    var props = _this2.props,
        state = _this2.state;

    if (!('mode' in props)) {
      _this2.setState({ mode: mode });
    }
    props.onPanelChange(value || state.value, mode);
  };

  this.onKeyDown = function (event) {
    if (event.target.nodeName.toLowerCase() === 'input') {
      return undefined;
    }
    var keyCode = event.keyCode;
    var disabledDate = _this2.props.disabledDate;
    var value = _this2.state.value;

    switch (keyCode) {
      case _KeyCode2['default'].ENTER:
        if (!disabledDate || !disabledDate(value)) {
          _this2.onSelect(value, {
            source: 'keyboard'
          });
        }
        event.preventDefault();
        return 1;
      default:
        event.preventDefault();
        event.stopPropagation();
        _this2.props.onKeyDown(event);
        return 1;
    }
  };

  this.onClear = function () {
    _this2.onSelect(null);
    _this2.props.onClear();
    _this2.setState({ currentStatus: _util.CALENDAR_STATUS.CURRENT_TIME });
  };

  this.onOk = function () {
    var selectedValue = _this2.state.selectedValue;

    if (_this2.isAllowedDate(selectedValue)) {
      _this2.props.onOk(selectedValue);
    }
  };

  this.onDateInputChange = function (value) {
    var now = (0, _dayjs2['default'])();
    if (value && value.hour() === 0 && value.minute() === 0 && value.second() === 0) {
      value = value.hour(now.hour()).minute(now.minute()).second(now.second());
    }
    _this2.onSelect(value, {
      source: 'dateInput'
    });
  };

  this.onDateInputSelect = function (value) {
    var now = (0, _dayjs2['default'])();
    if (value && value.hour() === 0 && value.minute() === 0 && value.second() === 0) {
      value = value.hour(now.hour()).minute(now.minute()).second(now.second());
    }
    _this2.onSelect(value, {
      source: 'dateInputSelect'
    });
  };

  this.onDateTableSelect = function (value) {
    _this2.setState({ currentStatus: _util.CALENDAR_STATUS.SPECIFIC_TIME });
    var now = (0, _dayjs2['default'])();
    if (value && value.hour() === 0 && value.minute() === 0 && value.second() === 0) {
      value = value.hour(now.hour()).minute(now.minute()).second(now.second());
    }
    _this2.onSelect(value);
  };

  this.onToday = function () {
    var value = _this2.state.value;

    var now = (0, _util.getTodayTime)(value);
    _this2.onSelect(now, {
      source: 'todayButton'
    });
  };

  this.onBlur = function (event) {
    setTimeout(function () {
      var dateInput = _DateInput2['default'].getInstance();
      var timeInput = _TimeInput2['default'].getInstance && _TimeInput2['default'].getInstance();
      var rootInstance = _this2.rootInstance;

      if (!rootInstance || rootInstance.contains(document.activeElement) || dateInput && dateInput.contains(document.activeElement) || timeInput && timeInput.contains && timeInput.contains(document.activeElement)) {
        // focused element is still part of Calendar
        return;
      }

      if (_this2.props.onBlur) {
        _this2.props.onBlur(event);
      }
    }, 0);
  };

  this.onTimeInputChange = function (value) {
    _this2.onSelect(value, { source: 'timeInputChange' });
  };

  this.onTimeInputSelect = function (value) {
    _this2.onSelect(value, { source: 'timeInputSelect' });
  };

  this.getRootDOMNode = function () {
    return _reactDom2['default'].findDOMNode(_this2);
  };

  this.openTimePicker = function () {
    _this2.onPanelChange(null, 'time');
  };

  this.closeTimePicker = function () {
    _this2.onPanelChange(null, 'date');
  };

  this.goTime = function (direction, unit) {
    _this2.setValue((0, _toTime.goTime)(_this2.state.value, direction, unit));
  };
};

(0, _reactLifecyclesCompat.polyfill)(Calendar);

exports['default'] = (0, _CalendarMixin.calendarMixinWrapper)((0, _CommonMixin.commonMixinWrapper)(Calendar));
module.exports = exports['default'];