@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
254 lines (253 loc) • 8.13 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 a from "react";
import t from "prop-types";
import { cloneDate as h } from "@progress/kendo-date-math";
import { Keys as u, classNames as m, uTimePicker as x, uTime as g, getActiveElement as A } from "@progress/kendo-react-common";
import { provideIntlService as K, provideLocalizationService as M, registerForIntl as R, registerForLocalization as F } from "@progress/kendo-react-intl";
import { timePickerCancel as y, messages as B, timePickerSet as D } from "../messages/index.mjs";
import { MIDNIGHT_DATE as L, MIN_TIME as j, MAX_TIME as z } from "../utils.mjs";
import { getNow as w, valueMerger as V, generateGetters as G } from "./utils.mjs";
import { TimePart as H } from "./TimePart.mjs";
import { Button as O } from "@progress/kendo-react-buttons";
const r = class r extends a.Component {
constructor(i) {
super(i), this._element = null, this._cancelButton = null, this._acceptButton = null, this.timePart = null, this.focusActiveList = () => {
this.timePart && this.timePart.focus({ preventScroll: !0 });
}, this.handleKeyDown = (e) => {
const { keyCode: n } = e;
switch (n) {
case u.enter:
this.hasActiveButton() || this.handleAccept(e);
return;
default:
return;
}
}, this.revertToNowButton = (e) => {
const { keyCode: n, shiftKey: o } = e;
!o && n === u.tab && (e.preventDefault(), this.props.nowButton !== !1 ? this.timePart && this.timePart.focus({ preventScroll: !0 }, !0) : this.timePart && this.timePart.focus({ preventScroll: !0 }));
}, this.handleNowKeyDown = (e) => {
var c;
const { keyCode: n, shiftKey: o } = e;
o && n === u.tab ? (e.preventDefault(), this._acceptButton && ((c = this._acceptButton.element) == null || c.focus({ preventScroll: !0 }))) : n === u.enter && (e.stopPropagation(), this.handleNowClick(e));
}, this.handleAccept = (e) => {
const n = this.mergeValue(
h(this.value || w()),
this.timePart ? this.timePart.value : this.current
);
this.setState({ value: n }), this.valueDuringOnChange = n;
const { onChange: o } = this.props;
o && o.call(void 0, {
syntheticEvent: e,
nativeEvent: e.nativeEvent,
value: this.value,
target: this
}), this.valueDuringOnChange = void 0;
}, this.handleReject = (e) => {
this.setState({ current: this.value });
const { onReject: n } = this.props;
n && n.call(void 0, e);
}, this.handleNowClick = (e) => {
const n = this.mergeValue(h(this.value || w()), w());
this.setState({
current: n,
value: n
}), this.valueDuringOnChange = n;
const { onChange: o } = this.props;
o && o.call(void 0, {
syntheticEvent: e,
nativeEvent: e.nativeEvent,
value: this.value,
target: this
}), this.valueDuringOnChange = void 0;
}, this.handleChange = (e) => {
this.setState({ current: e });
const { handleTimeChange: n } = this.props;
n && n.call(void 0, {
time: e
});
}, this.dateFormatParts = this.intl.splitDateFormat(this.props.format || r.defaultProps.format), this.mergeValue = V(G(this.dateFormatParts)), this.hasActiveButton = this.hasActiveButton.bind(this), this.state = {
current: this.props.value || L,
value: this.props.value || r.defaultProps.value
};
}
/**
* @hidden
*/
get element() {
return this._element;
}
get value() {
const i = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
return i !== null ? h(i) : null;
}
get intl() {
return K(this);
}
get current() {
return this.state.current !== null ? h(this.state.current) : null;
}
/**
* @hidden
*/
componentWillUnmount() {
clearTimeout(this.nextTickId);
}
/**
* @hidden
*/
render() {
const {
format: i,
cancelButton: e,
disabled: n,
tabIndex: o,
className: c,
smoothScroll: P,
min: N,
max: k,
boundRange: T,
nowButton: E,
steps: S,
show: _,
mobileMode: b,
unstyled: l
} = this.props, I = l && l.uTimePicker, d = l && l.uTime, C = M(this), f = C.toLanguageString(y, B[y]), v = C.toLanguageString(D, B[D]);
return /* @__PURE__ */ a.createElement(
"div",
{
ref: (s) => {
this._element = s;
},
tabIndex: n ? void 0 : o || 0,
className: m(
x.timeSelector({
c: I,
mobileMode: b,
disabled: n
}),
c
),
onKeyDown: this.handleKeyDown
},
/* @__PURE__ */ a.createElement(
H,
{
ref: (s) => {
this.timePart = s;
},
value: this.current,
onChange: this.handleChange,
onNowClick: this.handleNowClick,
format: i,
smoothScroll: P,
min: N,
max: k,
boundRange: T,
disabled: n,
nowButton: E,
steps: S,
show: _,
mobileMode: b,
onNowKeyDown: this.handleNowKeyDown,
unstyled: l
}
),
this.props.footer && /* @__PURE__ */ a.createElement("div", { className: m(g.footer({ c: d })) }, e && /* @__PURE__ */ a.createElement(
O,
{
type: "button",
ref: (s) => {
this._cancelButton = s;
},
className: m(g.cancel({ c: d })),
onClick: this.handleReject,
title: f,
"aria-label": f
},
f
), /* @__PURE__ */ a.createElement(
O,
{
type: "button",
ref: (s) => {
this._acceptButton = s;
},
className: m(g.accept({ c: d })),
themeColor: "primary",
onClick: this.handleAccept,
onKeyDown: this.revertToNowButton,
title: v,
"aria-label": v
},
v
))
);
}
nextTick(i) {
clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
}
hasActiveButton() {
if (!this._acceptButton || !this._acceptButton.element)
return !1;
const i = A(document);
return this._acceptButton && i === this._acceptButton.element || this._cancelButton && i === this._cancelButton.element;
}
};
r.propTypes = {
cancelButton: t.bool,
className: t.string,
disabled: t.bool,
format: t.oneOfType([
t.string,
t.shape({
skeleton: t.string,
pattern: t.string,
date: t.oneOf(["short", "medium", "long", "full"]),
time: t.oneOf(["short", "medium", "long", "full"]),
datetime: t.oneOf(["short", "medium", "long", "full"]),
era: t.oneOf(["narrow", "short", "long"]),
year: t.oneOf(["numeric", "2-digit"]),
month: t.oneOf(["numeric", "2-digit", "narrow", "short", "long"]),
day: t.oneOf(["numeric", "2-digit"]),
weekday: t.oneOf(["narrow", "short", "long"]),
hour: t.oneOf(["numeric", "2-digit"]),
hour12: t.bool,
minute: t.oneOf(["numeric", "2-digit"]),
second: t.oneOf(["numeric", "2-digit"]),
timeZoneName: t.oneOf(["short", "long"])
})
]),
max: t.instanceOf(Date),
min: t.instanceOf(Date),
nowButton: t.bool,
steps: t.shape({
hour: t.number,
minute: t.number,
second: t.number
}),
smoothScroll: t.bool,
tabIndex: t.number,
value: t.instanceOf(Date),
show: t.bool
}, r.defaultProps = {
value: null,
disabled: !1,
cancelButton: !0,
format: "t",
min: j,
max: z,
boundRange: !1,
footer: !0
};
let p = r;
R(p);
F(p);
export {
p as TimeSelector
};