@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
199 lines (198 loc) • 5.34 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 t from "react";
import e from "prop-types";
import { createPropsContext as be, usePropsContext as xe, useCustomComponent as B, useId as ge, useDir as ve, useIsomorphicLayoutEffect as he, dispatchEvent as C, classNames as N, getTabIndex as ye, kendoThemeMaps as H } from "@progress/kendo-react-common";
const ke = be(), R = t.forwardRef(($, q) => {
const i = xe(ke, $), {
size: m = n.size,
rounded: p = n.rounded,
fillMode: z = n.fillMode,
autoFocus: D = n.autoFocus,
flow: b = n.flow,
prefix: L = null,
suffix: j = null,
ariaDescribedBy: K,
ariaLabelledBy: G,
autoSize: u,
className: J,
defaultValue: Q,
disabled: r,
readOnly: U,
required: d,
rows: W,
id: X,
name: Y,
placeholder: Z,
style: _,
tabIndex: ee,
value: x,
valid: w,
validationMessage: S,
validityStyles: F,
onChange: g,
onFocus: v,
onBlur: h,
// Removed to support direct use in Form Field component
visited: Ce,
touched: ze,
modified: we,
resizable: s,
inputAttributes: te,
textareaStyle: I,
...ae
} = i, a = t.useRef(null), O = t.useCallback(() => {
a.current && a.current.focus();
}, []), T = t.useCallback(() => {
a.current && a.current.blur();
}, []), [E, M] = t.useState(Q), [re, P] = t.useState(!1), [oe, le] = B(L), [se, ne] = B(j), c = x !== void 0, f = c ? x : E, l = t.useCallback(() => ({
element: a,
focus: O,
blur: T,
get value() {
return f;
},
get name() {
return a.current && a.current.name;
}
}), [T, O, f]);
t.useImperativeHandle(q, l);
const [V, A] = t.useState("auto"), ie = ge(), ue = ve(a, i.dir), y = w !== void 0 ? w : d ? !!f : !0;
t.useEffect(() => {
a.current && a.current.setCustomValidity && a.current.setCustomValidity(y ? "" : S || "");
}, [y, S]), he(() => {
a.current && A(`${a.current.scrollHeight}px`);
}, [f]);
const de = t.useCallback(
(o) => {
const k = o.target.value;
A("auto"), !c && !r && M(k), g && !r && C(
g,
o,
{
...l(),
value: k
},
{ value: k }
);
},
[M, g, r, c]
), ce = t.useCallback(
(o) => {
P(!0), v && !r && C(v, o, l(), void 0);
},
[v, r, l]
), fe = t.useCallback(
(o) => {
P(!1), h && !r && C(h, o, l(), void 0);
},
[h, r, l]
), me = t.useMemo(() => {
let o = {};
return u ? o = {
resize: "none",
overflow: "hidden",
height: V
} : s && (o = { resize: s }), {
...o,
...I
};
}, [u, s, V, I]), pe = {
id: X || ie,
role: "textbox",
name: Y,
className: N("k-input-inner", "!k-overflow-auto", {
"k-resize": !u && s !== "none",
"k-resize-none": u || s === "none",
"!k-flex-none": b === "vertical"
}),
ref: a,
disabled: r,
rows: W,
placeholder: Z,
readOnly: U,
required: d,
tabIndex: ye(ee, r),
autoFocus: D,
style: me,
"aria-labelledby": G,
"aria-describedby": K,
"aria-multiline": !0,
"aria-disabled": r || void 0,
"aria-required": d,
value: c ? x : E,
...Object.assign({}, ae, te),
onChange: de,
onFocus: ce,
onBlur: fe
};
return /* @__PURE__ */ t.createElement(
"span",
{
className: N(
"k-input",
"k-textarea",
{
[`k-input-${H.sizeMap[m] || m}`]: m,
[`k-input-${z}`]: z,
[`k-rounded-${H.roundedMap[p] || p}`]: p,
"k-invalid": !(y || F !== void 0 || F === !0),
"k-required": d,
"k-disabled": r,
"k-focus": re,
"!k-flex-col": b === "vertical",
"!k-flex-row": b === "horizontal"
},
J
),
style: _,
dir: ue
},
i.prefix && /* @__PURE__ */ t.createElement(oe, { ...le }),
/* @__PURE__ */ t.createElement("textarea", { ...pe }),
i.suffix && /* @__PURE__ */ t.createElement(se, { ...ne })
);
});
R.propTypes = {
ariaDescribedBy: e.string,
ariaLabelledBy: e.string,
autoSize: e.bool,
className: e.string,
defaultValue: e.string,
dir: e.string,
disabled: e.bool,
readOnly: e.bool,
rows: e.number,
id: e.string,
name: e.string,
placeholder: e.string,
style: e.object,
tabIndex: e.number,
value: e.oneOfType([e.string, e.arrayOf(e.string), e.number]),
onChange: e.func,
onFocus: e.func,
onBlur: e.func,
size: e.oneOf([null, "small", "medium", "large"]),
rounded: e.oneOf([null, "small", "medium", "large", "full"]),
fillMode: e.oneOf([null, "solid", "flat", "outline"]),
resizable: e.oneOf(["none", "both", "horizontal", "vertical"]),
autoFocus: e.bool,
flow: e.oneOf(["vertical", "horizontal"])
};
const n = {
size: "medium",
rounded: "medium",
fillMode: "solid",
autoFocus: !1,
flow: "horizontal"
};
R.displayName = "KendoTextArea";
export {
R as TextArea,
ke as TextAreaPropsContext
};