@progress/kendo-react-form
Version:
React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package
47 lines (46 loc) • 1.96 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 { FormContext as b } from "./FormContext.mjs";
const k = (a) => {
const { name: e, component: l, validator: r, type: F, children: c, ...i } = a, o = t.useContext(b), s = o ? o.id : "";
t.useEffect(() => o ? o.registerField(e, r) : void 0, [e, s, r]);
const u = t.useCallback((n) => o.onUnshift(e, n), [e, s]), d = t.useCallback((n) => o.onPush(e, n), [e, s]), m = t.useCallback((n) => o.onInsert(e, n), [e, s]), f = t.useCallback(() => o.onPop(e), [e, s]), v = t.useCallback((n) => o.onRemove(e, n), [e, s]), p = t.useCallback((n) => o.onReplace(e, n), [e, s]), h = t.useCallback((n) => o.onMove(e, n), [e, s]);
if (!o)
return null;
const C = o.valueGetter(e);
return t.createElement(l, {
// input
value: C,
// meta
validationMessage: o.errors[e],
touched: o.touched[e],
modified: o.modified[e],
visited: o.visited[e],
// Our `valid` implementation requires double submit to show html5 validation errors,
// however it's NOT recommended to show html5 validation errors at all as:
// - There is no standard way to change validation look and feel with CSS.
// - Look different in each browser / OS
// - You can have a page in one language but an error message displayed in another language (not localizable)
valid: !(o.errors[e] && o.touched[e]),
onUnshift: u,
onPush: d,
onInsert: m,
onPop: f,
onRemove: v,
onReplace: p,
onMove: h,
children: c,
name: e,
...i
});
};
k.displayName = "KendoReactFieldArray";
export {
k as FieldArray
};