Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-06 05:10:20 +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;
}
@observer
export class Field extends React.Component<FieldProps> {
toggle = () => {
if (this.props.field.expanded === undefined && this.props.expandByDefault) {
this.props.field.collapse();
export const Field = observer((fieldProps: FieldProps) => {
const {
className,
isLast,
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 { 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}
>
<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 />
const paramName = withSubSchema ? (
<ClickablePropertyNameCell className={deprecated ? 'deprecated' : ''} kind={kind} title={name}>
<PropertyBullet />
<button onClick={toggle} onKeyPress={handleKeyPress} aria-label="expand properties">
<span>{name}</span>
{required && <RequiredLabel> required </RequiredLabel>}
</PropertyNameCell>
);
<ShelfIcon direction={expanded ? 'down' : 'right'} />
</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 (
<>
<tr className={isLast ? 'last ' + className : className}>
{paramName}
<PropertyDetailsCell>
<FieldDetails {...this.props} />
</PropertyDetailsCell>
return (
<>
<tr className={isLast ? 'last ' + className : className}>
{paramName}
<PropertyDetailsCell>
<FieldDetails {...fieldProps} />
</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>
{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>
)}
</>
);
}
}
)}
</>
);
});