chore: refactor ObjectSchema and Field, less rerenders on expand

src/components/Fields/Field.tsx

@@ -7,15 +7,17 @@ import {
   PropertyBullet,
   PropertyDetailsCell,
   PropertyNameCell,
+  InnerPropertiesWrap,
+  PropertyCellWithInner,
 } from '../../common-elements/fields-layout';
 
 import { ShelfIcon } from '../../common-elements/';
 
 import { FieldModel } from '../../services/models';
+import { Schema, SchemaOptions } from '../Schema/Schema';
 
-export interface FieldProps {
+export interface FieldProps extends SchemaOptions {
   className?: string;
-  onClick?: () => void;
   isLast?: boolean;
   showExamples?: boolean;
 
@@ -25,15 +27,16 @@ export interface FieldProps {
 }
 
 export class Field extends React.PureComponent<FieldProps> {
+  toggle = () => {
+    this.props.field.toggle();
+  };
   render() {
     const { className, field, isLast } = this.props;
     const { name, expanded, deprecated, required } = field;
+    const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
 
-    const paramName = this.props.onClick ? (
+    const paramName = withSubSchema ? (
-      <ClickablePropertyNameCell
+      <ClickablePropertyNameCell onClick={this.toggle} className={deprecated ? 'deprecated' : ''}>
-        onClick={this.props.onClick}
-        className={deprecated ? 'deprecated' : ''}
-      >
         <PropertyBullet />
         {name}
         <ShelfIcon size={'1.2em'} direction={expanded ? 'down' : 'right'} />
@@ -47,12 +50,29 @@ export class Field extends React.PureComponent<FieldProps> {
       </PropertyNameCell>
     );
     return (
-      <tr className={isLast ? 'last ' + className : className}>
+      <>
-        {paramName}
+        <tr className={isLast ? 'last ' + className : className}>
-        <PropertyDetailsCell>
+          {paramName}
-          <FieldDetails {...this.props} />
+          <PropertyDetailsCell>
-        </PropertyDetailsCell>
+            <FieldDetails {...this.props} />
-      </tr>
+          </PropertyDetailsCell>
+        </tr>
+        {field.expanded &&
+          withSubSchema && (
+            <tr key={field.name + 'inner'}>
+              <PropertyCellWithInner colSpan={2}>
+                <InnerPropertiesWrap>
+                  <Schema
+                    schema={field.schema}
+                    skipReadOnly={this.props.skipReadOnly}
+                    skipWriteOnly={this.props.skipWriteOnly}
+                    showTitle={this.props.showTitle}
+                  />
+                </InnerPropertiesWrap>
+              </PropertyCellWithInner>
+            </tr>
+          )}
+      </>
     );
   }
 }

src/components/Schema/ObjectSchema.tsx

@@ -1,17 +1,12 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
 
-import { FieldModel, SchemaModel } from '../../services/models';
+import { SchemaModel } from '../../services/models';
 
-import {
+import { PropertiesTable, PropertiesTableCaption } from '../../common-elements/fields-layout';
-  InnerPropertiesWrap,
-  PropertiesTable,
-  PropertiesTableCaption,
-  PropertyCellWithInner,
-} from '../../common-elements/fields-layout';
 import { Field } from '../Fields/Field';
 import { DiscriminatorDropdown } from './DiscriminatorDropdown';
-import { Schema, SchemaProps } from './Schema';
+import { SchemaProps } from './Schema';
 
 import { mapWithLast } from '../../utils';
 
@@ -28,42 +23,6 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
     return this.props.discriminator!.parentSchema;
   }
 
-  renderField(field: FieldModel, isLast: boolean, isDiscriminator: boolean = false) {
-    const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
-    return [
-      <Field
-        key={field.name}
-        isLast={isLast}
-        field={field}
-        onClick={(withSubSchema && (() => field.toggle())) || undefined}
-        renderDiscriminatorSwitch={
-          (isDiscriminator &&
-            (() => (
-              <DiscriminatorDropdown parent={this.parentSchema} enumValues={field.schema.enum} />
-            ))) ||
-          undefined
-        }
-        className={field.expanded ? 'expanded' : undefined}
-        showExamples={false}
-      />,
-      field.expanded &&
-        withSubSchema && (
-          <tr key={field.name + 'inner'}>
-            <PropertyCellWithInner colSpan={2}>
-              <InnerPropertiesWrap>
-                <Schema
-                  schema={field.schema}
-                  skipReadOnly={this.props.skipReadOnly}
-                  skipWriteOnly={this.props.skipWriteOnly}
-                  showTitle={this.props.showTitle}
-                />
-              </InnerPropertiesWrap>
-            </PropertyCellWithInner>
-          </tr>
-        ),
-    ];
-  }
-
   render() {
     const { schema: { fields = [] }, showTitle, discriminator } = this.props;
 
@@ -82,13 +41,31 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
       <PropertiesTable>
         {showTitle && <PropertiesTableCaption>{this.props.schema.title}</PropertiesTableCaption>}
         <tbody>
-          {mapWithLast(filteredFields, (field, isLast) =>
+          {mapWithLast(filteredFields, (field, isLast) => {
-            this.renderField(
+            return (
-              field,
+              <Field
-              isLast,
+                key={field.name}
-              discriminator && discriminator.fieldName === field.name,
+                isLast={isLast}
-            ),
+                field={field}
-          )}
+                renderDiscriminatorSwitch={
+                  (discriminator &&
+                    discriminator.fieldName === field.name &&
+                    (() => (
+                      <DiscriminatorDropdown
+                        parent={this.parentSchema}
+                        enumValues={field.schema.enum}
+                      />
+                    ))) ||
+                  undefined
+                }
+                className={field.expanded ? 'expanded' : undefined}
+                showExamples={false}
+                skipReadOnly={this.props.skipReadOnly}
+                skipWriteOnly={this.props.skipWriteOnly}
+                showTitle={this.props.showTitle}
+              />
+            );
+          })}
         </tbody>
       </PropertiesTable>
     );

src/components/Schema/Schema.tsx

@@ -10,13 +10,16 @@ import { ArraySchema } from './ArraySchema';
 import { ObjectSchema } from './ObjectSchema';
 import { OneOfSchema } from './OneOfSchema';
 
-export interface SchemaProps {
+export interface SchemaOptions {
-  schema: SchemaModel;
   showTitle?: boolean;
   skipReadOnly?: boolean;
   skipWriteOnly?: boolean;
 }
 
+export interface SchemaProps extends SchemaOptions {
+  schema: SchemaModel;
+}
+
 @observer
 export class Schema extends React.Component<Partial<SchemaProps>> {
   render() {