diff --git a/README.md b/README.md index 16554c6b..138e1661 100644 --- a/README.md +++ b/README.md @@ -242,6 +242,7 @@ You can use all of the following options with standalone version on tag * `hideDownloadButton` - do not show "Download" spec button. **THIS DOESN'T MAKE YOUR SPEC PRIVATE**, it just hides the button. * `disableSearch` - disable search indexing and search box * `onlyRequiredInSamples` - shows only required fields in request samples. +* `sampleCollapseLevel` - set the collapse level in response samples. Special value 'all' expand all response. Default value = 2. * `theme` - ReDoc theme. Not documented yet. For details check source code: [theme.ts](https://github.com/Redocly/redoc/blob/master/src/theme.ts) ## Advanced usage of standalone version diff --git a/src/components/JsonViewer/JsonViewer.tsx b/src/components/JsonViewer/JsonViewer.tsx index 33231ee7..3b213ef8 100644 --- a/src/components/JsonViewer/JsonViewer.tsx +++ b/src/components/JsonViewer/JsonViewer.tsx @@ -5,6 +5,7 @@ import { SampleControls } from '../../common-elements'; import { CopyButtonWrapper } from '../../common-elements/CopyButtonWrapper'; import { PrismDiv } from '../../common-elements/PrismDiv'; import { jsonToHTML } from '../../utils/jsonToHtml'; +import { OptionsContext } from '../OptionsProvider'; import { jsonStyles } from './style'; export interface JsonProps { @@ -32,12 +33,18 @@ class Json extends React.PureComponent { Expand all Collapse all - (this.node = node!)} - dangerouslySetInnerHTML={{ __html: jsonToHTML(this.props.data) }} - /> + + {options => ( + (this.node = node!)} + dangerouslySetInnerHTML={{ + __html: jsonToHTML(this.props.data, options.sampleCollapseLevel), + }} + /> + )} + ); diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts index 7c893f1b..1690b290 100644 --- a/src/services/RedocNormalizedOptions.ts +++ b/src/services/RedocNormalizedOptions.ts @@ -22,6 +22,7 @@ export interface RedocRawOptions { onlyRequiredInSamples?: boolean | string; showExtensions?: boolean | string | string[]; hideSingleRequestSampleTab?: boolean | string; + sampleCollapseLevel?: number | string | 'all'; unstable_ignoreMimeParameters?: boolean; @@ -110,6 +111,16 @@ export class RedocNormalizedOptions { return value; } + private static normalizeSampleCollapseLevel(level?: number | string | 'all'): number { + if (level === 'all') { + return +Infinity; + } + if (!isNaN(Number(level))) { + return Math.ceil(Number(level)); + } + return 2; + } + theme: ResolvedThemeInterface; scrollYOffset: () => number; hideHostname: boolean; @@ -125,6 +136,7 @@ export class RedocNormalizedOptions { onlyRequiredInSamples: boolean; showExtensions: boolean | string[]; hideSingleRequestSampleTab: boolean; + sampleCollapseLevel: number; /* tslint:disable-next-line */ unstable_ignoreMimeParameters: boolean; @@ -156,6 +168,9 @@ export class RedocNormalizedOptions { this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples); this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions); this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab); + this.sampleCollapseLevel = RedocNormalizedOptions.normalizeSampleCollapseLevel( + raw.sampleCollapseLevel, + ); this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters); diff --git a/src/utils/jsonToHtml.ts b/src/utils/jsonToHtml.ts index abd4b14a..7346e62e 100644 --- a/src/utils/jsonToHtml.ts +++ b/src/utils/jsonToHtml.ts @@ -1,8 +1,9 @@ let level = 1; -const COLLAPSE_LEVEL = 2; +let collapseLevel; -export function jsonToHTML(json) { +export function jsonToHTML(json, maxCollapseLevel) { level = 1; + collapseLevel = maxCollapseLevel; let output = ''; output += '
'; output += valueToHTML(json); @@ -71,7 +72,7 @@ function valueToHTML(value) { } function arrayToHTML(json) { - const collapsed = level > COLLAPSE_LEVEL ? 'collapsed' : ''; + const collapsed = level > collapseLevel ? 'collapsed' : ''; let output = `
${punctuation( '[', )}
    `; @@ -94,7 +95,7 @@ function arrayToHTML(json) { } function objectToHTML(json) { - const collapsed = level > COLLAPSE_LEVEL ? 'collapsed' : ''; + const collapsed = level > collapseLevel ? 'collapsed' : ''; const keys = Object.keys(json); const length = keys.length; let output = `
    ${punctuation(