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