feat: add support for disabling remove and add buttons

- all array data based material renderers support disabling the add and remove button independent of the enablement of the control - fix missing context for ExpandPanelRenderer (#2326) Contributed on behalf of STMicroelectronics
eclipsesource · Jun 4, 2024 · b2db7c1 · b2db7c1
1 parent 52aa15a
commit b2db7c1
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 25 deletions.
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
@@ -726,6 +726,7 @@ export interface OwnPropsOfMasterListItem {
   handleSelect(index: number): () => void;
   removeItem(path: string, value: number): () => void;
   translations: ArrayTranslations;
+  disableRemove?: boolean;
 }
 
 export interface StatePropsOfMasterItem extends OwnPropsOfMasterListItem {
@@ -1133,6 +1134,8 @@ export interface StatePropsOfArrayLayout extends StatePropsOfControlWithDetail {
   data: number;
   translations: ArrayTranslations;
   minItems?: number;
+  disableRemove?: boolean;
+  disableAdd?: boolean;
 }
 /**
  * Map state to table props

diff --git a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
@@ -45,14 +45,15 @@ export const ListWithDetailMasterItem = ({
   removeItem,
   path,
   translations,
+  disableRemove,
 }: StatePropsOfMasterItem) => {
   return (
     <ListItem button selected={selected} onClick={handleSelect(index)}>
       <ListItemAvatar>
         <Avatar aria-label='Index'>{index + 1}</Avatar>
       </ListItemAvatar>
       <ListItemText primary={childLabel} />
-      {enabled && (
+      {enabled && !disableRemove && (
         <ListItemSecondaryAction>
           <Tooltip
             id='tooltip-remove'

diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -65,6 +65,8 @@ export const MaterialListWithDetailRenderer = ({
   rootSchema,
   translations,
   description,
+  disableAdd,
+  disableRemove,
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
@@ -124,6 +126,7 @@ export const MaterialListWithDetailRenderer = ({
         enabled={enabled}
         addItem={addItem}
         createDefault={handleCreateDefaultValue}
+        disableAdd={disableAdd}
       />
       <Grid container direction='row' spacing={2}>
         <Grid item xs={3}>
@@ -142,6 +145,7 @@ export const MaterialListWithDetailRenderer = ({
                   uischema={foundUISchema}
                   childLabelProp={appliedUiSchemaOptions.elementLabelProp}
                   translations={translations}
+                  disableRemove={disableRemove}
                 />
               ))
             ) : (

diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -278,6 +278,7 @@ interface NonEmptyRowProps {
   cells?: JsonFormsCellRendererRegistryEntry[];
   path: string;
   translations: ArrayTranslations;
+  disableRemove?: boolean;
 }
 
 const NonEmptyRowComponent = ({
@@ -294,6 +295,7 @@ const NonEmptyRowComponent = ({
   cells,
   path,
   translations,
+  disableRemove,
 }: NonEmptyRowProps & WithDeleteDialogSupport) => {
   const moveUp = useMemo(
     () => moveUpCreator(path, rowIndex),
@@ -354,21 +356,23 @@ const NonEmptyRowComponent = ({
                 </Grid>
               </Fragment>
             ) : null}
-            <Grid item>
-              <Tooltip
-                id='tooltip-remove'
-                title={translations.removeTooltip}
-                placement='bottom'
-              >
-                <IconButton
-                  aria-label={translations.removeAriaLabel}
-                  onClick={() => openDeleteDialog(childPath, rowIndex)}
-                  size='large'
+            {!disableRemove ? (
+              <Grid item>
+                <Tooltip
+                  id='tooltip-remove'
+                  title={translations.removeTooltip}
+                  placement='bottom'
                 >
-                  <DeleteIcon />
-                </IconButton>
-              </Tooltip>
-            </Grid>
+                  <IconButton
+                    aria-label={translations.removeAriaLabel}
+                    onClick={() => openDeleteDialog(childPath, rowIndex)}
+                    size='large'
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </Tooltip>
+              </Grid>
+            ) : null}
           </Grid>
         </NoBorderTableCell>
       ) : null}
@@ -387,6 +391,7 @@ interface TableRowsProp {
   moveUp?(path: string, toMove: number): () => void;
   moveDown?(path: string, toMove: number): () => void;
   translations: ArrayTranslations;
+  disableRemove?: boolean;
 }
 const TableRows = ({
   data,
@@ -400,6 +405,7 @@ const TableRows = ({
   enabled,
   cells,
   translations,
+  disableRemove,
 }: TableRowsProp & WithDeleteDialogSupport) => {
   const isEmptyTable = data === 0;
 
@@ -438,6 +444,7 @@ const TableRows = ({
             cells={cells}
             path={path}
             translations={translations}
+            disableRemove={disableRemove}
           />
         );
       })}
@@ -464,6 +471,7 @@ export class MaterialTableControl extends React.Component<
       enabled,
       cells,
       translations,
+      disableAdd,
     } = this.props;
 
     const controlElement = uischema as ControlElement;
@@ -491,6 +499,7 @@ export class MaterialTableControl extends React.Component<
             rootSchema={rootSchema}
             enabled={enabled}
             translations={translations}
+            disableAdd={disableAdd}
           />
           {isObjectSchema && (
             <TableRow>

diff --git a/packages/material-renderers/src/complex/TableToolbar.tsx b/packages/material-renderers/src/complex/TableToolbar.tsx
@@ -54,6 +54,7 @@ export interface MaterialTableToolbarProps {
   enabled: boolean;
   translations: ArrayTranslations;
   addItem(path: string, value: any): () => void;
+  disableAdd?: boolean;
 }
 
 const fixedCellSmall = {
@@ -72,6 +73,7 @@ const TableToolbar = React.memo(function TableToolbar({
   enabled,
   translations,
   rootSchema,
+  disableAdd,
 }: MaterialTableToolbarProps) {
   return (
     <TableRow>
@@ -100,7 +102,7 @@ const TableToolbar = React.memo(function TableToolbar({
           {description && <FormHelperText>{description}</FormHelperText>}
         </Stack>
       </NoBorderTableCell>
-      {enabled ? (
+      {enabled && !disableAdd ? (
         <NoBorderTableCell align='right' style={fixedCellSmall}>
           <Tooltip
             id='tooltip-add'

diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
@@ -20,6 +20,7 @@ export interface ArrayLayoutToolbarProps {
   addItem(path: string, data: any): () => void;
   createDefault(): any;
   translations: ArrayTranslations;
+  disableAdd?: boolean;
 }
 export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
   label,
@@ -30,6 +31,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
   enabled,
   createDefault,
   translations,
+  disableAdd,
 }: ArrayLayoutToolbarProps) {
   return (
     <Toolbar disableGutters={true}>
@@ -57,7 +59,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
               </Grid>
             </Grid>
           </Grid>
-          {enabled && (
+          {enabled && !disableAdd && (
             <Grid item>
               <Grid container>
                 <Grid item>

diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -29,6 +29,7 @@ import {
   removeId,
   ArrayTranslations,
   computeChildLabel,
+  UpdateArrayContext,
 } from '@jsonforms/core';
 import {
   Accordion,
@@ -65,6 +66,8 @@ interface OwnPropsOfExpandPanel {
   childLabelProp?: string;
   handleExpansion(panel: string): (event: any, expanded: boolean) => void;
   translations: ArrayTranslations;
+  disableAdd?: boolean;
+  disableRemove?: boolean;
 }
 
 interface StatePropsOfExpandPanel extends OwnPropsOfExpandPanel {
@@ -117,6 +120,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
     cells,
     config,
     translations,
+    disableRemove,
   } = props;
 
   const foundUISchema = useMemo(
@@ -207,7 +211,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                   ) : (
                     ''
                   )}
-                  {enabled && (
+                  {enabled && !disableRemove && (
                     <Grid item>
                       <Tooltip
                         id='tooltip-remove'
@@ -262,13 +266,17 @@ export const ctxDispatchToExpandPanelProps: (
       (event: any): void => {
         event.stopPropagation();
         dispatch(
-          update(path, (array) => {
-            toDelete
-              .sort()
-              .reverse()
-              .forEach((s) => array.splice(s, 1));
-            return array;
-          })
+          update(
+            path,
+            (array) => {
+              toDelete
+                .sort()
+                .reverse()
+                .forEach((s) => array.splice(s, 1));
+              return array;
+            },
+            { type: 'REMOVE', indices: toDelete } as UpdateArrayContext
+          )
         );
       },
     [dispatch]

diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -67,6 +67,8 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
     uischemas,
     translations,
     description,
+    disableAdd,
+    disableRemove,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
 
@@ -85,6 +87,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
         enabled={enabled}
         addItem={addItem}
         createDefault={innerCreateDefaultValue}
+        disableAdd={disableAdd}
       />
       <div>
         {data > 0 ? (
@@ -108,6 +111,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
                 childLabelProp={appliedUiSchemaOptions.elementLabelProp}
                 uischemas={uischemas}
                 translations={translations}
+                disableRemove={disableRemove}
               />
             );
           })