1 | import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
2 | import _extends from "@babel/runtime/helpers/extends";
|
3 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
4 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
5 | import _createClass from "@babel/runtime/helpers/createClass";
|
6 | import _inherits from "@babel/runtime/helpers/inherits";
|
7 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
8 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
9 |
|
10 | function _createSuper(Derived) {
|
11 | function isNativeReflectConstruct() {
|
12 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
13 | if (Reflect.construct.sham) return false;
|
14 | if (typeof Proxy === "function") return true;
|
15 |
|
16 | try {
|
17 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
18 | return true;
|
19 | } catch (e) {
|
20 | return false;
|
21 | }
|
22 | }
|
23 |
|
24 | return function () {
|
25 | var Super = _getPrototypeOf(Derived),
|
26 | result;
|
27 |
|
28 | if (isNativeReflectConstruct()) {
|
29 | var NewTarget = _getPrototypeOf(this).constructor;
|
30 |
|
31 | result = Reflect.construct(Super, arguments, NewTarget);
|
32 | } else {
|
33 | result = Super.apply(this, arguments);
|
34 | }
|
35 |
|
36 | return _possibleConstructorReturn(this, result);
|
37 | };
|
38 | }
|
39 |
|
40 | import { __decorate } from "tslib";
|
41 | import React from 'react';
|
42 | import PropTypes from 'prop-types';
|
43 | import moment from 'moment';
|
44 | import classNames from 'classnames';
|
45 | import noop from 'lodash/noop';
|
46 | import ViewComponent from '../core/ViewComponent';
|
47 | import autobind from '../_util/autobind';
|
48 | import Icon from '../icon';
|
49 | import { ViewMode } from './enum';
|
50 | import { FieldType } from '../data-set/enum';
|
51 | import { $l } from '../locale-context';
|
52 | import { stopEvent } from '../_util/EventManager';
|
53 | export function alwaysValidDate() {
|
54 | return true;
|
55 | }
|
56 |
|
57 | var DaysView =
|
58 |
|
59 | function (_ViewComponent) {
|
60 | _inherits(DaysView, _ViewComponent);
|
61 |
|
62 | var _super = _createSuper(DaysView);
|
63 |
|
64 | function DaysView() {
|
65 | _classCallCheck(this, DaysView);
|
66 |
|
67 | return _super.apply(this, arguments);
|
68 | }
|
69 |
|
70 | _createClass(DaysView, [{
|
71 | key: "getViewClassName",
|
72 | value: function getViewClassName() {
|
73 | return '';
|
74 | }
|
75 | }, {
|
76 | key: "render",
|
77 | value: function render() {
|
78 | var prefixCls = this.prefixCls,
|
79 | _this$props = this.props,
|
80 | className = _this$props.className,
|
81 | extraFooterPlacement = _this$props.extraFooterPlacement;
|
82 | var classString = classNames("".concat(prefixCls, "-view"), className, this.getViewClassName());
|
83 | return React.createElement("div", {
|
84 | className: classString
|
85 | }, this.renderHeader(), this.renderBody(), extraFooterPlacement === 'top' && this.customFooter, this.renderFooter(), extraFooterPlacement === 'bottom' && this.customFooter);
|
86 | }
|
87 | }, {
|
88 | key: "handlePrevYearClick",
|
89 | value: function handlePrevYearClick() {
|
90 | this.changeSelectedDate(this.getCloneDate().subtract(1, 'y'), ViewMode.year);
|
91 | }
|
92 | }, {
|
93 | key: "handlePrevMonthClick",
|
94 | value: function handlePrevMonthClick() {
|
95 | this.changeSelectedDate(this.getCloneDate().subtract(1, 'M'), ViewMode.month);
|
96 | }
|
97 | }, {
|
98 | key: "handleMonthSelect",
|
99 | value: function handleMonthSelect() {
|
100 | this.changeViewMode(ViewMode.month);
|
101 | }
|
102 | }, {
|
103 | key: "handleYearSelect",
|
104 | value: function handleYearSelect() {
|
105 | this.changeViewMode(ViewMode.year);
|
106 | }
|
107 | }, {
|
108 | key: "handleNextYearClick",
|
109 | value: function handleNextYearClick() {
|
110 | this.changeSelectedDate(this.getCloneDate().add(1, 'y'), ViewMode.year);
|
111 | }
|
112 | }, {
|
113 | key: "handleNextMonthClick",
|
114 | value: function handleNextMonthClick() {
|
115 | this.changeSelectedDate(this.getCloneDate().add(1, 'M'), ViewMode.month);
|
116 | }
|
117 | }, {
|
118 | key: "handleKeyDownHome",
|
119 | value: function handleKeyDownHome(e) {
|
120 | stopEvent(e);
|
121 | this.changeSelectedDate(this.getCloneDate().startOf('M'));
|
122 | }
|
123 | }, {
|
124 | key: "handleKeyDownEnd",
|
125 | value: function handleKeyDownEnd(e) {
|
126 | stopEvent(e);
|
127 | this.changeSelectedDate(this.getCloneDate().endOf('M'));
|
128 | }
|
129 | }, {
|
130 | key: "handleKeyDownLeft",
|
131 | value: function handleKeyDownLeft(e) {
|
132 | stopEvent(e);
|
133 |
|
134 | if (e.altKey) {
|
135 | this.changeViewMode(ViewMode.month);
|
136 | } else {
|
137 | this.changeSelectedDate(this.getCloneDate().subtract(1, 'd'));
|
138 | }
|
139 | }
|
140 | }, {
|
141 | key: "handleKeyDownRight",
|
142 | value: function handleKeyDownRight(e) {
|
143 | stopEvent(e);
|
144 |
|
145 | if (!e.altKey) {
|
146 | this.changeSelectedDate(this.getCloneDate().add(1, 'd'));
|
147 | }
|
148 | }
|
149 | }, {
|
150 | key: "handleKeyDownUp",
|
151 | value: function handleKeyDownUp(e) {
|
152 | stopEvent(e);
|
153 | this.changeSelectedDate(this.getCloneDate().subtract(1, 'w'));
|
154 | }
|
155 | }, {
|
156 | key: "handleKeyDownDown",
|
157 | value: function handleKeyDownDown(e) {
|
158 | stopEvent(e);
|
159 | this.changeSelectedDate(this.getCloneDate().add(1, 'w'));
|
160 | }
|
161 | }, {
|
162 | key: "handleKeyDownPageUp",
|
163 | value: function handleKeyDownPageUp(e) {
|
164 | stopEvent(e);
|
165 | this.changeSelectedDate(this.getCloneDate().subtract(1, e.altKey ? 'y' : 'M'));
|
166 | }
|
167 | }, {
|
168 | key: "handleKeyDownPageDown",
|
169 | value: function handleKeyDownPageDown(e) {
|
170 | stopEvent(e);
|
171 | this.changeSelectedDate(this.getCloneDate().add(1, e.altKey ? 'y' : 'M'));
|
172 | }
|
173 | }, {
|
174 | key: "handleKeyDownEnter",
|
175 | value: function handleKeyDownEnter(e) {
|
176 | e.preventDefault();
|
177 | this.choose(this.props.date);
|
178 | }
|
179 | }, {
|
180 | key: "handleCellClick",
|
181 | value: function handleCellClick(date) {
|
182 | this.choose(date);
|
183 | }
|
184 | }, {
|
185 | key: "choose",
|
186 | value: function choose(date) {
|
187 | var _this$props$onSelect = this.props.onSelect,
|
188 | onSelect = _this$props$onSelect === void 0 ? noop : _this$props$onSelect;
|
189 | onSelect(date);
|
190 | }
|
191 | }, {
|
192 | key: "changeSelectedDate",
|
193 | value: function changeSelectedDate(selectedDate, mode) {
|
194 | var _this$props$onSelecte = this.props.onSelectedDateChange,
|
195 | onSelectedDateChange = _this$props$onSelecte === void 0 ? noop : _this$props$onSelecte;
|
196 | onSelectedDateChange(selectedDate, mode);
|
197 | }
|
198 | }, {
|
199 | key: "changeViewMode",
|
200 | value: function changeViewMode(mode) {
|
201 | var _this$props$onViewMod = this.props.onViewModeChange,
|
202 | onViewModeChange = _this$props$onViewMod === void 0 ? noop : _this$props$onViewMod;
|
203 | onViewModeChange(mode);
|
204 | }
|
205 | }, {
|
206 | key: "renderHeader",
|
207 | value: function renderHeader() {
|
208 | var prefixCls = this.prefixCls,
|
209 | date = this.props.date;
|
210 | return React.createElement("div", {
|
211 | className: "".concat(prefixCls, "-header")
|
212 | }, React.createElement("a", {
|
213 | className: "".concat(prefixCls, "-prev-year"),
|
214 | onClick: this.handlePrevYearClick
|
215 | }, React.createElement(Icon, {
|
216 | type: "first_page"
|
217 | })), React.createElement("a", {
|
218 | className: "".concat(prefixCls, "-prev-month"),
|
219 | onClick: this.handlePrevMonthClick
|
220 | }, React.createElement(Icon, {
|
221 | type: "navigate_before"
|
222 | })), React.createElement("a", {
|
223 | className: "".concat(prefixCls, "-view-select"),
|
224 | onClick: this.handleMonthSelect
|
225 | }, date.localeData().monthsShort(date)), React.createElement("a", {
|
226 | className: "".concat(prefixCls, "-view-select"),
|
227 | onClick: this.handleYearSelect
|
228 | }, date.year()), React.createElement("a", {
|
229 | className: "".concat(prefixCls, "-next-year")
|
230 | }, React.createElement(Icon, {
|
231 | type: "last_page",
|
232 | onClick: this.handleNextYearClick
|
233 | })), React.createElement("a", {
|
234 | className: "".concat(prefixCls, "-next-month"),
|
235 | onClick: this.handleNextMonthClick
|
236 | }, React.createElement(Icon, {
|
237 | type: "navigate_next"
|
238 | })));
|
239 | }
|
240 | }, {
|
241 | key: "renderBody",
|
242 | value: function renderBody() {
|
243 | return React.createElement("div", {
|
244 | className: "".concat(this.prefixCls, "-body")
|
245 | }, this.renderPanel());
|
246 | }
|
247 | }, {
|
248 | key: "renderPanel",
|
249 | value: function renderPanel() {
|
250 | return React.createElement("table", {
|
251 | className: this.getPanelClass(),
|
252 | cellSpacing: 0
|
253 | }, this.renderPanelHead(), React.createElement("tbody", null, this.renderPanelBody()));
|
254 | }
|
255 | }, {
|
256 | key: "renderPanelHead",
|
257 | value: function renderPanelHead() {
|
258 | return React.createElement("thead", null, React.createElement("tr", null, this.getDaysOfWeek()));
|
259 | }
|
260 | }, {
|
261 | key: "renderFooter",
|
262 | value: function renderFooter() {
|
263 | var prefixCls = this.prefixCls,
|
264 | disabledNow = this.props.disabledNow;
|
265 | var footerProps = {
|
266 | className: classNames(_defineProperty({}, "".concat(prefixCls, "-now-disabled"), disabledNow)),
|
267 | onClick: !disabledNow ? this.choose.bind(this, moment(), false) : noop
|
268 | };
|
269 | return React.createElement("div", {
|
270 | className: "".concat(prefixCls, "-footer")
|
271 | }, React.createElement("a", _extends({}, footerProps), $l('DatePicker', 'today')));
|
272 | }
|
273 | }, {
|
274 | key: "renderCell",
|
275 | value: function renderCell(props) {
|
276 | return React.createElement("td", _extends({}, props));
|
277 | }
|
278 | }, {
|
279 | key: "renderInner",
|
280 | value: function renderInner(text) {
|
281 | var prefixCls = this.prefixCls;
|
282 | return React.createElement("div", {
|
283 | className: "".concat(prefixCls, "-cell-inner")
|
284 | }, text);
|
285 | }
|
286 | }, {
|
287 | key: "getFirstDay",
|
288 | value: function getFirstDay(date) {
|
289 | var firstDay = date.clone().subtract(1, 'M');
|
290 | return firstDay.date(firstDay.daysInMonth()).startOf('w');
|
291 | }
|
292 | }, {
|
293 | key: "renderPanelBody",
|
294 | value: function renderPanelBody() {
|
295 | var prefixCls = this.prefixCls,
|
296 | _this$props2 = this.props,
|
297 | date = _this$props2.date,
|
298 | _this$props2$renderer = _this$props2.renderer,
|
299 | renderer = _this$props2$renderer === void 0 ? this.renderCell : _this$props2$renderer,
|
300 | _this$props2$isValidD = _this$props2.isValidDate,
|
301 | isValidDate = _this$props2$isValidD === void 0 ? alwaysValidDate : _this$props2$isValidD;
|
302 | var selected = date.clone();
|
303 | var prevMonth = this.getFirstDay(date);
|
304 | var currentYear = date.year();
|
305 | var currentMonth = date.month();
|
306 | var lastDay = prevMonth.clone().add(42, 'd');
|
307 | var rows = [];
|
308 | var cells = [];
|
309 |
|
310 | while (prevMonth.isBefore(lastDay)) {
|
311 | var _classNames2;
|
312 |
|
313 | var currentDate = prevMonth.clone();
|
314 | var isDisabled = !isValidDate(currentDate, selected);
|
315 | 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(moment(), 'd')), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), isDisabled), _classNames2));
|
316 | var text = String(currentDate.date());
|
317 | var dayProps = {
|
318 | key: prevMonth.format('M_D'),
|
319 | className: className,
|
320 | children: this.renderInner(text)
|
321 | };
|
322 |
|
323 | if (!isDisabled) {
|
324 | dayProps.onClick = this.handleCellClick.bind(this, currentDate);
|
325 | }
|
326 |
|
327 | cells.push(renderer(dayProps, text, currentDate, selected));
|
328 |
|
329 | if (cells.length === 7) {
|
330 | rows.push(React.createElement("tr", {
|
331 | key: prevMonth.format('M_D')
|
332 | }, cells));
|
333 | cells = [];
|
334 | }
|
335 |
|
336 | prevMonth.add(1, 'd');
|
337 | }
|
338 |
|
339 | return rows;
|
340 | }
|
341 | }, {
|
342 | key: "getPanelClass",
|
343 | value: function getPanelClass() {
|
344 | return "".concat(this.prefixCls, "-day-panel");
|
345 | }
|
346 | }, {
|
347 | key: "getDaysOfWeek",
|
348 | value: function getDaysOfWeek() {
|
349 | var locale = this.props.date.localeData();
|
350 | var days = locale.weekdaysMin();
|
351 | var first = locale.firstDayOfWeek();
|
352 | var dow = [];
|
353 | var i = 0;
|
354 | days.forEach(function (day) {
|
355 | dow[(7 + i++ - first) % 7] = React.createElement("th", {
|
356 | key: day,
|
357 | title: day
|
358 | }, day);
|
359 | });
|
360 | return dow;
|
361 | }
|
362 | }, {
|
363 | key: "getCloneDate",
|
364 | value: function getCloneDate() {
|
365 | return this.props.date.clone();
|
366 | }
|
367 | }, {
|
368 | key: "customFooter",
|
369 | get: function get() {
|
370 | var prefixCls = this.prefixCls,
|
371 | renderExtraFooter = this.props.renderExtraFooter;
|
372 | return renderExtraFooter ? React.createElement("div", {
|
373 | className: "".concat(prefixCls, "-footer-extra")
|
374 | }, renderExtraFooter()) : null;
|
375 | }
|
376 | }]);
|
377 |
|
378 | return DaysView;
|
379 | }(ViewComponent);
|
380 |
|
381 | export { DaysView as default };
|
382 | DaysView.displayName = 'DaysView';
|
383 | DaysView.propTypes = _objectSpread({
|
384 | date: PropTypes.object,
|
385 | renderer: PropTypes.func,
|
386 | isValidDate: PropTypes.func,
|
387 | onSelect: PropTypes.func,
|
388 | onSelectedDateChange: PropTypes.func,
|
389 | onViewModeChange: PropTypes.func
|
390 | }, ViewComponent.propTypes);
|
391 | DaysView.defaultProps = {
|
392 | suffixCls: 'calendar',
|
393 | extraFooterPlacement: 'bottom'
|
394 | };
|
395 | DaysView.type = FieldType.date;
|
396 |
|
397 | __decorate([autobind], DaysView.prototype, "handlePrevYearClick", null);
|
398 |
|
399 | __decorate([autobind], DaysView.prototype, "handlePrevMonthClick", null);
|
400 |
|
401 | __decorate([autobind], DaysView.prototype, "handleMonthSelect", null);
|
402 |
|
403 | __decorate([autobind], DaysView.prototype, "handleYearSelect", null);
|
404 |
|
405 | __decorate([autobind], DaysView.prototype, "handleNextYearClick", null);
|
406 |
|
407 | __decorate([autobind], DaysView.prototype, "handleNextMonthClick", null);
|
408 |
|
409 | __decorate([autobind], DaysView.prototype, "renderCell", null);
|
410 |
|