@progress/kendo-react-dateinputs
Version:
KendoReact Date Inputs package
201 lines • 10.4 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var kendo_react_intl_1 = require("@progress/kendo-react-intl");
var messages_1 = require("../messages");
var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
var Calendar_1 = require("../calendar/components/Calendar");
var TimePart_1 = require("../timepicker/TimePart");
var utils_1 = require("../utils");
var kendo_date_math_1 = require("@progress/kendo-date-math");
var kendo_react_common_1 = require("@progress/kendo-react-common");
var defaults_1 = require("../defaults");
var utils_2 = require("../timepicker/utils");
/**
* @hidden
*/
var DateTimeSelector = /** @class */ (function (_super) {
__extends(DateTimeSelector, _super);
function DateTimeSelector(props) {
var _this = _super.call(this, props) || this;
_this.focus = function () {
// Async to avoid stealing the focus from the DateInput on close
Promise.resolve().then(function () {
if (_this.state.tab === 'time' && _this._timePart) {
_this._timePart.focus();
}
if (_this.state.tab === 'date' && _this._calendar && _this._calendar.element) {
_this._calendar.element.focus();
}
});
};
_this.move = function (direction) {
if (direction === 'right' && _this.state.tab === 'time') {
return;
}
if (direction === 'left' && _this.state.tab === 'date') {
return;
}
var nextPart = direction === 'left' ? 'date' : 'time';
_this.shouldFocusPart = true;
_this.setState({ tab: nextPart });
};
_this.handleReject = function () {
_this.setState({ dateValue: _this.props.value, timeValue: _this.props.value || defaults_1.MIDNIGHT_DATE });
};
_this.handleAccept = function (event) {
if (!_this.state.dateValue || !_this.state.timeValue || !_this.hasDateValue) {
return;
}
var value = _this.mergeDate(_this.state.dateValue, _this.state.timeValue);
_this.props.onChange.call(undefined, {
syntheticEvent: event,
nativeEvent: event.nativeEvent,
value: value,
target: _this
});
};
_this.handleNowClick = function () {
_this.setState({ timeValue: utils_2.getNow() });
};
_this.handleCalendarValueChange = function (event) {
event.syntheticEvent.stopPropagation();
_this.setState({ dateValue: event.value, tab: 'time' });
_this.shouldFocusPart = true;
};
_this.handleTimeListContainerChange = function (candidate) {
_this.setState({ timeValue: candidate });
};
_this.handleDateClick = function (event) {
event.stopPropagation();
_this.move('left');
};
_this.handleTimeClick = function (event) {
event.stopPropagation();
_this.move('right');
};
_this.handleKeyDown = function (event) {
var keyCode = event.keyCode, altKey = event.altKey;
switch (keyCode) {
case kendo_react_common_1.Keys.enter:
if (!_this.hasActiveButton() && _this.hasDateValue) {
_this.handleAccept(event);
}
return;
case kendo_react_common_1.Keys.left:
if (!altKey) {
return;
}
_this.move('left');
return;
case kendo_react_common_1.Keys.right:
if (!altKey) {
return;
}
_this.move('right');
return;
default:
return;
}
};
_this.state = {
tab: 'date',
dateValue: _this.props.value,
timeValue: _this.props.value || defaults_1.MIDNIGHT_DATE
};
return _this;
}
Object.defineProperty(DateTimeSelector.prototype, "calendar", {
get: function () {
return this._calendar;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DateTimeSelector.prototype, "timePart", {
get: function () {
return this._timePart;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DateTimeSelector.prototype, "hasDateValue", {
get: function () {
return this.state.dateValue !== null;
},
enumerable: true,
configurable: true
});
DateTimeSelector.prototype.componentDidUpdate = function () {
if (this.shouldFocusPart) {
this.focus();
}
this.shouldFocusPart = false;
};
DateTimeSelector.prototype.render = function () {
var _this = this;
var _a = this.props, disabled = _a.disabled, cancelButton = _a.cancelButton, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, format = _a.format;
var rootClassName = kendo_react_common_1.classNames({
'k-date-tab': this.state.tab === 'date',
'k-time-tab': this.state.tab === 'time',
'k-state-disabled': disabled
}, 'k-datetime-wrap');
var setButtonClassName = kendo_react_common_1.classNames({ 'k-state-disabled': !this.hasDateValue }, 'k-time-accept k-button k-primary');
var localizationService = kendo_react_intl_1.provideLocalizationService(this);
var dateMessage = localizationService.toLanguageString(messages_1.date, messages_1.messages[messages_1.date]);
var timeMessage = localizationService.toLanguageString(messages_1.time, messages_1.messages[messages_1.time]);
var cancelMessage = localizationService.toLanguageString(messages_1.dateTimePickerCancel, messages_1.messages[messages_1.dateTimePickerCancel]);
var setMessage = localizationService.toLanguageString(messages_1.dateTimePickerSet, messages_1.messages[messages_1.dateTimePickerSet]);
return (React.createElement("div", { onKeyDown: this.handleKeyDown, className: rootClassName, tabIndex: -1 },
React.createElement("div", { className: "k-datetime-buttongroup" },
React.createElement(kendo_react_buttons_1.ButtonGroup, { width: "100%" },
React.createElement(kendo_react_buttons_1.Button, { selected: this.state.tab === 'date', togglable: true, onClick: this.handleDateClick }, dateMessage),
React.createElement(kendo_react_buttons_1.Button, { selected: this.state.tab === 'time', togglable: true, onClick: this.handleTimeClick }, timeMessage))),
React.createElement("div", { className: "k-datetime-selector" },
React.createElement("div", { className: "k-datetime-calendar-wrap" }, React.createElement(Calendar_1.Calendar, { key: 0, disabled: disabled || this.state.tab !== 'date', ref: function (calendar) { _this._calendar = calendar; }, value: this.state.dateValue, min: min, max: max, weekNumber: weekNumber, focusedDate: focusedDate, onChange: this.handleCalendarValueChange, navigation: false })),
React.createElement("div", { className: "k-datetime-time-wrap" }, React.createElement(TimePart_1.TimePart, { key: 1, onNowClick: this.handleNowClick, disabled: disabled || this.state.tab !== 'time', ref: function (timePart) { _this._timePart = timePart; }, min: this.normalizeRange(min, this.state.dateValue) || utils_1.MIN_TIME, max: this.normalizeRange(max, this.state.dateValue) || utils_1.MAX_TIME, value: this.state.timeValue, format: format, onChange: this.handleTimeListContainerChange }))),
React.createElement("div", { className: "k-datetime-footer k-action-buttons" },
cancelButton && React.createElement("button", __assign({ ref: function (btn) { _this._cancelButton = btn; }, className: "k-button k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
React.createElement("button", __assign({ ref: function (btn) { _this._acceptButton = btn; }, className: setButtonClassName, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
};
DateTimeSelector.prototype.normalizeRange = function (candidate, value) {
return kendo_date_math_1.isEqualDate(candidate, value || utils_1.getToday())
? candidate
: null;
};
DateTimeSelector.prototype.hasActiveButton = function () {
if (!this._acceptButton) {
return false;
}
return document.activeElement === this._acceptButton
|| document.activeElement === this._cancelButton;
};
DateTimeSelector.prototype.mergeTime = function (current, candidate) {
return current && candidate ? utils_1.setTime(candidate, current) : candidate;
};
DateTimeSelector.prototype.mergeDate = function (candidate, value) {
return candidate ? utils_1.setTime(candidate || utils_1.getToday(), value) : value;
};
return DateTimeSelector;
}(React.Component));
exports.DateTimeSelector = DateTimeSelector;
kendo_react_intl_1.registerForLocalization(DateTimeSelector);
//# sourceMappingURL=DateTimeSelector.js.map