choerodon-ui/pro/es/date-picker/YearsView.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import classNames from 'classnames';
import autobind from '../_util/autobind';
import Icon from '../icon';
import { ViewMode } from './enum';
import DaysView, { alwaysValidDate } from './DaysView';
import { FieldType } from '../data-set/enum';
import { stopEvent } from '../_util/EventManager';

var YearsView = /*#__PURE__*/function (_DaysView) {
  _inherits(YearsView, _DaysView);

  var _super = _createSuper(YearsView);

  function YearsView() {
    _classCallCheck(this, YearsView);

    return _super.apply(this, arguments);
  }

  _createClass(YearsView, [{
    key: "getViewClassName",
    value: function getViewClassName() {
      var prefixCls = this.prefixCls;
      return "".concat(prefixCls, "-year");
    }
  }, {
    key: "handlePrevYearClick",
    value: function handlePrevYearClick() {
      this.changeSelectedDate(this.getCloneDate().subtract(10, 'y'));
    }
  }, {
    key: "handleYearSelect",
    value: function handleYearSelect() {
      this.changeViewMode(ViewMode.decade);
    }
  }, {
    key: "handleNextYearClick",
    value: function handleNextYearClick() {
      this.changeSelectedDate(this.getCloneDate().add(10, 'y'));
    }
  }, {
    key: "handleKeyDownHome",
    value: function handleKeyDownHome(e) {
      stopEvent(e);
      var date = this.getCloneDate();
      this.changeSelectedDate(date.subtract(date.year() % 10, 'y'));
    }
  }, {
    key: "handleKeyDownEnd",
    value: function handleKeyDownEnd(e) {
      stopEvent(e);
      var date = this.getCloneDate();
      this.changeSelectedDate(date.add(9 - date.year() % 10, 'y'));
    }
  }, {
    key: "handleKeyDownLeft",
    value: function handleKeyDownLeft(e) {
      stopEvent(e);

      if (e.altKey) {
        this.changeViewMode(ViewMode.decade);
      } else {
        this.changeSelectedDate(this.getCloneDate().subtract(1, 'y'));
      }
    }
  }, {
    key: "handleKeyDownRight",
    value: function handleKeyDownRight(e) {
      stopEvent(e);

      if (e.altKey) {
        if (this.props.mode !== ViewMode.year) {
          this.changeViewMode(ViewMode.month);
        }
      } else {
        this.changeSelectedDate(this.getCloneDate().add(1, 'y'));
      }
    }
  }, {
    key: "handleKeyDownUp",
    value: function handleKeyDownUp(e) {
      stopEvent(e);
      this.changeSelectedDate(this.getCloneDate().subtract(3, 'y'));
    }
  }, {
    key: "handleKeyDownDown",
    value: function handleKeyDownDown(e) {
      stopEvent(e);
      this.changeSelectedDate(this.getCloneDate().add(3, 'y'));
    }
  }, {
    key: "handleKeyDownPageUp",
    value: function handleKeyDownPageUp(e) {
      stopEvent(e);
      this.changeSelectedDate(this.getCloneDate().subtract(e.altKey ? 100 : 10, 'y'));
    }
  }, {
    key: "handleKeyDownPageDown",
    value: function handleKeyDownPageDown(e) {
      stopEvent(e);
      this.changeSelectedDate(this.getCloneDate().add(e.altKey ? 100 : 10, 'y'));
    }
  }, {
    key: "renderHeader",
    value: function renderHeader() {
      var prefixCls = this.prefixCls,
          date = this.props.date;
      var year = date.year() % 10;
      var from = date.clone().subtract(year, 'y');
      var to = from.clone().add(9, 'y');
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-header")
      }, /*#__PURE__*/React.createElement("a", {
        className: "".concat(prefixCls, "-prev-year"),
        onClick: this.handlePrevYearClick
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "first_page"
      })), /*#__PURE__*/React.createElement("a", {
        className: "".concat(prefixCls, "-view-select"),
        onClick: this.handleYearSelect
      }, from.year(), " - ", to.year()), /*#__PURE__*/React.createElement("a", {
        className: "".concat(prefixCls, "-next-year")
      }, /*#__PURE__*/React.createElement(Icon, {
        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 ? alwaysValidDate : _this$props$isValidDa,
          onDateMouseLeave = _this$props.onDateMouseLeave;
      var selected = date.clone();
      var from = date.clone().startOf('y').subtract(date.year() % 10, 'y');
      var to = from.clone().add(10, 'y');
      var prevYear = from.clone().subtract(1, 'y');
      var lastYear = to.clone().add(1, 'y');
      var rows = [];
      var cells = [];

      while (prevYear.isBefore(lastYear)) {
        var _classNames;

        var currentYear = prevYear.clone();
        var isDisabled = !isValidDate(currentYear, selected);
        var className = classNames("".concat(prefixCls, "-cell"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-old"), currentYear.isBefore(from, 'y')), _defineProperty(_classNames, "".concat(prefixCls, "-new"), currentYear.isSame(to, 'y')), _defineProperty(_classNames, "".concat(prefixCls, "-selected"), prevYear.isSame(selected, 'y')), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), isDisabled), _classNames));
        var text = String(prevYear.year());
        var yearProps = {
          key: text,
          className: className,
          children: this.renderInner(text)
        };

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

        cells.push(renderer(yearProps, text, currentYear, selected));

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

        prevYear.add(1, 'y');
      }

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

      if (mode !== ViewMode.year) {
        this.changeSelectedDate(date);
        this.changeViewMode(ViewMode.month);
      } else {
        _get(_getPrototypeOf(YearsView.prototype), "choose", this).call(this, date);
      }
    }
  }]);

  return YearsView;
}(DaysView);

export { YearsView as default };
YearsView.displayName = 'YearsView';
YearsView.type = FieldType.year;

__decorate([autobind], YearsView.prototype, "handlePrevYearClick", null);

__decorate([autobind], YearsView.prototype, "handleYearSelect", null);

__decorate([autobind], YearsView.prototype, "handleNextYearClick", null);
//# sourceMappingURL=YearsView.js.map