@progress/kendo-react-dateinputs
Version:
KendoReact Date Inputs package
223 lines • 9.51 kB
JavaScript
;
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 PropTypes = require("prop-types");
var kendo_date_math_1 = require("@progress/kendo-date-math");
var kendo_react_common_1 = require("@progress/kendo-react-common");
var kendo_react_intl_1 = require("@progress/kendo-react-intl");
var messages_1 = require("../messages");
var utils_1 = require("../utils");
var utils_2 = require("./utils");
var TimePart_1 = require("./TimePart");
/**
* @hidden
*/
var Direction;
(function (Direction) {
Direction[Direction["Left"] = 0] = "Left";
Direction[Direction["Right"] = 1] = "Right";
})(Direction = exports.Direction || (exports.Direction = {}));
/**
* @hidden
*/
var TimeSelector = /** @class */ (function (_super) {
__extends(TimeSelector, _super);
function TimeSelector(props) {
var _this = _super.call(this, props) || this;
_this.focusActiveList = function () {
if (!_this.timePart) {
return;
}
_this.timePart.focus();
};
_this.handleKeyDown = function (event) {
var keyCode = event.keyCode;
switch (keyCode) {
case kendo_react_common_1.Keys.enter:
if (!_this.hasActiveButton()) {
_this.handleAccept(event);
}
return;
default:
return;
}
};
_this.handleAccept = function (event) {
var value = _this.mergeValue(kendo_date_math_1.cloneDate(_this.value || utils_2.getNow()), _this.current);
_this.setState({ value: value });
_this.valueDuringOnChange = value;
var onChange = _this.props.onChange;
if (onChange) {
onChange.call(undefined, {
syntheticEvent: event,
nativeEvent: event.nativeEvent,
value: _this.value,
target: _this
});
}
_this.valueDuringOnChange = undefined;
};
_this.handleReject = function (event) {
_this.setState({ current: _this.value });
var onReject = _this.props.onReject;
if (onReject) {
onReject.call(undefined, event);
}
};
_this.handleNowClick = function (event) {
var now = _this.mergeValue(kendo_date_math_1.cloneDate(_this.value || utils_2.getNow()), utils_2.getNow());
_this.setState({
current: now,
value: now
});
_this.valueDuringOnChange = now;
var onChange = _this.props.onChange;
if (onChange) {
onChange.call(undefined, {
syntheticEvent: event,
nativeEvent: event.nativeEvent,
value: _this.value,
target: _this
});
}
_this.valueDuringOnChange = undefined;
};
_this.handleChange = function (candidate) {
_this.setState({ current: candidate });
};
_this.dateFormatParts = _this.intl.splitDateFormat(_this.props.format || TimeSelector.defaultProps.format);
_this.mergeValue = utils_2.valueMerger(utils_2.generateGetters(_this.dateFormatParts));
_this.hasActiveButton = _this.hasActiveButton.bind(_this);
_this.state = {
current: _this.props.value || utils_1.MIDNIGHT_DATE,
value: _this.props.value || TimeSelector.defaultProps.value
};
return _this;
}
Object.defineProperty(TimeSelector.prototype, "element", {
/**
* @hidden
*/
get: function () {
return this._element;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimeSelector.prototype, "value", {
get: function () {
var value = this.valueDuringOnChange !== undefined
? this.valueDuringOnChange
: this.props.value !== undefined
? this.props.value
: this.state.value;
return (value !== null)
? kendo_date_math_1.cloneDate(value)
: null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimeSelector.prototype, "intl", {
get: function () {
return kendo_react_intl_1.provideIntlService(this);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TimeSelector.prototype, "current", {
get: function () {
return this.state.current !== null
? kendo_date_math_1.cloneDate(this.state.current)
: null;
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
TimeSelector.prototype.componentWillUnmount = function () {
clearTimeout(this.nextTickId);
};
/**
* @hidden
*/
TimeSelector.prototype.render = function () {
var _this = this;
var _a = this.props, format = _a.format, cancelButton = _a.cancelButton, disabled = _a.disabled, tabIndex = _a.tabIndex, className = _a.className, smoothScroll = _a.smoothScroll, min = _a.min, max = _a.max, boundRange = _a.boundRange, nowButton = _a.nowButton, steps = _a.steps;
var localizationService = kendo_react_intl_1.provideLocalizationService(this);
var cancelMessage = localizationService.toLanguageString(messages_1.timePickerCancel, messages_1.messages[messages_1.timePickerCancel]);
var setMessage = localizationService.toLanguageString(messages_1.timePickerSet, messages_1.messages[messages_1.timePickerSet]);
return (React.createElement("div", { ref: function (el) { _this._element = el; }, tabIndex: !disabled ? tabIndex || 0 : undefined, className: kendo_react_common_1.classNames('k-timeselector k-reset', className, {
'k-state-disabled': disabled
}), onKeyDown: this.handleKeyDown },
React.createElement(TimePart_1.TimePart, { ref: function (el) { _this.timePart = el; }, value: this.current, onChange: this.handleChange, onNowClick: this.handleNowClick, format: format, smoothScroll: smoothScroll, min: min, max: max, boundRange: boundRange, disabled: disabled, nowButton: nowButton, steps: steps }),
React.createElement("div", { className: "k-time-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: "k-time-accept k-button k-primary", onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
};
TimeSelector.prototype.nextTick = function (f) {
// XXX: use setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
// XXX: https://github.com/facebook/react/issues/3751
clearTimeout(this.nextTickId);
this.nextTickId = setTimeout(function () { return f(); });
};
TimeSelector.prototype.hasActiveButton = function () {
if (!this._acceptButton) {
return false;
}
return document.activeElement === this._acceptButton
|| document.activeElement === this._cancelButton;
};
TimeSelector.propTypes = {
cancelButton: PropTypes.bool,
className: PropTypes.string,
disabled: PropTypes.bool,
format: PropTypes.string,
max: PropTypes.instanceOf(Date),
min: PropTypes.instanceOf(Date),
nowButton: PropTypes.bool,
steps: PropTypes.shape({
hour: PropTypes.number,
minute: PropTypes.number,
second: PropTypes.number
}),
smoothScroll: PropTypes.bool,
tabIndex: PropTypes.number,
value: PropTypes.instanceOf(Date)
};
TimeSelector.defaultProps = {
value: null,
disabled: false,
cancelButton: true,
format: 't',
min: utils_1.MIN_TIME,
max: utils_1.MAX_TIME,
boundRange: false
};
return TimeSelector;
}(React.Component));
exports.TimeSelector = TimeSelector;
kendo_react_intl_1.registerForIntl(TimeSelector);
kendo_react_intl_1.registerForLocalization(TimeSelector);
//# sourceMappingURL=TimeSelector.js.map