Skip to content

Commit 882ddc0

Browse files
authored
Merge pull request #94 from headwirecom/feature/horizontal-layout-unequal-spacing
Add option to HorizontalLayout to define unequal width columns
2 parents 6e30736 + 8b7e29e commit 882ddc0

File tree

6 files changed

+48
-10
lines changed

6 files changed

+48
-10
lines changed

packages/spectrum/README.md

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ JSONForms eliminates the tedious task of writing fully-featured forms by hand by
1010

1111
# Custom options
1212

13-
### Custom options for Table Array Control
13+
#### Custom options for Table Array Control
1414
```js
1515
{
1616
"type": "Control",
@@ -21,4 +21,15 @@ JSONForms eliminates the tedious task of writing fully-featured forms by hand by
2121
"addButtonLabelType": "tooltip" // "tooltip" or "inline"
2222
}
2323
}
24-
```
24+
```
25+
26+
#### Custom options for Horizontal Layout
27+
```js
28+
{
29+
"type": "HorizontalLayout",
30+
"elements": [ ... ],
31+
"options": {
32+
"spacing": [3, 1], // numbers correspond to proportions of column widths (defaults to 1)
33+
}
34+
}
35+
```

packages/spectrum/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@headwire/jsonforms-react-spectrum-renderers",
3-
"version": "0.0.1-beta.1",
3+
"version": "0.0.1-beta.2",
44
"description": "React Spectrum Renderer Set for JSONForms",
55
"repository": "https://github.com/headwirecom/jsonforms-react-spectrum-renderers",
66
"bugs": "https://github.com/headwirecom/jsonforms-react-spectrum-renderers/issues",

packages/spectrum/src/layouts/SpectrumHorizontalLayout.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,13 @@ const SpectrumHorizontalLayoutRenderer: FunctionComponent<RendererProps> = ({
5555
path,
5656
}: RendererProps) => {
5757
const horizontalLayout = uischema as HorizontalLayout;
58+
const spacing: number[] = horizontalLayout.options?.spacing ?? [];
5859
const direction = 'row';
59-
const childrenStyles: StyleProps = {
60-
flexGrow: 1,
60+
const childrenStyles: (childIndex: number) => StyleProps = (i) => ({
61+
flexGrow: spacing[i] || 1,
6162
maxWidth: '100%',
6263
flexBasis: 0,
63-
};
64+
});
6465

6566
return (
6667
<SpectrumLayout

packages/spectrum/src/layouts/util.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export interface RenderChildrenProps {
4242
export const renderChildren = (
4343
layout: Layout,
4444
schema: JsonSchema,
45-
styleProps: StyleProps,
45+
styleProps: StyleProps | ((childIndex: number) => StyleProps),
4646
path: string,
4747
enabled = true
4848
) => {
@@ -53,8 +53,10 @@ export const renderChildren = (
5353
const { renderers, cells } = useJsonForms();
5454

5555
return layout.elements.map((child, index) => {
56+
const style =
57+
typeof styleProps === 'function' ? styleProps(index) : styleProps;
5658
return (
57-
<View key={`${path}-${index}`} {...styleProps}>
59+
<View key={`${path}-${index}`} {...style}>
5860
<ResolvedJsonFormsDispatch
5961
renderers={renderers}
6062
cells={cells}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,4 +166,28 @@ describe('Horizontal layout', () => {
166166

167167
expect(container.querySelector('input').disabled).toBeTruthy();
168168
});
169+
170+
test('options.spacing should set flex-grow to the number specified, or default to 1', () => {
171+
const { container } = renderForm(
172+
{
173+
...fixture.uischema,
174+
options: { spacing: [2, 3] },
175+
elements: [
176+
...fixture.uischema.elements,
177+
{ ...nameControl, scope: '#/properties/shape' },
178+
],
179+
},
180+
{
181+
...fixture.schema,
182+
properties: { ...fixture.schema.properties, shape: { type: 'string' } },
183+
},
184+
fixture.data
185+
);
186+
187+
const flexGrowValues = Array.from(
188+
container.querySelectorAll(`[style*=flex-grow]`)
189+
).map((el) => el.getAttribute('style').match(/flex-grow:\s*(\d+)/)?.[1]);
190+
191+
expect(flexGrowValues).toEqual(['2', '3', '1']);
192+
});
169193
});

packages/spectrum/test/util.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ import { fireEvent } from '@testing-library/react';
4545

4646
type OnChangeType<T> = (change: { errors: any; data: T }) => void;
4747

48-
export function renderForm<T extends object>(
49-
uischema: UISchemaElement,
48+
export function renderForm<T extends object, U extends UISchemaElement>(
49+
uischema: U,
5050
schema: JsonSchema = {},
5151
data?: T,
5252
cells: JsonFormsCellRendererRegistryEntry[] = [],

0 commit comments

Comments
 (0)