feat: show combiner for properties of an object (#183)

Author: paulatulis

src/__fixtures__/combiners/anyOf.json

@@ -0,0 +1,34 @@
+{
+  "type": "object",
+  "properties": {
+    "myProp": {
+      "type": "array",
+      "items": {
+        "anyOf": [
+          {
+            "properties": {
+              "foo": {
+                "type": "string"
+              }
+            }
+          },
+          {
+            "properties": {
+              "bar": {
+                "type": "number"
+              }
+            }
+          },
+          {
+            "properties": {
+              "baz": {
+                "type": "boolean"
+              }
+            }
+          }
+        ],
+        "type": "object"
+      }
+    }
+  }
+}

src/__stories__/JsonSchemaViewer.tsx

@@ -18,6 +18,7 @@ const nullRefSchema = require('../__fixtures__/references/nullish.json');
 const brokenRefArraySchema = require('../__fixtures__/arrays/of-refs.json');
 const oneOfWithArraySchema = require('../__fixtures__/combiners/oneof-with-array-type.json');
 const oneOfWithArraySchema2 = require('../__fixtures__/combiners/oneof-within-array-item.json');
+const anyOfObject = require('../__fixtures__/combiners/anyOf.json');
 const arrayOfComplexObjects = require('../__fixtures__/arrays/of-complex-objects.json');
 
 subscribeTheme({ mode: 'light' });
@@ -159,19 +160,26 @@ storiesOf('JsonSchemaViewer/combiners', module)
       onGoToRef={action('onGoToRef')}
     />
   ))
-  .add('anyOf-array-schema', () => (
+  .add('oneOf-array-schema', () => (
     <JsonSchemaViewer
       schema={oneOfWithArraySchema as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 1)}
       onGoToRef={action('onGoToRef')}
     />
   ))
-  .add('anyOf-array-schema2', () => (
+  .add('oneOf-array-schema2', () => (
     <JsonSchemaViewer
       schema={oneOfWithArraySchema2 as JSONSchema4}
       defaultExpandedDepth={number('defaultExpandedDepth', 1)}
       onGoToRef={action('onGoToRef')}
     />
+  ))
+  .add('anyOf-object-schema', () => (
+    <JsonSchemaViewer
+      schema={anyOfObject as JSONSchema4}
+      defaultExpandedDepth={number('defaultExpandedDepth', 1)}
+      onGoToRef={action('onGoToRef')}
+    />
   ));
 
 storiesOf('JsonSchemaViewer/$refs', module)

src/components/SchemaRow/useChoices.ts

@@ -41,9 +41,9 @@ function makeChoice(node: SchemaNode): Choice {
   };
 }
 
-function makeArrayChoice(node: SchemaNode): Choice {
+function makeArrayChoice(node: SchemaNode, combiner?: string): Choice {
   const itemTitle = calculateChoiceTitle(node, true);
-  const title = itemTitle !== 'any' ? `array[${itemTitle}]` : 'array';
+  const title = itemTitle !== 'any' ? `array ${combiner ? `(${combiner})` : null} [${itemTitle}]` : 'array';
   return {
     type: node,
     title,
@@ -64,7 +64,9 @@ export const useChoices = (schemaNode: SchemaNode) => {
       isNonEmptyParentNode(schemaNode.children[0]) &&
       shouldShowChildSelector(schemaNode.children[0])
     ) {
-      return schemaNode.children[0].children.map(makeArrayChoice);
+      return schemaNode.children[0].children.map(child =>
+        makeArrayChoice(child, schemaNode.children[0].combiners?.[0]),
+      );
     }
 
     // if current node is a combiner, offer its children

src/components/shared/__tests__/Property.spec.tsx

@@ -141,7 +141,7 @@ describe('Property component', () => {
 
       const wrapper = render(schema);
       expect(wrapper.html()).toMatchInlineSnapshot(
-        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-select sl-relative\\"><div style=\\"border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" aria-hidden=\\"true\\"><input type=\\"text\\" tabindex=\\"-1\\" style=\\"font-size: 16px;\\"><label><select size=\\"2\\" tabindex=\\"-1\\"><option></option><option value=\\"0\\">array[strings]</option><option value=\\"1\\">array[numbers]</option></select></label></div><div class=\\"sl-relative\\"><button aria-label=\\"Pick a type\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" id=\\"react-aria-0-4\\" aria-labelledby=\\"react-aria-0-4 react-aria-0-6\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary active:sl-border-primary sl-border disabled:sl-opacity-60\\"><div class=\\"sl-flex sl-flex-1 sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array[strings]</div></div><div class=\\"sl-text-xs sl--mr-0.5 sl-ml-1\\"><div class=\\"sl-pt-0.5 sl-pr-0.5\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div></div></button></div></div></div></div></div></div></div></div>"`,
+        `"<div class=\\"\\" id=\\"mosaic-provider-react-aria-0-1\\"><div data-overlay-container=\\"true\\" class=\\"\\"><div class=\\"sl-flex sl-max-w-full sl-py-2\\"><div class=\\"sl-stack sl-stack--vertical sl-stack--1 sl-flex sl-flex-1 sl-flex-col sl-items-stretch sl-max-w-full\\"><div class=\\"sl-flex sl-items-center sl-max-w-full\\"><div class=\\"sl-flex sl-items-baseline sl-text-base\\"><div class=\\"sl-select sl-relative\\"><div style=\\"border: 0px; clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\\" aria-hidden=\\"true\\"><input type=\\"text\\" tabindex=\\"-1\\" style=\\"font-size: 16px;\\"><label><select size=\\"2\\" tabindex=\\"-1\\"><option></option><option value=\\"0\\">array (oneOf) [strings]</option><option value=\\"1\\">array (oneOf) [numbers]</option></select></label></div><div class=\\"sl-relative\\"><button aria-label=\\"Pick a type\\" aria-haspopup=\\"listbox\\" aria-expanded=\\"false\\" id=\\"react-aria-0-4\\" aria-labelledby=\\"react-aria-0-4 react-aria-0-6\\" type=\\"button\\" class=\\"sl-button sl-w-full sl-h-sm sl-text-base sl-font-normal sl-px-1.5 sl-bg-transparent sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary active:sl-border-primary sl-border disabled:sl-opacity-60\\"><div class=\\"sl-flex sl-flex-1 sl-justify-items-start sl-items-center\\"><div class=\\"sl-pr-1\\">array (oneOf) [strings]</div></div><div class=\\"sl-text-xs sl--mr-0.5 sl-ml-1\\"><div class=\\"sl-pt-0.5 sl-pr-0.5\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"chevron-down\\" class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-xs sl-icon\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"></path></svg></div></div></button></div></div></div></div></div></div></div></div>"`,
       );
     });