feat: custom dividers texts

Author: P0lip

src/components/SchemaRow.tsx

@@ -52,9 +52,9 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({
       css={{ userSelect: 'text' }}
       {...props}
     >
-      {node.showDivider && (
+      {node.divider && (
         <Divider ml="-24px" width={`calc(100% + 24px)`}>
-          or
+          {node.divider}
         </Divider>
       )}
 

src/types.ts

@@ -55,7 +55,7 @@ export interface ITreeNodeMeta {
   name?: string;
   additional?: IArrayNode['additionalItems'] | IObjectNode['additionalProperties'];
   path: JsonPath;
-  showDivider?: boolean;
+  divider?: string;
   subtype?: IBaseNode['type'];
   expanded?: boolean;
   required?: boolean;

src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap

@@ -74,7 +74,6 @@ Array [
           "type": "string",
         },
       },
-      "showDivider": false,
       "type": "object",
       "validations": Object {},
     },
@@ -107,6 +106,7 @@ Array [
     "metadata": Object {
       "additionalProperties": undefined,
       "annotations": Object {},
+      "divider": "and",
       "enum": undefined,
       "id": "random-id",
       "path": Array [
@@ -136,7 +136,6 @@ Array [
           "type": "string",
         },
       },
-      "showDivider": false,
       "type": "object",
       "validations": Object {},
     },
@@ -509,7 +508,6 @@ Array [
           "type": "string",
         },
       },
-      "showDivider": false,
       "type": "object",
       "validations": Object {},
     },
@@ -565,6 +563,7 @@ Array [
     "metadata": Object {
       "additionalItems": undefined,
       "annotations": Object {},
+      "divider": "and/or",
       "enum": undefined,
       "id": "random-id",
       "items": undefined,
@@ -574,7 +573,6 @@ Array [
         "properties",
         1,
       ],
-      "showDivider": true,
       "subtype": "integer",
       "type": "array",
       "validations": Object {},

src/utils/dividers.ts

@@ -0,0 +1,8 @@
+import { Dictionary } from '@stoplight/types';
+import { JSONSchema4CombinerName } from '../types';
+
+export const DIVIDERS: Dictionary<string, JSONSchema4CombinerName> = {
+  allOf: 'and',
+  anyOf: 'and/or',
+  oneOf: 'or',
+};

src/utils/renderSchema.ts

@@ -1,6 +1,7 @@
 import { JSONSchema4 } from 'json-schema';
 import _isEmpty = require('lodash/isEmpty');
 import { IArrayNode, IObjectNode, ITreeNodeMeta, SchemaKind, SchemaTreeListNode } from '../types';
+import { DIVIDERS } from './dividers';
 import { isCombiner } from './isCombiner';
 import { isRef } from './isRef';
 import { lookupRef } from './lookupRef';
@@ -78,14 +79,13 @@ export const renderSchema: Walker = function*(schema, dereferencedSchema, level
       };
 
       if (node.properties !== undefined) {
-        const isConditionalCombiner = node.combiner === 'anyOf' || node.combiner === 'oneOf';
         for (const [i, property] of node.properties.entries()) {
           if ('type' in node) {
             property.type = node.type;
           }
 
           yield* renderSchema(property, dereferencedSchema, level + 1, {
-            showDivider: isConditionalCombiner && i !== 0,
+            ...(i !== 0 && { divider: DIVIDERS[node.combiner] }),
             path: [...path, 'properties', i],
           });
         }