@progress/kendo-react-form
Version:
React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package
79 lines (78 loc) • 2.65 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 { useUnstyled as U, classNames as S, uForm as C } from "@progress/kendo-react-common";
import { innerWidth as W, calculateColumns as z, generateColumnClass as A, calculateColSpan as D, generateColSpanClass as H, calculateGutters as O, generateGuttersStyling as h } from "./utils.mjs";
const d = {
rows: "0px",
cols: "16px"
}, _ = e.forwardRef((l, b) => {
const o = e.useRef(null), v = e.useRef(null);
e.useImperativeHandle(v, () => ({ element: o.current, props: l })), e.useImperativeHandle(b, () => v.current);
const { className: y, style: K, cols: a, colSpan: m, gutters: r = d, legend: g, ...G } = l, p = U(), t = p && p.uForm, [w, E] = e.useState(void 0), [F, N] = e.useState(void 0), [L, f] = e.useState(void 0), T = e.useMemo(
() => S(
C.fieldset({
c: t
}),
F,
y
),
[y, t, F]
), x = e.useMemo(
() => S(
C.formLayout({
c: t
}),
w
),
[t, w]
), I = e.useMemo(
() => S(
C.legend({
c: t
})
),
[t]
), c = e.useRef(null);
return e.useEffect(() => {
o.current && (c.current = o.current.closest("form"));
}, []), e.useEffect(() => {
if (!a) {
E(void 0);
return;
}
if (!r) {
f(void 0);
return;
}
const s = c == null ? void 0 : c.current, R = () => {
let n = 0;
s ? n = W(s) : typeof window != "undefined" && (n = window.innerWidth);
const M = z(a, n);
if (E(A(M)), m !== void 0) {
const u = D(m, n);
N(H(u));
} else
N(void 0);
if (r) {
const u = O(r, n);
f(u ? { gap: h(u, d) } : { gap: h(d, d) });
}
};
R();
let i;
return s && typeof window != "undefined" && "ResizeObserver" in window && (i = new ResizeObserver(R), i.observe(s)), () => {
i && s && i.unobserve(s);
};
}, [a, m, r]), /* @__PURE__ */ e.createElement("fieldset", { ref: o, ...G, style: l.style, className: T }, g && /* @__PURE__ */ e.createElement("legend", { className: I }, g), a ? /* @__PURE__ */ e.createElement("div", { className: x, style: L }, l.children) : l.children);
});
_.displayName = "KendoReactFormFieldSet";
export {
d as DEFAULT_FIELDSET_GUTTERS,
_ as FormFieldSet
};