export useChoices and other utilities for elements (#241)

Author: EdVinyard

src/__fixtures__/combiners/oneof-with-allof-children.json

@@ -0,0 +1,44 @@
+{
+  "oneOf": [
+    {
+      "allOf": [
+        {
+          "type": "object",
+          "properties": {
+            "foo": {
+              "type": "string"
+            }
+          }
+        },
+        {
+          "type": "object",
+          "properties": {
+            "bar": {
+              "type": "number"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "allOf": [
+        {
+          "type": "object",
+          "properties": {
+            "baz": {
+              "type": "string"
+            }
+          }
+        },
+        {
+          "type": "object",
+          "properties": {
+            "boggle": {
+              "type": "number"
+            }
+          }
+        }
+      ]
+    }
+  ]
+}

src/components/SchemaRow/SchemaRow.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { COMBINER_NAME_MAP } from '../../consts';
 import { useJSVOptionsContext } from '../../contexts';
 import { getNodeId, getOriginalNodeId } from '../../hash';
-import { calculateChildrenToShow, isPropertyRequired } from '../../tree';
+import { isPropertyRequired, visibleChildren } from '../../tree';
 import { Caret, Description, getValidationsFromSchema, Types, Validations } from '../shared';
 import { ChildStack } from '../shared/ChildStack';
 import { Error } from '../shared/Error';
@@ -55,7 +55,7 @@ export const SchemaRow: React.FunctionComponent<SchemaRowProps> = React.memo(
     const description = isRegularNode(typeToShow) ? typeToShow.annotations.description : null;
 
     const rootLevel = renderRootTreeLines ? 1 : 2;
-    const childNodes = React.useMemo(() => calculateChildrenToShow(typeToShow), [typeToShow]);
+    const childNodes = React.useMemo(() => visibleChildren(typeToShow), [typeToShow]);
     const combiner = isRegularNode(schemaNode) && schemaNode.combiners?.length ? schemaNode.combiners[0] : null;
     const isCollapsible = childNodes.length > 0;
     const isRootLevel = nestingLevel < rootLevel;

src/components/SchemaRow/TopLevelSchemaRow.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import { COMBINER_NAME_MAP } from '../../consts';
 import { useIsOnScreen } from '../../hooks/useIsOnScreen';
-import { calculateChildrenToShow, isComplexArray } from '../../tree';
+import { isComplexArray, visibleChildren } from '../../tree';
 import { showPathCrumbsAtom } from '../PathCrumbs/state';
 import { Description, getValidationsFromSchema, Validations } from '../shared';
 import { ChildStack } from '../shared/ChildStack';
@@ -19,7 +19,7 @@ export const TopLevelSchemaRow = ({
   skipDescription,
 }: Pick<SchemaRowProps, 'schemaNode'> & { skipDescription?: boolean }) => {
   const { selectedChoice, setSelectedChoice, choices } = useChoices(schemaNode);
-  const childNodes = React.useMemo(() => calculateChildrenToShow(selectedChoice.type), [selectedChoice.type]);
+  const childNodes = React.useMemo(() => visibleChildren(selectedChoice.type), [selectedChoice.type]);
   const nestingLevel = 0;
 
   const nodeId = schemaNode.fragment?.['x-stoplight']?.id;

src/components/SchemaRow/index.ts

@@ -1,2 +1,3 @@
 export * from './SchemaRow';
 export * from './TopLevelSchemaRow';
+export { Choice, useChoices } from './useChoices';

src/components/SchemaRow/useChoices.ts

@@ -6,7 +6,8 @@ import * as React from 'react';
 import { isComplexArray, isNonEmptyParentNode } from '../../tree';
 import { printName } from '../../utils';
 
-type Choice = {
+/** one option among several mutually exclusive sub-schemas */
+export type Choice = {
   title: string;
   type: SchemaNode;
 };
@@ -53,10 +54,11 @@ function makeArrayChoice(node: SchemaNode, combiner?: string): Choice {
 }
 
 /**
- * Calculates type choices for a given node.
+ * Enumerates the sub-schema type for a given node.
  *
- * Usually a node has one choice - only one possible type -, itself.
- * If a node is an oneOf or anyOf combiner, the possible types are the sub-types of the combiner.
+ * Usually a node has one choice, only one possible type: itself. If a node is
+ * a oneOf or anyOf combiner, the possible types are the sub-types of the
+ * combiner.
  */
 export const useChoices = (schemaNode: SchemaNode) => {
   const choices: Choice[] = React.useMemo(() => {

src/index.ts

@@ -1,2 +1,3 @@
-export { JsonSchemaViewer, Validations } from './components';
+export { Choice, JsonSchemaViewer, useChoices, Validations } from './components';
+export { visibleChildren } from './tree';
 export * from './types';

src/tree/utils.ts

@@ -41,10 +41,11 @@ export function isComplexArray(node: SchemaNode): node is ComplexArrayNode {
 }
 
 /**
- * Returns the children of `node` that should be displayed in the tree.
- * Defaults to `node.children`, except for Arrays that get special handling (flattening).
+ * Returns the children of `node` that should be displayed in a viewer or
+ * editor. Defaults to `node.children`, except for Arrays that get special
+ * handling (flattening).
  */
-export function calculateChildrenToShow(node: SchemaNode): SchemaNode[] {
+export function visibleChildren(node: SchemaNode): SchemaNode[] {
   if (!isRegularNode(node) || isPrimitiveArray(node)) {
     return [];
   }