Add custom label for add button on array of items

Author: agustin107

example/src/examples/custom-array/ui-schema.json

@@ -1 +1,5 @@
-{}
+{
+  "ui:options": {
+    "addButtonLabel": "Custom add label"
+  }
+}

src/AddButton/AddButton.tsx

@@ -5,7 +5,8 @@ import { AddButtonProps } from 'react-jsonschema-form';
 import Button from '@material-ui/core/Button';
 import AddIcon from '@material-ui/icons/Add';
 
-const AddButton: React.FC<AddButtonProps> = props => (
+// TODO: Add label property on type definition
+const AddButton: React.FC<AddButtonProps & { label?: string }> = props => (
   <Button {...props} color="secondary">
     <AddIcon /> {props.label || 'Add Item'}
   </Button>

src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -193,7 +193,11 @@ const DefaultNormalArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
                     className="array-item-add"
                     onClick={props.onAddClick}
                     disabled={props.disabled || props.readonly}
-                    label={props.uiSchema.buttonLabel}
+                    {...(props.uiSchema['ui:options'] && {
+                      label: props.uiSchema['ui:options'][
+                        'addButtonLabel'
+                      ] as string,
+                    })}
                   />
                 </Box>
               </Grid>