fix: rjsf-team#3130 by adding uiSchema to IconButtonProps

- In `@rjsf/utils`, updated the `IconButtonProps` type to add `uiSchema` which required adding the `T` and `F` generics to it and the associated `ButtonTemplates` in `TemplatesType` - Also added `uiSchema` to the `ArrayFieldTemplateItemType` - In `@rjsf/core`, updated the `IconButton`-based components to pass `uiSchema` - Updated `ArrayField` to pass `uiSchema` to the `ArrayFieldTemplateItemType` creating in `renderArrayFieldItem()` - Updated `IconButton` to strip out the `uiSchema` before passing props to the button - Updated `FieldTemplate` to pass `uiSchema` to `WrapIfAdditional` - Updated `ArrayFieldItemTemplate` and `WrapIfAdditional` to take `uiSchema` and pass it to the icon buttons - Updated `ArrayFieldTemplate` and `ObjectFieldTemplate` to pass `uiSchema` to the icon buttons - In the `antd`, `bootstrap-4`, `chakra-ui`, `material-ui`, `mui` and `semantic-ui` themes, updated the `IconButton`-based components to pass `uiSchema` - Updated `IconButton` and `AddButton` to strip out the `uiSchema` before passing props to the button - Updated `FieldTemplate` to pass `uiSchema` to `WrapIfAdditional` - Updated `ArrayFieldItemTemplate` and `WrapIfAdditional` to take `uiSchema` and pass it to the icon buttons - Updated `ArrayFieldTemplate` and `ObjectFieldTemplate` to pass `uiSchema` to the icon buttons - In the `fluent-ui` theme, updated the `IconButton`-based components to pass `uiSchema` - Updated `IconButton` and `AddButton` to strip out the `uiSchema` before passing props to the button - Updated `ArrayFieldItemTemplate` to take `uiSchema` and pass it to the icon buttons - Updated `ArrayFieldTemplate` and `ObjectFieldTemplate` to pass `uiSchema` to the icon buttons - Updated the `custom-templates.md` to add the `uiSchema` as a prop for `IconButtons` and `ArrayFieldItemTemplate` - Updated the `CHANGELOG.md` accordingly
heath-freenome · Sep 22, 2022 · d957ffb · d957ffb
1 parent a23e57c
commit d957ffb
Show file tree

Hide file tree

Showing 52 changed files with 138 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,32 +17,43 @@ should change the heading of the (upcoming) version to include a major version b
 -->
 # 5.0.0-beta.9
 
+## @rjsf/antd
+- Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
+
 ## @rjsf/bootstrap
 - Updated the `FieldErrorTemplate` to remove the explicit typing of the `error` to string to support the two options
 - Updated `Theme` to use the renamed `ThemeProps` from `@rjsf/core`
+- Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
 
 ## @rjsf/chakra-ui
 - Updated `Theme` to use the renamed `ThemeProps` from `@rjsf/core`
+- Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
 
 ## @rjsf/core
 - Updated the `FieldErrorTemplate` to remove the explicit typing of the `error` to string to support the two options 
 - Implemented programmatic validation via new `validateForm()` method on `Form`, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/2755, https://github.com/rjsf-team/react-jsonschema-form/issues/2552, https://github.com/rjsf-team/react-jsonschema-form/issues/2381, https://github.com/rjsf-team/react-jsonschema-form/issues/2343, https://github.com/rjsf-team/react-jsonschema-form/issues/1006, https://github.com/rjsf-team/react-jsonschema-form/issues/246)
 - Renamed `WithThemeProps` to `ThemeProps` to prevent another breaking-change by returning the type back to the name it had in version 4
+- Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
 
 ## @rjsf/fluent-ui
 - Updated `Theme` to use the renamed `ThemeProps` from `@rjsf/core`
+- Pass `uiSchema` appropriately to all of the `IconButton`s and `ArrayFieldItemTemplate` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
 
 ## @rjsf/material-ui
 - Updated `Theme` to use the renamed `ThemeProps` from `@rjsf/core`
+- Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
 
 ## @rjsf/mui
 - Updated `Theme` to use the renamed `ThemeProps` from `@rjsf/core`
+- Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
 
 ## @rjsf/semantic-ui
 - Updated the `FieldErrorTemplate` to use the `children` variation of the `List.Item` that supports ReactElement
+- Pass `uiSchema` appropriately to all of the `IconButton`s, `ArrayFieldItemTemplate` and `WrapIfAdditional` components, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
 
 ## @rjsf/utils
 - Updated the `FieldErrorProps` type to make it support an array of string and ReactElement
+- Updated the `IconButtonProps` type to add `uiSchema`, adding the `<T = any, F = any>` generics to it and the associated `ButtonTemplates` in `TemplatesType` AND added `uiSchema` to `ArrayFieldTemplateItemType` as well, fixing (https://github.com/rjsf-team/react-jsonschema-form/issues/3130)
 
 ## Dev / docs / playground
 - Updated the `custom-templates.md` file to add the missing asterisk to the new `FieldErrorTemplate` and `FieldHelpTemplate`

diff --git a/docs/advanced-customization/custom-templates.md b/docs/advanced-customization/custom-templates.md
@@ -118,6 +118,7 @@ The following props are part of each element in `items`:
 - `onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.
 - `onReorderClick: (index, newIndex) => (event?) => void`: Returns a function that swaps the items at `index` with `newIndex`.
 - `readonly`: A boolean value stating if the array item is read-only.
+- `uiSchema`: The uiSchema object for this array item.
 - `registry`: The `registry` object.
 
 > Note: Array and object field templates are always rendered inside the FieldTemplate. To fully customize an array field template, you may need to specify both `ui:FieldTemplate` and `ui:ArrayFieldTemplate`.
@@ -215,6 +216,7 @@ The following props are passed to each `ArrayFieldItemTemplate`:
 - `onDropIndexClick: (index) => (event?) => void`: Returns a function that removes the item at `index`.
 - `onReorderClick: (index, newIndex) => (event?) => void`: Returns a function that swaps the items at `index` with `newIndex`.
 - `readonly`: A boolean value stating if the array item is read-only.
+- `uiSchema`: The uiSchema object for this array item.
 - `registry`: The `registry` object.
 
 ## ArrayFieldTitleTemplate
@@ -756,6 +758,7 @@ Each button template (except for the `SubmitButton`) accepts, as props, the stan
 
 - `iconType`: An alternative specification for the type of the icon button.
 - `icon`: The name representation or actual react element implementation for the icon.
+- `uiSchema`: The uiSchema object for this field.
 
 ### AddButton
 

diff --git a/packages/antd/src/templates/ArrayFieldItemTemplate/index.js b/packages/antd/src/templates/ArrayFieldItemTemplate/index.js
@@ -25,6 +25,7 @@ const ArrayFieldItemTemplate = ({
   onReorderClick,
   readonly,
   registry,
+  uiSchema,
 }) => {
   const { MoveDownButton, MoveUpButton, RemoveButton } =
     registry.templates.ButtonTemplates;
@@ -42,22 +43,23 @@ const ArrayFieldItemTemplate = ({
                 disabled={disabled || readonly || !hasMoveUp}
                 onClick={onReorderClick(index, index - 1)}
                 style={BTN_STYLE}
+                uiSchema={uiSchema}
               />
             )}
-
             {(hasMoveUp || hasMoveDown) && (
               <MoveDownButton
                 disabled={disabled || readonly || !hasMoveDown}
                 onClick={onReorderClick(index, index + 1)}
                 style={BTN_STYLE}
+                uiSchema={uiSchema}
               />
             )}
-
             {hasRemove && (
               <RemoveButton
                 disabled={disabled || readonly}
                 onClick={onDropIndexClick(index)}
                 style={BTN_STYLE}
+                uiSchema={uiSchema}
               />
             )}
           </Button.Group>

diff --git a/packages/antd/src/templates/ArrayFieldTemplate/index.js b/packages/antd/src/templates/ArrayFieldTemplate/index.js
@@ -99,6 +99,7 @@ const ArrayFieldTemplate = ({
                   className="array-item-add"
                   disabled={disabled || readonly}
                   onClick={onAddClick}
+                  uiSchema={uiSchema}
                 />
               </Col>
             </Row>

diff --git a/packages/antd/src/templates/FieldTemplate/WrapIfAdditional.js b/packages/antd/src/templates/FieldTemplate/WrapIfAdditional.js
@@ -26,6 +26,7 @@ const WrapIfAdditional = ({
   required,
   registry,
   schema,
+  uiSchema,
 }) => {
   const {
     colon,
@@ -85,6 +86,7 @@ const WrapIfAdditional = ({
             className="array-item-remove"
             disabled={disabled || readonly}
             onClick={onDropPropertyClick(label)}
+            uiSchema={uiSchema}
           />
         </Col>
       </Row>

diff --git a/packages/antd/src/templates/FieldTemplate/index.js b/packages/antd/src/templates/FieldTemplate/index.js
@@ -27,7 +27,7 @@ const FieldTemplate = ({
   registry,
   required,
   schema,
-  // uiSchema,
+  uiSchema,
 }) => {
   const {
     colon,
@@ -52,6 +52,7 @@ const FieldTemplate = ({
       readonly={readonly}
       required={required}
       schema={schema}
+      uiSchema={uiSchema}
       registry={registry}
     >
       {id === "root" ? (

diff --git a/packages/antd/src/templates/IconButton/index.js b/packages/antd/src/templates/IconButton/index.js
@@ -7,7 +7,7 @@ import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 import PlusCircleOutlined from "@ant-design/icons/PlusCircleOutlined";
 
 export default function IconButton(props) {
-  const { iconType = "default", icon, ...otherProps } = props;
+  const { iconType = "default", icon, uiSchema, ...otherProps } = props;
   return <Button type={iconType} icon={icon} {...otherProps} />;
 }
 

diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.js b/packages/antd/src/templates/ObjectFieldTemplate/index.js
@@ -129,6 +129,7 @@ const ObjectFieldTemplate = ({
                 className="object-property-expand"
                 disabled={disabled || readonly}
                 onClick={onAddClick(schema)}
+                uiSchema={uiSchema}
               />
             </Col>
           </Row>

diff --git a/packages/bootstrap-4/src/AddButton/AddButton.tsx b/packages/bootstrap-4/src/AddButton/AddButton.tsx
@@ -1,10 +1,12 @@
 import React from "react";
-
 import { IconButtonProps } from "@rjsf/utils";
 import Button from "react-bootstrap/Button";
 import { BsPlus } from "@react-icons/all-files/bs/BsPlus";
 
-const AddButton: React.ComponentType<IconButtonProps> = (props) => (
+const AddButton: React.ComponentType<IconButtonProps> = ({
+  uiSchema,
+  ...props
+}) => (
   <Button
     {...props}
     style={{ width: "100%" }}

diff --git a/packages/bootstrap-4/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/bootstrap-4/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -16,6 +16,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
     onReorderClick,
     readonly,
     registry,
+    uiSchema,
   } = props;
   const { MoveDownButton, MoveUpButton, RemoveButton } =
     registry.templates.ButtonTemplates;
@@ -41,6 +42,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
                     style={btnStyle}
                     disabled={disabled || readonly || !hasMoveUp}
                     onClick={onReorderClick(index, index - 1)}
+                    uiSchema={uiSchema}
                   />
                 </div>
               )}
@@ -50,6 +52,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
                     style={btnStyle}
                     disabled={disabled || readonly || !hasMoveDown}
                     onClick={onReorderClick(index, index + 1)}
+                    uiSchema={uiSchema}
                   />
                 </div>
               )}
@@ -59,6 +62,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
                     style={btnStyle}
                     disabled={disabled || readonly}
                     onClick={onDropIndexClick(index)}
+                    uiSchema={uiSchema}
                   />
                 </div>
               )}

diff --git a/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -81,6 +81,7 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
                       className="array-item-add"
                       onClick={onAddClick}
                       disabled={disabled || readonly}
+                      uiSchema={uiSchema}
                     />
                   </Col>
                 </Row>

diff --git a/packages/bootstrap-4/src/FieldTemplate/FieldTemplate.tsx b/packages/bootstrap-4/src/FieldTemplate/FieldTemplate.tsx
@@ -20,6 +20,7 @@ const FieldTemplate = ({
   readonly,
   required,
   schema,
+  uiSchema,
   registry,
 }: FieldTemplateProps) => {
   return (
@@ -33,6 +34,7 @@ const FieldTemplate = ({
       readonly={readonly}
       required={required}
       schema={schema}
+      uiSchema={uiSchema}
       registry={registry}
     >
       <Form.Group>

diff --git a/packages/bootstrap-4/src/FieldTemplate/WrapIfAdditional.tsx b/packages/bootstrap-4/src/FieldTemplate/WrapIfAdditional.tsx
@@ -17,6 +17,7 @@ type WrapIfAdditionalProps = { children: React.ReactElement } & Pick<
   | "readonly"
   | "required"
   | "schema"
+  | "uiSchema"
   | "registry"
 >;
 
@@ -31,6 +32,7 @@ const WrapIfAdditional = ({
   readonly,
   required,
   schema,
+  uiSchema,
   registry,
 }: WrapIfAdditionalProps) => {
   const { RemoveButton } = registry.templates.ButtonTemplates;
@@ -68,6 +70,7 @@ const WrapIfAdditional = ({
           className="w-100"
           disabled={disabled || readonly}
           onClick={onDropPropertyClick(label)}
+          uiSchema={uiSchema}
         />
       </Col>
     </Row>

diff --git a/packages/bootstrap-4/src/IconButton/IconButton.tsx b/packages/bootstrap-4/src/IconButton/IconButton.tsx
@@ -6,7 +6,7 @@ import { AiOutlineArrowUp } from "@react-icons/all-files/ai/AiOutlineArrowUp";
 import { AiOutlineArrowDown } from "@react-icons/all-files/ai/AiOutlineArrowDown";
 
 const IconButton = (props: IconButtonProps & ButtonProps) => {
-  const { icon, iconType, className, ...otherProps } = props;
+  const { icon, iconType, className, uiSchema, ...otherProps } = props;
   return (
     <Button
       block={iconType === "block"}

diff --git a/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -75,6 +75,7 @@ const ObjectFieldTemplate = ({
                 onClick={onAddClick(schema)}
                 disabled={disabled || readonly}
                 className="object-property-expand"
+                uiSchema={uiSchema}
               />
             </Col>
           </Row>

diff --git a/packages/chakra-ui/src/AddButton/AddButton.tsx b/packages/chakra-ui/src/AddButton/AddButton.tsx
@@ -3,7 +3,10 @@ import { IconButtonProps } from "@rjsf/utils";
 import { Button } from "@chakra-ui/react";
 import { AddIcon } from "@chakra-ui/icons";
 
-const AddButton: React.ComponentType<IconButtonProps> = (props) => (
+const AddButton: React.ComponentType<IconButtonProps> = ({
+  uiSchema,
+  ...props
+}) => (
   <Button leftIcon={<AddIcon />} {...props}>
     Add Item
   </Button>

diff --git a/packages/chakra-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/chakra-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -14,6 +14,7 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
     onDropIndexClick,
     onReorderClick,
     readonly,
+    uiSchema,
     registry,
   } = props;
   const { MoveDownButton, MoveUpButton, RemoveButton } =
@@ -43,18 +44,21 @@ const ArrayFieldItemTemplate = (props: ArrayFieldTemplateItemType) => {
               <MoveUpButton
                 disabled={disabled || readonly || !hasMoveUp}
                 onClick={onArrowUpClick}
+                uiSchema={uiSchema}
               />
             )}
             {(hasMoveUp || hasMoveDown) && (
               <MoveDownButton
                 disabled={disabled || readonly || !hasMoveDown}
                 onClick={onArrowDownClick}
+                uiSchema={uiSchema}
               />
             )}
             {hasRemove && (
               <RemoveButton
                 disabled={disabled || readonly}
                 onClick={onRemoveClick}
+                uiSchema={uiSchema}
               />
             )}
           </ButtonGroup>

diff --git a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -73,6 +73,7 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
                 className="array-item-add"
                 onClick={onAddClick}
                 disabled={disabled || readonly}
+                uiSchema={uiSchema}
               />
             </Box>
           </GridItem>

diff --git a/packages/chakra-ui/src/FieldTemplate/FieldTemplate.tsx b/packages/chakra-ui/src/FieldTemplate/FieldTemplate.tsx
@@ -23,6 +23,7 @@ const FieldTemplate = (props: FieldTemplateProps) => {
     help,
     rawDescription,
     schema,
+    uiSchema,
   } = props;
 
   if (hidden) {
@@ -40,6 +41,7 @@ const FieldTemplate = (props: FieldTemplateProps) => {
       readonly={readonly}
       required={required}
       schema={schema}
+      uiSchema={uiSchema}
       registry={registry}
     >
       <FormControl

diff --git a/packages/chakra-ui/src/FieldTemplate/WrapIfAdditional.tsx b/packages/chakra-ui/src/FieldTemplate/WrapIfAdditional.tsx
@@ -19,6 +19,7 @@ type WrapIfAdditionalProps = { children: React.ReactElement } & Pick<
   | "readonly"
   | "required"
   | "schema"
+  | "uiSchema"
   | "registry"
 >;
 
@@ -35,6 +36,7 @@ const WrapIfAdditional = (props: WrapIfAdditionalProps) => {
     registry,
     required,
     schema,
+    uiSchema,
   } = props;
   const { RemoveButton } = registry.templates.ButtonTemplates;
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
@@ -69,6 +71,7 @@ const WrapIfAdditional = (props: WrapIfAdditionalProps) => {
         <RemoveButton
           disabled={disabled || readonly}
           onClick={onDropPropertyClick(label)}
+          uiSchema={uiSchema}
         />
       </GridItem>
     </Grid>

diff --git a/packages/chakra-ui/src/IconButton/IconButton.tsx b/packages/chakra-ui/src/IconButton/IconButton.tsx
@@ -12,7 +12,7 @@ import { ArrowUpIcon, ArrowDownIcon, DeleteIcon } from "@chakra-ui/icons";
  * icon, tabIndex, disabled, onClick
  */
 const ChakraIconButton = memo((props: IconButtonProps) => {
-  const { icon, iconType, ...otherProps } = props;
+  const { icon, iconType, uiSchema, ...otherProps } = props;
   return (
     <IconButton
       aria-label={props.title!}

diff --git a/packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -72,6 +72,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
               className="object-property-expand"
               onClick={onAddClick(schema)}
               disabled={disabled || readonly}
+              uiSchema={uiSchema}
             />
           </GridItem>
         )}

diff --git a/packages/core/src/components/fields/ArrayField.tsx b/packages/core/src/components/fields/ArrayField.tsx
@@ -856,6 +856,7 @@ class ArrayField<T = any, F = any> extends Component<
       onReorderClick: this.onReorderClick,
       readonly,
       registry,
+      uiSchema: itemUiSchema,
     };
   }
 }