@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
264 lines (263 loc) • 10.6 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as i from "react";
import { provideLocalizationService as R, registerForLocalization as M } from "@progress/kendo-react-intl";
import { dateTimePickerCancel as D, messages as f, dateTimePickerSet as _, date as T, time as E } from "../messages/index.mjs";
import { Button as g, ButtonGroup as x } from "@progress/kendo-react-buttons";
import { Calendar as A } from "../calendar/components/Calendar.mjs";
import { TimePart as z } from "../timepicker/TimePart.mjs";
import { MIDNIGHT_DATE as v, MIN_TIME as F, MAX_TIME as L, getToday as V, setTime as P } from "../utils.mjs";
import { isEqualDate as k } from "@progress/kendo-date-math";
import { classNames as l, uDateTimePicker as u, uTime as B, Keys as h, getActiveElement as I } from "@progress/kendo-react-common";
import { getNow as w } from "../timepicker/utils.mjs";
const y = class y extends i.Component {
constructor(a) {
super(a), this._calendar = null, this._timePart = null, this._cancelButton = null, this._acceptButton = null, this._dateButtonRef = null, this._calendarWrap = null, this.shouldFocusPart = !1, this.focus = (t) => {
Promise.resolve().then(() => {
this.state.tab === "time" && this._timePart && this._timePart.focus(t);
const e = this.calendarElement();
this.state.tab === "date" && e && e.focus(t);
});
}, this.calendarElement = () => this._calendar && this._calendar.element || this._calendarWrap && this._calendarWrap.querySelector(".k-calendar"), this.move = (t) => {
if (t === "right" && this.state.tab === "time" || t === "left" && this.state.tab === "date")
return;
const e = t === "left" ? "date" : "time";
this.shouldFocusPart = !0, this.setState({ tab: e });
}, this.dateTimeFooter = () => {
const { cancelButton: t, unstyled: e } = this.props, s = e && e.uDateTimePicker, n = this.localizationService.toLanguageString(D, f[D]), r = this.localizationService.toLanguageString(_, f[_]);
return /* @__PURE__ */ i.createElement("div", { className: l(u.timeFooter({ c: s })) }, t && /* @__PURE__ */ i.createElement(
g,
{
type: "button",
ref: (o) => {
this._cancelButton = o;
},
className: l(B.cancel({ c: s })),
onClick: this.handleReject,
onKeyDown: this.handleCancelKeyDown,
title: n,
"aria-label": n
},
n
), /* @__PURE__ */ i.createElement(
g,
{
type: "button",
themeColor: "primary",
ref: (o) => {
this._acceptButton = o;
},
className: l(B.accept({ c: s })),
disabled: !this.hasDateValue,
onClick: this.handleAccept,
onKeyDown: this.handleSetKeyDown,
title: r,
"aria-label": r
},
r
));
}, this.handleReject = (t) => {
this.setState({ dateValue: this.props.value, timeValue: this.props.value || v });
const e = this.mergeDate(this.props.value, this.props.value || v);
if (this.props.onReject) {
const s = {
nativeEvent: t.nativeEvent,
syntheticEvent: t,
target: this,
value: e
};
this.props.onReject.call(void 0, s);
}
}, this.handleAccept = (t, e) => {
if (!this.state.dateValue || !this.state.timeValue || !this.hasDateValue)
return;
const s = this.mergeDate(this.state.dateValue, e || this.state.timeValue);
this.props.onChange.call(void 0, {
syntheticEvent: t,
nativeEvent: t.nativeEvent,
value: s,
target: this
});
}, this.handleNowClick = (t) => {
this.setState({ timeValue: w() }), this.handleAccept(t, w());
}, this.handleCalendarValueChange = (t) => {
t.syntheticEvent.stopPropagation(), this.setState({ dateValue: t.value, tab: "time" }), this.shouldFocusPart = !0;
}, this.handleTimeListContainerChange = (t) => {
this.setState({ timeValue: t });
}, this.handleDateClick = (t) => {
t.stopPropagation(), this.move("left");
}, this.handleTimeClick = (t) => {
t.stopPropagation(), this.move("right");
}, this.handleKeyDown = (t) => {
const { keyCode: e, altKey: s } = t;
if (!this.props.disabled)
switch (e) {
case h.enter:
!this.hasActiveButton() && this.hasDateValue && this.handleAccept(t);
return;
case h.left:
if (!s)
return;
this.move("left");
return;
case h.right:
if (!s)
return;
this.move("right");
return;
default:
return;
}
}, this.handleCancelKeyDown = (t) => {
const { keyCode: e } = t;
e === h.tab && this._dateButtonRef && this._dateButtonRef.element && !this.hasDateValue && (t.preventDefault(), this._dateButtonRef.element.focus());
}, this.handleSetKeyDown = (t) => {
const { keyCode: e } = t;
e === h.tab && this._dateButtonRef && this._dateButtonRef.element && (t.preventDefault(), this._dateButtonRef.element.focus());
}, this.handleDateKeyDown = (t) => {
var n, r, o, d;
const { keyCode: e, shiftKey: s } = t;
s && e === h.tab && (t.stopPropagation(), this.hasDateValue ? (d = (o = this._acceptButton) == null ? void 0 : o.element) == null || d.focus() : (r = (n = this._cancelButton) == null ? void 0 : n.element) == null || r.focus()), e === h.enter && (t.stopPropagation(), this.move("left"));
}, this.handleTimeKeyDown = (t) => {
const { keyCode: e } = t;
e === h.enter && (t.stopPropagation(), this.move("right"));
}, this.handleTimePartMount = (t) => {
this.setState({ timeValue: t });
}, this.state = {
tab: "date",
dateValue: this.props.value,
timeValue: this.props.value || v
};
}
get calendar() {
return this._calendar;
}
get timePart() {
return this._timePart;
}
get hasDateValue() {
return this.state.dateValue !== null;
}
get localizationService() {
return R(this);
}
componentDidUpdate(a, t) {
var e, s;
this.shouldFocusPart && this.focus({ preventScroll: !0 }), (((e = a.value) == null ? void 0 : e.getTime()) !== ((s = this.props.value) == null ? void 0 : s.getTime()) || this.state.tab !== t.tab && this.props.value) && this.setState((n) => ({
dateValue: a.value && this.props.value && k(a.value, this.props.value) ? n.dateValue : this.props.value,
timeValue: this.props.value || v
})), this.shouldFocusPart = !1;
}
render() {
const { disabled: a, min: t, max: e, weekNumber: s, focusedDate: n, format: r, mobileMode: o, footerActions: d, unstyled: p } = this.props, m = p && p.uDateTimePicker, S = l(
u.wrap({
c: m,
date: this.state.tab === "date",
time: this.state.tab === "time",
disabled: a
})
), K = this.localizationService.toLanguageString(T, f[T]), N = this.localizationService.toLanguageString(E, f[E]), C = {
min: t,
max: e,
weekNumber: s,
focusedDate: n,
disabled: a || this.state.tab !== "date",
value: this.state.dateValue,
onChange: this.handleCalendarValueChange,
navigation: !1,
tabIndex: a || this.state.tab !== "date" ? -1 : void 0,
mobileMode: o
};
return /* @__PURE__ */ i.createElement("div", { onKeyDown: this.handleKeyDown, className: S, tabIndex: -1 }, /* @__PURE__ */ i.createElement("div", { className: l(u.buttonGroup({ c: m })) }, /* @__PURE__ */ i.createElement(x, { width: "100%", unstyled: p }, /* @__PURE__ */ i.createElement(
g,
{
ref: (c) => this._dateButtonRef = c,
type: "button",
selected: this.state.tab === "date",
togglable: !0,
onClick: this.handleDateClick,
onKeyDown: this.handleDateKeyDown
},
K
), /* @__PURE__ */ i.createElement(
g,
{
type: "button",
selected: this.state.tab === "time",
togglable: !0,
onClick: this.handleTimeClick,
onKeyDown: this.handleTimeKeyDown
},
N
))), /* @__PURE__ */ i.createElement("div", { className: l(u.selector({ c: m })) }, /* @__PURE__ */ i.createElement(
"div",
{
className: l(u.calendarWrap({ c: m })),
ref: (c) => this._calendarWrap = c
},
this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...C }) : /* @__PURE__ */ i.createElement(
A,
{
key: this.state.tab,
ref: (c) => {
this._calendar = c;
},
...C
}
)
), /* @__PURE__ */ i.createElement("div", { className: l(u.timeWrap({ c: m })) }, /* @__PURE__ */ i.createElement("div", { className: l(u.timeSelector({ c: m, mobileMode: o })) }, /* @__PURE__ */ i.createElement(
z,
{
key: 1,
onNowClick: this.handleNowClick,
disabled: a || this.state.tab !== "time",
ref: (c) => {
this._timePart = c;
},
min: this.minTime || F,
max: this.maxTime || L,
steps: this.props.steps,
value: this.state.timeValue,
format: r,
onChange: this.handleTimeListContainerChange,
onMount: this.handleTimePartMount,
mobileMode: o,
unstyled: p
}
)))), d && this.dateTimeFooter());
}
get minTime() {
return this.props.minTime !== void 0 ? this.props.minTime : this.normalizeRange(this.props.min, this.state.dateValue);
}
get maxTime() {
return this.props.maxTime !== void 0 ? this.props.maxTime : this.normalizeRange(this.props.max, this.state.dateValue);
}
normalizeRange(a, t) {
return k(a, t || V()) ? a : null;
}
hasActiveButton() {
if (!this._acceptButton)
return !1;
const a = I(document);
return this._acceptButton && a === this._acceptButton.element || this._cancelButton && a === this._cancelButton.element;
}
mergeTime(a, t) {
return a && t ? P(t, a) : t;
}
mergeDate(a, t) {
return a ? P(a || V(), t) : t;
}
};
y.defaultProps = {
footerActions: !0
};
let b = y;
M(b);
export {
b as DateTimeSelector
};