Skip to content
This repository was archived by the owner on Jun 28, 2024. It is now read-only.

Commit 4afe1b8

Browse files
authored
feat: alternative layout approach using flexbox (#38)
BREAKING CHANGE: We are now using Flexbox because it works better with dynamically hiding and showing fields using the `show` schema property. This is a breaking change because forms using the previous Grid layout system would leave an empty place in the grid when they were hidden, but the new system will stretch rows to fill in missing space.
1 parent 3642d55 commit 4afe1b8

File tree

8 files changed

+291
-45
lines changed

8 files changed

+291
-45
lines changed

src/__stories__/Layouts.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import { Theme, Tooltips } from './decorators';
1313
const data = require('./examples/layouts/data.json');
1414
const schema = require('./examples/layouts/schema.json');
1515

16+
const dataNested = require('./examples/nested-layouts/data.json');
17+
const schemaNested = require('./examples/nested-layouts/schema.json');
18+
1619
storiesOf('Layouts', module)
1720
.addDecorator(withKnobs)
1821
.addDecorator(Theme)
@@ -30,4 +33,18 @@ storiesOf('Layouts', module)
3033
/>
3134
</Box>
3235
);
36+
})
37+
.add('nested layouts', () => {
38+
return (
39+
<Box width="500px">
40+
<Formtron
41+
fieldComponents={fieldComponents}
42+
value={dataNested}
43+
schema={schemaNested}
44+
selection="."
45+
onChange={action('onChange')}
46+
layout={select('layout', ['2-col', '4-col'], '2-col')}
47+
/>
48+
</Box>
49+
);
3350
});

src/__stories__/examples/layouts/data.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"_selection": ".",
3-
"a": "Alpha",
3+
"a": "show all",
44
"b": "Bravo",
55
"c": "Charlie\nCharlie\nCharlie\nCharlie\nCharlie",
66
"d": "Delta",

src/__stories__/examples/layouts/schema.json

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,40 @@
1818
"d e"
1919
],
2020
"wild": [
21-
"d d f",
22-
"b b f",
23-
"c c e",
24-
"c c a"
21+
"c c a",
22+
"d b",
23+
"f f f e"
2524
]
2625
},
2726
"fields": {
2827
"a": {
29-
"type": "string",
30-
"title": "A"
28+
"type": "select",
29+
"title": "A",
30+
"options": [
31+
"show all",
32+
"hide B",
33+
"hide E and D"
34+
],
35+
"strict": true
3136
},
3237
"b": {
3338
"type": "string",
34-
"title": "B"
39+
"title": "B",
40+
"show": "a !== 'hide B'"
3541
},
3642
"c": {
3743
"type": "markdown",
3844
"title": "C"
3945
},
4046
"d": {
4147
"type": "string",
42-
"title": "D"
48+
"title": "D",
49+
"show": "a !== 'hide E and D'"
4350
},
4451
"e": {
4552
"type": "string",
46-
"title": "E"
53+
"title": "E",
54+
"show": "a !== 'hide E and D'"
4755
},
4856
"f": {
4957
"type": "markdown",
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"_selection": ".",
3+
"a": "Alpha",
4+
"b": "Bravo",
5+
"c": "Charlie",
6+
"d": "Delta",
7+
"e": {
8+
"f": "Foxtrot",
9+
"g": "Golf",
10+
"h": "Hotel",
11+
"i": "India"
12+
},
13+
"j": {
14+
"k": {
15+
"f": "Foxtrot",
16+
"g": "Golf",
17+
"h": "Hotel",
18+
"i": "India"
19+
},
20+
"l": {
21+
"f": "Foxtrot",
22+
"g": "Golf",
23+
"h": "Hotel",
24+
"i": "India"
25+
},
26+
"m": {
27+
"f": "Foxtrot",
28+
"g": "Golf",
29+
"h": "Hotel",
30+
"i": "India"
31+
},
32+
"n": {
33+
"f": "Foxtrot",
34+
"g": "Golf",
35+
"h": "Hotel",
36+
"i": "India"
37+
}
38+
}
39+
}
Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
{
2+
"$schema": "../../../../ui-schema.json",
3+
"type": "form",
4+
"title": "Layout Examples",
5+
"description": "Play with the layout prop in the knobs panel",
6+
"layouts": {
7+
"2-col": [
8+
"a b",
9+
"c d",
10+
"e e",
11+
"j j"
12+
],
13+
"4-col": [
14+
"a b c d",
15+
"e e e e",
16+
"j j j j"
17+
]
18+
},
19+
"fields": {
20+
"a": {
21+
"type": "string",
22+
"title": "A"
23+
},
24+
"b": {
25+
"type": "string",
26+
"title": "B"
27+
},
28+
"c": {
29+
"type": "string",
30+
"title": "C"
31+
},
32+
"d": {
33+
"type": "string",
34+
"title": "D"
35+
},
36+
"e": {
37+
"type": "form",
38+
"title": "E",
39+
"layouts": {
40+
"2-col": [
41+
"f g",
42+
"h i"
43+
],
44+
"4-col": [
45+
"f g h i"
46+
]
47+
},
48+
"fields": {
49+
"f": {
50+
"type": "string",
51+
"title": "F"
52+
},
53+
"g": {
54+
"type": "string",
55+
"title": "G"
56+
},
57+
"h": {
58+
"type": "string",
59+
"title": "H"
60+
},
61+
"i": {
62+
"type": "string",
63+
"title": "I"
64+
}
65+
}
66+
},
67+
"j": {
68+
"title": "J",
69+
"type": "object",
70+
"default": {
71+
"f": "",
72+
"g": "",
73+
"h": "",
74+
"i": ""
75+
},
76+
"keys": {
77+
"title": "key",
78+
"type": "string"
79+
},
80+
"values": {
81+
"type": "form",
82+
"title": "value",
83+
"layouts": {
84+
"2-col": [
85+
"f", "g", "h", "i"
86+
],
87+
"4-col": [
88+
"f g",
89+
"h i"
90+
]
91+
},
92+
"fields": {
93+
"f": {
94+
"type": "string",
95+
"title": "F"
96+
},
97+
"g": {
98+
"type": "string",
99+
"title": "G"
100+
},
101+
"h": {
102+
"type": "string",
103+
"title": "H"
104+
},
105+
"i": {
106+
"type": "string",
107+
"title": "I"
108+
}
109+
}
110+
}
111+
}
112+
}
113+
}

src/components/ArrayInput.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const ArrayInput: React.FunctionComponent<IFormtronControl> = ({
1717
fieldComponents,
1818
disabled = false,
1919
path,
20+
layout,
2021
}) => {
2122
const { variant } = useDiagnostics(path);
2223
const easyArray = new EasyArray(value, schema.default);
@@ -55,6 +56,7 @@ export const ArrayInput: React.FunctionComponent<IFormtronControl> = ({
5556
fieldComponents={fieldComponents}
5657
onChange={_val => onChange(easyArray.update(index, _val))}
5758
disabled={disabled}
59+
layout={layout}
5860
/>
5961
</Box>
6062
</Flex>

0 commit comments

Comments
 (0)