@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
189 lines (188 loc) • 5.72 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 e from "prop-types";
import { createPropsContext as ye, usePropsContext as xe, useId as Ve, dispatchEvent as V, Keys as H, useDir as Ee, classNames as E, kendoThemeMaps as U, getTabIndex as Pe } from "@progress/kendo-react-common";
import { useLocalization as Be } from "@progress/kendo-react-intl";
import { messages as Ie, checkboxValidation as Fe, checkboxOptionalText as Ne } from "../messages/index.mjs";
const ze = ye(), A = a.forwardRef((W, j) => {
const P = xe(ze, W), {
ariaDescribedBy: G,
ariaLabelledBy: J,
checked: B,
className: Q,
labelClassName: X,
children: Y,
defaultChecked: Z,
disabled: o,
defaultValue: _,
id: I,
size: b = $.size,
rounded: m = $.rounded,
label: F,
labelPlacement: N,
name: ee,
labelOptional: ae,
onChange: p,
onFocus: k,
onBlur: f,
tabIndex: te,
value: s,
required: i,
valid: z,
validationMessage: M,
validityStyles: S,
autoFocus: oe,
// Removed to support direct use in Form Field component
visited: Me,
touched: Se,
modified: De,
...le
} = P, l = a.useRef(null), D = a.useCallback(() => {
l.current && l.current.focus();
}, []), c = a.useCallback(
() => ({
element: l.current,
focus: D,
get name() {
return l.current && l.current.name;
}
}),
[D]
);
a.useImperativeHandle(j, c);
const [ne, se] = a.useState(Z), [ce, re] = a.useState(_), K = typeof s == "boolean" || s === null, h = B !== void 0, r = K, v = r ? s : ce, C = h ? B : r ? void 0 : ne, T = C === void 0 && v, w = T ? v : C, d = T || r ? s === null ? s : void 0 : s || v, ie = w === null || d === null, L = Ve(), de = Be(), O = (t) => de.toLanguageString(t, Ie[t]), q = O(Fe), ue = O(Ne), g = z !== void 0 ? z : i ? !!C : !0;
a.useEffect(() => {
l.current && l.current.setCustomValidity && l.current.setCustomValidity(g ? "" : M || q);
}, [g, M, q]);
const u = a.useCallback(
(t, n) => {
!r && !o && (re(n), !h && !o && se(n)), p && !o && V(
p,
t,
{
...c(),
value: n
},
{ value: n }
);
},
[h, o, p, r, c]
), be = a.useCallback(
(t) => {
const n = t.target.checked;
u(t, n);
},
[u, s]
), me = a.useCallback(
(t) => {
if (o)
return;
const { keyCode: n } = t, ge = t.currentTarget.checked;
n === H.space && (t.preventDefault(), t.stopPropagation(), u(t, !ge));
},
[o, u]
), pe = a.useCallback(
(t) => {
if (o)
return;
const { keyCode: n } = t;
n === H.space && t.preventDefault();
},
[o]
), ke = a.useCallback(
(t) => {
k && !o && V(k, t, c(), void 0);
},
[k, o, c]
), fe = a.useCallback(
(t) => {
f && !o && V(f, t, c(), void 0);
},
[f, o, c]
), he = Ee(l, P.dir), ve = E("k-checkbox-wrap", Q), R = {
type: "checkbox",
className: E("k-checkbox", {
[`k-checkbox-${U.sizeMap[b] || b}`]: b,
[`k-rounded-${U.roundedMap[m] || m}`]: m,
"k-indeterminate": ie,
"k-disabled": o,
"k-invalid k-invalid": !(g || S !== void 0 || S === !0)
}),
ref: l,
name: ee,
id: I || L,
disabled: o,
required: i !== void 0 ? i : !1,
tabIndex: Pe(te, o),
role: "checkbox",
checked: !!w,
"aria-describedby": G,
"aria-labelledby": J,
"aria-disabled": o || void 0,
"aria-required": i,
autoFocus: oe,
...le,
onChange: be,
onKeyDown: me,
onKeyUp: pe,
onFocus: ke,
onBlur: fe
}, Ce = (
// removing value prop is required due to bug in react where
// value set to undefined override default submit value
d === void 0 ? /* @__PURE__ */ a.createElement("input", { ...R }) : /* @__PURE__ */ a.createElement("input", { ...R, value: K ? void 0 : d === null ? "" : d })
), y = F !== void 0 ? /* @__PURE__ */ a.createElement(
"label",
{
className: E("k-checkbox-label", X),
htmlFor: I || L,
style: { userSelect: "none" }
},
F,
ae && /* @__PURE__ */ a.createElement("span", { className: "k-label-optional" }, ue)
) : null, x = /* @__PURE__ */ a.createElement("span", { className: ve }, Ce, Y);
return /* @__PURE__ */ a.createElement(a.Fragment, null, N === "before" ? /* @__PURE__ */ a.createElement("div", { dir: "rtl" }, x, y) : N === "after" ? /* @__PURE__ */ a.createElement("div", { dir: "ltr" }, x, y) : /* @__PURE__ */ a.createElement("div", { dir: he }, x, y));
});
A.propTypes = {
checked: e.bool,
className: e.string,
defaultChecked: e.bool,
defaultValue: e.any,
dir: e.string,
disabled: e.bool,
id: e.string,
size: e.oneOf([null, "small", "medium", "large"]),
rounded: e.oneOf([null, "small", "medium", "large"]),
ariaLabelledBy: e.string,
ariaDescribedBy: e.string,
label: e.any,
labelPlacement: e.string,
labelOptional: e.bool,
name: e.string,
tabIndex: e.number,
value: e.any,
validationMessage: e.string,
required: e.bool,
validate: e.bool,
valid: e.bool,
autoFocus: e.bool,
onChange: e.func,
onFocus: e.func,
onBlur: e.func
};
const $ = {
size: "medium",
rounded: "medium",
autoFocus: !1
};
A.displayName = "KendoCheckbox";
export {
A as Checkbox,
ze as CheckboxPropsContext
};