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

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 { __decorate } from "tslib";
import React from 'react';
import moment from 'moment';
import classNames from 'classnames';
import noop from 'lodash/noop';
import ViewComponent from '../core/ViewComponent';
import autobind from '../_util/autobind';
import Icon from '../icon';
import { ViewMode } from './enum';
import { FieldType } from '../data-set/enum';
import { $l } from '../locale-context';
import { stopEvent } from '../_util/EventManager';
export function alwaysValidDate() {
  return true;
}

var DaysView = /*#__PURE__*/function (_ViewComponent) {
  _inherits(DaysView, _ViewComponent);

  var _super = _createSuper(DaysView);

  function DaysView() {
    var _this;

    _classCallCheck(this, DaysView);

    _this = _super.apply(this, arguments);

    _this.handleDateMouseEnter = function (currentDate) {
      var _this$props$onDateMou = _this.props.onDateMouseEnter,
          onDateMouseEnter = _this$props$onDateMou === void 0 ? noop : _this$props$onDateMou;
      return onDateMouseEnter(currentDate);
    };

    return _this;
  }

  _createClass(DaysView, [{
    key: "getViewClassName",
    value: function getViewClassName() {
      return '';
    }
  }, {
    key: "render",
    value: function render() {
      var prefixCls = this.prefixCls,
          _this$props = this.props,
          className = _this$props.className,
          extraFooterPlacement = _this$props.extraFooterPlacement;
      var classString = classNames("".concat(prefixCls, "-view"), className, this.getViewClassName());
      return /*#__PURE__*/React.createElement("div", {
        className: classString
      }, this.renderHeader(), this.renderBody(), extraFooterPlacement === 'top' && this.customFooter, this.renderFooter(), extraFooterPlacement === 'bottom' && this.customFooter);
    }
  }, {
    key: "handlePrevYearClick",
    value: function handlePrevYearClick() {
      this.changeCursorDate(this.getCloneDate().subtract(1, 'y'), ViewMode.year);
    }
  }, {
    key: "handlePrevMonthClick",
    value: function handlePrevMonthClick() {
      this.changeCursorDate(this.getCloneDate().subtract(1, 'M'), ViewMode.month);
    }
  }, {
    key: "handleMonthSelect",
    value: function handleMonthSelect() {
      this.changeViewMode(ViewMode.month);
    }
  }, {
    key: "handleYearSelect",
    value: function handleYearSelect() {
      this.changeViewMode(ViewMode.year);
    }
  }, {
    key: "handleNextYearClick",
    value: function handleNextYearClick() {
      this.changeCursorDate(this.getCloneDate().add(1, 'y'), ViewMode.year);
    }
  }, {
    key: "handleNextMonthClick",
    value: function handleNextMonthClick() {
      this.changeCursorDate(this.getCloneDate().add(1, 'M'), ViewMode.month);
    }
  }, {
    key: "handleKeyDownHome",
    value: function handleKeyDownHome(e) {
      stopEvent(e);
      this.changeCursorDate(this.getCloneDate().startOf('M'));
    }
  }, {
    key: "handleKeyDownEnd",
    value: function handleKeyDownEnd(e) {
      stopEvent(e);
      this.changeCursorDate(this.getCloneDate().endOf('M'));
    }
  }, {
    key: "handleKeyDownLeft",
    value: function handleKeyDownLeft(e) {
      stopEvent(e);

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

      if (!e.altKey) {
        this.changeCursorDate(this.getCloneDate().add(1, 'd'));
      }
    }
  }, {
    key: "handleKeyDownUp",
    value: function handleKeyDownUp(e) {
      stopEvent(e);
      this.changeCursorDate(this.getCloneDate().subtract(1, 'w'));
    }
  }, {
    key: "handleKeyDownDown",
    value: function handleKeyDownDown(e) {
      stopEvent(e);
      this.changeCursorDate(this.getCloneDate().add(1, 'w'));
    }
  }, {
    key: "handleKeyDownPageUp",
    value: function handleKeyDownPageUp(e) {
      stopEvent(e);
      this.changeCursorDate(this.getCloneDate().subtract(1, e.altKey ? 'y' : 'M'));
    }
  }, {
    key: "handleKeyDownPageDown",
    value: function handleKeyDownPageDown(e) {
      stopEvent(e);
      this.changeCursorDate(this.getCloneDate().add(1, e.altKey ? 'y' : 'M'));
    }
  }, {
    key: "handleKeyDownEnter",
    value: function handleKeyDownEnter(e) {
      e.preventDefault();
      this.choose(this.props.date);
    }
  }, {
    key: "handleCellClick",
    value: function handleCellClick(date) {
      this.choose(date);
    }
  }, {
    key: "choose",
    value: function choose(date, expand) {
      var _this$props$onSelect = this.props.onSelect,
          onSelect = _this$props$onSelect === void 0 ? noop : _this$props$onSelect;
      onSelect(date, expand);
    }
  }, {
    key: "changeSelectedDate",
    value: function changeSelectedDate(selectedDate, mode) {
      var _this$props$onSelecte = this.props.onSelectedDateChange,
          onSelectedDateChange = _this$props$onSelecte === void 0 ? noop : _this$props$onSelecte;
      onSelectedDateChange(selectedDate, mode);
    }
  }, {
    key: "changeCursorDate",
    value: function changeCursorDate(cursor, mode) {
      var _this$props2 = this.props,
          _this$props2$onCursor = _this$props2.onCursorDateChange,
          onCursorDateChange = _this$props2$onCursor === void 0 ? noop : _this$props2$onCursor,
          date = _this$props2.date;
      onCursorDateChange(cursor, date, mode);
    }
  }, {
    key: "changeViewMode",
    value: function changeViewMode(mode) {
      var _this$props$onViewMod = this.props.onViewModeChange,
          onViewModeChange = _this$props$onViewMod === void 0 ? noop : _this$props$onViewMod;
      onViewModeChange(mode);
    }
  }, {
    key: "renderHeader",
    value: function renderHeader() {
      var prefixCls = this.prefixCls,
          date = this.props.date;
      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, "-prev-month"),
        onClick: this.handlePrevMonthClick
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "navigate_before"
      })), /*#__PURE__*/React.createElement("a", {
        className: "".concat(prefixCls, "-view-select"),
        onClick: this.handleMonthSelect
      }, date.localeData().monthsShort(date)), /*#__PURE__*/React.createElement("a", {
        className: "".concat(prefixCls, "-view-select"),
        onClick: this.handleYearSelect
      }, date.year()), /*#__PURE__*/React.createElement("a", {
        className: "".concat(prefixCls, "-next-year")
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "last_page",
        onClick: this.handleNextYearClick
      })), /*#__PURE__*/React.createElement("a", {
        className: "".concat(prefixCls, "-next-month"),
        onClick: this.handleNextMonthClick
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "navigate_next"
      })));
    }
  }, {
    key: "renderBody",
    value: function renderBody() {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(this.prefixCls, "-body")
      }, this.renderPanel());
    }
  }, {
    key: "renderPanel",
    value: function renderPanel() {
      return /*#__PURE__*/React.createElement("table", {
        className: this.getPanelClass(),
        cellSpacing: 0
      }, this.renderPanelHead(), /*#__PURE__*/React.createElement("tbody", null, this.renderPanelBody()));
    }
  }, {
    key: "renderPanelHead",
    value: function renderPanelHead() {
      return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, this.getDaysOfWeek()));
    }
  }, {
    key: "customFooter",
    get: function get() {
      var prefixCls = this.prefixCls,
          renderExtraFooter = this.props.renderExtraFooter;
      return renderExtraFooter ? /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-footer-extra")
      }, renderExtraFooter()) : null;
    }
  }, {
    key: "renderFooter",
    value: function renderFooter() {
      var _classNames;

      var prefixCls = this.prefixCls,
          _this$props3 = this.props,
          disabledNow = _this$props3.disabledNow,
          isExistValue = _this$props3.isExistValue;
      var footerProps = {
        className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-now-disabled"), disabledNow), _defineProperty(_classNames, "".concat(prefixCls, "-now-selected"), isExistValue), _classNames)),
        onClick: !disabledNow ? this.choose.bind(this, moment(), false) : noop
      };
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-footer")
      }, /*#__PURE__*/React.createElement("a", _extends({}, footerProps), $l('DatePicker', 'today')));
    }
  }, {
    key: "renderCell",
    value: function renderCell(props) {
      return /*#__PURE__*/React.createElement("td", _extends({}, props));
    }
  }, {
    key: "renderInner",
    value: function renderInner(text) {
      var prefixCls = this.prefixCls;
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-cell-inner")
      }, text);
    }
  }, {
    key: "getFirstDay",
    value: function getFirstDay(date) {
      var firstDay = date.clone().subtract(1, 'M');
      return firstDay.date(firstDay.daysInMonth()).startOf('w');
    }
  }, {
    key: "renderPanelBody",
    value: function renderPanelBody() {
      var prefixCls = this.prefixCls,
          _this$props4 = this.props,
          date = _this$props4.date,
          _this$props4$renderer = _this$props4.renderer,
          renderer = _this$props4$renderer === void 0 ? this.renderCell : _this$props4$renderer,
          _this$props4$isValidD = _this$props4.isValidDate,
          isValidDate = _this$props4$isValidD === void 0 ? alwaysValidDate : _this$props4$isValidD,
          onDateMouseLeave = _this$props4.onDateMouseLeave;
      var selected = date.clone();
      var prevMonth = this.getFirstDay(date);
      var currentYear = date.year();
      var currentMonth = date.month();
      var lastDay = prevMonth.clone().add(42, 'd');
      var rows = [];
      var cells = [];
      var today = moment();

      while (prevMonth.isBefore(lastDay)) {
        var _classNames2;

        var currentDate = prevMonth.clone();
        var isDisabled = !isValidDate(currentDate, selected);
        var className = classNames("".concat(prefixCls, "-cell"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-old"), prevMonth.year() < currentYear || prevMonth.year() === currentYear && prevMonth.month() < currentMonth), _defineProperty(_classNames2, "".concat(prefixCls, "-new"), prevMonth.year() > currentYear || prevMonth.year() === currentYear && prevMonth.month() > currentMonth), _defineProperty(_classNames2, "".concat(prefixCls, "-selected"), prevMonth.isSame(selected, 'd')), _defineProperty(_classNames2, "".concat(prefixCls, "-today"), prevMonth.isSame(today, 'd')), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), isDisabled), _classNames2));
        var text = String(currentDate.date());
        var dayProps = {
          key: prevMonth.format('M_D'),
          className: className,
          children: this.renderInner(text)
        };

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

        cells.push(renderer(dayProps, text, currentDate, selected));

        if (cells.length === 7) {
          rows.push( /*#__PURE__*/React.createElement("tr", {
            key: prevMonth.format('M_D')
          }, cells));
          cells = [];
        }

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

      return rows;
    }
  }, {
    key: "getPanelClass",
    value: function getPanelClass() {
      return "".concat(this.prefixCls, "-day-panel");
    }
  }, {
    key: "getDaysOfWeek",
    value: function getDaysOfWeek() {
      var locale = this.props.date.localeData();
      var days = locale.weekdaysMin();
      var first = locale.firstDayOfWeek();
      var dow = [];
      var i = 0;
      days.forEach(function (day) {
        dow[(7 + i++ - first) % 7] = /*#__PURE__*/React.createElement("th", {
          key: day,
          title: day
        }, day);
      });
      return dow;
    }
  }, {
    key: "getCloneDate",
    value: function getCloneDate() {
      return this.props.date.clone();
    }
  }]);

  return DaysView;
}(ViewComponent);

export { DaysView as default };
DaysView.displayName = 'DaysView';
DaysView.defaultProps = {
  suffixCls: 'calendar',
  extraFooterPlacement: 'bottom'
};
DaysView.type = FieldType.date;

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

__decorate([autobind], DaysView.prototype, "handlePrevMonthClick", null);

__decorate([autobind], DaysView.prototype, "handleMonthSelect", null);

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

__decorate([autobind], DaysView.prototype, "handleNextYearClick", null);

__decorate([autobind], DaysView.prototype, "handleNextMonthClick", null);

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