Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-06 21:30:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: expanded observable

Browse Source
This commit is contained in:
Alex Varchuk 2022-01-25 20:59:01 +02:00
parent f3289872d6
commit 7cc10f7480
1 changed files with 63 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/Fields/Field.tsx
View File

@ -28,79 +28,79 @@ export interface FieldProps extends SchemaOptions {
renderDiscriminatorSwitch?: (opts: FieldProps) => JSX.Element; 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 { } else {
this.props.field.toggle(); field.toggle();
} }
setExpanded(field.expanded);
}; };
handleKeyPress = e => { const handleKeyPress = e => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
this.toggle(); toggle();
} }
}; };
render() { const { name, deprecated, required, kind } = field;
const { className, field, isLast, expandByDefault } = this.props; const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
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 className={deprecated ? 'deprecated' : ''} kind={kind} title={name}>
const paramName = withSubSchema ? ( <PropertyBullet />
<ClickablePropertyNameCell <button onClick={toggle} onKeyPress={handleKeyPress} aria-label="expand properties">
className={deprecated ? 'deprecated' : ''}
kind={kind}
title={name}
>
<PropertyBullet />
<button
onClick={this.toggle}
onKeyPress={this.handleKeyPress}
aria-label="expand properties"
>
<span>{name}</span>
<ShelfIcon direction={expanded ? 'down' : 'right'} />
</button>
{required && <RequiredLabel> required </RequiredLabel>}
</ClickablePropertyNameCell>
) : (
<PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
<PropertyBullet />
<span>{name}</span> <span>{name}</span>
{required && <RequiredLabel> required </RequiredLabel>} <ShelfIcon direction={expanded ? 'down' : 'right'} />
</PropertyNameCell> </button>
); {required && <RequiredLabel> required </RequiredLabel>}
</ClickablePropertyNameCell>
) : (
<PropertyNameCell className={deprecated ? 'deprecated' : undefined} kind={kind} title={name}>
<PropertyBullet />
<span>{name}</span>
{required && <RequiredLabel> required </RequiredLabel>}
</PropertyNameCell>
);
return ( return (
<> <>
<tr className={isLast ? 'last ' + className : className}> <tr className={isLast ? 'last ' + className : className}>
{paramName} {paramName}
<PropertyDetailsCell> <PropertyDetailsCell>
<FieldDetails {...this.props} /> <FieldDetails {...fieldProps} />
</PropertyDetailsCell> </PropertyDetailsCell>
</tr>
{expanded && withSubSchema && (
<tr key={field.name + 'inner'}>
<PropertyCellWithInner colSpan={2}>
<InnerPropertiesWrap>
<Schema
schema={field.schema}
skipReadOnly={skipReadOnly}
skipWriteOnly={skipWriteOnly}
showTitle={showTitle}
level={level}
/>
</InnerPropertiesWrap>
</PropertyCellWithInner>
</tr> </tr>
{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}
level={this.props.level}
/>
</InnerPropertiesWrap>
</PropertyCellWithInner>
</tr>
)}
</>
);
}
}