Chore: Convert ObjectField to a stateless component

The work to convert `ObjectField` to a stateless functional component with some optimizations

Author: heath-freenome

packages/antd/src/templates/FieldTemplate/index.tsx

@@ -34,6 +34,8 @@ export default function FieldTemplate<
     hidden,
     id,
     label,
+    onRemovePropertyClick,
+    onKeyRenameBlur,
     onDropPropertyClick,
     onKeyChange,
     rawErrors,
@@ -86,6 +88,8 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
+      onRemovePropertyClick={onRemovePropertyClick}
+      onKeyRenameBlur={onKeyRenameBlur}
       onDropPropertyClick={onDropPropertyClick}
       onKeyChange={onKeyChange}
       readonly={readonly}

packages/antd/src/templates/ObjectFieldTemplate/index.tsx

@@ -40,7 +40,7 @@ export default function ObjectFieldTemplate<
     disabled,
     formData,
     fieldPathId,
-    onAddClick,
+    onAddProperty,
     optionalDataControl,
     properties,
     readonly,
@@ -160,7 +160,7 @@ export default function ObjectFieldTemplate<
                 id={buttonId(fieldPathId, 'add')}
                 className='rjsf-object-property-expand'
                 disabled={disabled || readonly}
-                onClick={onAddClick(schema)}
+                onClick={onAddProperty}
                 uiSchema={uiSchema}
                 registry={registry}
               />

packages/antd/src/templates/WrapIfAdditionalTemplate/index.tsx

@@ -1,4 +1,3 @@
-import { FocusEvent } from 'react';
 import { Col, Row, Form, Input } from 'antd';
 import {
   ADDITIONAL_PROPERTY_FLAG,
@@ -35,8 +34,8 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemovePropertyClick,
+    onKeyRenameBlur,
     readonly,
     required,
     registry,
@@ -66,8 +65,6 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target && target.value);
-
   // The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
   const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
   const buttonUiOptions = {
@@ -97,7 +94,7 @@ export default function WrapIfAdditionalTemplate<
                 disabled={disabled || (readonlyAsDisabled && readonly)}
                 id={`${id}-key`}
                 name={`${id}-key`}
-                onBlur={!readonly ? handleBlur : undefined}
+                onBlur={!readonly ? onKeyRenameBlur : undefined}
                 style={INPUT_STYLE}
                 type='text'
               />
@@ -112,7 +109,7 @@ export default function WrapIfAdditionalTemplate<
             id={buttonId(id, 'remove')}
             className='rjsf-object-property-remove'
             disabled={disabled || readonly}
-            onClick={onDropPropertyClick(label)}
+            onClick={onRemovePropertyClick}
             uiSchema={buttonUiOptions}
             registry={registry}
           />

packages/chakra-ui/src/FieldTemplate/FieldTemplate.tsx

@@ -22,6 +22,8 @@ export default function FieldTemplate<
     displayLabel,
     hidden,
     label,
+    onRemovePropertyClick,
+    onKeyRenameBlur,
     onDropPropertyClick,
     onKeyChange,
     readonly,
@@ -53,6 +55,8 @@ export default function FieldTemplate<
       disabled={disabled}
       id={id}
       label={label}
+      onRemovePropertyClick={onRemovePropertyClick}
+      onKeyRenameBlur={onKeyRenameBlur}
       onDropPropertyClick={onDropPropertyClick}
       onKeyChange={onKeyChange}
       readonly={readonly}

packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -29,7 +29,7 @@ export default function ObjectFieldTemplate<
     schema,
     formData,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     registry,
   } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -81,7 +81,7 @@ export default function ObjectFieldTemplate<
             <AddButton
               id={buttonId(fieldPathId, 'add')}
               className='rjsf-object-property-expand'
-              onClick={onAddClick(schema)}
+              onClick={onAddProperty}
               disabled={disabled || readonly}
               uiSchema={uiSchema}
               registry={registry}

packages/chakra-ui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,4 +1,3 @@
-import { FocusEvent } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   buttonId,
@@ -24,8 +23,8 @@ export default function WrapIfAdditionalTemplate<
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemovePropertyClick,
+    onKeyRenameBlur,
     readonly,
     registry,
     required,
@@ -45,8 +44,6 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
-
   return (
     <Grid key={`${id}-key`} className={classNames} style={style} alignItems='center' gap={2}>
       <GridItem>
@@ -56,7 +53,7 @@ export default function WrapIfAdditionalTemplate<
             disabled={disabled || readonly}
             id={`${id}-key`}
             name={`${id}-key`}
-            onBlur={!readonly ? handleBlur : undefined}
+            onBlur={!readonly ? onKeyRenameBlur : undefined}
             type='text'
             mb={1}
           />
@@ -68,7 +65,7 @@ export default function WrapIfAdditionalTemplate<
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'
           disabled={disabled || readonly}
-          onClick={onDropPropertyClick(label)}
+          onClick={onRemovePropertyClick}
           uiSchema={uiSchema}
           registry={registry}
         />

packages/core/src/components/fields/ArrayField.tsx

@@ -519,8 +519,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     const _schemaItems: S = isObject(schema.items) ? (schema.items as S) : ({} as S);
     const itemsSchema: S = schemaUtils.retrieveSchema(_schemaItems);
     const formData = keyedToPlainFormData(this.state.keyedFormData);
-    const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
-    const hasFormData = isFormDataAvailable(this.props.formData);
+    const renderOptionalField = shouldRenderOptionalField<T[], S, F>(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable<T[]>(this.props.formData);
     const canAdd = this.canAddItem(formData) && (!renderOptionalField || hasFormData);
     const actualFormData = hasFormData ? keyedFormData : [];
     const extraClass = renderOptionalField ? ' rjsf-optional-array-field' : '';
@@ -752,8 +752,8 @@ class ArrayField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     const uiOptions = getUiOptions<T[], S, F>(uiSchema);
     const { schemaUtils, fields, formContext, globalFormOptions } = registry;
     const { OptionalDataControlsField } = fields;
-    const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
-    const hasFormData = isFormDataAvailable(formData);
+    const renderOptionalField = shouldRenderOptionalField<T[], S, F>(registry, schema, required, uiSchema);
+    const hasFormData = isFormDataAvailable<T[]>(formData);
     const _schemaItems: S[] = isObject(schema.items) ? (schema.items as S[]) : ([] as S[]);
     const itemSchemas = _schemaItems.map((item: S, index: number) =>
       schemaUtils.retrieveSchema(item, items[index] as unknown as T[]),

packages/core/src/components/fields/LayoutMultiSchemaField.tsx

@@ -195,6 +195,8 @@ export default function LayoutMultiSchemaField<
       displayLabel={displayLabel}
       errors={errors}
       onChange={onChange}
+      onKeyRenameBlur={noop}
+      onRemovePropertyClick={noop}
       onDropPropertyClick={ignored}
       onKeyChange={ignored}
     >

packages/core/src/components/fields/MultiSchemaField.tsx

@@ -167,7 +167,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       globalUiOptions,
     );
     const isOptionalRender = shouldRenderOptionalField<T, S, F>(registry, schema, required, uiSchema);
-    const hasFormData = isFormDataAvailable(formData);
+    const hasFormData = isFormDataAvailable<T>(formData);
 
     const { selectedOption, retrievedOptions } = this.state;
     const {