Basic implementation finished

demo/index.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { render } from 'react-dom';
+import {render} from 'react-dom';
 import styled from 'styled-components';
-import { resolve as urlResolve } from 'url';
+import {resolve as urlResolve} from 'url';
-import { RedocStandalone } from '../src';
+import {RedocStandalone} from '../src';
 import ComboBox from './ComboBox';
 
 const demos = [
-  { value: 'https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml', label: 'Instagram' },
+  {value: 'https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml', label: 'Instagram'},
   {
     value: 'https://api.apis.guru/v2/specs/googleapis.com/calendar/v3/swagger.yaml',
     label: 'Google Calendar',
   },
-  { value: 'https://api.apis.guru/v2/specs/slack.com/1.0.6/swagger.yaml', label: 'Slack' },
+  {value: 'https://api.apis.guru/v2/specs/slack.com/1.0.6/swagger.yaml', label: 'Slack'},
-  { value: 'https://api.apis.guru/v2/specs/zoom.us/2.0.0/swagger.yaml', label: 'Zoom.us' },
+  {value: 'https://api.apis.guru/v2/specs/zoom.us/2.0.0/swagger.yaml', label: 'Zoom.us'},
   {
     value: 'https://api.apis.guru/v2/specs/graphhopper.com/1.0/swagger.yaml',
     label: 'GraphHopper',
@@ -21,10 +21,8 @@ const demos = [
 
 const DEFAULT_SPEC = 'openapi.yaml';
 
-class DemoApp extends React.Component<
+class DemoApp extends React.Component<{},
-  {},
+  { specUrl: string; dropdownOpen: boolean; cors: boolean }> {
-  { specUrl: string; dropdownOpen: boolean; cors: boolean }
-> {
   constructor(props) {
     super(props);
 
@@ -71,7 +69,7 @@ class DemoApp extends React.Component<
   };
 
   render() {
-    const { specUrl, cors } = this.state;
+    const {specUrl, cors} = this.state;
     let proxiedUrl = specUrl;
     if (specUrl !== DEFAULT_SPEC) {
       proxiedUrl = cors
@@ -82,7 +80,7 @@ class DemoApp extends React.Component<
       <>
         <Heading>
           <a href=".">
-            <Logo src="https://github.com/Redocly/redoc/raw/master/docs/images/redoc-logo.png" />
+            <Logo src="https://github.com/Redocly/redoc/raw/master/docs/images/redoc-logo.png"/>
           </a>
           <ControlsContainer>
             <ComboBox
@@ -92,7 +90,7 @@ class DemoApp extends React.Component<
               value={specUrl === DEFAULT_SPEC ? '' : specUrl}
             />
             <CorsCheckbox title="Use CORS proxy">
-              <input id="cors_checkbox" type="checkbox" onChange={this.toggleCors} checked={cors} />
+              <input id="cors_checkbox" type="checkbox" onChange={this.toggleCors} checked={cors}/>
               <label htmlFor="cors_checkbox">CORS</label>
             </CorsCheckbox>
           </ControlsContainer>
@@ -104,7 +102,7 @@ class DemoApp extends React.Component<
             height="30px"
           />
         </Heading>
-        <RedocStandalone specUrl={proxiedUrl} options={{ scrollYOffset: 'nav' }} />
+        <RedocStandalone specUrl={proxiedUrl} options={{scrollYOffset: 'nav', disableInfiniteScroll: true}}/>
       </>
     );
   }

src/components/ContentItems/SingleContentItem.tsx

@@ -0,0 +1,31 @@
+import {observer} from 'mobx-react';
+import * as React from 'react';
+import {IMenuItem, MenuStore} from '../../services';
+import {ContentItems} from './ContentItems';
+
+@observer
+export class SingleContentItem extends React.Component<{
+  menu: MenuStore;
+}> {
+
+  extractActive(menu: MenuStore): IMenuItem[] {
+    const active = menu.flatItems[menu.activeItemIdx];
+    if (!active) {
+      return [menu.flatItems[0]];
+    }
+    if (active.type !== 'operation') {
+      return [
+        {...active, items: []},
+      ];
+    }
+    return [active];
+  }
+
+  render() {
+    const { menu } = this.props;
+    const activeItems = this.extractActive(menu);
+    return (
+      <ContentItems items={activeItems as any} />
+    );
+  }
+}

src/components/Redoc/Redoc.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ThemeProvider } from '../../styled-components';
 import { OptionsProvider } from '../OptionsProvider';
 
-import { AppStore } from '../../services';
+import {AppStore} from '../../services';
 import { ApiInfo } from '../ApiInfo/';
 import { ApiLogo } from '../ApiLogo/ApiLogo';
 import { ContentItems } from '../ContentItems/ContentItems';
@@ -12,6 +12,7 @@ import { SideMenu } from '../SideMenu/SideMenu';
 import { StickyResponsiveSidebar } from '../StickySidebar/StickyResponsiveSidebar';
 import { ApiContentWrap, BackgroundStub, RedocWrap } from './styled.elements';
 
+import {SingleContentItem} from '../ContentItems/SingleContentItem';
 import { SearchBox } from '../SearchBox/SearchBox';
 import { StoreProvider } from '../StoreBuilder';
 
@@ -57,7 +58,10 @@ export class Redoc extends React.Component<RedocProps> {
               </StickyResponsiveSidebar>
               <ApiContentWrap className="api-content">
                 <ApiInfo store={store} />
-                <ContentItems items={menu.items as any} />
+                {options.disableInfiniteScroll
+                  ? <SingleContentItem menu={menu}/>
+                  : <ContentItems items={menu.items as any}/>
+                }
               </ApiContentWrap>
               <BackgroundStub />
             </RedocWrap>

src/services/ScrollService.ts

@@ -18,13 +18,13 @@ export class ScrollService {
 
   bind() {
     this._prevOffsetY = this.scrollY();
-    if (this._scrollParent) {
+    if (this._scrollParent && !this.options.disableInfiniteScroll) {
       this._scrollParent.addEventListener('scroll', this.handleScroll);
     }
   }
 
   dispose() {
-    if (this._scrollParent) {
+    if (this._scrollParent && !this.options.disableInfiniteScroll) {
       this._scrollParent.removeEventListener('scroll', this.handleScroll);
     }
     this._emiter.removeAllListeners(EVENT);