Pass all props in MaterialArrayLayoutRenderer

Currently the MaterialArrayLayoutRenderer only hands over a selected list of props to the MaterialArrayLayout component it wraps. This is now refactored to hand over all incoming props. This fixes the issue that the 'config' prop was previously not handed over. Contributed on behalf of STMicroelectronics
eclipsesource · Jun 10, 2022 · 1cfd276 · 1cfd276
1 parent 83e7003
commit 1cfd276
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx b/packages/material/src/layouts/MaterialArrayLayoutRenderer.tsx
@@ -36,40 +36,18 @@ import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 
 export const MaterialArrayLayoutRenderer = ({
   visible,
-  enabled,
-  id,
-  uischema,
-  schema,
-  label,
-  rootSchema,
-  renderers,
-  cells,
-  data,
-  path,
-  errors,
-  uischemas,
-  addItem
+  addItem,
+  ...props
 }: ArrayLayoutProps) => {
   const addItemCb = useCallback((p: string, value: any) => addItem(p, value), [
     addItem
   ]);
   return (
     <Hidden xsUp={!visible}>
       <MaterialArrayLayout
-        label={label}
-        uischema={uischema}
-        schema={schema}
-        id={id}
-        rootSchema={rootSchema}
-        errors={errors}
-        enabled={enabled}
         visible={visible}
-        data={data}
-        path={path}
         addItem={addItemCb}
-        renderers={renderers}
-        cells={cells}
-        uischemas={uischemas}
+        {...props}
       />
     </Hidden>
   );

diff --git a/packages/material/test/renderers/MaterialArrayLayout.test.tsx b/packages/material/test/renderers/MaterialArrayLayout.test.tsx
@@ -333,6 +333,36 @@ describe('Material array layout', () => {
         .find({ 'aria-label': 'Move down' }).length
     ).toBe(1);
   });
+  it('should render sort buttons if showSortButtons is true in config', () => {
+    wrapper = mount(
+      <JsonForms
+        data={data}
+        schema={nestedSchema}
+        uischema={uischema}
+        renderers={materialRenderers}
+        config={{showSortButtons: true}}
+      />
+    );
+
+    expect(wrapper.find(MaterialArrayLayout).length).toBeTruthy();
+
+    // up button
+    expect(
+      wrapper
+        .find('Memo(ExpandPanelRendererComponent)')
+        .at(0)
+        .find('button')
+        .find({ 'aria-label': 'Move up' }).length
+    ).toBe(1);
+    // down button
+    expect(
+      wrapper
+        .find('Memo(ExpandPanelRendererComponent)')
+        .at(0)
+        .find('button')
+        .find({ 'aria-label': 'Move down' }).length
+    ).toBe(1);
+  });
   it('should move item up if up button is presses', (done) => {
     const onChangeData: any = {
       data: undefined
@@ -341,7 +371,8 @@ describe('Material array layout', () => {
       <JsonForms
         data={data}
         schema={nestedSchema}
-        uischema={uischemaWithSortOption}
+        uischema={uischema}
+        config={{showSortButtons: true}}
         renderers={materialRenderers}
         onChange={({ data }) => {
           onChangeData.data = data;