1 | import _extends from "@babel/runtime/helpers/extends";
|
2 | import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
3 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
4 | import _createClass from "@babel/runtime/helpers/createClass";
|
5 | import _get from "@babel/runtime/helpers/get";
|
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 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
10 |
|
11 | var _stepMapping;
|
12 |
|
13 | function _createSuper(Derived) {
|
14 | function isNativeReflectConstruct() {
|
15 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
16 | if (Reflect.construct.sham) return false;
|
17 | if (typeof Proxy === "function") return true;
|
18 |
|
19 | try {
|
20 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
21 | return true;
|
22 | } catch (e) {
|
23 | return false;
|
24 | }
|
25 | }
|
26 |
|
27 | return function () {
|
28 | var Super = _getPrototypeOf(Derived),
|
29 | result;
|
30 |
|
31 | if (isNativeReflectConstruct()) {
|
32 | var NewTarget = _getPrototypeOf(this).constructor;
|
33 |
|
34 | result = Reflect.construct(Super, arguments, NewTarget);
|
35 | } else {
|
36 | result = Super.apply(this, arguments);
|
37 | }
|
38 |
|
39 | return _possibleConstructorReturn(this, result);
|
40 | };
|
41 | }
|
42 |
|
43 | import { __decorate } from "tslib";
|
44 | import React from 'react';
|
45 | import moment from 'moment';
|
46 | import classNames from 'classnames';
|
47 | import { action, computed, observable } from 'mobx';
|
48 | import { observer } from 'mobx-react';
|
49 | import noop from 'lodash/noop';
|
50 | import autobind from '../_util/autobind';
|
51 | import { TimeUnit, ViewMode } from './enum';
|
52 | import DaysView, { alwaysValidDate } from './DaysView';
|
53 | import { FieldType } from '../data-set/enum';
|
54 | import { $l } from '../locale-context';
|
55 | import { stopEvent } from '../_util/EventManager';
|
56 | var stepMapping = (_stepMapping = {}, _defineProperty(_stepMapping, TimeUnit.hour, 'hour'), _defineProperty(_stepMapping, TimeUnit.minute, 'minute'), _defineProperty(_stepMapping, TimeUnit.second, 'second'), _stepMapping);
|
57 |
|
58 | var TimesView =
|
59 |
|
60 | function (_DaysView) {
|
61 | _inherits(TimesView, _DaysView);
|
62 |
|
63 | var _super = _createSuper(TimesView);
|
64 |
|
65 | function TimesView() {
|
66 | _classCallCheck(this, TimesView);
|
67 |
|
68 | return _super.apply(this, arguments);
|
69 | }
|
70 |
|
71 | _createClass(TimesView, [{
|
72 | key: "getViewClassName",
|
73 | value: function getViewClassName() {
|
74 | var prefixCls = this.prefixCls;
|
75 | return "".concat(prefixCls, "-time");
|
76 | }
|
77 | }, {
|
78 | key: "savePanel",
|
79 | value: function savePanel(node) {
|
80 | this.panel = node;
|
81 | }
|
82 | }, {
|
83 | key: "getObservableProps",
|
84 | value: function getObservableProps(props, context) {
|
85 | return _objectSpread({}, _get(_getPrototypeOf(TimesView.prototype), "getObservableProps", this).call(this, props, context), {
|
86 | format: props.format
|
87 | });
|
88 | }
|
89 | }, {
|
90 | key: "componentDidMount",
|
91 | value: function componentDidMount() {
|
92 | _get(_getPrototypeOf(TimesView.prototype), "componentDidMount", this).call(this);
|
93 |
|
94 | if (this.panel) {
|
95 |
|
96 | this.panel.addEventListener('wheel', this.handleWheel, {
|
97 | passive: false
|
98 | });
|
99 | }
|
100 | }
|
101 | }, {
|
102 | key: "componentWillUnmount",
|
103 | value: function componentWillUnmount() {
|
104 | if (this.panel) {
|
105 | this.panel.removeEventListener('wheel', this.handleWheel);
|
106 | }
|
107 | }
|
108 | }, {
|
109 | key: "handleDateTimeSelect",
|
110 | value: function handleDateTimeSelect() {
|
111 | this.changeViewMode(ViewMode.dateTime);
|
112 | }
|
113 | }, {
|
114 | key: "handleKeyDownHome",
|
115 | value: function handleKeyDownHome(e) {
|
116 | this.handleKeyDownPageUp(e);
|
117 | }
|
118 | }, {
|
119 | key: "handleKeyDownEnd",
|
120 | value: function handleKeyDownEnd(e) {
|
121 | this.handleKeyDownPageDown(e);
|
122 | }
|
123 | }, {
|
124 | key: "handleKeyDownLeft",
|
125 | value: function handleKeyDownLeft(e) {
|
126 | stopEvent(e);
|
127 |
|
128 | if (e.altKey) {
|
129 | if (this.props.mode !== ViewMode.time) {
|
130 | this.changeViewMode(ViewMode.dateTime);
|
131 | }
|
132 | } else {
|
133 | this.changeUnit(this.getPrevUnit());
|
134 | }
|
135 | }
|
136 | }, {
|
137 | key: "handleKeyDownRight",
|
138 | value: function handleKeyDownRight(e) {
|
139 | stopEvent(e);
|
140 |
|
141 | if (!e.altKey) {
|
142 | this.changeUnit(this.getNextUnit());
|
143 | }
|
144 | }
|
145 | }, {
|
146 | key: "handleKeyDownUp",
|
147 | value: function handleKeyDownUp(e) {
|
148 | stopEvent(e);
|
149 | var unit = this.getCurrentUnit();
|
150 |
|
151 | if (unit === TimeUnit.a) {
|
152 | this.changeSelectedDate(this.getCloneDate().subtract(12, TimeUnit.hour));
|
153 | } else {
|
154 | var step = this.props.step;
|
155 | var unitStep = step[stepMapping[unit]] || 1;
|
156 | var date = this.getCloneDate();
|
157 | var parentUnit = unit === TimeUnit.second ? TimeUnit.minute : unit === TimeUnit.minute ? TimeUnit.hour : null;
|
158 |
|
159 | if (parentUnit) {
|
160 | var parentStep = step[stepMapping[parentUnit]];
|
161 |
|
162 | if (parentStep) {
|
163 | var preValue = date.get(parentUnit);
|
164 | date.subtract(unitStep, unit);
|
165 |
|
166 | if (preValue !== date.get(parentUnit)) {
|
167 | date.subtract(parentStep - 1, parentUnit);
|
168 | }
|
169 |
|
170 | this.changeSelectedDate(date);
|
171 | return;
|
172 | }
|
173 | }
|
174 |
|
175 | this.changeSelectedDate(date.subtract(unitStep, unit));
|
176 | }
|
177 | }
|
178 | }, {
|
179 | key: "handleKeyDownDown",
|
180 | value: function handleKeyDownDown(e) {
|
181 | stopEvent(e);
|
182 | var unit = this.getCurrentUnit();
|
183 |
|
184 | if (unit === TimeUnit.a) {
|
185 | this.changeSelectedDate(this.getCloneDate().add(12, TimeUnit.hour));
|
186 | } else {
|
187 | var step = this.props.step;
|
188 | var unitStep = step[stepMapping[unit]] || 1;
|
189 | var date = this.getCloneDate();
|
190 | var parentUnit = unit === TimeUnit.second ? TimeUnit.minute : unit === TimeUnit.minute ? TimeUnit.hour : null;
|
191 |
|
192 | if (parentUnit) {
|
193 | var parentStep = step[stepMapping[parentUnit]];
|
194 |
|
195 | if (parentStep) {
|
196 | var preValue = date.get(parentUnit);
|
197 | date.add(unitStep, unit);
|
198 |
|
199 | if (preValue !== date.get(parentUnit)) {
|
200 | date.add(parentStep - 1, parentUnit);
|
201 | }
|
202 |
|
203 | this.changeSelectedDate(date);
|
204 | return;
|
205 | }
|
206 | }
|
207 |
|
208 | this.changeSelectedDate(date.add(unitStep, unit));
|
209 | }
|
210 | }
|
211 | }, {
|
212 | key: "handleKeyDownPageUp",
|
213 | value: function handleKeyDownPageUp(e) {
|
214 | stopEvent(e);
|
215 | var unit = this.getCurrentUnit();
|
216 |
|
217 | if (unit === TimeUnit.a) {
|
218 | this.changeSelectedDate(this.getCloneDate().set(TimeUnit.hour, 0));
|
219 | } else {
|
220 | this.changeSelectedDate(this.getCloneDate().set(unit, 0));
|
221 | }
|
222 | }
|
223 | }, {
|
224 | key: "handleKeyDownPageDown",
|
225 | value: function handleKeyDownPageDown(e) {
|
226 | stopEvent(e);
|
227 | var unit = this.getCurrentUnit();
|
228 |
|
229 | if (unit === TimeUnit.a) {
|
230 | this.changeSelectedDate(this.getCloneDate().set(TimeUnit.hour, 12));
|
231 | } else {
|
232 | var step = this.props.step;
|
233 | var unitStep = step[stepMapping[unit]] || 1;
|
234 | var size = unit === TimeUnit.hour ? this.use12Hours ? 12 : 24 : 60;
|
235 | this.changeSelectedDate(this.getCloneDate().set(unit, size - unitStep));
|
236 | }
|
237 | }
|
238 | }, {
|
239 | key: "handleTimeCellClick",
|
240 | value: function handleTimeCellClick(date, unit) {
|
241 | this.changeUnit(unit);
|
242 | this.changeSelectedDate(date);
|
243 | }
|
244 | }, {
|
245 | key: "handleWheel",
|
246 | value: function handleWheel(e) {
|
247 | e.preventDefault();
|
248 |
|
249 | if (e.deltaY > 0) {
|
250 | this.handleKeyDownDown(e);
|
251 | } else if (e.deltaY < 0) {
|
252 | this.handleKeyDownUp(e);
|
253 | }
|
254 | }
|
255 | }, {
|
256 | key: "renderHeader",
|
257 | value: function renderHeader() {
|
258 | var prefixCls = this.prefixCls,
|
259 | _this$props = this.props,
|
260 | date = _this$props.date,
|
261 | mode = _this$props.mode,
|
262 | format = this.observableProps.format;
|
263 |
|
264 | if (mode === ViewMode.time) {
|
265 | return React.createElement("div", {
|
266 | className: "".concat(prefixCls, "-header")
|
267 | }, React.createElement("span", {
|
268 | className: "".concat(prefixCls, "-view-select")
|
269 | }, date.format(format)));
|
270 | }
|
271 |
|
272 | return React.createElement("div", {
|
273 | className: "".concat(prefixCls, "-header")
|
274 | }, React.createElement("a", {
|
275 | className: "".concat(prefixCls, "-view-select"),
|
276 | onClick: this.handleMonthSelect
|
277 | }, date.localeData().monthsShort(date)), React.createElement("a", {
|
278 | className: "".concat(prefixCls, "-view-select"),
|
279 | onClick: this.handleDateTimeSelect
|
280 | }, date.date()), React.createElement("a", {
|
281 | className: "".concat(prefixCls, "-view-select"),
|
282 | onClick: this.handleYearSelect
|
283 | }, date.year()));
|
284 | }
|
285 | }, {
|
286 | key: "renderFooter",
|
287 | value: function renderFooter() {
|
288 | var prefixCls = this.prefixCls,
|
289 | disabledNow = this.props.disabledNow;
|
290 | var footerProps = {
|
291 | className: classNames("".concat(prefixCls, "-footer-now-btn"), _defineProperty({}, "".concat(prefixCls, "-now-disabled"), disabledNow)),
|
292 | onClick: !disabledNow ? this.choose.bind(this, moment()) : noop
|
293 | };
|
294 | return React.createElement("div", {
|
295 | className: "".concat(prefixCls, "-footer")
|
296 | }, React.createElement("a", _extends({}, footerProps), $l('DatePicker', 'now')), React.createElement("a", {
|
297 | className: "".concat(prefixCls, "-footer-view-select"),
|
298 | onClick: this.choose.bind(this, this.props.date)
|
299 | }, $l('DatePicker', 'ok')));
|
300 | }
|
301 | }, {
|
302 | key: "renderPanel",
|
303 | value: function renderPanel() {
|
304 | var className = this.getPanelClass();
|
305 | return React.createElement("div", {
|
306 | ref: this.savePanel,
|
307 | className: className
|
308 | }, React.createElement("div", {
|
309 | className: "".concat(className, "-inner")
|
310 | }, this.renderPanelBody()));
|
311 | }
|
312 | }, {
|
313 | key: "renderPanelBody",
|
314 | value: function renderPanelBody() {
|
315 | var showHour = this.showHour,
|
316 | showMinute = this.showMinute,
|
317 | showSecond = this.showSecond,
|
318 | use12Hours = this.use12Hours,
|
319 | activeStyle = this.activeStyle;
|
320 | return [showHour && this.getTimeBar(TimeUnit.hour), showMinute && this.getTimeBar(TimeUnit.minute), showSecond && this.getTimeBar(TimeUnit.second), use12Hours && this.getTimeBar(TimeUnit.a), React.createElement("div", {
|
321 | key: "active",
|
322 | style: activeStyle,
|
323 | className: "".concat(this.prefixCls, "-time-focus-active")
|
324 | })];
|
325 | }
|
326 | }, {
|
327 | key: "renderCell",
|
328 | value: function renderCell(props) {
|
329 | return React.createElement("li", _extends({}, props));
|
330 | }
|
331 | }, {
|
332 | key: "getTimeBar",
|
333 | value: function getTimeBar(unit) {
|
334 | var prefixCls = this.prefixCls,
|
335 | use12Hours = this.use12Hours,
|
336 | _this$props2 = this.props,
|
337 | date = _this$props2.date,
|
338 | _this$props2$renderer = _this$props2.renderer,
|
339 | renderer = _this$props2$renderer === void 0 ? this.renderCell : _this$props2$renderer,
|
340 | _this$props2$isValidD = _this$props2.isValidDate,
|
341 | isValidDate = _this$props2$isValidD === void 0 ? alwaysValidDate : _this$props2$isValidD,
|
342 | step = _this$props2.step,
|
343 | format = this.observableProps.format;
|
344 | var isUpperCase = format.indexOf('A') > -1;
|
345 | var items = [];
|
346 | var selected = date.clone();
|
347 | var finalUnit = unit === TimeUnit.a ? TimeUnit.hour : unit;
|
348 | var selectedValue = selected.get(finalUnit);
|
349 | var size = unit === TimeUnit.a ? 13 : unit === TimeUnit.hour ? use12Hours ? 12 : 24 : 60;
|
350 | var begin = unit === TimeUnit.a ? selectedValue % 12 : unit === TimeUnit.hour && use12Hours && selectedValue > 11 ? 12 : 0;
|
351 | var pre = date.clone().set(finalUnit, begin);
|
352 | var last = pre.clone().add(size, finalUnit);
|
353 |
|
354 | while (pre.isBefore(last)) {
|
355 | var _classNames2;
|
356 |
|
357 | var current = pre.clone();
|
358 | var isDisabled = !isValidDate(current, selected);
|
359 | var text = unit === TimeUnit.a ? current.format(isUpperCase ? 'A' : 'a') : String(pre.get(unit) - (use12Hours && finalUnit === TimeUnit.hour && pre.get(unit) > 11 ? 12 : 0) || (use12Hours && finalUnit === TimeUnit.hour ? 12 : 0));
|
360 | var className = classNames("".concat(prefixCls, "-cell"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-selected"), unit === TimeUnit.a ? current.get(TimeUnit.hour) === selectedValue : current.isSame(selected, finalUnit)), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), isDisabled), _classNames2));
|
361 | var props = {
|
362 | key: text,
|
363 | className: className,
|
364 | children: React.createElement("div", {
|
365 | className: "".concat(prefixCls, "-cell-inner")
|
366 | }, text)
|
367 | };
|
368 |
|
369 | if (!isDisabled) {
|
370 | props.onClick = this.handleTimeCellClick.bind(this, current, unit);
|
371 | }
|
372 |
|
373 | items.push(renderer(props, text, current, selected));
|
374 | pre.add(unit === TimeUnit.a ? 12 : step[stepMapping[unit]] || 1, finalUnit);
|
375 | }
|
376 |
|
377 | var top = unit === TimeUnit.a ? -Math.floor(selectedValue / 12) : (unit === TimeUnit.hour && use12Hours ? -selectedValue % 12 : -selectedValue) / (step[stepMapping[unit]] || 1);
|
378 | return React.createElement("div", {
|
379 | key: unit,
|
380 | className: "".concat(prefixCls, "-time-list"),
|
381 | onMouseEnter: this.changeUnit.bind(this, unit),
|
382 | style: this.barStyle
|
383 | }, React.createElement("ul", {
|
384 | style: {
|
385 | top: "".concat((top + 4.5) * 100, "%")
|
386 | }
|
387 | }, items), React.createElement("div", {
|
388 | className: "".concat(prefixCls, "-time-focus")
|
389 | }));
|
390 | }
|
391 | }, {
|
392 | key: "getPanelClass",
|
393 | value: function getPanelClass() {
|
394 | return "".concat(this.prefixCls, "-time-panel");
|
395 | }
|
396 | }, {
|
397 | key: "getCurrentUnit",
|
398 | value: function getCurrentUnit() {
|
399 | var currentUnit = this.currentUnit;
|
400 | return currentUnit || this.timeUnitQueue[0];
|
401 | }
|
402 | }, {
|
403 | key: "getPrevUnit",
|
404 | value: function getPrevUnit() {
|
405 | var timeUnitQueue = this.timeUnitQueue;
|
406 | return timeUnitQueue[timeUnitQueue.indexOf(this.getCurrentUnit()) - 1];
|
407 | }
|
408 | }, {
|
409 | key: "getNextUnit",
|
410 | value: function getNextUnit() {
|
411 | var timeUnitQueue = this.timeUnitQueue;
|
412 | return timeUnitQueue[timeUnitQueue.indexOf(this.getCurrentUnit()) + 1];
|
413 | }
|
414 | }, {
|
415 | key: "changeUnit",
|
416 | value: function changeUnit(unit) {
|
417 | if (unit !== undefined && unit !== this.currentUnit) {
|
418 | this.currentUnit = unit;
|
419 | }
|
420 | }
|
421 | }, {
|
422 | key: "choose",
|
423 | value: function choose(date) {
|
424 | var mode = this.props.mode;
|
425 |
|
426 | _get(_getPrototypeOf(TimesView.prototype), "choose", this).call(this, date);
|
427 |
|
428 | if (mode !== ViewMode.time) {
|
429 | this.changeSelectedDate(date);
|
430 | this.changeViewMode(mode);
|
431 | }
|
432 | }
|
433 | }, {
|
434 | key: "showHour",
|
435 | get: function get() {
|
436 | var format = this.observableProps.format;
|
437 | return format.indexOf('H') > -1 || format.indexOf('h') > -1 || format.indexOf('k') > -1;
|
438 | }
|
439 | }, {
|
440 | key: "showMinute",
|
441 | get: function get() {
|
442 | var format = this.observableProps.format;
|
443 | return format.indexOf('m') > -1;
|
444 | }
|
445 | }, {
|
446 | key: "showSecond",
|
447 | get: function get() {
|
448 | var format = this.observableProps.format;
|
449 | return format.indexOf('s') > -1;
|
450 | }
|
451 | }, {
|
452 | key: "use12Hours",
|
453 | get: function get() {
|
454 | var format = this.observableProps.format;
|
455 | return format.indexOf('h') > -1 || format.indexOf('a') > -1 || format.indexOf('A') > -1;
|
456 | }
|
457 | }, {
|
458 | key: "timeUnitQueue",
|
459 | get: function get() {
|
460 | var showHour = this.showHour,
|
461 | showMinute = this.showMinute,
|
462 | showSecond = this.showSecond,
|
463 | use12Hours = this.use12Hours;
|
464 | var queue = [];
|
465 |
|
466 | if (showHour) {
|
467 | queue.push(TimeUnit.hour);
|
468 | }
|
469 |
|
470 | if (showMinute) {
|
471 | queue.push(TimeUnit.minute);
|
472 | }
|
473 |
|
474 | if (showSecond) {
|
475 | queue.push(TimeUnit.second);
|
476 | }
|
477 |
|
478 | if (use12Hours) {
|
479 | queue.push(TimeUnit.a);
|
480 | }
|
481 |
|
482 | return queue;
|
483 | }
|
484 | }, {
|
485 | key: "barStyle",
|
486 | get: function get() {
|
487 | return {
|
488 | width: "".concat(100 / this.timeUnitQueue.length, "%")
|
489 | };
|
490 | }
|
491 | }, {
|
492 | key: "activeStyle",
|
493 | get: function get() {
|
494 | var timeUnitQueue = this.timeUnitQueue;
|
495 | var width = 100 / timeUnitQueue.length;
|
496 | return {
|
497 | width: "".concat(width, "%"),
|
498 | left: "".concat(timeUnitQueue.indexOf(this.getCurrentUnit()) * width, "%")
|
499 | };
|
500 | }
|
501 | }]);
|
502 |
|
503 | return TimesView;
|
504 | }(DaysView);
|
505 |
|
506 | TimesView.displayName = 'TimesView';
|
507 | TimesView.type = FieldType.time;
|
508 |
|
509 | __decorate([observable], TimesView.prototype, "currentUnit", void 0);
|
510 |
|
511 | __decorate([computed], TimesView.prototype, "showHour", null);
|
512 |
|
513 | __decorate([computed], TimesView.prototype, "showMinute", null);
|
514 |
|
515 | __decorate([computed], TimesView.prototype, "showSecond", null);
|
516 |
|
517 | __decorate([computed], TimesView.prototype, "use12Hours", null);
|
518 |
|
519 | __decorate([computed], TimesView.prototype, "timeUnitQueue", null);
|
520 |
|
521 | __decorate([computed], TimesView.prototype, "barStyle", null);
|
522 |
|
523 | __decorate([computed], TimesView.prototype, "activeStyle", null);
|
524 |
|
525 | __decorate([autobind], TimesView.prototype, "savePanel", null);
|
526 |
|
527 | __decorate([autobind], TimesView.prototype, "handleDateTimeSelect", null);
|
528 |
|
529 | __decorate([autobind], TimesView.prototype, "handleWheel", null);
|
530 |
|
531 | __decorate([autobind], TimesView.prototype, "renderCell", null);
|
532 |
|
533 | __decorate([action], TimesView.prototype, "changeUnit", null);
|
534 |
|
535 | TimesView = __decorate([observer], TimesView);
|
536 | export default TimesView;
|
537 |
|