Pass all props in the MaterialArrayLayoutRenderer

Currently the MaterialArrayLayoutRenderer lists the props explicitly, this way the config was forgotten and thus the move up/down buttons cannot be enabled globally using the config object. - add test case for config object being passed down - pass all props down to the MaterialArrayLayout
eclipsesource · Jun 3, 2022 · f91ab22 · f91ab22
1 parent 83e7003
commit f91ab22
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;