feat: add readOnly support to React Material array and list with detail

Closes #1901

Author: LukasBoll

packages/core/src/util/renderer.ts

@@ -682,6 +682,7 @@ export interface OwnPropsOfMasterListItem {
   index: number;
   selected: boolean;
   path: string;
+  enabled: boolean;
   schema: JsonSchema;
   handleSelect(index: number): () => void;
   removeItem(path: string, value: number): () => void;

packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx

@@ -39,6 +39,7 @@ export const ListWithDetailMasterItem = ({
   index,
   childLabel,
   selected,
+  enabled,
   handleSelect,
   removeItem,
   path,
@@ -50,15 +51,17 @@ export const ListWithDetailMasterItem = ({
         <Avatar aria-label='Index'>{index + 1}</Avatar>
       </ListItemAvatar>
       <ListItemText primary={childLabel} />
-      <ListItemSecondaryAction>
-        <IconButton
-          aria-label={translations.removeAriaLabel}
-          onClick={removeItem(path, index)}
-          size='large'
-        >
-          <DeleteIcon />
-        </IconButton>
-      </ListItemSecondaryAction>
+      {enabled && (
+        <ListItemSecondaryAction>
+          <IconButton
+            aria-label={translations.removeAriaLabel}
+            onClick={removeItem(path, index)}
+            size='large'
+          >
+            <DeleteIcon />
+          </IconButton>
+        </ListItemSecondaryAction>
+      )}
     </ListItem>
   );
 };

packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx

@@ -51,6 +51,7 @@ export const MaterialListWithDetailRenderer = ({
   schema,
   uischema,
   path,
+  enabled,
   errors,
   visible,
   label,
@@ -114,6 +115,7 @@ export const MaterialListWithDetailRenderer = ({
         )}
         errors={errors}
         path={path}
+        enabled={enabled}
         addItem={addItem}
         createDefault={handleCreateDefaultValue}
       />
@@ -126,6 +128,7 @@ export const MaterialListWithDetailRenderer = ({
                   index={index}
                   path={path}
                   schema={schema}
+                  enabled={enabled}
                   handleSelect={handleListItemClick}
                   removeItem={handleRemoveItem}
                   selected={selectedIndex === index}

packages/material-renderers/src/layouts/ArrayToolbar.tsx

@@ -7,6 +7,7 @@ export interface ArrayLayoutToolbarProps {
   label: string;
   errors: string;
   path: string;
+  enabled: boolean;
   addItem(path: string, data: any): () => void;
   createDefault(): any;
   translations: ArrayTranslations;
@@ -16,39 +17,56 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
   errors,
   addItem,
   path,
+  enabled,
   createDefault,
   translations,
 }: ArrayLayoutToolbarProps) {
   return (
     <Toolbar disableGutters={true}>
       <Grid container alignItems='center' justifyContent='space-between'>
         <Grid item>
-          <Typography variant={'h6'}>{label}</Typography>
+          <Grid
+            container
+            justifyContent={'flex-start'}
+            alignItems={'center'}
+            spacing={2}
+          >
+            <Grid item>
+              <Typography variant={'h6'}>{label}</Typography>
+            </Grid>
+            <Grid item>
+              {errors.length !== 0 && (
+                <Grid item>
+                  <ValidationIcon
+                    id='tooltip-validation'
+                    errorMessages={errors}
+                  />
+                </Grid>
+              )}
+            </Grid>
+          </Grid>
         </Grid>
-        {errors.length !== 0 && (
+        {enabled && (
           <Grid item>
-            <ValidationIcon id='tooltip-validation' errorMessages={errors} />
-          </Grid>
-        )}
-        <Grid item>
-          <Grid container>
-            <Grid item>
-              <Tooltip
-                id='tooltip-add'
-                title={translations.addTooltip}
-                placement='bottom'
-              >
-                <IconButton
-                  aria-label={translations.addAriaLabel}
-                  onClick={addItem(path, createDefault())}
-                  size='large'
+            <Grid container>
+              <Grid item>
+                <Tooltip
+                  id='tooltip-add'
+                  title={translations.addTooltip}
+                  placement='bottom'
                 >
-                  <AddIcon />
-                </IconButton>
-              </Tooltip>
+                  <IconButton
+                    aria-label={translations.addTooltip}
+                    onClick={addItem(path, createDefault())}
+                    size='large'
+                  >
+                    <AddIcon />
+                  </IconButton>
+                </Tooltip>
+              </Grid>
             </Grid>
           </Grid>
-        </Grid>
+        )}
       </Grid>
     </Toolbar>
   );

packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx

@@ -164,7 +164,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   justifyContent='center'
                   alignItems='center'
                 >
-                  {showSortButtons ? (
+                  {showSortButtons && enabled ? (
                     <Fragment>
                       <Grid item>
                         <IconButton
@@ -192,16 +192,18 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   ) : (
                     ''
                   )}
-                  <Grid item>
-                    <IconButton
-                      onClick={removeItems(path, [index])}
-                      style={iconStyle}
-                      aria-label={translations.removeAriaLabel}
-                      size='large'
-                    >
-                      <DeleteIcon />
-                    </IconButton>
-                  </Grid>
+                  {enabled && (
+                    <Grid item>
+                      <IconButton
+                        onClick={removeItems(path, [index])}
+                        style={iconStyle}
+                        aria-label={translations.removeAriaLabel}
+                        size='large'
+                      >
+                        <DeleteIcon />
+                      </IconButton>
+                    </Grid>
+                  )}
                 </Grid>
               </Grid>
             </Grid>

packages/material-renderers/src/layouts/MaterialArrayLayout.tsx

@@ -80,6 +80,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
         )}
         errors={errors}
         path={path}
+        enabled={enabled}
         addItem={addItem}
         createDefault={innerCreateDefaultValue}
       />