choerodon-ui/lib/rc-components/calendar/Calendar.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _createReactClass = _interopRequireDefault(require("create-react-class"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode"));

var _DateTable = _interopRequireDefault(require("./date/DateTable"));

var _CalendarHeader = _interopRequireDefault(require("./calendar/CalendarHeader"));

var _CalendarFooter = _interopRequireDefault(require("./calendar/CalendarFooter"));

var _CalendarMixin = _interopRequireDefault(require("./mixin/CalendarMixin"));

var _CommonMixin = _interopRequireDefault(require("./mixin/CommonMixin"));

var _DateInput = _interopRequireDefault(require("./date/DateInput"));

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

function goStartMonth() {
  var next = this.state.value.clone();
  next.startOf('month');
  this.setValue(next);
}

function goEndMonth() {
  var next = this.state.value.clone();
  next.endOf('month');
  this.setValue(next);
}

function goTime(direction, unit) {
  var next = this.state.value.clone();
  next.add(direction, unit);
  this.setValue(next);
}

function goMonth(direction) {
  return goTime.call(this, direction, 'months');
}

function goYear(direction) {
  return goTime.call(this, direction, 'years');
}

function goWeek(direction) {
  return goTime.call(this, direction, 'weeks');
}

function goDay(direction) {
  return goTime.call(this, direction, 'days');
}

var Calendar = (0, _createReactClass["default"])({
  displayName: "Calendar",
  mixins: [_CommonMixin["default"], _CalendarMixin["default"]],
  getDefaultProps: function getDefaultProps() {
    return {
      showToday: true,
      showDateInput: true,
      timePicker: null,
      onOk: _noop["default"],
      onPanelChange: _noop["default"]
    };
  },
  getInitialState: function getInitialState() {
    return {
      mode: this.props.mode || 'date'
    };
  },
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    if ('mode' in nextProps && this.state.mode !== nextProps.mode) {
      this.setState({
        mode: nextProps.mode
      });
    }
  },
  onKeyDown: function onKeyDown(event) {
    if (event.target.nodeName.toLowerCase() === 'input') {
      return undefined;
    }

    var keyCode = event.keyCode; // mac

    var ctrlKey = event.ctrlKey || event.metaKey;
    var disabledDate = this.props.disabledDate;
    var value = this.state.value;

    switch (keyCode) {
      case _KeyCode["default"].DOWN:
        goWeek.call(this, 1);
        event.preventDefault();
        return 1;

      case _KeyCode["default"].UP:
        goWeek.call(this, -1);
        event.preventDefault();
        return 1;

      case _KeyCode["default"].LEFT:
        if (ctrlKey) {
          goYear.call(this, -1);
        } else {
          goDay.call(this, -1);
        }

        event.preventDefault();
        return 1;

      case _KeyCode["default"].RIGHT:
        if (ctrlKey) {
          goYear.call(this, 1);
        } else {
          goDay.call(this, 1);
        }

        event.preventDefault();
        return 1;

      case _KeyCode["default"].HOME:
        goStartMonth.call(this);
        event.preventDefault();
        return 1;

      case _KeyCode["default"].END:
        goEndMonth.call(this);
        event.preventDefault();
        return 1;

      case _KeyCode["default"].PAGE_DOWN:
        goMonth.call(this, 1);
        event.preventDefault();
        return 1;

      case _KeyCode["default"].PAGE_UP:
        goMonth.call(this, -1);
        event.preventDefault();
        return 1;

      case _KeyCode["default"].ENTER:
        if (!disabledDate || !disabledDate(value)) {
          this.onSelect(value, {
            source: 'keyboard'
          });
        }

        event.preventDefault();
        return 1;

      default:
        this.props.onKeyDown(event);
        return 1;
    }
  },
  onClear: function onClear() {
    this.onSelect(null);
    this.props.onClear();
  },
  onOk: function onOk() {
    var selectedValue = this.state.selectedValue;

    if (this.isAllowedDate(selectedValue)) {
      this.props.onOk(selectedValue);
    }
  },
  onDateInputChange: function onDateInputChange(value) {
    this.onSelect(value, {
      source: 'dateInput'
    });
  },
  onDateTableSelect: function onDateTableSelect(value) {
    var timePicker = this.props.timePicker;
    var selectedValue = this.state.selectedValue;

    if (!selectedValue && timePicker) {
      var timePickerDefaultValue = timePicker.props.defaultValue;

      if (timePickerDefaultValue) {
        (0, _util.syncTime)(timePickerDefaultValue, value);
      }
    }

    this.onSelect(value);
  },
  onToday: function onToday() {
    var value = this.state.value;
    var now = (0, _util.getTodayTime)(value);
    this.onSelect(now, {
      source: 'todayButton'
    });
  },
  onPanelChange: function onPanelChange(value, mode) {
    var props = this.props,
        state = this.state;

    if (!('mode' in props)) {
      this.setState({
        mode: mode
      });
    }

    props.onPanelChange(value || state.value, mode);
  },
  getRootDOMNode: function getRootDOMNode() {
    return _reactDom["default"].findDOMNode(this);
  },
  openTimePicker: function openTimePicker() {
    this.onPanelChange(null, 'time');
  },
  closeTimePicker: function closeTimePicker() {
    this.onPanelChange(null, 'date');
  },
  render: function render() {
    var props = this.props,
        state = this.state;
    var locale = props.locale,
        prefixCls = props.prefixCls,
        disabledDate = props.disabledDate,
        dateInputPlaceholder = props.dateInputPlaceholder,
        timePicker = props.timePicker,
        disabledTime = props.disabledTime;
    var value = state.value,
        selectedValue = state.selectedValue,
        mode = state.mode;
    var showTimePicker = mode === 'time';
    var disabledTimeConfig = showTimePicker && disabledTime && timePicker ? (0, _util.getTimeConfig)(selectedValue, disabledTime) : null;
    var timePickerEle = null;

    if (timePicker && showTimePicker) {
      var timePickerProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["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 = /*#__PURE__*/(0, _react.cloneElement)(timePicker, timePickerProps);
    }

    var dateInputElement = props.showDateInput ? /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
      format: this.getFormat(),
      key: "date-input",
      value: value,
      locale: locale,
      placeholder: dateInputPlaceholder,
      showClear: true,
      disabledTime: disabledTime,
      disabledDate: disabledDate,
      onClear: this.onClear,
      prefixCls: prefixCls,
      selectedValue: selectedValue,
      onChange: this.onDateInputChange
    }) : null;
    var children = [props.renderSidebar(), /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-panel"),
      key: "panel"
    }, dateInputElement, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-date-panel")
    }, /*#__PURE__*/_react["default"].createElement(_CalendarHeader["default"], {
      locale: locale,
      mode: mode,
      value: value,
      onValueChange: this.setValue,
      onPanelChange: this.onPanelChange,
      showTimePicker: showTimePicker,
      prefixCls: prefixCls
    }), timePicker && showTimePicker ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-time-picker")
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-time-picker-panel")
    }, timePickerEle)) : null, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-body")
    }, /*#__PURE__*/_react["default"].createElement(_DateTable["default"], {
      locale: locale,
      value: value,
      selectedValue: selectedValue,
      prefixCls: prefixCls,
      dateRender: props.dateRender,
      onSelect: this.onDateTableSelect,
      disabledDate: disabledDate,
      showWeekNumber: props.showWeekNumber
    })), /*#__PURE__*/_react["default"].createElement(_CalendarFooter["default"], {
      showOk: props.showOk,
      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: !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 ? "".concat(prefixCls, "-week-number") : ''
    });
  }
});
var _default = Calendar;
exports["default"] = _default;
//# sourceMappingURL=Calendar.js.map