Merge pull request #94 from headwirecom/feature/horizontal-layout-unequal-spacing

Add option to HorizontalLayout to define unequal width columns

Author: uudens

packages/spectrum/README.md

@@ -10,7 +10,7 @@ JSONForms eliminates the tedious task of writing fully-featured forms by hand by
 
 # Custom options
 
-### Custom options for Table Array Control
+#### Custom options for Table Array Control
 ```js
 {
   "type": "Control",
@@ -21,4 +21,15 @@ JSONForms eliminates the tedious task of writing fully-featured forms by hand by
     "addButtonLabelType": "tooltip" // "tooltip" or "inline"
   }
 }
-```
+```
+
+#### Custom options for Horizontal Layout
+```js
+{
+  "type": "HorizontalLayout",
+  "elements": [ ... ],
+  "options": {
+    "spacing": [3, 1], // numbers correspond to proportions of column widths (defaults to 1)
+  }
+}
+```

packages/spectrum/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headwire/jsonforms-react-spectrum-renderers",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.2",
   "description": "React Spectrum Renderer Set for JSONForms",
   "repository": "https://github.com/headwirecom/jsonforms-react-spectrum-renderers",
   "bugs": "https://github.com/headwirecom/jsonforms-react-spectrum-renderers/issues",

packages/spectrum/src/layouts/SpectrumHorizontalLayout.tsx

@@ -55,12 +55,13 @@ const SpectrumHorizontalLayoutRenderer: FunctionComponent<RendererProps> = ({
   path,
 }: RendererProps) => {
   const horizontalLayout = uischema as HorizontalLayout;
+  const spacing: number[] = horizontalLayout.options?.spacing ?? [];
   const direction = 'row';
-  const childrenStyles: StyleProps = {
-    flexGrow: 1,
+  const childrenStyles: (childIndex: number) => StyleProps = (i) => ({
+    flexGrow: spacing[i] || 1,
     maxWidth: '100%',
     flexBasis: 0,
-  };
+  });
 
   return (
     <SpectrumLayout

packages/spectrum/src/layouts/util.tsx

@@ -42,7 +42,7 @@ export interface RenderChildrenProps {
 export const renderChildren = (
   layout: Layout,
   schema: JsonSchema,
-  styleProps: StyleProps,
+  styleProps: StyleProps | ((childIndex: number) => StyleProps),
   path: string,
   enabled = true
 ) => {
@@ -53,8 +53,10 @@ export const renderChildren = (
   const { renderers, cells } = useJsonForms();
 
   return layout.elements.map((child, index) => {
+    const style =
+      typeof styleProps === 'function' ? styleProps(index) : styleProps;
     return (
-      <View key={`${path}-${index}`} {...styleProps}>
+      <View key={`${path}-${index}`} {...style}>
         <ResolvedJsonFormsDispatch
           renderers={renderers}
           cells={cells}

packages/spectrum/test/renderers/SpectrumHorizontalLayout.test.tsx

@@ -166,4 +166,28 @@ describe('Horizontal layout', () => {
 
     expect(container.querySelector('input').disabled).toBeTruthy();
   });
+
+  test('options.spacing should set flex-grow to the number specified, or default to 1', () => {
+    const { container } = renderForm(
+      {
+        ...fixture.uischema,
+        options: { spacing: [2, 3] },
+        elements: [
+          ...fixture.uischema.elements,
+          { ...nameControl, scope: '#/properties/shape' },
+        ],
+      },
+      {
+        ...fixture.schema,
+        properties: { ...fixture.schema.properties, shape: { type: 'string' } },
+      },
+      fixture.data
+    );
+
+    const flexGrowValues = Array.from(
+      container.querySelectorAll(`[style*=flex-grow]`)
+    ).map((el) => el.getAttribute('style').match(/flex-grow:\s*(\d+)/)?.[1]);
+
+    expect(flexGrowValues).toEqual(['2', '3', '1']);
+  });
 });

packages/spectrum/test/util.tsx

@@ -45,8 +45,8 @@ import { fireEvent } from '@testing-library/react';
 
 type OnChangeType<T> = (change: { errors: any; data: T }) => void;
 
-export function renderForm<T extends object>(
-  uischema: UISchemaElement,
+export function renderForm<T extends object, U extends UISchemaElement>(
+  uischema: U,
   schema: JsonSchema = {},
   data?: T,
   cells: JsonFormsCellRendererRegistryEntry[] = [],