From c5566131a712b4a27533217e57423c09158b5956 Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Mon, 6 Mar 2023 11:32:08 -0800 Subject: [PATCH] - Responded to reviewer feedback by creating a separate type for `BaseInputTemplate` --- .../src/templates/BaseInputTemplate/index.tsx | 13 +-- .../BaseInputTemplate/BaseInputTemplate.tsx | 16 ++- .../BaseInputTemplate/BaseInputTemplate.tsx | 16 ++- .../templates/BaseInputTemplate.tsx | 14 ++- .../custom-templates.md | 17 +-- .../BaseInputTemplate/BaseInputTemplate.tsx | 18 ++-- .../BaseInputTemplate/BaseInputTemplate.tsx | 16 ++- .../BaseInputTemplate/BaseInputTemplate.tsx | 16 ++- .../BaseInputTemplate/BaseInputTemplate.tsx | 9 +- packages/utils/src/types.ts | 101 +++++++++++------- 10 files changed, 123 insertions(+), 113 deletions(-) diff --git a/packages/antd/src/templates/BaseInputTemplate/index.tsx b/packages/antd/src/templates/BaseInputTemplate/index.tsx index 6b0e1940e6..3762800ada 100644 --- a/packages/antd/src/templates/BaseInputTemplate/index.tsx +++ b/packages/antd/src/templates/BaseInputTemplate/index.tsx @@ -1,14 +1,15 @@ +import { ChangeEvent, FocusEvent } from "react"; import Input from "antd/lib/input"; import InputNumber from "antd/lib/input-number"; import { ariaDescribedByIds, + BaseInputTemplateProps, examplesId, getInputProps, FormContextType, + GenericObjectType, RJSFSchema, StrictRJSFSchema, - WidgetProps, - GenericObjectType, } from "@rjsf/utils"; const INPUT_STYLE = { @@ -25,7 +26,7 @@ export default function BaseInputTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any ->(props: WidgetProps) { +>(props: BaseInputTemplateProps) { const { disabled, formContext, @@ -48,13 +49,13 @@ export default function BaseInputTemplate< const handleTextChange = onChangeOverride ? onChangeOverride - : ({ target }: React.ChangeEvent) => + : ({ target }: ChangeEvent) => onChange(target.value === "" ? options.emptyValue : target.value); - const handleBlur = ({ target }: React.FocusEvent) => + const handleBlur = ({ target }: FocusEvent) => onBlur(id, target.value); - const handleFocus = ({ target }: React.FocusEvent) => + const handleFocus = ({ target }: FocusEvent) => onFocus(id, target.value); const input = diff --git a/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx index 0694d7a53c..9b223ae452 100644 --- a/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/bootstrap-4/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -1,12 +1,13 @@ +import { ChangeEvent, FocusEvent } from "react"; import Form from "react-bootstrap/Form"; import { ariaDescribedByIds, + BaseInputTemplateProps, examplesId, FormContextType, getInputProps, RJSFSchema, StrictRJSFSchema, - WidgetProps, } from "@rjsf/utils"; export default function BaseInputTemplate< @@ -31,20 +32,17 @@ export default function BaseInputTemplate< rawErrors = [], children, extraProps, -}: WidgetProps) { +}: BaseInputTemplateProps) { const inputProps = { ...extraProps, ...getInputProps(schema, type, options), }; - const _onChange = ({ - target: { value }, - }: React.ChangeEvent) => + const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === "" ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: React.FocusEvent) => + const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ - target: { value }, - }: React.FocusEvent) => onFocus(id, value); + const _onFocus = ({ target: { value } }: FocusEvent) => + onFocus(id, value); // const classNames = [rawErrors.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""] return ( diff --git a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index 212e82b048..3cf24b96ad 100644 --- a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -1,12 +1,13 @@ +import { ChangeEvent, FocusEvent } from "react"; import { FormControl, FormLabel, Input } from "@chakra-ui/react"; import { ariaDescribedByIds, + BaseInputTemplateProps, examplesId, FormContextType, getInputProps, RJSFSchema, StrictRJSFSchema, - WidgetProps, } from "@rjsf/utils"; import { getChakra } from "../utils"; @@ -14,7 +15,7 @@ export default function BaseInputTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any ->(props: WidgetProps) { +>(props: BaseInputTemplateProps) { const { id, type, @@ -39,15 +40,12 @@ export default function BaseInputTemplate< const chakraProps = getChakra({ uiSchema }); const { schemaUtils } = registry; - const _onChange = ({ - target: { value }, - }: React.ChangeEvent) => + const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === "" ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: React.FocusEvent) => + const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ - target: { value }, - }: React.FocusEvent) => onFocus(id, value); + const _onFocus = ({ target: { value } }: FocusEvent) => + onFocus(id, value); const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && diff --git a/packages/core/src/components/templates/BaseInputTemplate.tsx b/packages/core/src/components/templates/BaseInputTemplate.tsx index a6e7fbebef..6906b42da5 100644 --- a/packages/core/src/components/templates/BaseInputTemplate.tsx +++ b/packages/core/src/components/templates/BaseInputTemplate.tsx @@ -1,12 +1,12 @@ -import { useCallback } from "react"; +import { ChangeEvent, FocusEvent, useCallback } from "react"; import { ariaDescribedByIds, + BaseInputTemplateProps, examplesId, getInputProps, FormContextType, RJSFSchema, StrictRJSFSchema, - WidgetProps, } from "@rjsf/utils"; /** The `BaseInputTemplate` is the template to use to render the basic `` component for the `core` theme. @@ -19,7 +19,7 @@ export default function BaseInputTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any ->(props: WidgetProps) { +>(props: BaseInputTemplateProps) { const { id, name, // remove this from ...rest @@ -60,18 +60,16 @@ export default function BaseInputTemplate< } const _onChange = useCallback( - ({ target: { value } }: React.ChangeEvent) => + ({ target: { value } }: ChangeEvent) => onChange(value === "" ? options.emptyValue : value), [onChange, options] ); const _onBlur = useCallback( - ({ target: { value } }: React.FocusEvent) => - onBlur(id, value), + ({ target: { value } }: FocusEvent) => onBlur(id, value), [onBlur, id] ); const _onFocus = useCallback( - ({ target: { value } }: React.FocusEvent) => - onFocus(id, value), + ({ target: { value } }: FocusEvent) => onFocus(id, value), [onFocus, id] ); diff --git a/packages/docs/docs/advanced-customization/custom-templates.md b/packages/docs/docs/advanced-customization/custom-templates.md index e67535011d..e93b5a0e1e 100644 --- a/packages/docs/docs/advanced-customization/custom-templates.md +++ b/packages/docs/docs/advanced-customization/custom-templates.md @@ -290,7 +290,8 @@ If you desire a different implementation for the `` based widgets, you ca For instance, say you have a `CustomTextInput` component that you want to integrate: ```tsx -import { getInputProps, RJSFSchema, WidgetProps } from "@rjsf/utils"; +import { ChangeEvent, FocusEvent } from 'react'; +import { getInputProps, RJSFSchema, BaseInputTemplateProps } from "@rjsf/utils"; import validator from '@rjsf/validator-ajv8'; import CustomTextInput from '../CustomTextInput'; @@ -301,7 +302,7 @@ const schema: RJSFSchema = { description: "input description" }; -function BaseInputTemplate(props: WidgetProps) { +function BaseInputTemplate (props: BaseInputTemplateProps) { const { schema, id, @@ -315,6 +316,7 @@ function BaseInputTemplate(props: WidgetProps) { readonly, autofocus, onChange, + onChangeOverride, onBlur, onFocus, rawErrors, @@ -324,12 +326,12 @@ function BaseInputTemplate(props: WidgetProps) { formContext, ...rest } = props; - const onTextChange = ({ target: { value: val } }: React.ChangeEvent) => { + const onTextChange = ({ target: { value: val } }: ChangeEvent) => { // Use the options.emptyValue if it is specified and newVal is also an empty string onChange(val === '' ? options.emptyValue || '' : val); }; - const onTextBlur = ({ target: { value: val } }: React.FocusEvent) => onBlur(id, val); - const onTextFocus = ({ target: { value: val } }: React.FocusEvent) => onFocus(id, val); + const onTextBlur = ({ target: { value: val } }: FocusEvent) => onBlur(id, val); + const onTextFocus = ({ target: { value: val } }: FocusEvent) => onFocus(id, val); const inputProps = { ...rest, ...getInputProps(schema, type, options) }; const hasError = rawErrors.length > 0 && !hideError; @@ -345,7 +347,7 @@ function BaseInputTemplate(props: WidgetProps) { autoFocus={autofocus} error={hasError} errors={hasError ? rawErrors : undefined} - onChange={onTextChange} + onChange={onChangeOverride || onTextChange} onBlur={onTextBlur} onFocus={onTextFocus} {...inputProps} @@ -354,7 +356,7 @@ function BaseInputTemplate(props: WidgetProps) { } render(( -
+ ), document.getElementById("app")); ``` @@ -373,6 +375,7 @@ The following props are passed to the `BaseInputTemplate`: - `label`: The computed label for this widget, as a string - `multiple`: A boolean value stating if the widget can accept multiple values; - `onChange`: The value change event handler; call it with the new value every time it changes; +- `onChangeOverride`: A `BaseInputTemplate` implements a default `onChange` handler that it passes to the HTML input component to handle the `ChangeEvent`. Sometimes a widget may need to handle the `ChangeEvent` using custom logic. If that is the case, that widget should provide its own handler via this prop; - `onKeyChange`: The key change event handler (only called for fields with `additionalProperties`); pass the new value every time it changes; - `onBlur`: The input blur event handler; call it with the widget id and value; - `onFocus`: The input focus event handler; call it with the widget id and value; diff --git a/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index 7861687e07..6de4e7f8d6 100644 --- a/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/fluent-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -1,12 +1,13 @@ +import { ChangeEvent, FocusEvent } from "react"; import { TextField } from "@fluentui/react"; import { ariaDescribedByIds, + BaseInputTemplateProps, examplesId, FormContextType, getInputProps, RJSFSchema, StrictRJSFSchema, - WidgetProps, } from "@rjsf/utils"; import _pick from "lodash/pick"; @@ -75,18 +76,15 @@ export default function BaseInputTemplate< multiline, registry, uiSchema, -}: WidgetProps) { +}: BaseInputTemplateProps) { const { schemaUtils } = registry; const inputProps = getInputProps(schema, type, options); - const _onChange = ({ - target: { value }, - }: React.ChangeEvent) => + const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === "" ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: React.FocusEvent) => + const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ - target: { value }, - }: React.FocusEvent) => onFocus(id, value); + const _onFocus = ({ target: { value } }: FocusEvent) => + onFocus(id, value); const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema); const uiProps = _pick((options.props as object) || {}, allowedProps); @@ -107,7 +105,7 @@ export default function BaseInputTemplate< // name={name} {...inputProps} value={value || value === 0 ? value : ""} - onChange={onChangeOverride || _onChange} + onChange={(onChangeOverride as any) || _onChange} onBlur={_onBlur} onFocus={_onFocus} errorMessage={(rawErrors || []).join("\n")} diff --git a/packages/material-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/material-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index 1181ed707d..06a00a34ed 100644 --- a/packages/material-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/material-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -1,12 +1,13 @@ +import { ChangeEvent, FocusEvent } from "react"; import TextField, { TextFieldProps } from "@material-ui/core/TextField"; import { ariaDescribedByIds, + BaseInputTemplateProps, examplesId, getInputProps, FormContextType, RJSFSchema, StrictRJSFSchema, - WidgetProps, } from "@rjsf/utils"; const TYPES_THAT_SHRINK_LABEL = ["date", "datetime-local", "file"]; @@ -21,7 +22,7 @@ export default function BaseInputTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any ->(props: WidgetProps) { +>(props: BaseInputTemplateProps) { const { id, name, // remove this from textFieldProps @@ -58,15 +59,12 @@ export default function BaseInputTemplate< }, ...rest, }; - const _onChange = ({ - target: { value }, - }: React.ChangeEvent) => + const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === "" ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: React.FocusEvent) => + const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ - target: { value }, - }: React.FocusEvent) => onFocus(id, value); + const _onFocus = ({ target: { value } }: FocusEvent) => + onFocus(id, value); const { schemaUtils } = registry; const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema); diff --git a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx index 11e8604abf..be26d4af97 100644 --- a/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/mui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -1,12 +1,13 @@ +import { ChangeEvent, FocusEvent } from "react"; import TextField, { TextFieldProps } from "@mui/material/TextField"; import { ariaDescribedByIds, + BaseInputTemplateProps, examplesId, getInputProps, FormContextType, RJSFSchema, StrictRJSFSchema, - WidgetProps, } from "@rjsf/utils"; const TYPES_THAT_SHRINK_LABEL = ["date", "datetime-local", "file"]; @@ -21,7 +22,7 @@ export default function BaseInputTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any ->(props: WidgetProps) { +>(props: BaseInputTemplateProps) { const { id, name, // remove this from textFieldProps @@ -58,15 +59,12 @@ export default function BaseInputTemplate< }, ...rest, }; - const _onChange = ({ - target: { value }, - }: React.ChangeEvent) => + const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === "" ? options.emptyValue : value); - const _onBlur = ({ target: { value } }: React.FocusEvent) => + const _onBlur = ({ target: { value } }: FocusEvent) => onBlur(id, value); - const _onFocus = ({ - target: { value }, - }: React.FocusEvent) => onFocus(id, value); + const _onFocus = ({ target: { value } }: FocusEvent) => + onFocus(id, value); const { schemaUtils } = registry; const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema); diff --git a/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx index 53ac749567..14de05e601 100644 --- a/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx +++ b/packages/semantic-ui/src/BaseInputTemplate/BaseInputTemplate.tsx @@ -1,13 +1,14 @@ +import { ChangeEvent } from "react"; import { Form } from "semantic-ui-react"; import { getSemanticProps } from "../util"; import { ariaDescribedByIds, + BaseInputTemplateProps, examplesId, getInputProps, FormContextType, RJSFSchema, StrictRJSFSchema, - WidgetProps, } from "@rjsf/utils"; /** The `BaseInputTemplate` is the template to use to render the basic `` component for the `core` theme. @@ -20,7 +21,7 @@ export default function BaseInputTemplate< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any ->(props: WidgetProps) { +>(props: BaseInputTemplateProps) { const { id, placeholder, @@ -49,9 +50,7 @@ export default function BaseInputTemplate< options, }); const { schemaUtils } = registry; - const _onChange = ({ - target: { value }, - }: React.ChangeEvent) => + const _onChange = ({ target: { value } }: ChangeEvent) => onChange(value === "" ? options.emptyValue : value); const _onBlur = () => onBlur && onBlur(id, value); const _onFocus = () => onFocus && onFocus(id, value); diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts index 63aee8e61b..b57cbc8f01 100644 --- a/packages/utils/src/types.ts +++ b/packages/utils/src/types.ts @@ -1,4 +1,12 @@ -import React, { StyleHTMLAttributes } from "react"; +import type { + ButtonHTMLAttributes, + ChangeEvent, + ComponentType, + HTMLAttributes, + ReactElement, + ReactNode, + StyleHTMLAttributes, +} from "react"; import { JSONSchema7 } from "json-schema"; import { TranslatableString } from "./enums"; @@ -162,7 +170,7 @@ export type FieldErrorProps< /** The errorSchema constructed by `Form` */ errorSchema?: ErrorSchema; /** An array of the errors */ - errors?: Array; + errors?: Array; /** The tree of unique ids for every child field */ idSchema: IdSchema; /** The schema that was passed to field */ @@ -180,7 +188,7 @@ export type FieldHelpProps< F extends FormContextType = any > = { /** The help information to be rendered */ - help?: string | React.ReactElement; + help?: string | ReactElement; /** The tree of unique ids for every child field */ idSchema: IdSchema; /** The schema that was passed to field */ @@ -220,51 +228,49 @@ export interface TemplatesType< F extends FormContextType = any > { /** The template to use while rendering normal or fixed array fields */ - ArrayFieldTemplate: React.ComponentType>; + ArrayFieldTemplate: ComponentType>; /** The template to use while rendering the description for an array field */ - ArrayFieldDescriptionTemplate: React.ComponentType< + ArrayFieldDescriptionTemplate: ComponentType< ArrayFieldDescriptionProps >; /** The template to use while rendering an item in an array field */ - ArrayFieldItemTemplate: React.ComponentType< - ArrayFieldTemplateItemType - >; + ArrayFieldItemTemplate: ComponentType>; /** The template to use while rendering the title for an array field */ - ArrayFieldTitleTemplate: React.ComponentType>; + ArrayFieldTitleTemplate: ComponentType>; /** The template to use while rendering the standard html input */ - BaseInputTemplate: React.ComponentType>; + BaseInputTemplate: ComponentType>; /** The template to use for rendering the description of a field */ - DescriptionFieldTemplate: React.ComponentType>; + DescriptionFieldTemplate: ComponentType>; /** The template to use while rendering the errors for the whole form */ - ErrorListTemplate: React.ComponentType>; + ErrorListTemplate: ComponentType>; /** The template to use while rendering the errors for a single field */ - FieldErrorTemplate: React.ComponentType>; + FieldErrorTemplate: ComponentType>; /** The template to use while rendering the errors for a single field */ - FieldHelpTemplate: React.ComponentType>; + FieldHelpTemplate: ComponentType>; /** The template to use while rendering a field */ - FieldTemplate: React.ComponentType>; + FieldTemplate: ComponentType>; /** The template to use while rendering an object */ - ObjectFieldTemplate: React.ComponentType>; + ObjectFieldTemplate: ComponentType>; /** The template to use for rendering the title of a field */ - TitleFieldTemplate: React.ComponentType>; + TitleFieldTemplate: ComponentType>; /** The template to use for rendering information about an unsupported field type in the schema */ - UnsupportedFieldTemplate: React.ComponentType>; + UnsupportedFieldTemplate: ComponentType>; /** The template to use for rendering a field that allows a user to add additional properties */ - WrapIfAdditionalTemplate: React.ComponentType< + WrapIfAdditionalTemplate: ComponentType< WrapIfAdditionalTemplateProps >; /** The set of templates associated with buttons in the form */ ButtonTemplates: { /** The template to use for the main `Submit` button */ - SubmitButton: React.ComponentType>; + SubmitButton: ComponentType>; /** The template to use for the Add button used for AdditionalProperties and Array items */ - AddButton: React.ComponentType>; + AddButton: ComponentType>; /** The template to use for the Move Down button used for Array items */ - MoveDownButton: React.ComponentType>; + MoveDownButton: ComponentType>; /** The template to use for the Move Up button used for Array items */ - MoveUpButton: React.ComponentType>; + MoveUpButton: ComponentType>; /** The template to use for the Remove button used for AdditionalProperties and Array items */ - RemoveButton: React.ComponentType>; + RemoveButton: ComponentType>; }; } @@ -307,9 +313,9 @@ export interface FieldProps< F extends FormContextType = any > extends GenericObjectType, Pick< - React.HTMLAttributes, + HTMLAttributes, Exclude< - keyof React.HTMLAttributes, + keyof HTMLAttributes, "onBlur" | "onFocus" | "onChange" > > { @@ -366,7 +372,7 @@ export type Field< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any -> = React.ComponentType>; +> = ComponentType>; /** The properties that are passed to a FieldTemplate implementation */ export type FieldTemplateProps< @@ -385,17 +391,17 @@ export type FieldTemplateProps< /** A component instance rendering the field description, if one is defined (this will use any custom * `DescriptionField` defined) */ - description?: React.ReactElement; + description?: ReactElement; /** A string containing any `ui:description` uiSchema directive defined */ rawDescription?: string; /** The field or widget component instance for this field row */ - children: React.ReactElement; + children: ReactElement; /** A component instance listing any encountered errors for this field */ - errors?: React.ReactElement; + errors?: ReactElement; /** An array of strings listing all generated error messages from encountered errors for this field */ rawErrors?: string[]; /** A component instance rendering any `ui:help` uiSchema directive defined */ - help?: React.ReactElement; + help?: ReactElement; /** A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed * `ui:help` is a React component instead of a string */ @@ -481,7 +487,7 @@ export type DescriptionFieldProps< /** The uiSchema object for this description field */ uiSchema?: UiSchema; /** The description of the field being rendered */ - description: string | React.ReactElement; + description: string | ReactElement; /** The `registry` object */ registry: Registry; }; @@ -505,7 +511,7 @@ export type ArrayFieldDescriptionProps< F extends FormContextType = any > = Omit, "id" | "description"> & { /** The description of the field being rendered */ - description?: string | React.ReactElement; + description?: string | ReactElement; /** The idSchema of the field in the hierarchy */ idSchema: IdSchema; }; @@ -517,7 +523,7 @@ export type ArrayFieldTemplateItemType< F extends FormContextType = any > = { /** The html for the item's content */ - children: React.ReactElement; + children: ReactElement; /** The className string */ className: string; /** A boolean value stating if the array item is disabled */ @@ -597,7 +603,7 @@ export type ArrayFieldTemplateProps< /** The properties of each element in the ObjectFieldTemplateProps.properties array */ export type ObjectFieldTemplatePropertyType = { /** The html for the property's content */ - content: React.ReactElement; + content: ReactElement; /** A string representing the property name */ name: string; /** A boolean value stating if the object property is disabled */ @@ -651,7 +657,7 @@ export type WrapIfAdditionalTemplateProps< F extends FormContextType = any > = { /** The field or widget component instance for this field row */ - children: React.ReactNode; + children: ReactNode; } & Pick< FieldTemplateProps, | "id" @@ -675,8 +681,8 @@ export interface WidgetProps< F extends FormContextType = any > extends GenericObjectType, Pick< - React.HTMLAttributes, - Exclude, "onBlur" | "onFocus"> + HTMLAttributes, + Exclude, "onBlur" | "onFocus"> > { /** The generated id for this widget, used to provide unique `name`s and `id`s for the HTML field elements rendered by * widgets @@ -734,7 +740,20 @@ export type Widget< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any -> = React.ComponentType>; +> = ComponentType>; + +/** The properties that are passed to the BaseInputTemplate */ +export interface BaseInputTemplateProps< + T = any, + S extends StrictRJSFSchema = RJSFSchema, + F extends FormContextType = any +> extends WidgetProps { + /** A `BaseInputTemplate` implements a default `onChange` handler that it passes to the HTML input component to handle + * the `ChangeEvent`. Sometimes a widget may need to handle the `ChangeEvent` using custom logic. If that is the case, + * that widget should provide its own handler via this prop. + */ + onChangeOverride?: (event: ChangeEvent) => void; +} /** The type that defines the props used by the Submit button */ export type SubmitButtonProps< @@ -753,11 +772,11 @@ export type IconButtonProps< T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any -> = React.ButtonHTMLAttributes & { +> = ButtonHTMLAttributes & { /** An alternative specification for the type of the icon button */ iconType?: string; /** The name representation or actual react element implementation for the icon */ - icon?: string | React.ReactElement; + icon?: string | ReactElement; /** The uiSchema for this widget */ uiSchema?: UiSchema; /** The `registry` object */