mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-22 00:26:34 +03:00
fix: Expand/Collapse all buttons disappears for flat structures (#1424)
Co-authored-by: AvroraPolnareff <araintheskywith@gmail.com> Co-authored-by: Roman Hotsiy <gotsijroman@gmail.com> Co-authored-by: anastasiia-developer <anastasiia@redocly.com>
This commit is contained in:
parent
8240404a55
commit
2ca8e081ba
|
@ -26,27 +26,37 @@ class Json extends React.PureComponent<JsonProps> {
|
|||
return <CopyButtonWrapper data={this.props.data}>{this.renderInner}</CopyButtonWrapper>;
|
||||
}
|
||||
|
||||
renderInner = ({ renderCopyButton }) => (
|
||||
<JsonViewerWrap>
|
||||
<SampleControls>
|
||||
{renderCopyButton()}
|
||||
<button onClick={this.expandAll}> Expand all </button>
|
||||
<button onClick={this.collapseAll}> Collapse all </button>
|
||||
</SampleControls>
|
||||
<OptionsContext.Consumer>
|
||||
{options => (
|
||||
<PrismDiv
|
||||
className={this.props.className}
|
||||
// tslint:disable-next-line
|
||||
ref={node => (this.node = node!)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</OptionsContext.Consumer>
|
||||
</JsonViewerWrap>
|
||||
);
|
||||
renderInner = ({ renderCopyButton }) => {
|
||||
const showFoldingButtons = this.props.data && Object.values(this.props.data).some(
|
||||
(value) => typeof value === 'object' && value !== null,
|
||||
);
|
||||
|
||||
return (
|
||||
<JsonViewerWrap>
|
||||
<SampleControls>
|
||||
{renderCopyButton()}
|
||||
{showFoldingButtons &&
|
||||
<>
|
||||
<button onClick={this.expandAll}> Expand all </button>
|
||||
<button onClick={this.collapseAll}> Collapse all </button>
|
||||
</>
|
||||
}
|
||||
</SampleControls>
|
||||
<OptionsContext.Consumer>
|
||||
{options => (
|
||||
<PrismDiv
|
||||
className={this.props.className}
|
||||
// tslint:disable-next-line
|
||||
ref={node => (this.node = node!)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</OptionsContext.Consumer>
|
||||
</JsonViewerWrap>
|
||||
);
|
||||
};
|
||||
|
||||
expandAll = () => {
|
||||
const elements = this.node.getElementsByClassName('collapsible');
|
||||
|
|
|
@ -42,5 +42,13 @@ describe('Components', () => {
|
|||
|
||||
expect(ClipboardService.copySelected as jest.Mock).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('Expand/Collapse buttons disappears for flat structures', () => {
|
||||
const flatData = { a: 1, b: '2', c: null };
|
||||
const flatDataComponent = mount(withTheme(<JsonViewer data={flatData} />));
|
||||
|
||||
expect(flatDataComponent.html()).not.toContain('Expand all');
|
||||
expect(flatDataComponent.html()).not.toContain('Collapse all');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue
Block a user