Merge pull request #92 from headwirecom/feature/array-add-button-position

Add some options for the Add Button of Table Array Control

Author: mburri

packages/spectrum/README.md

@@ -7,3 +7,18 @@ JSONForms eliminates the tedious task of writing fully-featured forms by hand by
 # Spectrum Renderers Package
 
 !!!! Work in Progress !!!
+
+# Custom options
+
+### Custom options for Table Array Control
+```js
+{
+  "type": "Control",
+  "scope": "#/properties/myArray",
+  "options": {
+    "addButtonPosition": "top", // "top" or "bottom"
+    "addButtonLabel": "Add item", // optional custom label for Add button
+    "addButtonLabelType": "tooltip" // "tooltip" or "inline"
+  }
+}
+```

packages/spectrum/src/complex/SpectrumTableArrayControl.tsx

@@ -144,6 +144,17 @@ class SpectrumTableArrayControl extends React.Component<
         )(schema.properties)
       : [<Column key='items'>Items</Column>];
 
+    const uioptions: UIOptions = {
+      addButtonPosition:
+        uischema.options?.addButtonPosition === 'bottom' ? 'bottom' : 'top',
+      addButtonLabel:
+        uischema.options?.addButtonLabel || `Add to ${labelObject.text}`,
+      addButtonLabelType:
+        uischema.options?.addButtonLabelType === 'inline'
+          ? 'inline'
+          : 'tooltip',
+    };
+
     return (
       <View
         UNSAFE_className='spectrum-table-array-control'
@@ -160,15 +171,12 @@ class SpectrumTableArrayControl extends React.Component<
             <View isHidden={allErrorsMessages.length === 0} marginEnd='auto'>
               <ErrorIndicator errors={allErrorsMessages} />
             </View>
-            <TooltipTrigger delay={0}>
-              <ActionButton
-                UNSAFE_className='add-button'
+            {uioptions.addButtonPosition === 'top' && (
+              <AddButton
+                {...uioptions}
                 onPress={addItem(path, createDefaultValue(schema))}
-              >
-                <Add />
-              </ActionButton>
-              <Tooltip>Add to {labelObject.text}</Tooltip>
-            </TooltipTrigger>
+              />
+            )}
           </Flex>
         </Header>
 
@@ -286,9 +294,47 @@ class SpectrumTableArrayControl extends React.Component<
             )}
           </TableBody>
         </Table>
+
+        {uioptions.addButtonPosition === 'bottom' && (
+          <View paddingTop='size-125'>
+            <AddButton
+              {...uioptions}
+              onPress={addItem(path, createDefaultValue(schema))}
+            />
+          </View>
+        )}
       </View>
     );
   }
 }
 
 export default withJsonFormsArrayControlProps(SpectrumTableArrayControl);
+
+function AddButton(
+  props: Pick<UIOptions, 'addButtonLabel' | 'addButtonLabelType'> & {
+    onPress: () => void;
+  }
+) {
+  const { addButtonLabel, addButtonLabelType, onPress } = props;
+  const button = (
+    <ActionButton UNSAFE_className='add-button' onPress={onPress}>
+      <Add />
+      {addButtonLabelType === 'inline' && <Text>{addButtonLabel}</Text>}
+    </ActionButton>
+  );
+
+  return addButtonLabelType === 'tooltip' ? (
+    <TooltipTrigger delay={0}>
+      {button}
+      <Tooltip>{addButtonLabel}</Tooltip>
+    </TooltipTrigger>
+  ) : (
+    button
+  );
+}
+
+interface UIOptions {
+  addButtonPosition: 'top' | 'bottom';
+  addButtonLabel?: string;
+  addButtonLabelType: 'tooltip' | 'inline';
+}

packages/spectrum/test/renderers/SpectrumTableArrayControl.test.tsx

@@ -384,6 +384,63 @@ describe('Table array control', () => {
     ) as HTMLElement;
     expect(tableView.hidden).toBeFalsy();
   });
+
+  describe('uischema.options.addButtonPosition', () => {
+    test.each([
+      [undefined, 'top'],
+      ['top', 'top'],
+      ['bottom', 'bottom'],
+      ['foobar', 'top'],
+    ])(
+      'when option is %s, render Add button on %s',
+      (value: string | undefined, expectedPosition: 'top' | 'bottom') => {
+        const { container } = renderForm(
+          {
+            ...fixture.uischema,
+            options: { addButtonPosition: value },
+          },
+          fixture.schema,
+          fixture.data
+        );
+        const tablePosition = container.innerHTML.indexOf('spectrum-Table');
+        const addButtonPosition = container.innerHTML.indexOf('add-button');
+        if (expectedPosition === 'bottom') {
+          expect(addButtonPosition).toBeGreaterThan(tablePosition);
+        } else {
+          expect(addButtonPosition).toBeLessThan(tablePosition);
+        }
+      }
+    );
+  });
+
+  describe('uischema.options.addButtonLabel', () => {
+    const uischema = {
+      ...fixture.uischema,
+      options: {
+        addButtonLabelType: 'inline',
+      },
+    };
+    test('when option is not set, should render the default label', () => {
+      const { container } = renderForm(uischema, fixture.schema, fixture.data);
+      expect(container.querySelector('.add-button').textContent).toBe(
+        'Add to Test'
+      );
+    });
+
+    test('when option is set, should render it', () => {
+      const label = 'increase the count of items';
+      const uischemaWithLabel = {
+        ...uischema,
+        options: { ...uischema.options, addButtonLabel: label },
+      };
+      const { container } = renderForm(
+        uischemaWithLabel,
+        fixture.schema,
+        fixture.data
+      );
+      expect(container.querySelector('.add-button').textContent).toBe(label);
+    });
+  });
 });
 
 describe('validations messages', () => {