feat: support examples in object schema (#1832)

* feat: support examples in object schema

* revert pure components used with observer

* rename option

* update test

src/components/Schema/ObjectSchema.tsx

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

src/components/__tests__/DiscriminatorDropdown.test.tsx

@@ -26,7 +26,7 @@ describe('Components', () => {
           options,
         );
         const schemaViewElement = shallow(<Schema schema={schema} />).getElement();
-        expect(schemaViewElement.type).toEqual(ObjectSchema);
+        expect(schemaViewElement).toMatchSnapshot();
         expect(schemaViewElement.props.discriminator).toBeDefined();
         expect(schemaViewElement.props.discriminator.parentSchema).toBeDefined();
         expect(schemaViewElement.props.discriminator.fieldName).toEqual('type');

src/services/RedocNormalizedOptions.ts

@@ -35,6 +35,7 @@ export interface RedocRawOptions {
   simpleOneOfTypeLabel?: boolean | string;
   payloadSampleIdx?: number;
   expandSingleSchemaField?: boolean | string;
+  showObjectSchemaExamples?: boolean | string;
 
   unstable_ignoreMimeParameters?: boolean;
 
@@ -220,6 +221,7 @@ export class RedocNormalizedOptions {
   simpleOneOfTypeLabel: boolean;
   payloadSampleIdx: number;
   expandSingleSchemaField: boolean;
+  showObjectSchemaExamples: 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.showObjectSchemaExamples = argValueToBoolean(raw.showObjectSchemaExamples);
 
     this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);