add readOnly functionality to array and list

closes #1901
eclipsesource · Dec 13, 2022 · aee81cd · aee81cd
1 parent 96be520
commit aee81cd
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 32 deletions.
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
@@ -644,6 +644,7 @@ export interface OwnPropsOfMasterListItem {
   index: number;
   selected: boolean;
   path: string;
+  enabled: boolean;
   schema: JsonSchema;
   handleSelect(index: number): () => void;
   removeItem(path: string, value: number): () => void;

diff --git a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
@@ -35,7 +35,7 @@ import {
 import DeleteIcon from '@mui/icons-material/Delete';
 import React from 'react';
 
-const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path }: StatePropsOfMasterItem) => {
+const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handleSelect, removeItem, path }: StatePropsOfMasterItem) => {
     return (
         <ListItem
             button
@@ -46,11 +46,13 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, r
                 <Avatar aria-label='Index'>{index + 1}</Avatar>
             </ListItemAvatar>
             <ListItemText primary={childLabel} />
-            <ListItemSecondaryAction>
-                <IconButton aria-label='Delete' onClick={removeItem(path, index)} size='large'>
-                    <DeleteIcon />
-                </IconButton>
-            </ListItemSecondaryAction>
+            { enabled &&
+                <ListItemSecondaryAction>
+                    <IconButton aria-label='Delete' onClick={removeItem(path, index)} size='large'>
+                        <DeleteIcon />
+                    </IconButton>
+                </ListItemSecondaryAction>
+            }
         </ListItem>
     );
 };

diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -51,6 +51,7 @@ export const MaterialListWithDetailRenderer = ({
   schema,
   uischema,
   path,
+  enabled,
   errors,
   visible,
   label,
@@ -112,6 +113,7 @@ export const MaterialListWithDetailRenderer = ({
         )}
         errors={errors}
         path={path}
+        enabled={enabled}
         addItem={addItem}
         createDefault={handleCreateDefaultValue}
       />
@@ -124,6 +126,7 @@ export const MaterialListWithDetailRenderer = ({
                   index={index}
                   path={path}
                   schema={schema}
+                  enabled={enabled}
                   handleSelect={handleListItemClick}
                   removeItem={handleRemoveItem}
                   selected={selectedIndex === index}

diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
@@ -12,6 +12,7 @@ export interface ArrayLayoutToolbarProps {
   label: string;
   errors: string;
   path: string;
+  enabled: boolean;
   addItem(path: string, data: any): () => void;
   createDefault(): any;
 }
@@ -21,6 +22,7 @@ export const ArrayLayoutToolbar = React.memo(
     errors,
     addItem,
     path,
+    enabled,
     createDefault
   }: ArrayLayoutToolbarProps) => {
     return (
@@ -34,24 +36,26 @@ export const ArrayLayoutToolbar = React.memo(
               <ValidationIcon id='tooltip-validation' errorMessages={errors} />
             </Grid>
           }
-          <Grid item>
-            <Grid container>
-              <Grid item>
-                <Tooltip
-                  id='tooltip-add'
-                  title={`Add to ${label}`}
-                  placement='bottom'
-                >
-                  <IconButton
-                    aria-label={`Add to ${label}`}
-                    onClick={addItem(path, createDefault())}
-                    size='large'>
-                    <AddIcon />
-                  </IconButton>
-                </Tooltip>
+          {enabled && 
+            <Grid item>
+              <Grid container>
+                <Grid item>
+                  <Tooltip
+                    id='tooltip-add'
+                    title={`Add to ${label}`}
+                    placement='bottom'
+                  >
+                    <IconButton
+                      aria-label={`Add to ${label}`}
+                      onClick={addItem(path, createDefault())}
+                      size='large'>
+                      <AddIcon />
+                    </IconButton>
+                  </Tooltip>
+                </Grid>
               </Grid>
             </Grid>
-          </Grid>
+          }
         </Grid>
       </Toolbar>
     );

diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -150,7 +150,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   justifyContent='center'
                   alignItems='center'
                 >
-                  {showSortButtons ? (
+                  {showSortButtons && enabled ? (
                     <Fragment>
                       <Grid item>
                         <IconButton
@@ -176,15 +176,17 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   ) : (
                     ''
                   )}
-                  <Grid item>
-                    <IconButton
-                      onClick={removeItems(path, [index])}
-                      style={iconStyle}
-                      aria-label={`Delete`}
-                      size='large'>
-                      <DeleteIcon />
-                    </IconButton>
-                  </Grid>
+                  { enabled && 
+                    <Grid item>
+                      <IconButton
+                        onClick={removeItems(path, [index])}
+                        style={iconStyle}
+                        aria-label={`Delete`}
+                        size='large'>
+                        <DeleteIcon />
+                      </IconButton>
+                    </Grid>
+                  }
                 </Grid>
               </Grid>
             </Grid>

diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -76,6 +76,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
         )}
         errors={errors}
         path={path}
+        enabled={enabled}
         addItem={addItem}
         createDefault={innerCreateDefaultValue}
       />