choerodon-ui/pro/lib/date-picker/MonthsView.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

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

var _classnames = _interopRequireDefault(require("classnames"));

var _icon = _interopRequireDefault(require("../icon"));

var _DaysView2 = _interopRequireWildcard(require("./DaysView"));

var _enum = require("./enum");

var _enum2 = require("../data-set/enum");

var _EventManager = require("../_util/EventManager");

var MonthsView = /*#__PURE__*/function (_DaysView) {
  (0, _inherits2["default"])(MonthsView, _DaysView);

  var _super = (0, _createSuper2["default"])(MonthsView);

  function MonthsView() {
    (0, _classCallCheck2["default"])(this, MonthsView);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(MonthsView, [{
    key: "getViewClassName",
    value: function getViewClassName() {
      var prefixCls = this.prefixCls;
      return "".concat(prefixCls, "-month");
    }
  }, {
    key: "handleKeyDownHome",
    value: function handleKeyDownHome(e) {
      (0, _EventManager.stopEvent)(e);
      this.changeSelectedDate(this.getCloneDate().startOf('y'));
    }
  }, {
    key: "handleKeyDownEnd",
    value: function handleKeyDownEnd(e) {
      (0, _EventManager.stopEvent)(e);
      this.changeSelectedDate(this.getCloneDate().endOf('y'));
    }
  }, {
    key: "handleKeyDownLeft",
    value: function handleKeyDownLeft(e) {
      (0, _EventManager.stopEvent)(e);

      if (e.altKey) {
        this.changeViewMode(_enum.ViewMode.year);
      } else {
        this.changeSelectedDate(this.getCloneDate().subtract(1, 'M'));
      }
    }
  }, {
    key: "handleKeyDownRight",
    value: function handleKeyDownRight(e) {
      (0, _EventManager.stopEvent)(e);

      if (e.altKey) {
        var mode = this.props.mode;

        if (mode !== _enum.ViewMode.month) {
          this.changeViewMode(mode);
        }
      } else {
        this.changeSelectedDate(this.getCloneDate().add(1, 'M'));
      }
    }
  }, {
    key: "handleKeyDownUp",
    value: function handleKeyDownUp(e) {
      (0, _EventManager.stopEvent)(e);
      this.changeSelectedDate(this.getCloneDate().subtract(3, 'M'));
    }
  }, {
    key: "handleKeyDownDown",
    value: function handleKeyDownDown(e) {
      (0, _EventManager.stopEvent)(e);
      this.changeSelectedDate(this.getCloneDate().add(3, 'M'));
    }
  }, {
    key: "handleKeyDownPageUp",
    value: function handleKeyDownPageUp(e) {
      (0, _EventManager.stopEvent)(e);
      this.changeSelectedDate(this.getCloneDate().subtract(e.altKey ? 10 : 1, 'y'));
    }
  }, {
    key: "handleKeyDownPageDown",
    value: function handleKeyDownPageDown(e) {
      (0, _EventManager.stopEvent)(e);
      this.changeSelectedDate(this.getCloneDate().add(e.altKey ? 10 : 1, 'y'));
    }
  }, {
    key: "renderHeader",
    value: function renderHeader() {
      var prefixCls = this.prefixCls,
          date = this.props.date;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-header")
      }, /*#__PURE__*/_react["default"].createElement("a", {
        className: "".concat(prefixCls, "-prev-year"),
        onClick: this.handlePrevYearClick
      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: "first_page"
      })), /*#__PURE__*/_react["default"].createElement("a", {
        className: "".concat(prefixCls, "-view-select"),
        onClick: this.handleYearSelect
      }, date.year()), /*#__PURE__*/_react["default"].createElement("a", {
        className: "".concat(prefixCls, "-next-year")
      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
        type: "last_page",
        onClick: this.handleNextYearClick
      })));
    }
  }, {
    key: "renderPanelHead",
    value: function renderPanelHead() {
      return undefined;
    }
  }, {
    key: "renderPanelBody",
    value: function renderPanelBody() {
      var prefixCls = this.prefixCls,
          _this$props = this.props,
          date = _this$props.date,
          _this$props$renderer = _this$props.renderer,
          renderer = _this$props$renderer === void 0 ? this.renderCell : _this$props$renderer,
          _this$props$isValidDa = _this$props.isValidDate,
          isValidDate = _this$props$isValidDa === void 0 ? _DaysView2.alwaysValidDate : _this$props$isValidDa,
          onDateMouseLeave = _this$props.onDateMouseLeave;
      var selected = date.clone();
      var prevMonth = date.clone().startOf('y');
      var lastMonth = prevMonth.clone().add(12, 'M');
      var rows = [];
      var cells = [];

      while (prevMonth.isBefore(lastMonth)) {
        var _classNames;

        var currentMonth = prevMonth.clone();
        var isDisabled = !isValidDate(currentMonth, selected);
        var className = (0, _classnames["default"])("".concat(prefixCls, "-cell"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-selected"), prevMonth.isSame(selected, 'M')), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), isDisabled), _classNames));
        var text = prevMonth.localeData().monthsShort(prevMonth);
        var monthProps = {
          key: text,
          className: className,
          children: this.renderInner(text)
        };

        if (!isDisabled) {
          monthProps.onClick = this.handleCellClick.bind(this, currentMonth);
          monthProps.onMouseEnter = this.handleDateMouseEnter.bind(this, currentMonth);
          monthProps.onMouseLeave = onDateMouseLeave;
        }

        cells.push(renderer(monthProps, text, currentMonth, selected));

        if (cells.length === 3) {
          rows.push( /*#__PURE__*/_react["default"].createElement("tr", {
            key: text
          }, cells));
          cells = [];
        }

        prevMonth.add(1, 'M');
      }

      return rows;
    }
  }, {
    key: "renderFooter",
    value: function renderFooter() {
      return undefined;
    }
  }, {
    key: "getPanelClass",
    value: function getPanelClass() {
      return "".concat(this.prefixCls, "-month-panel");
    }
  }, {
    key: "choose",
    value: function choose(date) {
      var mode = this.props.mode;

      if (mode !== _enum.ViewMode.month) {
        this.changeSelectedDate(date);
        this.changeViewMode(mode);
      } else {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(MonthsView.prototype), "choose", this).call(this, date);
      }
    }
  }]);
  return MonthsView;
}(_DaysView2["default"]);

exports["default"] = MonthsView;
MonthsView.displayName = 'MonthsView';
MonthsView.type = _enum2.FieldType.month;
//# sourceMappingURL=MonthsView.js.map