@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
371 lines (370 loc) • 12.2 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 S from "prop-types";
import { createPropsContext as j, validatePackage as J, getLicenseMessage as Q, usePropsContext as Z, useDir as ee, Keys as m, useDraggable as te, classNames as ae, getTabIndex as V, WatermarkOverlay as re } from "@progress/kendo-react-common";
import { sliderDragTitle as $, messages as z } from "../messages/index.mjs";
import { useLocalization as ne } from "@progress/kendo-react-intl";
import { RANGE_ACTION as r, rangeReducer as le } from "./range-raducer.mjs";
import { packageMetadata as P } from "../package-metadata.mjs";
const se = (n, s, p) => {
const [c, i] = a.useState(n), e = a.useCallback(
(f) => {
const b = le(s.state || c, { ...f, ...s });
p && p(b, f.event), i(b);
},
[s, p]
);
return [c, e];
}, ce = j(), K = a.forwardRef((n, s) => {
const p = !J(P, { component: "RangeSlider" }), c = Q(P), i = Z(ce, n), e = {
step: y.step,
largeStep: y.largeStep,
defaultValue: y.defaultValue,
vertical: y.vertical,
disabled: y.disabled,
...i
}, f = a.useRef(null), b = a.useRef(null), A = a.useRef(null), w = a.useRef(null), T = a.useRef(null), H = a.useCallback(() => {
w.current && w.current.focus();
}, [w]);
a.useImperativeHandle(f, () => ({
element: b.current,
focus: H,
props: e
})), a.useImperativeHandle(s, () => f.current);
const g = a.useMemo(() => e.min, [e.min]), k = a.useMemo(() => e.max, [e.max]), N = a.useMemo(
() => e.step !== void 0 ? e.step : y.step,
[e.step, y.step]
), O = a.useMemo(
() => e.largeStep !== void 0 ? e.largeStep : y.largeStep,
[e.largeStep, y.largeStep]
), o = ee(b, e.dir), W = (t, u) => {
e.onChange && f.current && e.onChange.call(void 0, {
value: t,
target: f.current,
syntheticEvent: u
});
}, [E, L] = a.useState(""), [x, l] = se(
e.defaultValue || y.defaultValue,
{
min: g,
max: k,
step: N,
largeStep: O,
state: e.value
},
W
), d = a.useMemo(() => e.value || x, [e.value, x]), q = a.useRef(null), R = a.useRef(null), h = a.useMemo(() => (d.start - g) / (k - g) * 100, [d.start, g, k]), D = a.useMemo(() => (d.end - g) / (k - g) * 100, [d.end, g, k]), B = a.useMemo(
() => e.vertical ? { paddingTop: 0, height: "100%" } : {},
[e.vertical]
), G = a.useMemo(
() => e.vertical ? { marginTop: "0.5rem", marginBottom: "0.5rem" } : { marginLeft: "0.5rem", marginRight: "0.5rem" },
[e.vertical]
), M = ne(), C = a.useCallback(
(t) => {
if (!R.current)
return;
const u = R.current.getBoundingClientRect(), v = e.vertical ? u.bottom - t.clientY : o === "rtl" ? u.right - t.clientX : t.clientX - u.left, I = e.vertical ? u.height : u.width, _ = v / I;
return g + _ * (k - g);
},
[
R,
e.vertical,
o,
g,
k,
x.start,
x.end,
e.value && e.value.start,
e.value && e.value.end
]
), U = a.useCallback(
(t) => t <= d.start ? "start" : t >= d.end ? "end" : 2 * t < d.end + d.start ? "start" : "end",
[x.start, x.end, e.value && e.value.start, e.value && e.value.end]
), X = a.useCallback(
(t) => {
switch (t.keyCode) {
case m.right:
t.preventDefault(), l({
type: o === "rtl" ? r.decrease : r.increase,
key: "start",
event: t
});
break;
case m.up:
t.preventDefault(), l({ type: r.increase, key: "start", event: t });
break;
case m.left:
t.preventDefault(), l({
type: o === "rtl" ? r.increase : r.decrease,
key: "start",
event: t
});
break;
case m.down:
t.preventDefault(), l({ type: r.decrease, key: "start", event: t });
break;
case m.home:
t.preventDefault(), l({ type: r.min, key: "start", event: t });
break;
case m.end:
t.preventDefault(), l({ type: r.max, key: "start", event: t });
break;
case m.pageDown:
t.preventDefault(), l({
type: o === "rtl" ? r.increaseLarge : r.decreaseLarge,
key: "start",
event: t
});
break;
case m.pageUp:
t.preventDefault(), l({
type: o === "rtl" ? r.decreaseLarge : r.increaseLarge,
key: "start",
event: t
});
break;
}
},
[l]
), F = a.useCallback(
(t) => {
switch (t.keyCode) {
case m.right:
t.preventDefault(), l({
type: o === "rtl" ? r.decrease : r.increase,
key: "end",
event: t
});
break;
case m.up:
t.preventDefault(), l({ type: r.increase, key: "end", event: t });
break;
case m.left:
t.preventDefault(), l({
type: o === "rtl" ? r.increase : r.decrease,
key: "end",
event: t
});
break;
case m.down:
t.preventDefault(), l({ type: r.decrease, key: "end", event: t });
break;
case m.home:
t.preventDefault(), l({ type: r.min, key: "end", event: t });
break;
case m.end:
t.preventDefault(), l({ type: r.max, key: "end", event: t });
break;
case m.pageDown:
t.preventDefault(), l({
type: o === "rtl" ? r.increaseLarge : r.decreaseLarge,
key: "end",
event: t
});
break;
case m.pageUp:
t.preventDefault(), l({
type: o === "rtl" ? r.decreaseLarge : r.increaseLarge,
key: "end",
event: t
});
break;
}
},
[l, o]
), Y = a.useCallback(
(t) => {
const u = C(t), v = U(u);
L(v), v === "end" ? T.current.focus() : w.current.focus();
const I = v === "end" ? r.end : r.start;
l({ type: I, payload: u, event: t });
},
[e.vertical, g, k, l]
);
return te(
R,
{
onPress: Y,
onDrag: (t) => {
const u = C(t), v = E === "end" ? r.end : r.start;
l({ type: v, payload: u, event: t });
},
onRelease: (t) => {
const u = C(t), v = E === "end" ? r.end : r.start;
l({ type: v, payload: u, event: t }), L("");
}
},
{ autoScroll: !1 }
), /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
"div",
{
id: e.id,
style: e.style,
ref: b,
dir: o,
className: ae(
"k-slider",
{
"k-rtl": o === "rtl",
"k-disabled": e.disabled,
"k-slider-vertical": e.vertical,
"k-slider-horizontal": !e.vertical
},
e.className
)
},
/* @__PURE__ */ a.createElement(
"div",
{
ref: R,
className: "k-slider-track-wrap",
style: {
flexGrow: 1,
position: "relative",
touchAction: "none",
...G
}
},
e.children && /* @__PURE__ */ a.createElement("ul", { className: "k-reset k-slider-items", style: { ...B } }, a.Children.map(e.children, (t, u) => t && a.cloneElement(
t,
{
position: 100 * (t.props.position - e.min) / (e.max - e.min),
vertical: e.vertical,
firstTick: u === 0,
lastTick: u === a.Children.count(e.children) - 1
},
t.props.children
))),
/* @__PURE__ */ a.createElement(
"div",
{
ref: q,
className: "k-slider-track",
style: e.vertical ? { bottom: 0, height: "100%" } : { [o === "rtl" ? "right" : "left"]: 0, width: "100%" }
},
h !== null && D !== null && /* @__PURE__ */ a.createElement(
"div",
{
"data-selection": !0,
ref: A,
title: `${d.start} - ${d.end}`,
className: "k-slider-selection",
style: e.vertical ? { height: D - h + "%", bottom: h + "%" } : {
[o === "rtl" ? "right" : "left"]: h + "%",
width: D - h + "%"
}
}
),
/* @__PURE__ */ a.createElement(
"span",
{
ref: w,
role: "slider",
tabIndex: V(e.startTabIndex, e.disabled, void 0),
"aria-valuemin": g,
"aria-valuemax": Math.max(k, d.end),
"aria-valuenow": d.start,
"aria-disabled": e.disabled ? "true" : void 0,
"aria-valuetext": `${d.start} - ${d.end}`,
className: "k-draghandle k-draghandle-start",
title: M.toLanguageString($, z[$]),
style: e.vertical ? { bottom: "calc(" + h + "%)", zIndex: 1 } : o === "rtl" ? { right: "calc(" + h + "% - 13px)", zIndex: 1 } : { left: "calc(" + h + "%)", zIndex: 1 },
onKeyDown: X
}
),
/* @__PURE__ */ a.createElement(
"span",
{
ref: T,
role: "slider",
tabIndex: V(e.endTabIndex, e.disabled, void 0),
"aria-valuemin": Math.min(g, d.start),
"aria-valuemax": k,
"aria-valuenow": d.end,
"aria-disabled": e.disabled ? "true" : void 0,
"aria-valuetext": `${d.start} - ${d.end}`,
className: "k-draghandle k-draghandle-end",
title: M.toLanguageString($, z[$]),
style: e.vertical ? { bottom: "calc(" + D + "%)", zIndex: 1 } : o === "rtl" ? { right: "calc(" + D + "% - 13px)", zIndex: 1 } : { left: "calc(" + D + "%)", zIndex: 1 },
onKeyDown: F
}
)
)
)
), p && /* @__PURE__ */ a.createElement(re, { message: c }));
}), ie = {
value: (n, s, p) => {
if (n.value) {
const c = n.value.start, i = n.value.end, e = n.min, f = n.max;
if (c > i || c > f || c < e || i > f || i < e || i < c)
return new Error(
`Invalid prop + ${s} supplied to ${p}.
The { start, end } value must be between the min & max value and { start, end } must be start < end.
`
);
}
return null;
},
defaultValue: (n, s, p) => {
if (n.defaultValue) {
const c = n.defaultValue.start, i = n.defaultValue.end, e = n.min, f = n.max;
if (c > i || c > f || c < e || i > f || i < e || i < c)
return new Error(
`Invalid prop + ${s} supplied to ${p}.
The { start, end } value must be between the min & max value and { start, end } must be start < end.
`
);
}
return null;
},
onChange: S.func,
step: S.number,
min: (n, s, p) => {
const c = n[s], i = n.min, e = n.max;
return i === void 0 ? new Error(
`Invalid prop + ${s} supplied to ${p}.
${s} value can not be undefined.
`
) : c && i >= e ? new Error(
`Invalid prop + ${s} supplied to ${p}.
${s} value can not be equal to or bigger than the max value.
`
) : null;
},
max: (n, s, p) => {
const c = n[s], i = n.min, e = n.max;
return e === void 0 ? new Error(
`Invalid prop + ${s} supplied to ${p}.
${s} value can not be undefined.
`
) : c && e <= i ? new Error(
`Invalid prop + ${s} supplied to ${p}.
${s} value can not be equal to or smaller than the min value.
`
) : null;
},
vertical: S.bool,
disabled: S.bool,
dir: S.oneOf(["ltr", "rtl"])
}, y = {
step: 1,
largeStep: 10,
defaultValue: {
start: 0,
end: 0
},
vertical: !1,
disabled: !1
};
K.displayName = "KendoReactRangeSlider";
K.propTypes = ie;
export {
K as RangeSlider,
ce as RangeSliderPropsContext
};