@progress/kendo-react-form
Version:
React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package
59 lines (58 loc) • 2.06 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 F } from "./FormContext.mjs";
const v = (h) => {
const { name: e, component: r, validator: s, children: u, onChange: l, ...i } = h, o = t.useContext(F), a = o ? o.id : "";
t.useEffect(() => o ? o.registerField(e, s) : void 0, [e, a, s]);
const m = t.useCallback(
(n) => {
const f = n && (n.value !== void 0 ? n.value : n.target ? n.target.value : n.target);
o.onChange(e, { value: f }), l && l.call(void 0, n);
},
[e, a, l]
), C = t.useCallback(
(n) => o.onChange(e, { value: n.target.value }),
[e, a]
), c = t.useCallback(() => o.onBlur(e), [e, a]), d = t.useCallback(() => o.onFocus(e), [e, a]);
if (!o)
return null;
const g = o.valueGetter(e);
return typeof r == "string" ? t.createElement(r, {
onChange: C,
onBlur: c,
onFocus: d,
value: g,
children: u,
...i
}) : t.createElement(r, {
children: u,
...i,
// input
onChange: m,
onBlur: c,
onFocus: d,
value: g,
// 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]),
name: e
});
};
v.displayName = "KendoReactField";
export {
v as Field
};