@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
316 lines (315 loc) • 10.7 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 c from "prop-types";
import { createPropsContext as te, usePropsContext as ae, useDir as ne, Keys as R, IconWrap as y, toIconName as B, getTabIndex as le, classNames as se, svgIconPropType as S } from "@progress/kendo-react-common";
import { starOutlineIcon as $, starIcon as K } from "@progress/kendo-svg-icons";
import { RatingItem as oe } from "./RatingItem.mjs";
import { RATING_ACTION as r, ratingReducer as ie } from "./rating-reducer.mjs";
import { calcIsFirstHalf as L, toRound as D, getRemainder as re, isHalf as ce, isSelected as F, isCorrectValue as A } from "./utils/index.mjs";
import { ratingAriaLabel as X, messages as ue } from "../messages/index.mjs";
import { useLocalization as me } from "@progress/kendo-react-intl";
const q = (n, g, v) => {
const [e, N] = a.useState(n);
return [e, (h) => {
const o = ie(g.state || e, { ...h, ...g });
v && v(o, h.event), N(o);
}];
}, de = te(), G = a.forwardRef((n, g) => {
const v = ae(de, n), e = {
dir: s.dir,
min: s.min,
max: s.max,
step: s.step,
item: s.item,
defaultValue: s.defaultValue,
readonly: s.readonly,
disabled: s.disabled,
selection: s.selection,
precision: s.precision,
...v
}, N = me(), m = a.useRef(null), h = a.useRef(null), o = ne(h, e.dir);
a.useImperativeHandle(m, () => ({
element: h.current,
props: e
})), a.useImperativeHandle(g, () => m.current);
const W = a.useCallback(
(t, l) => {
e.onChange && m.current && e.onChange.call(void 0, {
value: t,
target: m.current,
syntheticEvent: l
});
},
[e.onChange]
), I = a.useMemo(() => e.min !== void 0 ? e.min : s.min, [e.min]), x = a.useMemo(() => e.max !== void 0 ? e.max : s.max, [e.max]), d = a.useMemo(() => e.precision || s.precision, [e.precision]), i = a.useMemo(() => e.step !== void 0 ? e.step : s.step, [e.step]), V = a.useMemo(() => e.readonly || s.readonly, [e.readonly]), k = a.useMemo(() => e.disabled || s.disabled, [e.disabled]), _ = a.useMemo(() => e.item || s.item, [e.item]), [H, p] = q(
e.defaultValue !== void 0 ? e.defaultValue : s.defaultValue,
{
state: e.value,
min: I,
max: x,
step: d === "half" ? i / 2 : i
},
W
), [T, O] = q(null, {
state: e.value,
min: I,
max: x,
step: d === "half" ? i / 2 : i,
precision: d
}), u = a.useMemo(
() => e.value !== void 0 ? e.value : H,
[e.value, H]
), C = a.useMemo(() => T, [T]), z = a.useMemo(
() => e.selection || s.selection,
[e.selection]
), E = a.useMemo(() => i / (d === "half" ? 2 : 1), [i, d]), j = a.useCallback(
(t) => {
if (!(!t.target || !t.target.element || V || k)) {
if (d === "half") {
const l = t.target.element.getBoundingClientRect(), M = L(o || "ltr", l, t.syntheticEvent.clientX) ? D(t.target.value - i / 2, E) : t.target.value;
p({ type: r.select, payload: M, event: t.syntheticEvent });
} else
p({
type: r.select,
payload: t.target.value,
event: t.syntheticEvent
});
if (e.onClick) {
const l = {
value: u,
target: m.current,
syntheticEvent: t.syntheticEvent
};
e.onClick.call(void 0, l);
}
}
},
[e.onClick, p, u]
), J = a.useCallback(
(t) => {
if (!(V || k)) {
switch (t.keyCode) {
case R.right:
t.preventDefault(), p({
type: o === "rtl" ? r.decrease : r.increase,
event: t
});
break;
case R.left:
t.preventDefault(), p({
type: o === "rtl" ? r.increase : r.decrease,
event: t
});
break;
case R.home:
t.preventDefault(), p({
type: o === "rtl" ? r.min : r.max,
event: t
});
break;
case R.end:
t.preventDefault(), p({
type: o === "rtl" ? r.max : r.min,
event: t
});
break;
case R.esc:
t.preventDefault(), p({
type: r.deselect,
event: t
});
break;
}
e.onKeyDown && e.onKeyDown.call(void 0, {
value: u,
target: m.current,
syntheticEvent: t
});
}
},
[e.onKeyDown, p, u]
), Q = a.useCallback(
(t) => {
if (e.onFocus) {
const l = {
target: m.current,
syntheticEvent: t
};
e.onFocus.call(void 0, l);
}
},
[e.onFocus]
), U = a.useCallback(
(t) => {
if (e.onBlur) {
const l = {
target: m.current,
syntheticEvent: t
};
e.onBlur.call(void 0, l);
}
},
[e.onBlur]
), Y = a.useCallback(
(t) => {
if (!(!t.target || !t.target.element))
if (d === "half") {
const l = t.target.element.getBoundingClientRect(), M = L(o || "ltr", l, t.syntheticEvent.clientX) ? t.target.value - i / 2 : t.target.value;
O({ type: r.select, payload: M, event: t.syntheticEvent });
} else
O({
type: r.select,
payload: t.target.value,
event: t.syntheticEvent
});
},
[d, i, o]
), Z = a.useCallback((t) => {
O({ type: r.reset, event: t.syntheticEvent });
}, []), P = [], ee = re(D(x - I, E), i);
for (let t = I; t <= x; t = D(t + i, E)) {
const l = D(t + ee, E), f = d === "half" ? ce(l, C !== null ? C : u !== null ? u : 0, i) : !1, M = F(l, u, i, z), w = F(l, C !== null ? C : u, i, z), b = F(l, C, i, z);
P.push(
/* @__PURE__ */ a.createElement(
_,
{
key: l,
value: l,
dir: o,
title: String(f ? D(l - i / 2, E) : l),
icon: e.icon,
svgIcon: e.svgIcon,
half: f,
selected: M || w,
hovered: b,
onClick: j,
onMouseMove: Y,
onMouseLeave: Z
},
f && /* @__PURE__ */ a.createElement("span", { className: "k-rating-precision-complement" }, !(e.icon || e.svgIconOutline) && /* @__PURE__ */ a.createElement(
y,
{
name: "star-outline",
icon: $,
style: { clipPath: `${o === "rtl" ? "inset(0 50% 0 0)" : "inset(0 0 0 50%)"}` },
size: "xlarge"
}
), (e.icon || e.svgIconOutline) && /* @__PURE__ */ a.createElement(
y,
{
name: B(`${e.icon}-outline`),
icon: e.svgIconOutline,
size: "xlarge"
}
)),
f && /* @__PURE__ */ a.createElement("span", { className: "k-rating-precision-part" }, !(e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
y,
{
name: "star",
icon: K,
style: { clipPath: `${o === "rtl" ? "inset(0 0 0 50%)" : "inset(0 50% 0 0)"}` },
size: "xlarge"
}
), (e.icon || e.svgIcon) && /* @__PURE__ */ a.createElement(
y,
{
name: e.icon ? B(e.icon) : void 0,
icon: e.svgIcon,
size: "xlarge"
}
)),
f && /* @__PURE__ */ a.createElement("span", { style: { width: "24px", height: "24px", display: "block" } }),
!f && !(e.icon || e.svgIcon) && (b || w && !b) && /* @__PURE__ */ a.createElement(y, { name: "star", icon: K, size: "xlarge" }) || !(e.icon || e.svgIcon) && !b && !w && /* @__PURE__ */ a.createElement(y, { name: "star-outline", icon: $, size: "xlarge" }) || (e.icon || e.svgIcon) && (b || w && !b) && /* @__PURE__ */ a.createElement(y, { name: e.icon, icon: e.svgIcon, size: "xlarge" }) || (e.icon || e.svgIcon) && !b && /* @__PURE__ */ a.createElement(
y,
{
name: B(`${e.icon}-outline`),
icon: e.svgIconOutline,
size: "xlarge"
}
)
)
);
}
return /* @__PURE__ */ a.createElement(
"span",
{
id: e.id,
style: e.style,
ref: h,
role: "slider",
dir: o,
tabIndex: le(e.tabIndex, e.disabled, void 0),
className: se(
"k-rating",
{
"k-rtl": o === "rtl",
"k-readonly": V,
"k-disabled": k
},
e.className
),
onKeyDown: J,
onFocus: Q,
onBlur: U,
"aria-valuemin": I,
"aria-valuemax": x,
"aria-valuenow": u !== null ? u : void 0,
"aria-disabled": k ? "true" : void 0,
"aria-label": N.toLanguageString(X, ue[X]),
"aria-labelledby": e.ariaLabelledBy,
"aria-describedby": e.ariaDescribedBy
},
/* @__PURE__ */ a.createElement("input", { id: "rating", className: "k-hidden", readOnly: V, disabled: k }),
/* @__PURE__ */ a.createElement("span", { className: "k-rating-container" }, P),
e.label && /* @__PURE__ */ a.createElement("span", { className: "k-rating-label" }, e.label)
);
}), pe = {
id: c.string,
dir: c.oneOf(["ltr", "rtl"]),
selection: c.oneOf(["continues", "single"]),
precision: c.oneOf(["item", "half"]),
value: (n, g, v) => n.value && n.min && n.max && n.step && !(n.precision === "half" ? A(n.min, n.max, n.step / 2, n.value) : A(n.min, n.max, n.step, n.value)) && n.precision === "half" ? new Error(
`Invalid prop + ${g} supplied to ${v}.
The value of the { value } property is not correct, please check your values.
`
) : null,
defaultValue: c.number,
min: c.number,
max: c.number,
step: (n, g, v) => n.step !== void 0 && n.step <= 0 ? new Error(
`Invalid prop + ${g} supplied to ${v}.
The value of the { step } property is cannot be equal or less than "0", please check your values.
`
) : null,
hovered: c.number,
label: c.node,
readonly: c.bool,
disabled: c.bool,
icon: c.string,
svgIcon: S,
svgIconOutline: S,
ariaDescribedBy: c.string
}, s = {
dir: "ltr",
min: 1,
max: 5,
step: 1,
item: oe,
defaultValue: null,
readonly: !1,
disabled: !1,
selection: "continues",
precision: "item"
};
G.displayName = "KendoReactRating";
G.propTypes = pe;
export {
G as Rating,
de as RatingPropsContext
};