choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
399 lines (360 loc) • 15.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.alwaysValidDate = alwaysValidDate;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _moment = _interopRequireDefault(require("moment"));
var _classnames = _interopRequireDefault(require("classnames"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _ViewComponent2 = _interopRequireDefault(require("../core/ViewComponent"));
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _icon = _interopRequireDefault(require("../icon"));
var _enum = require("./enum");
var _enum2 = require("../data-set/enum");
var _localeContext = require("../locale-context");
var _EventManager = require("../_util/EventManager");
function alwaysValidDate() {
return true;
}
var DaysView = /*#__PURE__*/function (_ViewComponent) {
(0, _inherits2["default"])(DaysView, _ViewComponent);
var _super = (0, _createSuper2["default"])(DaysView);
function DaysView() {
var _this;
(0, _classCallCheck2["default"])(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["default"] : _this$props$onDateMou;
return onDateMouseEnter(currentDate);
};
return _this;
}
(0, _createClass2["default"])(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 = (0, _classnames["default"])("".concat(prefixCls, "-view"), className, this.getViewClassName());
return /*#__PURE__*/_react["default"].createElement("div", {
className: classString
}, this.renderHeader(), this.renderBody(), extraFooterPlacement === 'top' && this.customFooter, this.renderFooter(), extraFooterPlacement === 'bottom' && this.customFooter);
}
}, {
key: "handlePrevYearClick",
value: function handlePrevYearClick() {
this.changeSelectedDate(this.getCloneDate().subtract(1, 'y'), _enum.ViewMode.year);
}
}, {
key: "handlePrevMonthClick",
value: function handlePrevMonthClick() {
this.changeSelectedDate(this.getCloneDate().subtract(1, 'M'), _enum.ViewMode.month);
}
}, {
key: "handleMonthSelect",
value: function handleMonthSelect() {
this.changeViewMode(_enum.ViewMode.month);
}
}, {
key: "handleYearSelect",
value: function handleYearSelect() {
this.changeViewMode(_enum.ViewMode.year);
}
}, {
key: "handleNextYearClick",
value: function handleNextYearClick() {
this.changeSelectedDate(this.getCloneDate().add(1, 'y'), _enum.ViewMode.year);
}
}, {
key: "handleNextMonthClick",
value: function handleNextMonthClick() {
this.changeSelectedDate(this.getCloneDate().add(1, 'M'), _enum.ViewMode.month);
}
}, {
key: "handleKeyDownHome",
value: function handleKeyDownHome(e) {
(0, _EventManager.stopEvent)(e);
this.changeSelectedDate(this.getCloneDate().startOf('M'));
}
}, {
key: "handleKeyDownEnd",
value: function handleKeyDownEnd(e) {
(0, _EventManager.stopEvent)(e);
this.changeSelectedDate(this.getCloneDate().endOf('M'));
}
}, {
key: "handleKeyDownLeft",
value: function handleKeyDownLeft(e) {
(0, _EventManager.stopEvent)(e);
if (e.altKey) {
this.changeViewMode(_enum.ViewMode.month);
} else {
this.changeSelectedDate(this.getCloneDate().subtract(1, 'd'));
}
}
}, {
key: "handleKeyDownRight",
value: function handleKeyDownRight(e) {
(0, _EventManager.stopEvent)(e);
if (!e.altKey) {
this.changeSelectedDate(this.getCloneDate().add(1, 'd'));
}
}
}, {
key: "handleKeyDownUp",
value: function handleKeyDownUp(e) {
(0, _EventManager.stopEvent)(e);
this.changeSelectedDate(this.getCloneDate().subtract(1, 'w'));
}
}, {
key: "handleKeyDownDown",
value: function handleKeyDownDown(e) {
(0, _EventManager.stopEvent)(e);
this.changeSelectedDate(this.getCloneDate().add(1, 'w'));
}
}, {
key: "handleKeyDownPageUp",
value: function handleKeyDownPageUp(e) {
(0, _EventManager.stopEvent)(e);
this.changeSelectedDate(this.getCloneDate().subtract(1, e.altKey ? 'y' : 'M'));
}
}, {
key: "handleKeyDownPageDown",
value: function handleKeyDownPageDown(e) {
(0, _EventManager.stopEvent)(e);
this.changeSelectedDate(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) {
var _this$props$onSelect = this.props.onSelect,
onSelect = _this$props$onSelect === void 0 ? _noop["default"] : _this$props$onSelect;
onSelect(date);
}
}, {
key: "changeSelectedDate",
value: function changeSelectedDate(selectedDate, mode) {
var _this$props$onSelecte = this.props.onSelectedDateChange,
onSelectedDateChange = _this$props$onSelecte === void 0 ? _noop["default"] : _this$props$onSelecte;
onSelectedDateChange(selectedDate, mode);
}
}, {
key: "changeViewMode",
value: function changeViewMode(mode) {
var _this$props$onViewMod = this.props.onViewModeChange,
onViewModeChange = _this$props$onViewMod === void 0 ? _noop["default"] : _this$props$onViewMod;
onViewModeChange(mode);
}
}, {
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, "-prev-month"),
onClick: this.handlePrevMonthClick
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "navigate_before"
})), /*#__PURE__*/_react["default"].createElement("a", {
className: "".concat(prefixCls, "-view-select"),
onClick: this.handleMonthSelect
}, date.localeData().monthsShort(date)), /*#__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
})), /*#__PURE__*/_react["default"].createElement("a", {
className: "".concat(prefixCls, "-next-month"),
onClick: this.handleNextMonthClick
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "navigate_next"
})));
}
}, {
key: "renderBody",
value: function renderBody() {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(this.prefixCls, "-body")
}, this.renderPanel());
}
}, {
key: "renderPanel",
value: function renderPanel() {
return /*#__PURE__*/_react["default"].createElement("table", {
className: this.getPanelClass(),
cellSpacing: 0
}, this.renderPanelHead(), /*#__PURE__*/_react["default"].createElement("tbody", null, this.renderPanelBody()));
}
}, {
key: "renderPanelHead",
value: function renderPanelHead() {
return /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, this.getDaysOfWeek()));
}
}, {
key: "customFooter",
get: function get() {
var prefixCls = this.prefixCls,
renderExtraFooter = this.props.renderExtraFooter;
return renderExtraFooter ? /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-footer-extra")
}, renderExtraFooter()) : null;
}
}, {
key: "renderFooter",
value: function renderFooter() {
var prefixCls = this.prefixCls,
disabledNow = this.props.disabledNow;
var footerProps = {
className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-now-disabled"), disabledNow)),
onClick: !disabledNow ? this.choose.bind(this, (0, _moment["default"])(), false) : _noop["default"]
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-footer")
}, /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({}, footerProps), (0, _localeContext.$l)('DatePicker', 'today')));
}
}, {
key: "renderCell",
value: function renderCell(props) {
return /*#__PURE__*/_react["default"].createElement("td", (0, _extends2["default"])({}, props));
}
}, {
key: "renderInner",
value: function renderInner(text) {
var prefixCls = this.prefixCls;
return /*#__PURE__*/_react["default"].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$props2 = this.props,
date = _this$props2.date,
_this$props2$renderer = _this$props2.renderer,
renderer = _this$props2$renderer === void 0 ? this.renderCell : _this$props2$renderer,
_this$props2$isValidD = _this$props2.isValidDate,
isValidDate = _this$props2$isValidD === void 0 ? alwaysValidDate : _this$props2$isValidD,
onDateMouseLeave = _this$props2.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 = [];
while (prevMonth.isBefore(lastDay)) {
var _classNames2;
var currentDate = prevMonth.clone();
var isDisabled = !isValidDate(currentDate, selected);
var className = (0, _classnames["default"])("".concat(prefixCls, "-cell"), (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-old"), prevMonth.year() < currentYear || prevMonth.year() === currentYear && prevMonth.month() < currentMonth), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-new"), prevMonth.year() > currentYear || prevMonth.year() === currentYear && prevMonth.month() > currentMonth), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-selected"), prevMonth.isSame(selected, 'd')), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-today"), prevMonth.isSame((0, _moment["default"])(), 'd')), (0, _defineProperty2["default"])(_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["default"].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["default"].createElement("th", {
key: day,
title: day
}, day);
});
return dow;
}
}, {
key: "getCloneDate",
value: function getCloneDate() {
return this.props.date.clone();
}
}]);
return DaysView;
}(_ViewComponent2["default"]);
exports["default"] = DaysView;
DaysView.displayName = 'DaysView';
DaysView.defaultProps = {
suffixCls: 'calendar',
extraFooterPlacement: 'bottom'
};
DaysView.type = _enum2.FieldType.date;
(0, _tslib.__decorate)([_autobind["default"]], DaysView.prototype, "handlePrevYearClick", null);
(0, _tslib.__decorate)([_autobind["default"]], DaysView.prototype, "handlePrevMonthClick", null);
(0, _tslib.__decorate)([_autobind["default"]], DaysView.prototype, "handleMonthSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], DaysView.prototype, "handleYearSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], DaysView.prototype, "handleNextYearClick", null);
(0, _tslib.__decorate)([_autobind["default"]], DaysView.prototype, "handleNextMonthClick", null);
(0, _tslib.__decorate)([_autobind["default"]], DaysView.prototype, "renderCell", null);
//# sourceMappingURL=DaysView.js.map