Use an option usePathInSidebar

If this option is enabled, it displays a path in the sidebar instead of
summary.

Usage:

```js
                <RedocStandalone
                spec={props.spec}
                options={{
                    scrollYOffset:'.navbar',
                    nativeScrollbars: true,
                    usePathInSidebar:true
                }}
```
This commit is contained in:
Junghyun Colin Kim 2021-11-26 19:44:35 +09:00
parent b604bd8da8
commit e16fa80030
5 changed files with 14 additions and 3 deletions

View File

@ -45,8 +45,8 @@ export class MenuItem extends React.Component<MenuItemProps> {
<OperationMenuItemContent {...this.props} item={item as OperationModel} /> <OperationMenuItemContent {...this.props} item={item as OperationModel} />
) : ( ) : (
<MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}> <MenuItemLabel depth={item.depth} active={item.active} type={item.type} ref={this.ref}>
<MenuItemTitle title={item.name}> <MenuItemTitle title={item.sidebarName}>
{item.name} {item.sidebarName}
{this.props.children} {this.props.children}
</MenuItemTitle> </MenuItemTitle>
{(item.depth > 0 && item.items.length > 0 && ( {(item.depth > 0 && item.items.length > 0 && (
@ -96,7 +96,7 @@ export class OperationMenuItemContent extends React.Component<OperationMenuItemC
<OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge> <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
)} )}
<MenuItemTitle width="calc(100% - 38px)"> <MenuItemTitle width="calc(100% - 38px)">
{item.name} {item.sidebarName}
{this.props.children} {this.props.children}
</MenuItemTitle> </MenuItemTitle>
</MenuItemLabel> </MenuItemLabel>

View File

@ -16,6 +16,7 @@ export interface IMenuItem {
id: string; id: string;
absoluteIdx?: number; absoluteIdx?: number;
name: string; name: string;
sidebarName: string;
description?: string; description?: string;
depth: number; depth: number;
active: boolean; active: boolean;

View File

@ -22,6 +22,7 @@ export interface RedocRawOptions {
disableSearch?: boolean | string; disableSearch?: boolean | string;
onlyRequiredInSamples?: boolean | string; onlyRequiredInSamples?: boolean | string;
showExtensions?: boolean | string | string[]; showExtensions?: boolean | string | string[];
usePathInSidebar?: boolean;
hideSingleRequestSampleTab?: boolean | string; hideSingleRequestSampleTab?: boolean | string;
menuToggle?: boolean | string; menuToggle?: boolean | string;
jsonSampleExpandLevel?: number | string | 'all'; jsonSampleExpandLevel?: number | string | 'all';
@ -189,6 +190,7 @@ export class RedocNormalizedOptions {
disableSearch: boolean; disableSearch: boolean;
onlyRequiredInSamples: boolean; onlyRequiredInSamples: boolean;
showExtensions: boolean | string[]; showExtensions: boolean | string[];
usePathInSidebar: boolean;
hideSingleRequestSampleTab: boolean; hideSingleRequestSampleTab: boolean;
menuToggle: boolean; menuToggle: boolean;
jsonSampleExpandLevel: number; jsonSampleExpandLevel: number;
@ -247,6 +249,7 @@ export class RedocNormalizedOptions {
this.disableSearch = argValueToBoolean(raw.disableSearch); this.disableSearch = argValueToBoolean(raw.disableSearch);
this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples); this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples);
this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions); this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions);
this.usePathInSidebar = argValueToBoolean(raw.usePathInSidebar);
this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab); this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab);
this.menuToggle = argValueToBoolean(raw.menuToggle, true); this.menuToggle = argValueToBoolean(raw.menuToggle, true);
this.jsonSampleExpandLevel = RedocNormalizedOptions.normalizeJsonSampleExpandLevel( this.jsonSampleExpandLevel = RedocNormalizedOptions.normalizeJsonSampleExpandLevel(

View File

@ -14,6 +14,7 @@ export class GroupModel implements IMenuItem {
id: string; id: string;
absoluteIdx?: number; absoluteIdx?: number;
name: string; name: string;
sidebarName: string;
description?: string; description?: string;
type: MenuItemGroupType; type: MenuItemGroupType;
@ -43,6 +44,8 @@ export class GroupModel implements IMenuItem {
this.name = tagOrGroup['x-displayName'] || tagOrGroup.name; this.name = tagOrGroup['x-displayName'] || tagOrGroup.name;
this.level = (tagOrGroup as MarkdownHeading).level || 1; this.level = (tagOrGroup as MarkdownHeading).level || 1;
this.sidebarName = this.name;
// remove sections from markdown, same as in ApiInfo // remove sections from markdown, same as in ApiInfo
this.description = tagOrGroup.description || ''; this.description = tagOrGroup.description || '';

View File

@ -49,6 +49,7 @@ export class OperationModel implements IMenuItem {
id: string; id: string;
absoluteIdx?: number; absoluteIdx?: number;
name: string; name: string;
sidebarName: string;
description?: string; description?: string;
type = 'operation' as const; type = 'operation' as const;
@ -104,6 +105,9 @@ export class OperationModel implements IMenuItem {
this.name = getOperationSummary(operationSpec); this.name = getOperationSummary(operationSpec);
this.sidebarName = this.name;
if (options.usePathInSidebar) this.sidebarName = this.path;
if (this.isCallback) { if (this.isCallback) {
// NOTE: Callbacks by default should not inherit the specification's global `security` definition. // NOTE: Callbacks by default should not inherit the specification's global `security` definition.
// Can be defined individually per-callback in the specification. Defaults to none. // Can be defined individually per-callback in the specification. Defaults to none.