choerodon-ui/es/calendar/Header.js

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

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import React, { Component } from 'react';
import { Size } from '../_util/enum';
import Select from '../select';
import { Button, Group } from '../radio';
import ConfigContext from '../config-provider/ConfigContext';
var Option = Select.Option;

var Header = /*#__PURE__*/function (_Component) {
  _inherits(Header, _Component);

  var _super = _createSuper(Header);

  function Header() {
    var _this;

    _classCallCheck(this, Header);

    _this = _super.apply(this, arguments);

    _this.onYearChange = function (year) {
      var _this$props = _this.props,
          value = _this$props.value,
          validRange = _this$props.validRange;
      var newValue = value.clone();
      newValue.year(parseInt(year, 10)); // switch the month so that it remains within range when year changes

      if (validRange) {
        var _validRange = _slicedToArray(validRange, 2),
            start = _validRange[0],
            end = _validRange[1];

        var newYear = newValue.get('year');
        var newMonth = newValue.get('month');

        if (newYear === end.get('year') && newMonth > end.get('month')) {
          newValue.month(end.get('month'));
        }

        if (newYear === start.get('year') && newMonth < start.get('month')) {
          newValue.month(start.get('month'));
        }
      }

      var onValueChange = _this.props.onValueChange;

      if (onValueChange) {
        onValueChange(newValue);
      }
    };

    _this.onMonthChange = function (month) {
      var _this$props2 = _this.props,
          onValueChange = _this$props2.onValueChange,
          value = _this$props2.value;
      var newValue = value.clone();
      newValue.month(parseInt(month, 10));

      if (onValueChange) {
        onValueChange(newValue);
      }
    };

    _this.onTypeChange = function (e) {
      var onTypeChange = _this.props.onTypeChange;

      if (onTypeChange) {
        onTypeChange(e.target.value);
      }
    };

    _this.getCalenderHeaderNode = function (node) {
      _this.calenderHeaderNode = node;
    };

    return _this;
  }

  _createClass(Header, [{
    key: "getYearSelectElement",
    value: function getYearSelectElement(year) {
      var _this2 = this;

      var _this$props3 = this.props,
          yearSelectOffset = _this$props3.yearSelectOffset,
          yearSelectTotal = _this$props3.yearSelectTotal,
          locale = _this$props3.locale,
          prefixCls = _this$props3.prefixCls,
          selectProps = _this$props3.selectProps,
          fullscreen = _this$props3.fullscreen,
          validRange = _this$props3.validRange;
      var start = year - yearSelectOffset;
      var end = start + yearSelectTotal;

      if (validRange) {
        start = validRange[0].get('year');
        end = validRange[1].get('year') + 1;
      }

      var suffix = locale.year === '年' ? '年' : '';
      var options = [];

      for (var index = start; index < end; index++) {
        options.push( /*#__PURE__*/React.createElement(Option, {
          key: "".concat(index)
        }, index + suffix));
      }

      return /*#__PURE__*/React.createElement(Select, _extends({}, selectProps, {
        size: fullscreen ? Size["default"] : Size.small,
        dropdownMatchSelectWidth: false,
        className: "".concat(prefixCls, "-year-select"),
        onChange: this.onYearChange,
        value: String(year),
        getPopupContainer: function getPopupContainer() {
          return _this2.calenderHeaderNode;
        }
      }), options);
    }
  }, {
    key: "getMonthsLocale",
    value: function getMonthsLocale(value) {
      var current = value.clone();
      var localeData = value.localeData();
      var months = [];

      for (var i = 0; i < 12; i++) {
        current.month(i);
        months.push(localeData.monthsShort(current));
      }

      return months;
    }
  }, {
    key: "getMonthSelectElement",
    value: function getMonthSelectElement(month, months) {
      var _this3 = this;

      var props = this.props;
      var prefixCls = props.prefixCls,
          selectProps = props.selectProps,
          fullscreen = props.fullscreen,
          validRange = props.validRange,
          value = props.value;
      var options = [];
      var start = 0;
      var end = 12;

      if (validRange) {
        var _validRange2 = _slicedToArray(validRange, 2),
            rangeStart = _validRange2[0],
            rangeEnd = _validRange2[1];

        var currentYear = value.get('year');

        if (rangeEnd.get('year') === currentYear) {
          end = rangeEnd.get('month') + 1;
        } else {
          start = rangeStart.get('month');
        }
      }

      for (var index = start; index < end; index++) {
        options.push( /*#__PURE__*/React.createElement(Option, {
          key: "".concat(index)
        }, months[index]));
      }

      return /*#__PURE__*/React.createElement(Select, _extends({}, selectProps, {
        size: fullscreen ? Size["default"] : Size.small,
        dropdownMatchSelectWidth: false,
        className: "".concat(prefixCls, "-month-select"),
        value: String(month),
        onChange: this.onMonthChange,
        getPopupContainer: function getPopupContainer() {
          return _this3.calenderHeaderNode;
        }
      }), options);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          type = _this$props4.type,
          value = _this$props4.value,
          prefixCls = _this$props4.prefixCls,
          radioProps = _this$props4.radioProps,
          locale = _this$props4.locale,
          fullscreen = _this$props4.fullscreen;
      var yearSelect = this.getYearSelectElement(value.year());
      var monthSelect = type === 'date' ? this.getMonthSelectElement(value.month(), this.getMonthsLocale(value)) : null;
      var typeSwitch = /*#__PURE__*/React.createElement(Group, _extends({}, radioProps, {
        onChange: this.onTypeChange,
        value: type,
        size: fullscreen ? Size["default"] : Size.small
      }), /*#__PURE__*/React.createElement(Button, _extends({}, radioProps, {
        value: "date"
      }), locale.month), /*#__PURE__*/React.createElement(Button, _extends({}, radioProps, {
        value: "month"
      }), locale.year));
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-header"),
        ref: this.getCalenderHeaderNode
      }, yearSelect, monthSelect, typeSwitch);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return ConfigContext;
    }
  }]);

  return Header;
}(Component);

export { Header as default };
Header.displayName = 'Header';
Header.defaultProps = {
  yearSelectOffset: 10,
  yearSelectTotal: 20
};
//# sourceMappingURL=Header.js.map