feat: support examples in object schema

src/components/Fields/Field.tsx

@@ -29,7 +29,7 @@ export interface FieldProps extends SchemaOptions {
 }
 
 @observer
-export class Field extends React.Component<FieldProps> {
+export class Field extends React.PureComponent<FieldProps> {
   toggle = () => {
     if (this.props.field.expanded === undefined && this.props.expandByDefault) {
       this.props.field.expanded = false;

src/components/Schema/ObjectSchema.tsx

@@ -18,37 +18,35 @@ export interface ObjectSchemaProps extends SchemaProps {
   };
 }
 
-@observer
+export const ObjectSchemaComponent = observer(
-export class ObjectSchema extends React.Component<ObjectSchemaProps> {
+  ({
-  static contextType = OptionsContext;
+    schema: { fields = [], title },
+    showTitle,
+    discriminator,
+    skipReadOnly,
+    skipWriteOnly,
+  }: ObjectSchemaProps) => {
+    const { expandSingleSchemaField, showObjectExample } = React.useContext(OptionsContext);
 
-  get parentSchema() {
+    const filteredFields = React.useMemo(
-    return this.props.discriminator!.parentSchema;
+      () =>
-  }
+        skipReadOnly || skipWriteOnly
+          ? fields.filter(
+              item =>
+                !(
+                  (skipReadOnly && item.schema.readOnly) ||
+                  (skipWriteOnly && item.schema.writeOnly)
+                ),
+            )
+          : fields,
+      [skipReadOnly, skipWriteOnly, fields],
+    );
 
-  render() {
+    const expandByDefault = expandSingleSchemaField && filteredFields.length === 1;
-    const {
-      schema: { fields = [] },
-      showTitle,
-      discriminator,
-    } = this.props;
-
-    const needFilter = this.props.skipReadOnly || this.props.skipWriteOnly;
-
-    const filteredFields = needFilter
-      ? fields.filter(item => {
-          return !(
-            (this.props.skipReadOnly && item.schema.readOnly) ||
-            (this.props.skipWriteOnly && item.schema.writeOnly)
-          );
-        })
-      : fields;
-
-    const expandByDefault = this.context.expandSingleSchemaField && filteredFields.length === 1;
 
     return (
       <PropertiesTable>
-        {showTitle && <PropertiesTableCaption>{this.props.schema.title}</PropertiesTableCaption>}
+        {showTitle && <PropertiesTableCaption>{title}</PropertiesTableCaption>}
         <tbody>
           {mapWithLast(filteredFields, (field, isLast) => {
             return (
@@ -58,26 +56,27 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
                 field={field}
                 expandByDefault={expandByDefault}
                 renderDiscriminatorSwitch={
-                  (discriminator &&
+                  discriminator?.fieldName === field.name
-                    discriminator.fieldName === field.name &&
+                    ? () => (
-                    (() => (
+                        <DiscriminatorDropdown
-                      <DiscriminatorDropdown
+                          parent={discriminator!.parentSchema}
-                        parent={this.parentSchema}
+                          enumValues={field.schema.enum}
-                        enumValues={field.schema.enum}
+                        />
-                      />
+                      )
-                    ))) ||
+                    : undefined
-                  undefined
                 }
                 className={field.expanded ? 'expanded' : undefined}
-                showExamples={false}
+                showExamples={showObjectExample}
-                skipReadOnly={this.props.skipReadOnly}
+                skipReadOnly={skipReadOnly}
-                skipWriteOnly={this.props.skipWriteOnly}
+                skipWriteOnly={skipWriteOnly}
-                showTitle={this.props.showTitle}
+                showTitle={showTitle}
               />
             );
           })}
         </tbody>
       </PropertiesTable>
     );
-  }
+  },
-}
+);
+
+export const ObjectSchema = React.memo<ObjectSchemaProps>(ObjectSchemaComponent);

src/components/__tests__/DiscriminatorDropdown.test.tsx

@@ -7,7 +7,7 @@ import * as React from 'react';
 
 import { filterPropsDeep } from '../../utils/test-utils';
 
-import { ObjectSchema, Schema } from '../';
+import { ObjectSchemaComponent, ObjectSchema, Schema } from '../';
 import { OpenAPIParser, SchemaModel } from '../../services';
 import { RedocNormalizedOptions } from '../../services/RedocNormalizedOptions';
 import * as simpleDiscriminatorFixture from './fixtures/simple-discriminator.json';
@@ -26,7 +26,7 @@ describe('Components', () => {
           options,
         );
         const schemaViewElement = shallow(<Schema schema={schema} />).getElement();
-        expect(schemaViewElement.type).toEqual(ObjectSchema);
+        expect(schemaViewElement.type).toEqual(ObjectSchemaComponent);
         expect(schemaViewElement.props.discriminator).toBeDefined();
         expect(schemaViewElement.props.discriminator.parentSchema).toBeDefined();
         expect(schemaViewElement.props.discriminator.fieldName).toEqual('type');

src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
 <styled.table>
   <tbody>
     <Field
+      expandByDefault={false}
       field={
         FieldModel {
           "const": "",
@@ -59,6 +60,7 @@ exports[`Components SchemaView discriminator should correctly render discriminat
       showExamples={false}
     />
     <Field
+      expandByDefault={false}
       field={
         FieldModel {
           "const": "",

src/services/RedocNormalizedOptions.ts

@@ -35,6 +35,7 @@ export interface RedocRawOptions {
   simpleOneOfTypeLabel?: boolean | string;
   payloadSampleIdx?: number;
   expandSingleSchemaField?: boolean | string;
+  showObjectExample?: boolean | string;
 
   unstable_ignoreMimeParameters?: boolean;
 
@@ -220,6 +221,7 @@ export class RedocNormalizedOptions {
   simpleOneOfTypeLabel: boolean;
   payloadSampleIdx: number;
   expandSingleSchemaField: boolean;
+  showObjectExample: boolean;
 
   /* tslint:disable-next-line */
   unstable_ignoreMimeParameters: boolean;
@@ -281,6 +283,7 @@ export class RedocNormalizedOptions {
     this.simpleOneOfTypeLabel = argValueToBoolean(raw.simpleOneOfTypeLabel);
     this.payloadSampleIdx = RedocNormalizedOptions.normalizePayloadSampleIdx(raw.payloadSampleIdx);
     this.expandSingleSchemaField = argValueToBoolean(raw.expandSingleSchemaField);
+    this.showObjectExample = argValueToBoolean(raw.showObjectExample);
 
     this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);