Skip to content

Commit 49e7a20

Browse files
NeztebNezteb
authored
Add more UI feedback when JSON schema uses anyOf or oneOf (#170)
1 parent eafeb7a commit 49e7a20

File tree

3 files changed

+46
-16
lines changed

3 files changed

+46
-16
lines changed

‎src/__tests__/__snapshots__/index.spec.tsx.snap‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -331,8 +331,11 @@ exports[`HTML Output given anyOf combiner placed next to allOf given allOf mergi
331331
<div style=\\"margin-left: -25px\\">
332332
<div>
333333
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
334-
Admin
335-
<div></div>
334+
<div>
335+
Admin
336+
<div></div>
337+
</div>
338+
<div>anyOf</div>
336339
</div>
337340
<div style=\\"padding-left: 25px\\">
338341
<div>
@@ -439,8 +442,11 @@ exports[`HTML Output given array with oneOf containing items, should merge it co
439442
<div style=\\"margin-left: -25px\\">
440443
<div>
441444
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
442-
array[string]
443-
<div></div>
445+
<div>
446+
array[string]
447+
<div></div>
448+
</div>
449+
<div>oneOf</div>
444450
</div>
445451
</div>
446452
</div>
@@ -544,8 +550,11 @@ exports[`HTML Output given oneOf combiner placed next to allOf given allOf mergi
544550
<div style=\\"margin-left: -25px\\">
545551
<div>
546552
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
547-
Admin
548-
<div></div>
553+
<div>
554+
Admin
555+
<div></div>
556+
</div>
557+
<div>oneOf</div>
549558
</div>
550559
<div style=\\"padding-left: 25px\\">
551560
<div>
@@ -1185,6 +1194,7 @@ exports[`HTML Output should match arrays/of-complex-objects.json 1`] = `
11851194
</button>
11861195
</div>
11871196
</div>
1197+
<div>anyOf</div>
11881198
</div>
11891199
</div>
11901200
</div>
@@ -1899,6 +1909,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
18991909
<div>
19001910
<div>user</div>
19011911
<span>allOf</span>
1912+
<div>allOf</div>
19021913
</div>
19031914
</div>
19041915
</div>
@@ -1997,6 +2008,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
19972008
<div>
19982009
<div>user</div>
19992010
<span>allOf</span>
2011+
<div>allOf</div>
20002012
</div>
20012013
</div>
20022014
</div>
@@ -2107,6 +2119,7 @@ exports[`HTML Output should match combiners/allOfs/complex.json 1`] = `
21072119
<div>
21082120
<div>user</div>
21092121
<span>allOf</span>
2122+
<div>allOf</div>
21102123
</div>
21112124
</div>
21122125
</div>
@@ -2443,8 +2456,11 @@ exports[`HTML Output should match combiners/allOfs/with-type.json 1`] = `
24432456
<div style=\\"margin-left: -25px\\">
24442457
<div>
24452458
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
2446-
BugExample
2447-
<div></div>
2459+
<div>
2460+
BugExample
2461+
<div></div>
2462+
</div>
2463+
<div>oneOf</div>
24482464
</div>
24492465
<div style=\\"padding-left: 25px\\">
24502466
<div>
@@ -2572,8 +2588,11 @@ exports[`HTML Output should match combiners/oneof-with-array-type.json 1`] = `
25722588
<div style=\\"margin-left: -25px\\">
25732589
<div>
25742590
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
2575-
array[object]
2576-
<div></div>
2591+
<div>
2592+
array[object]
2593+
<div></div>
2594+
</div>
2595+
<div>oneOf</div>
25772596
</div>
25782597
<div style=\\"padding-left: 25px\\">
25792598
<div>
@@ -2627,8 +2646,10 @@ exports[`HTML Output should match combiners/oneof-within-array-item.json 1`] = `
26272646
<div style=\\"margin-left: -25px\\">
26282647
<div>
26292648
<div aria-label=\\"Pick a type\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\" id=\\"react-aria-0-2\\">
2630-
array[A]
2631-
<div></div>
2649+
<div>
2650+
array[A]
2651+
<div></div>
2652+
</div>
26322653
</div>
26332654
<div style=\\"padding-left: 25px\\">
26342655
<div>
@@ -2869,6 +2890,7 @@ exports[`HTML Output should match default-schema.json 1`] = `
28692890
</button>
28702891
</div>
28712892
</div>
2893+
<div>anyOf</div>
28722894
</div>
28732895
</div>
28742896
</div>

‎src/components/SchemaRow/SchemaRow.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
5555
const isBrokenRef = typeof refNode?.error === 'string';
5656

5757
const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);
58+
const combiner = isRegularNode(schemaNode) && schemaNode.combiners?.length ? schemaNode.combiners[0] : null;
5859
return (
5960
<div className="sl-relative">
6061
<div className="sl-flex sl-max-w-full">
@@ -109,6 +110,8 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = ({ schemaNode,
109110
onChange={selectedIndex => setSelectedChoice(choices[selectedIndex as number])}
110111
/>
111112
)}
113+
114+
{combiner !== null ? <div className="sl-ml-1 sl-text-muted">{combiner}</div> : null}
112115
</div>
113116
<Properties
114117
required={isPropertyRequired(schemaNode)}

‎src/components/SchemaRow/TopLevelSchemaRow.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export const TopLevelSchemaRow: React.FC<SchemaRowProps> = ({ schemaNode, nestin
2323
}
2424

2525
if (isRegularNode(schemaNode) && choices.length > 1) {
26+
const combiner = isRegularNode(schemaNode) && schemaNode.combiners?.length ? schemaNode.combiners[0] : null;
27+
2628
return (
2729
<DecreaseIndentation>
2830
<div className="sl-relative">
@@ -37,11 +39,14 @@ export const TopLevelSchemaRow: React.FC<SchemaRowProps> = ({ schemaNode, nestin
3739
}))}
3840
renderTrigger={props => (
3941
<Pressable {...props}>
40-
<div className="sl-mr-2 sl-font-mono sl-font-semibold sl-text-base sl-flex sl-cursor-pointer sl-py-2">
41-
{selectedChoice.title}
42-
<div className="sl-ml-1">
43-
<Icon icon={faCaretDown} />
42+
<div className="sl-flex">
43+
<div className="sl-mr-2 sl-font-mono sl-font-semibold sl-text-base sl-flex sl-cursor-pointer sl-py-2">
44+
{selectedChoice.title}
45+
<div className="sl-ml-1">
46+
<Icon icon={faCaretDown} />
47+
</div>
4448
</div>
49+
{combiner !== null ? <div className="sl-flex sl-items-center sl-text-muted">{combiner}</div> : null}
4550
</div>
4651
</Pressable>
4752
)}

0 commit comments

Comments
 (0)