feat: add sampleCollapseLevel option

README.md

@@ -242,6 +242,7 @@ You can use all of the following options with standalone version on <redoc> 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

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<JsonProps> {
         <span onClick={this.expandAll}> Expand all </span>
         <span onClick={this.collapseAll}> Collapse all </span>
       </SampleControls>
+      <OptionsContext.Consumer>
+        {options => (
           <PrismDiv
             className={this.props.className}
             // tslint:disable-next-line
             ref={node => (this.node = node!)}
-        dangerouslySetInnerHTML={{ __html: jsonToHTML(this.props.data) }}
+            dangerouslySetInnerHTML={{
+              __html: jsonToHTML(this.props.data, options.sampleCollapseLevel),
+            }}
           />
+        )}
+      </OptionsContext.Consumer>
     </JsonViewerWrap>
   );
 

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);
 

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 += '<div class="redoc-json">';
   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 = `<div class="collapser"></div>${punctuation(
     '[',
   )}<span class="ellipsis"></span><ul class="array collapsible">`;
@@ -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 = `<div class="collapser"></div>${punctuation(