diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx index 7545243f..2d81b181 100644 --- a/src/components/ContentItems/ContentItems.tsx +++ b/src/components/ContentItems/ContentItems.tsx @@ -11,14 +11,19 @@ import { Operation } from '../Operation/Operation'; @observer export class ContentItems extends React.Component<{ + activeSelection?: string; items: ContentItemModel[]; }> { render() { const items = this.props.items; + const activeSelection = this.props.activeSelection; if (items.length === 0) { return null; } - return items.map(item => ); + const filteredItems = items.filter(item => { + return item.type == "tag" ? item.name == `${activeSelection}` : true; + }); + return filteredItems.map(item => ); } } diff --git a/src/components/Redoc/Redoc.tsx b/src/components/Redoc/Redoc.tsx index 2b43e77d..6cc9d679 100644 --- a/src/components/Redoc/Redoc.tsx +++ b/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, IMenuItem } from '../../services'; import { ApiInfo } from '../ApiInfo/'; import { ApiLogo } from '../ApiLogo/ApiLogo'; import { ContentItems } from '../ContentItems/ContentItems'; @@ -19,11 +19,17 @@ export interface RedocProps { store: AppStore; } -export class Redoc extends React.Component { +export interface AppState { + activeSelection: string | undefined; +} + +export class Redoc extends React.Component { static propTypes = { store: PropTypes.instanceOf(AppStore).isRequired, }; + state = { activeSelection: undefined }; + componentDidMount() { this.props.store.onDidMount(); } @@ -32,6 +38,12 @@ export class Redoc extends React.Component { this.props.store.dispose(); } + setActiveSelection = (item: IMenuItem) => { + if (item && item.type === "tag") { + this.setState({ activeSelection: item.name }); + } + } + render() { const { store: { spec, menu, options, search, marker }, @@ -50,14 +62,15 @@ export class Redoc extends React.Component { marker={marker} getItemById={menu.getItemById} onActivate={menu.activateAndScroll} + setActiveSelection={() => this.setActiveSelection} /> )) || null} - + - + diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx index e6ade2c3..59e7d44f 100644 --- a/src/components/SearchBox/SearchBox.tsx +++ b/src/components/SearchBox/SearchBox.tsx @@ -23,6 +23,8 @@ export interface SearchBoxProps { onActivate: (item: IMenuItem) => void; className?: string; + + setActiveSelection: () => void; } export interface SearchBoxState { @@ -153,6 +155,7 @@ export class SearchBox extends React.PureComponent this.props.setActiveSelection} /> ))} diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index 8b418aad..df091362 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/src/components/SideMenu/MenuItem.tsx @@ -11,6 +11,7 @@ import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styl export interface MenuItemProps { item: IMenuItem; onActivate?: (item: IMenuItem) => void; + setActiveSelection: (item: IMenuItem) => void; withoutChildren?: boolean; } @@ -19,6 +20,7 @@ export class MenuItem extends React.Component { ref = React.createRef(); activate = (evt: React.MouseEvent) => { + this.props.setActiveSelection(this.props.item); this.props.onActivate!(this.props.item); evt.stopPropagation(); }; @@ -44,22 +46,23 @@ export class MenuItem extends React.Component { {item.type === 'operation' ? ( ) : ( - - - {item.name} - {this.props.children} - - {(item.depth > 0 && item.items.length > 0 && ( - - )) || - null} - - )} + + + {item.name} + {this.props.children} + + {(item.depth > 0 && item.items.length > 0 && ( + + )) || + null} + + )} {!withoutChildren && item.items && item.items.length > 0 && ( this.props.setActiveSelection} /> )} diff --git a/src/components/SideMenu/MenuItems.tsx b/src/components/SideMenu/MenuItems.tsx index f8791343..e2121cb5 100644 --- a/src/components/SideMenu/MenuItems.tsx +++ b/src/components/SideMenu/MenuItems.tsx @@ -14,6 +14,8 @@ export interface MenuItemsProps { root?: boolean; className?: string; + + setActiveSelection: (item: IMenuItem) => void; } @observer @@ -29,7 +31,7 @@ export class MenuItems extends React.Component { {...(root ? { role: 'navigation' } : {})} > {items.map((item, idx) => ( - + ))} ); diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx index 34643054..cdc1b711 100644 --- a/src/components/SideMenu/SideMenu.tsx +++ b/src/components/SideMenu/SideMenu.tsx @@ -9,7 +9,7 @@ import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar'; import { RedocAttribution } from './styled.elements'; @observer -export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> { +export class SideMenu extends React.Component<{ menu: MenuStore; className?: string; setActiveSelection: (item: IMenuItem) => void }> { static contextType = OptionsContext; private _updateScroll?: () => void; @@ -23,7 +23,7 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str wheelPropagation: false, }} > - + Documentation Powered by ReDoc diff --git a/src/services/MenuStore.ts b/src/services/MenuStore.ts index 2a619af6..ac72759d 100644 --- a/src/services/MenuStore.ts +++ b/src/services/MenuStore.ts @@ -64,6 +64,8 @@ export class MenuStore { items: IMenuItem[]; flatItems: IMenuItem[]; + activeSelection?: string; + /** * cached flattened menu items to support absolute indexing */