@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
111 lines (110 loc) • 3.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 e from "react";
import o from "prop-types";
import { useUnstyled as w, useCustomComponent as g, useAsyncFocusBlur as H, classNames as h, uTextBox as C } from "@progress/kendo-react-common";
const B = e.forwardRef((t, F) => {
const l = e.useRef(null), s = e.useRef(null), r = e.useRef(void 0), i = w(), a = i && i.uTextBox, b = e.useCallback(() => {
var n;
return r.current !== void 0 ? r.current : (n = l.current) == null ? void 0 : n.value;
}, []);
e.useImperativeHandle(s, () => ({
get element() {
return l.current;
},
get name() {
return l.current && l.current.name;
},
get value() {
return b();
}
})), e.useImperativeHandle(F, () => s.current);
const {
size: c = u.size,
fillMode: d = u.fillMode,
rounded: f = u.rounded,
autoFocus: y = u.autoFocus,
inputAttributes: _,
className: m,
dir: E,
style: R,
prefix: N = u.prefix,
suffix: T = u.suffix,
valid: D,
onFocus: p,
onBlur: q,
// Destruct to avoid warning when used inside a form field
modified: G,
touched: K,
visited: U,
...M
} = t, [z] = g(N), [O] = g(T), [v, x] = e.useState(!1), S = (n) => {
x(!0);
}, A = (n) => {
x(!1);
}, I = e.useCallback(
(n) => {
r.current = n.target.value, t.onChange && t.onChange.call(void 0, {
syntheticEvent: n,
nativeEvent: n.nativeEvent,
value: n.target.value,
target: s.current
}), r.current = void 0;
},
[t.onChange]
), { onFocus: P, onBlur: j } = H({
onFocus: S,
onBlur: A,
onSyncFocus: p,
onSyncBlur: q
}), k = e.useMemo(
() => h(
C.wrapper({
c: a,
rounded: f,
fillMode: d,
size: c,
focused: v,
required: t.required,
disabled: t.disabled,
invalid: t.valid === !1
}),
m
),
[m, d, v, t.disabled, t.required, t.valid, f, c, a]
);
return /* @__PURE__ */ e.createElement("span", { style: R, dir: E, className: k, onFocus: P, onBlur: j }, /* @__PURE__ */ e.createElement(z, null), /* @__PURE__ */ e.createElement(
"input",
{
ref: l,
className: h(C.inputInner({ c: a })),
autoFocus: y,
...Object.assign({}, M, _),
"aria-required": t.required,
onChange: I
}
), /* @__PURE__ */ e.createElement(O, null));
}), u = {
prefix: (t) => null,
suffix: (t) => null,
size: "medium",
rounded: "medium",
fillMode: "solid",
autoFocus: !1
};
B.propTypes = {
size: o.oneOf([null, "small", "medium", "large"]),
rounded: o.oneOf([null, "small", "medium", "large", "full"]),
fillMode: o.oneOf([null, "solid", "flat", "outline"]),
autoFocus: o.bool,
inputAttributes: o.object
};
B.displayName = "KendoReactTextBoxComponent";
export {
B as TextBox
};