fix: expanded observable

src/components/Fields/Field.tsx

@@ -28,42 +28,43 @@ export interface FieldProps extends SchemaOptions {
   renderDiscriminatorSwitch?: (opts: FieldProps) => JSX.Element;
 }
 
-@observer
+export const Field = observer((fieldProps: FieldProps) => {
-export class Field extends React.Component<FieldProps> {
+  const {
-  toggle = () => {
+    className,
-    if (this.props.field.expanded === undefined && this.props.expandByDefault) {
+    isLast,
-      this.props.field.collapse();
+    field,
+    expandByDefault,
+    skipReadOnly,
+    skipWriteOnly,
+    showTitle,
+    level,
+  } = fieldProps;
+  const [expanded, setExpanded] = React.useState(
+    field.expanded === undefined ? expandByDefault : field.expanded,
+  );
+  const toggle = () => {
+    if (field.expanded === undefined && expandByDefault) {
+      field.collapse();
     } else {
-      this.props.field.toggle();
+      field.toggle();
     }
+    setExpanded(field.expanded);
   };
 
-  handleKeyPress = e => {
+  const handleKeyPress = e => {
     if (e.key === 'Enter') {
       e.preventDefault();
-      this.toggle();
+      toggle();
     }
   };
 
-  render() {
-    const { className, field, isLast, expandByDefault } = this.props;
   const { name, deprecated, required, kind } = field;
   const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
 
-    const expanded = field.expanded === undefined ? expandByDefault : field.expanded;
-
   const paramName = withSubSchema ? (
-      <ClickablePropertyNameCell
+    <ClickablePropertyNameCell className={deprecated ? 'deprecated' : ''} kind={kind} title={name}>
-        className={deprecated ? 'deprecated' : ''}
-        kind={kind}
-        title={name}
-      >
       <PropertyBullet />
-        <button
+      <button onClick={toggle} onKeyPress={handleKeyPress} aria-label="expand properties">
-          onClick={this.toggle}
-          onKeyPress={this.handleKeyPress}
-          aria-label="expand properties"
-        >
         <span>{name}</span>
         <ShelfIcon direction={expanded ? 'down' : 'right'} />
       </button>
@@ -82,7 +83,7 @@ export class Field extends React.Component<FieldProps> {
       <tr className={isLast ? 'last ' + className : className}>
         {paramName}
         <PropertyDetailsCell>
-            <FieldDetails {...this.props} />
+          <FieldDetails {...fieldProps} />
         </PropertyDetailsCell>
       </tr>
       {expanded && withSubSchema && (
@@ -91,10 +92,10 @@ export class Field extends React.Component<FieldProps> {
             <InnerPropertiesWrap>
               <Schema
                 schema={field.schema}
-                  skipReadOnly={this.props.skipReadOnly}
+                skipReadOnly={skipReadOnly}
-                  skipWriteOnly={this.props.skipWriteOnly}
+                skipWriteOnly={skipWriteOnly}
-                  showTitle={this.props.showTitle}
+                showTitle={showTitle}
-                  level={this.props.level}
+                level={level}
               />
             </InnerPropertiesWrap>
           </PropertyCellWithInner>
@@ -102,5 +103,4 @@ export class Field extends React.Component<FieldProps> {
       )}
     </>
   );
-  }
+});
-}