Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-06 05:10:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixed A11Y issues by replacing react-dropdown-aria by react-select component

Browse Source 
Fixed: ARIA input fields must have an accessible name
Fixed: Ensure interactive controls are not nested
Coded formatted with prettier
Files changed:
dropdown.ts
styled.elements.ts
PayloadSamples.tsx
SchemaDefinition.tsx
DiscriminatorDropdown.tsx
ResponseDetails.tsx
MediaTypeSamples.tsx
Parameters.tsx
MediaTypesSwitch.tsx
DropdownOrLabel.tsx
CallbackSamples.tsx
GenericChildrenSwitcher.tsx
This commit is contained in:
Pedro Novales 2021-10-25 12:31:18 -07:00
parent ebbd256b1f
commit 42f80fc642
96 changed files with 745 additions and 21490 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
cli/index.ts
View File

@ -45,7 +45,7 @@ const BUNDLES_DIR = dirname(require.resolve('redoc'));
YargsParser.command(
'serve <spec>',
'start the server',
yargs => {
(yargs) => {
yargs.positional('spec', {
describe: 'path or URL to your spec',
});
@ -81,7 +81,7 @@ YargsParser.command(
yargs.demandOption('spec');
return yargs;
},
async argv => {
async (argv) => {
const config: Options = {
ssr: argv.ssr as boolean,
title: argv.title as string,
@ -102,7 +102,7 @@ YargsParser.command(
.command(
'bundle <spec>',
'bundle spec into zero-dependency HTML-file',
yargs => {
(yargs) => {
yargs.positional('spec', {
describe: 'path or URL to your spec',
});
@ -213,7 +213,7 @@ async function serve(port: number, pathToSpec: string, options: Options = {}) {
const watcher = watch(pathToSpecDirectory, watchOptions);
const log = console.log.bind(console);
const handlePath = async _path => {
const handlePath = async (_path) => {
try {
spec = await loadAndBundleSpec(resolve(pathToSpec));
pageHTML = await getPageHTML(spec, pathToSpec, options);
@ -224,18 +224,18 @@ async function serve(port: number, pathToSpec: string, options: Options = {}) {
};
watcher
.on('change', async path => {
.on('change', async (path) => {
log(`${path} changed, updating docs`);
handlePath(path);
})
.on('add', async path => {
.on('add', async (path) => {
log(`File ${path} added, updating docs`);
handlePath(path);
})
.on('addDir', path => {
.on('addDir', (path) => {
log(`↗ Directory ${path} added. Files in here will trigger reload.`);
})
.on('error', error => console.error(`Watcher error: ${error}`))
.on('error', (error) => console.error(`Watcher error: ${error}`))
.on('ready', () => log(`👀 Watching ${pathToSpecDirectory} for changes...`));
}
}
@ -364,7 +364,7 @@ function escapeClosingScriptTag(str) {
// see http://www.thespanner.co.uk/2011/07/25/the-json-specification-is-now-wrong/
function escapeUnicode(str) {
return str.replace(/\u2028|\u2029/g, m => '\\u202' + (m === '\u2028' ? '8' : '9'));
return str.replace(/\u2028|\u2029/g, (m) => '\\u202' + (m === '\u2028' ? '8' : '9'));
}
function handleError(error: Error) {

21207
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -148,7 +148,6 @@
"dependencies": {
"@babel/runtime": "^7.14.0",
"@redocly/openapi-core": "^1.0.0-beta.54",
"@redocly/react-dropdown-aria": "^2.0.11",
"classnames": "^2.3.1",
"decko": "^1.2.0",
"dompurify": "^2.2.8",
@ -165,6 +164,7 @@
"polished": "^4.1.3",
"prismjs": "^1.24.1",
"prop-types": "^15.7.2",
"react-select": "^5.1.0",
"react-tabs": "^3.2.2",
"slugify": "~1.4.7",
"stickyfill": "^1.1.1",

166
src/common-elements/dropdown.ts
View File

@ -1,113 +1,102 @@
import Dropdown from '@redocly/react-dropdown-aria';
import Dropdown from 'react-select';
import styled from '../styled-components';
export interface DropdownOption {
idx: number;
label: string;
value: string;
}
export interface DropdownProps {
options: DropdownOption[];
value: string;
onChange: (option: DropdownOption) => void;
value: DropdownOption;
onChange: (val: DropdownOption) => void;
ariaLabel: string;
}
export const StyledDropdown = styled(Dropdown)`
&& {
box-sizing: border-box;
min-width: 100px;
outline: none;
display: inline-block;
border-radius: 2px;
border: 1px solid rgba(38, 50, 56, 0.5);
vertical-align: bottom;
padding: 2px 0px 2px 6px;
position: relative;
width: auto;
background: white;
color: #263238;
min-width: 100px;
border-radius: 2px;
box-sizing: border-box;
vertical-align: bottom;
outline: none;
font-family: ${(props) => props.theme.typography.headings.fontFamily};
font-size: 0.929em;
line-height: 1.5em;
background: ${({ theme }) => theme.rightPanel.textColor};
color: #263238;
cursor: pointer;
transition: border 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
&:hover,
&:focus-within {
border: 1px solid ${(props) => props.theme.colors.primary.main};
color: ${(props) => props.theme.colors.primary.main};
border: 1px solid ${(props) => props.theme.colors.border.light};
box-shadow: 0px 0px 0px 1px ${(props) => props.theme.colors.primary.main};
color: ${(props) => props.theme.colors.primary.main};
}
.dropdown-selector {
display: inline-flex;
padding: 0;
height: auto;
padding-right: 20px;
position: relative;
margin-bottom: 5px;
}
.dropdown-selector-value {
font-family: ${(props) => props.theme.typography.headings.fontFamily};
position: relative;
font-size: 0.929em;
width: 100%;
line-height: 1;
vertical-align: middle;
color: #263238;
left: 0;
transition: color 0.25s ease, text-shadow 0.25s ease;
}
.dropdown-arrow {
position: absolute;
right: 3px;
top: 50%;
transform: translateY(-50%);
border-color: ${(props) => props.theme.colors.primary.main} transparent transparent;
border-style: solid;
border-width: 0.35em 0.35em 0;
width: 0;
svg {
.react-dropdown__control {
min-height: 0;
border: 1px solid rgba(38, 50, 56, 0.5);
border-radius: 2px;
.react-dropdown__value-container {
padding: 4px 8px;
}
.react-dropdown__indicator-separator {
display: none;
}
}
.dropdown-selector-content {
position: absolute;
margin-top: 2px;
left: -2px;
right: 0;
.react-dropdown__indicator {
margin: 4px 8px 2px 0;
padding: 0;
border-color: ${(props) => props.theme.colors.primary.main} transparent transparent;
border-style: solid;
border-width: 0.35em 0.35em 0;
z-index: 10;
min-width: 100px;
background: white;
border: 1px solid rgba(38, 50, 56, 0.2);
box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.08);
max-height: 220px;
overflow: auto;
}
.dropdown-option {
font-size: 0.9em;
color: #263238;
cursor: pointer;
padding: 0.4em;
background-color: #ffffff;
&[aria-selected='true'] {
background-color: rgba(0, 0, 0, 0.05);
}
&:hover {
background-color: rgba(38, 50, 56, 0.12);
svg {
display: none;
}
}
}
input {
cursor: pointer;
height: 1px;
background-color: transparent;
.react-dropdown__menu {
margin: 4px 0 8px;
border-radius: 2px;
z-index: 3;
.react-dropdown__menu-list {
padding: 2px 0;
.react-dropdown__option {
padding: 6px 0px 6px 10px;
color: rgb(38, 50, 56);
background-color: ${({ theme }) => theme.rightPanel.textColor};
&:hover {
background-color: rgba(38, 50, 56, 0.12);
}
}
.react-dropdown__option--is-selected {
background-color: rgba(0, 0, 0, 0.05);
}
.react-dropdown__option--is-focused {
background-color: rgba(38, 50, 56, 0.12);
}
}
}
}
`;
@ -115,19 +104,24 @@ export const StyledDropdown = styled(Dropdown)`
export const SimpleDropdown = styled(StyledDropdown)`
&& {
margin-left: 10px;
text-transform: none;
font-size: 0.969em;
font-size: 1em;
border: none;
padding: 0 1.2em 0 0;
font-size: 0.969em;
text-transform: none;
background: transparent;
.react-dropdown__control {
border: none;
.react-dropdown__indicator {
margin: 4px 8px 0px 0;
}
}
&:hover,
&:focus-within {
border: none;
box-shadow: none;
.dropdown-selector-value {
.react-dropdown__single-value {
color: ${(props) => props.theme.colors.primary.main};
text-shadow: 0px 0px 0px ${(props) => props.theme.colors.primary.main};
}

22
src/common-elements/fields-layout.ts
View File

@ -5,11 +5,11 @@ export const PropertiesTableCaption = styled.caption`
text-align: right;
font-size: 0.9em;
font-weight: normal;
color: ${props => props.theme.colors.text.secondary};
color: ${(props) => props.theme.colors.text.secondary};
`;
export const PropertyCell = styled.td<{ kind?: string }>`
border-left: 1px solid ${props => props.theme.schema.linesColor};
border-left: 1px solid ${(props) => props.theme.schema.linesColor};
box-sizing: border-box;
position: relative;
padding: 10px 10px 10px 0;
@ -32,16 +32,16 @@ export const PropertyCell = styled.td<{ kind?: string }>`
to bottom,
transparent 0%,
transparent 22px,
${props => props.theme.schema.linesColor} 22px,
${props => props.theme.schema.linesColor} 100%
${(props) => props.theme.schema.linesColor} 22px,
${(props) => props.theme.schema.linesColor} 100%
);
}
tr.last > & {
background-image: linear-gradient(
to bottom,
${props => props.theme.schema.linesColor} 0%,
${props => props.theme.schema.linesColor} 22px,
${(props) => props.theme.schema.linesColor} 0%,
${(props) => props.theme.schema.linesColor} 22px,
transparent 22px,
transparent 100%
);
@ -101,8 +101,8 @@ export const PropertyDetailsCell = styled.td`
`;
export const PropertyBullet = styled.span`
color: ${props => props.theme.schema.linesColor};
font-family: ${props => props.theme.typography.code.fontFamily};
color: ${(props) => props.theme.schema.linesColor};
font-family: ${(props) => props.theme.typography.code.fontFamily};
margin-right: 10px;
&::before {
@ -111,7 +111,7 @@ export const PropertyBullet = styled.span`
vertical-align: middle;
width: 10px;
height: 1px;
background: ${props => props.theme.schema.linesColor};
background: ${(props) => props.theme.schema.linesColor};
}
&::after {
@ -119,7 +119,7 @@ export const PropertyBullet = styled.span`
display: inline-block;
vertical-align: middle;
width: 1px;
background: ${props => props.theme.schema.linesColor};
background: ${(props) => props.theme.schema.linesColor};
height: 7px;
}
`;
@ -131,7 +131,7 @@ export const InnerPropertiesWrap = styled.div`
export const PropertiesTable = styled.table`
border-collapse: separate;
border-radius: 3px;
font-size: ${props => props.theme.typography.fontSize};
font-size: ${(props) => props.theme.typography.fontSize};
border-spacing: 0;
width: 100%;

14
src/common-elements/fields.ts
View File

@ -10,10 +10,10 @@ export const ClickablePropertyNameCell = styled(PropertyNameCell)`
border: 0;
outline: 0;
font-size: 13px;
font-family: ${props => props.theme.typography.code.fontFamily};
font-family: ${(props) => props.theme.typography.code.fontFamily};
cursor: pointer;
padding: 0;
color: ${props => props.theme.colors.text.primary};
color: ${(props) => props.theme.colors.text.primary};
&:focus {
font-weight: ${({ theme }) => theme.typography.fontWeightBold};
}
@ -34,23 +34,23 @@ export const FieldLabel = styled.span`
`;
export const TypePrefix = styled(FieldLabel)`
color: ${props => transparentize(0.1, props.theme.schema.typeNameColor)};
color: ${(props) => transparentize(0.1, props.theme.schema.typeNameColor)};
`;
export const TypeName = styled(FieldLabel)`
color: ${props => props.theme.schema.typeNameColor};
color: ${(props) => props.theme.schema.typeNameColor};
`;
export const TypeTitle = styled(FieldLabel)`
color: ${props => props.theme.schema.typeTitleColor};
color: ${(props) => props.theme.schema.typeTitleColor};
word-break: break-word;
`;
export const TypeFormat = TypeName;
export const RequiredLabel = styled(FieldLabel.withComponent('div'))`
color: ${props => props.theme.schema.requireLabelColor};
font-size: ${props => props.theme.schema.labelsTextSize};
color: ${(props) => props.theme.schema.requireLabelColor};
font-size: ${(props) => props.theme.schema.labelsTextSize};
font-weight: normal;
margin-left: 20px;
line-height: 1;

2
src/common-elements/headers.ts
View File

@ -6,7 +6,7 @@ const headerFontSize = {
3: '1.27em',
};
export const headerCommonMixin = level => css`
export const headerCommonMixin = (level) => css`
font-family: ${({ theme }) => theme.typography.headings.fontFamily};
font-weight: ${({ theme }) => theme.typography.headings.fontWeight};
font-size: ${headerFontSize[level]};

2
src/common-elements/linkify.tsx
View File

@ -39,7 +39,7 @@ const isModifiedEvent = (event) =>
export function Link(props: { to: string; className?: string; children?: any }) {
const store = React.useContext(StoreContext);
const clickHandler = React.useCallback(
(event: React.MouseEvent<HTMLAnchorElement>) => {
(event: React.MouseEvent<HTMLAnchorElement>) => {
if (!store) return;
navigate(store.menu.history, event, props.to);
},

18
src/common-elements/panels.ts
View File

@ -2,8 +2,8 @@ import { SECTION_ATTR } from '../services/MenuStore';
import styled, { media } from '../styled-components';
export const MiddlePanel = styled.div<{ compact?: boolean }>`
width: calc(100% - ${props => props.theme.rightPanel.width});
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
width: calc(100% - ${(props) => props.theme.rightPanel.width});
padding: 0 ${(props) => props.theme.spacing.sectionHorizontal}px;
${({ compact, theme }) =>
media.lessThan('medium', true)`
@ -14,10 +14,10 @@ export const MiddlePanel = styled.div<{ compact?: boolean }>`
`};
`;
export const Section = styled.div.attrs(props => ({
export const Section = styled.div.attrs((props) => ({
[SECTION_ATTR]: props.id,
}))<{ underlined?: boolean }>`
padding: ${props => props.theme.spacing.sectionVertical}px 0;
padding: ${(props) => props.theme.spacing.sectionVertical}px 0;
&:last-child {
min-height: calc(100vh + 1px);
@ -48,20 +48,20 @@ export const Section = styled.div.attrs(props => ({
`;
export const RightPanel = styled.div`
width: ${props => props.theme.rightPanel.width};
width: ${(props) => props.theme.rightPanel.width};
color: ${({ theme }) => theme.rightPanel.textColor};
background-color: ${props => props.theme.rightPanel.backgroundColor};
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
background-color: ${(props) => props.theme.rightPanel.backgroundColor};
padding: 0 ${(props) => props.theme.spacing.sectionHorizontal}px;
${media.lessThan('medium', true)`
width: 100%;
padding: ${props =>
padding: ${(props) =>
`${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
`};
`;
export const DarkRightPanel = styled(RightPanel)`
background-color: ${props => props.theme.rightPanel.backgroundColor};
background-color: ${(props) => props.theme.rightPanel.backgroundColor};
`;
export const Row = styled.div`

6
src/common-elements/perfect-scrollbar.tsx
View File

@ -12,7 +12,7 @@ import styled, { createGlobalStyle } from '../styled-components';
* That's why the following ugly fix is required
*/
const PerfectScrollbarConstructor =
PerfectScrollbarNamespace.default || ((PerfectScrollbarNamespace as any) as PerfectScrollbarType);
PerfectScrollbarNamespace.default || (PerfectScrollbarNamespace as any as PerfectScrollbarType);
const PSStyling = createGlobalStyle`${psStyles && psStyles.toString()}`;
@ -46,7 +46,7 @@ export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
this.inst.destroy();
}
handleRef = ref => {
handleRef = (ref) => {
this._container = ref;
};
@ -73,7 +73,7 @@ export function PerfectScrollbarWrap(
) {
return (
<OptionsContext.Consumer>
{options =>
{(options) =>
!options.nativeScrollbars ? (
<PerfectScrollbar {...props}>{props.children}</PerfectScrollbar>
) : (

4
src/common-elements/samples.tsx
View File

@ -33,8 +33,8 @@ export const SampleControlsWrap = styled.div`
`;
export const StyledPre = styled(PrismDiv.withComponent('pre'))`
font-family: ${props => props.theme.typography.code.fontFamily};
font-size: ${props => props.theme.typography.code.fontSize};
font-family: ${(props) => props.theme.typography.code.fontFamily};
font-size: ${(props) => props.theme.typography.code.fontSize};
overflow-x: auto;
margin: 0;

14
src/common-elements/schema.ts
View File

@ -9,8 +9,8 @@ export const OneOfList = styled.div`
export const OneOfLabel = styled.span`
font-size: 0.9em;
margin-right: 10px;
color: ${props => props.theme.colors.primary.main};
font-family: ${props => props.theme.typography.headings.fontFamily};
color: ${(props) => props.theme.colors.primary.main};
font-family: ${(props) => props.theme.typography.headings.fontFamily};
}
`;
@ -20,15 +20,15 @@ export const OneOfButton = styled.button<{ active: boolean }>`
margin-bottom: 5px;
font-size: 0.8em;
cursor: pointer;
border: 1px solid ${props => props.theme.colors.primary.main};
border: 1px solid ${(props) => props.theme.colors.primary.main};
padding: 2px 10px;
line-height: 1.5em;
outline: none;
&:focus {
box-shadow: 0 0 0 1px ${props => props.theme.colors.primary.main};
box-shadow: 0 0 0 1px ${(props) => props.theme.colors.primary.main};
}
${props => {
${(props) => {
if (props.active) {
return `
color: white;
@ -49,7 +49,7 @@ export const OneOfButton = styled.button<{ active: boolean }>`
export const ArrayOpenningLabel = styled.div`
font-size: 0.9em;
font-family: ${props => props.theme.typography.code.fontFamily};
font-family: ${(props) => props.theme.typography.code.fontFamily};
&::after {
content: ' [';
}
@ -57,7 +57,7 @@ export const ArrayOpenningLabel = styled.div`
export const ArrayClosingLabel = styled.div`
font-size: 0.9em;
font-family: ${props => props.theme.typography.code.fontFamily};
font-family: ${(props) => props.theme.typography.code.fontFamily};
&::after {
content: ']';
}

14
src/common-elements/shelfs.tsx
View File

@ -35,12 +35,12 @@ class IntShelfIcon extends React.PureComponent<{
}
export const ShelfIcon = styled(IntShelfIcon)`
height: ${props => props.size || '18px'};
width: ${props => props.size || '18px'};
height: ${(props) => props.size || '18px'};
width: ${(props) => props.size || '18px'};
vertical-align: middle;
float: ${props => props.float || ''};
float: ${(props) => props.float || ''};
transition: transform 0.2s ease-out;
transform: rotateZ(${props => directionMap[props.direction || 'down']});
transform: rotateZ(${(props) => directionMap[props.direction || 'down']});
polygon {
fill: ${({ color, theme }) =>
@ -52,9 +52,9 @@ export const Badge = styled.span<{ type: string }>`
display: inline-block;
padding: 2px 8px;
margin: 0;
background-color: ${props => props.theme.colors[props.type].main};
color: ${props => props.theme.colors[props.type].contrastText};
font-size: ${props => props.theme.typography.code.fontSize};
background-color: ${(props) => props.theme.colors[props.type].main};
color: ${(props) => props.theme.colors[props.type].contrastText};
font-size: ${(props) => props.theme.typography.code.fontSize};
vertical-align: middle;
line-height: 1.6;
border-radius: 4px;

14
src/common-elements/tabs.ts
View File

@ -31,7 +31,7 @@ export const Tabs = styled(ReactTabs)`
font-weight: bold;
&.react-tabs__tab--selected {
color: ${props => props.theme.colors.text.primary};
color: ${(props) => props.theme.colors.text.primary};
background: ${({ theme }) => theme.rightPanel.textColor};
&:focus {
outline: auto;
@ -44,19 +44,19 @@ export const Tabs = styled(ReactTabs)`
}
&.tab-success {
color: ${props => props.theme.colors.responses.success.tabTextColor};
color: ${(props) => props.theme.colors.responses.success.tabTextColor};
}
&.tab-redirect {
color: ${props => props.theme.colors.responses.redirect.tabTextColor};
color: ${(props) => props.theme.colors.responses.redirect.tabTextColor};
}
&.tab-info {
color: ${props => props.theme.colors.responses.info.tabTextColor};
color: ${(props) => props.theme.colors.responses.info.tabTextColor};
}
&.tab-error {
color: ${props => props.theme.colors.responses.error.tabTextColor};
color: ${(props) => props.theme.colors.responses.error.tabTextColor};
}
}
}
@ -64,7 +64,7 @@ export const Tabs = styled(ReactTabs)`
background: ${({ theme }) => theme.codeBlock.backgroundColor};
& > div,
& > pre {
padding: ${props => props.theme.spacing.unit * 4}px;
padding: ${(props) => props.theme.spacing.unit * 4}px;
margin: 0;
}
@ -101,7 +101,7 @@ export const SmallTabs = styled(Tabs)`
> .react-tabs__tab-panel {
& > div,
& > pre {
padding: ${props => props.theme.spacing.unit * 2}px 0;
padding: ${(props) => props.theme.spacing.unit * 2}px 0;
}
}
`;

13
src/components/ApiInfo/ApiInfo.tsx
View File

@ -22,7 +22,7 @@ export interface ApiInfoProps {
@observer
export class ApiInfo extends React.Component<ApiInfoProps> {
handleDownloadClick = e => {
handleDownloadClick = (e) => {
if (!e.target.href) {
e.target.href = this.props.store.spec.info.downloadLink;
}
@ -39,7 +39,12 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
const license =
(info.license && (
<InfoSpan>
License: {info.license.identifier ? info.license.identifier : (<a href={info.license.url}>{info.license.name}</a>)}
License:{' '}
{info.license.identifier ? (
info.license.identifier
) : (
<a href={info.license.url}>{info.license.name}</a>
)}
</InfoSpan>
)) ||
null;
@ -101,8 +106,8 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
)) ||
null}
</StyledMarkdownBlock>
<Markdown source={store.spec.info.summary} data-role="redoc-summary"/>
<Markdown source={store.spec.info.description} data-role="redoc-description"/>
<Markdown source={store.spec.info.summary} data-role="redoc-summary" />
<Markdown source={store.spec.info.description} data-role="redoc-description" />
{externalDocs && <ExternalDocumentation externalDocs={externalDocs} />}
</MiddlePanel>
</Row>

4
src/components/ApiInfo/styled.elements.ts
View File

@ -13,8 +13,8 @@ export const ApiHeader = styled(H1)`
`;
export const DownloadButton = styled.a`
border: 1px solid ${props => props.theme.colors.primary.main};
color: ${props => props.theme.colors.primary.main};
border: 1px solid ${(props) => props.theme.colors.primary.main};
color: ${(props) => props.theme.colors.primary.main};
font-weight: normal;
margin-left: 0.5em;
padding: 4px 8px 4px;

8
src/components/ApiLogo/styled.elements.tsx
View File

@ -2,9 +2,9 @@ import * as React from 'react';
import styled from '../../styled-components';
export const LogoImgEl = styled.img`
max-height: ${props => props.theme.logo.maxHeight};
max-width: ${props => props.theme.logo.maxWidth};
padding: ${props => props.theme.logo.gutter};
max-height: ${(props) => props.theme.logo.maxHeight};
max-width: ${(props) => props.theme.logo.maxWidth};
padding: ${(props) => props.theme.logo.gutter};
width: 100%;
display: block;
`;
@ -18,4 +18,4 @@ const Link = styled.a`
`;
// eslint-disable-next-line react/display-name
export const LinkWrap = url => Component => <Link href={url}>{Component}</Link>;
export const LinkWrap = (url) => (Component) => <Link href={url}>{Component}</Link>;

2
src/components/CallbackSamples/CallbackReqSamples.tsx
View File

@ -14,7 +14,7 @@ export interface PayloadSampleProps {
export class CallbackPayloadSample extends React.Component<PayloadSampleProps> {
render() {
const payloadSample = this.props.callback.codeSamples.find(sample =>
const payloadSample = this.props.callback.codeSamples.find((sample) =>
isPayloadSample(sample),
) as XPayloadSample | undefined;

23
src/components/CallbackSamples/CallbackSamples.tsx
View File

@ -20,8 +20,15 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
static contextType = OptionsContext;
context: RedocNormalizedOptions;
private renderDropdown = props => {
return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
private renderDropdown = (props) => {
return (
<DropdownOrLabel
Label={MimeLabel}
Dropdown={InvertedSimpleDropdown}
aria-label="Callback sample dropdown"
{...props}
/>
);
};
render() {
@ -32,10 +39,10 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
}
const operations = callbacks
.map(callback => callback.operations.map(operation => operation))
.map((callback) => callback.operations.map((operation) => operation))
.reduce((a, b) => a.concat(b), []);
const hasSamples = operations.some(operation => operation.codeSamples.length > 0);
const hasSamples = operations.some((operation) => operation.codeSamples.length > 0);
if (!hasSamples) {
return null;
@ -43,8 +50,8 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
const dropdownOptions = operations.map((callback, idx) => {
return {
value: `${callback.httpVerb.toUpperCase()}: ${callback.name}`,
idx,
label: `${callback.httpVerb.toUpperCase()}: ${callback.name}`,
value: idx.toString(),
};
});
@ -59,7 +66,7 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
label={'Callback'}
options={dropdownOptions}
>
{callback => (
{(callback) => (
<CallbackPayloadSample
key="callbackPayloadSample"
callback={callback}
@ -75,5 +82,5 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
export const SamplesWrapper = styled.div`
background: ${({ theme }) => theme.codeBlock.backgroundColor};
padding: ${props => props.theme.spacing.unit * 4}px;
padding: ${(props) => props.theme.spacing.unit * 4}px;
`;

2
src/components/Callbacks/CallbacksList.tsx
View File

@ -19,7 +19,7 @@ export class CallbacksList extends React.PureComponent<CallbacksListProps> {
return (
<div>
<CallbacksHeader> Callbacks </CallbacksHeader>
{callbacks.map(callback => {
{callbacks.map((callback) => {
return callback.operations.map((operation, index) => {
return (
<CallbackOperation key={`${callback.name}_${index}`} callbackOperation={operation} />

4
src/components/ContentItems/ContentItems.tsx
View File

@ -17,7 +17,7 @@ export class ContentItems extends React.Component<{
if (items.length === 0) {
return null;
}
return items.map(item => {
return items.map((item) => {
return <ContentItem key={item.id} item={item} />;
});
}
@ -61,7 +61,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
}
}
const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>;
const middlePanelWrap = (component) => <MiddlePanel compact={true}>{component}</MiddlePanel>;
@observer
export class SectionItem extends React.Component<ContentItemProps> {

11
src/components/DropdownOrLabel/DropdownOrLabel.tsx
View File

@ -10,7 +10,14 @@ export interface DropdownOrLabelProps extends DropdownProps {
export function DropdownOrLabel(props: DropdownOrLabelProps): JSX.Element {
const { Label = MimeLabel, Dropdown = SimpleDropdown } = props;
if (props.options.length === 1) {
return <Label>{props.options[0].value}</Label>;
return <Label>{props.options[0].label}</Label>;
}
return <Dropdown {...props} searchable={false} />;
return (
<Dropdown
className={'react-dropdown-container'}
classNamePrefix={'react-dropdown'}
isSearchable={false}
{...props}
/>
);
}

4
src/components/Endpoint/Endpoint.tsx
View File

@ -47,7 +47,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
// TODO: highlight server variables, e.g. https://{user}.test.com
return (
<OptionsContext.Consumer>
{options => (
{(options) => (
<OperationEndpointWrap>
<EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
<HttpVerb type={operation.httpVerb} compact={this.props.compact}>
@ -63,7 +63,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
/>
</EndpointInfo>
<ServersOverlay expanded={expanded} aria-hidden={!expanded}>
{operation.servers.map(server => {
{operation.servers.map((server) => {
const normalizedUrl = options.expandDefaultServerVariables
? expandDefaultServerVariables(server.url, server.variables)
: server.url;

32
src/components/Endpoint/styled.elements.ts
View File

@ -7,7 +7,7 @@ export const OperationEndpointWrap = styled.div`
`;
export const ServerRelativeURL = styled.span`
font-family: ${props => props.theme.typography.code.fontFamily};
font-family: ${(props) => props.theme.typography.code.fontFamily};
margin-left: 10px;
flex: 1;
overflow-x: hidden;
@ -20,22 +20,22 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole
width: 100%;
text-align: left;
cursor: pointer;
padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
background-color: ${props =>
padding: 10px 30px 10px ${(props) => (props.inverted ? '10px' : '20px')};
border-radius: ${(props) => (props.inverted ? '0' : '4px 4px 0 0')};
background-color: ${(props) =>
props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
display: flex;
white-space: nowrap;
align-items: center;
border: ${props => (props.inverted ? '0' : '1px solid transparent')};
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
border: ${(props) => (props.inverted ? '0' : '1px solid transparent')};
border-bottom: ${(props) => (props.inverted ? '1px solid #ccc' : '0')};
transition: border-color 0.25s ease;
${props =>
${(props) =>
(props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
.${ServerRelativeURL} {
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
color: ${(props) => (props.inverted ? props.theme.colors.text.primary : '#ffffff')};
}
&:focus {
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
@ -45,13 +45,13 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole
export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
className: `http-verb ${props.type}`,
}))<{ type: string; compact?: boolean }>`
font-size: ${props => (props.compact ? '0.8em' : '0.929em')};
line-height: ${props => (props.compact ? '18px' : '20px')};
background-color: ${props => props.theme.colors.http[props.type] || '#999999'};
font-size: ${(props) => (props.compact ? '0.8em' : '0.929em')};
line-height: ${(props) => (props.compact ? '18px' : '20px')};
background-color: ${(props) => props.theme.colors.http[props.type] || '#999999'};
color: #ffffff;
padding: ${props => (props.compact ? '2px 8px' : '3px 10px')};
padding: ${(props) => (props.compact ? '2px 8px' : '3px 10px')};
text-transform: uppercase;
font-family: ${props => props.theme.typography.headings.fontFamily};
font-family: ${(props) => props.theme.typography.headings.fontFamily};
margin: 0;
`;
@ -68,7 +68,7 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>`
border-bottom-right-radius: 4px;
transition: all 0.25s ease;
visibility: hidden;
${props => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
${(props) => (props.expanded ? 'visibility: visible;' : 'transform: translateY(-50%) scaleY(0);')}
`;
export const ServerItem = styled.div`
@ -80,8 +80,8 @@ export const ServerUrl = styled.div`
border: 1px solid #ccc;
background: #fff;
word-break: break-all;
color: ${props => props.theme.colors.primary.main};
color: ${(props) => props.theme.colors.primary.main};
> span {
color: ${props => props.theme.colors.text.primary};
color: ${(props) => props.theme.colors.text.primary};
}
`;

2
src/components/Fields/EnumValues.tsx
View File

@ -81,7 +81,7 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
}
const ToggleButton = styled.span`
color: ${props => props.theme.colors.primary.main};
color: ${(props) => props.theme.colors.primary.main};
vertical-align: middle;
font-size: 13px;
line-height: 20px;

4
src/components/Fields/Extensions.tsx
View File

@ -23,10 +23,10 @@ export class Extensions extends React.PureComponent<ExtensionsProps> {
const exts = this.props.extensions;
return (
<OptionsContext.Consumer>
{options => (
{(options) => (
<>
{options.showExtensions &&
Object.keys(exts).map(key => (
Object.keys(exts).map((key) => (
<Extension key={key}>
<FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
<ExtensionValue>

2
src/components/Fields/Field.tsx
View File

@ -38,7 +38,7 @@ export class Field extends React.Component<FieldProps> {
}
};
handleKeyPress = e => {
handleKeyPress = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
this.toggle();

2
src/components/Fields/FieldContstraints.tsx
View File

@ -13,7 +13,7 @@ export class ConstraintsView extends React.PureComponent<ConstraintsViewProps> {
return (
<span>
{' '}
{this.props.constraints.map(constraint => (
{this.props.constraints.map((constraint) => (
<ConstraintItem key={constraint}> {constraint} </ConstraintItem>
))}
</span>

16
src/components/Fields/FieldDetails.tsx
View File

@ -59,7 +59,9 @@ export class FieldDetails extends React.PureComponent<FieldProps, { patternShown
} else {
const label = l('example') + ':';
const raw = !!field.in;
renderedExamples = <FieldDetail label={label} value={getSerializedValue(field, field.example)} raw={raw} />;
renderedExamples = (
<FieldDetail label={label} value={getSerializedValue(field, field.example)} raw={raw} />
);
}
}
@ -78,14 +80,16 @@ export class FieldDetails extends React.PureComponent<FieldProps, { patternShown
)}
{schema.contentEncoding && (
<TypeFormat>
{' '}&lt;
{' '}
&lt;
{schema.contentEncoding}
&gt;{' '}
</TypeFormat>
)}
{schema.contentMediaType && (
<TypeFormat>
{' '}&lt;
{' '}
&lt;
{schema.contentMediaType}
&gt;{' '}
</TypeFormat>
@ -124,7 +128,7 @@ export class FieldDetails extends React.PureComponent<FieldProps, { patternShown
<ExternalDocumentation externalDocs={schema.externalDocs} compact={true} />
)}
{(renderDiscriminatorSwitch && renderDiscriminatorSwitch(this.props)) || null}
{field.const && (<FieldDetail label={l('const') + ':'} value={field.const} />) || null}
{(field.const && <FieldDetail label={l('const') + ':'} value={field.const} />) || null}
</div>
);
}
@ -142,7 +146,8 @@ function Examples({ field }: { field: FieldModel }) {
{Object.values(field.examples).map((example, idx) => {
return (
<li key={idx}>
<ExampleValue>{getSerializedValue(field, example.value)}</ExampleValue> - {example.summary || example.description}
<ExampleValue>{getSerializedValue(field, example.value)}</ExampleValue> -{' '}
{example.summary || example.description}
</li>
);
})}
@ -160,7 +165,6 @@ function getSerializedValue(field: FieldModel, example: any) {
}
}
const ExamplesList = styled.ul`
margin-top: 1em;
padding-left: 0;

6
src/components/GenericChildrenSwitcher/GenericChildrenSwitcher.tsx
View File

@ -32,10 +32,10 @@ export class GenericChildrenSwitcher<T> extends React.Component<
};
}
switchItem = ({ idx }) => {
switchItem = ({ value }) => {
if (this.props.items) {
this.setState({
activeItemIdx: idx,
activeItemIdx: parseInt(value, 10),
});
}
};
@ -61,7 +61,7 @@ export class GenericChildrenSwitcher<T> extends React.Component<
<>
<Wrapper>
{this.props.renderDropdown({
value: this.props.options[this.state.activeItemIdx].value,
value: this.props.options[this.state.activeItemIdx],
options: this.props.options,
onChange: this.switchItem,
ariaLabel: this.props.label || 'Callback',

2
src/components/Loading/Loading.tsx
View File

@ -9,7 +9,7 @@ const LoadingMessage = styled.div<{ color: string }>`
text-align: center;
font-size: 25px;
margin: 30px 0 20px 0;
color: ${props => props.color};
color: ${(props) => props.color};
`;
export interface LoadingProps {

2
src/components/Loading/Spinner.svg.tsx
View File

@ -31,6 +31,6 @@ export const Spinner = styled(_Spinner)`
margin-left: -25px;
path {
fill: ${props => props.color};
fill: ${(props) => props.color};
}
`;

6
src/components/Markdown/AdvancedMarkdown.tsx
View File

@ -15,15 +15,15 @@ export class AdvancedMarkdown extends React.Component<AdvancedMarkdownProps> {
render() {
return (
<OptionsConsumer>
{options => (
<StoreConsumer>{store => this.renderWithOptionsAndStore(options, store)}</StoreConsumer>
{(options) => (
<StoreConsumer>{(store) => this.renderWithOptionsAndStore(options, store)}</StoreConsumer>
)}
</OptionsConsumer>
);
}
renderWithOptionsAndStore(options: RedocNormalizedOptions, store?: AppStore) {
const { source, htmlWrap = i => i } = this.props;
const { source, htmlWrap = (i) => i } = this.props;
if (!store) {
throw new Error('When using components in markdown, store prop must be provided');
}

2
src/components/Markdown/SanitizedMdBlock.tsx
View File

@ -16,7 +16,7 @@ export function SanitizedMarkdownHTML(
return (
<OptionsConsumer>
{options => (
{(options) => (
<Wrap
className={'redoc-markdown ' + (props.className || '')}
dangerouslySetInnerHTML={{

30
src/components/Markdown/styled.elements.tsx
View File

@ -7,14 +7,14 @@ import { StyledComponent } from 'styled-components';
export const linksCss = css`
a {
text-decoration: none;
color: ${props => props.theme.typography.links.color};
color: ${(props) => props.theme.typography.links.color};
&:visited {
color: ${props => props.theme.typography.links.visited};
color: ${(props) => props.theme.typography.links.visited};
}
&:hover {
color: ${props => props.theme.typography.links.hover};
color: ${(props) => props.theme.typography.links.hover};
}
}
`;
@ -26,10 +26,9 @@ export const StyledMarkdownBlock = styled(
{ compact?: boolean; inline?: boolean }
>,
)`
font-family: ${props => props.theme.typography.fontFamily};
font-weight: ${props => props.theme.typography.fontWeightRegular};
line-height: ${props => props.theme.typography.lineHeight};
font-family: ${(props) => props.theme.typography.fontFamily};
font-weight: ${(props) => props.theme.typography.fontWeightRegular};
line-height: ${(props) => props.theme.typography.lineHeight};
p {
&:last-child {
@ -56,35 +55,35 @@ export const StyledMarkdownBlock = styled(
h1 {
${headerCommonMixin(1)};
color: ${props => props.theme.colors.primary.main};
color: ${(props) => props.theme.colors.primary.main};
margin-top: 0;
}
h2 {
${headerCommonMixin(2)};
color: ${props => props.theme.colors.text.primary};
color: ${(props) => props.theme.colors.text.primary};
}
code {
color: ${({ theme }) => theme.typography.code.color};
background-color: ${({ theme }) => theme.typography.code.backgroundColor};
font-family: ${props => props.theme.typography.code.fontFamily};
font-family: ${(props) => props.theme.typography.code.fontFamily};
border-radius: 2px;
border: 1px solid rgba(38, 50, 56, 0.1);
padding: 0 ${({ theme }) => theme.spacing.unit}px;
font-size: ${props => props.theme.typography.code.fontSize};
font-size: ${(props) => props.theme.typography.code.fontSize};
font-weight: ${({ theme }) => theme.typography.code.fontWeight};
word-break: break-word;
}
pre {
font-family: ${props => props.theme.typography.code.fontFamily};
white-space:${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
font-family: ${(props) => props.theme.typography.code.fontFamily};
white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
color: white;
padding: ${props => props.theme.spacing.unit * 4}px;
padding: ${(props) => props.theme.spacing.unit * 4}px;
overflow-x: auto;
line-height: normal;
border-radius: 0px;
@ -121,7 +120,8 @@ export const StyledMarkdownBlock = styled(
margin: 0;
margin-bottom: 1em;
ul, ol {
ul,
ol {
margin-bottom: 0;
margin-top: 0;
}

10
src/components/MediaTypeSwitch/MediaTypesSwitch.tsx
View File

@ -20,9 +20,9 @@ export interface MediaTypesSwitchProps {
@observer
export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
switchMedia = ({ idx }) => {
switchMedia = ({ value }) => {
if (this.props.content) {
this.props.content.activate(idx);
this.props.content.activate(parseInt(value, 10));
}
};
@ -35,8 +35,8 @@ export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
const options = content.mediaTypes.map((mime, idx) => {
return {
value: mime.name,
idx,
label: mime.name,
value: idx.toString(),
};
});
@ -54,7 +54,7 @@ export class MediaTypesSwitch extends React.Component<MediaTypesSwitchProps> {
<>
<Wrapper>
{this.props.renderDropdown({
value: options[activeMimeIdx].value,
value: options[activeMimeIdx],
options,
onChange: this.switchMedia,
ariaLabel: 'Content type',

11
src/components/Parameters/Parameters.tsx
View File

@ -28,7 +28,7 @@ const PARAM_PLACES = ['path', 'query', 'cookie', 'header'];
export class Parameters extends React.PureComponent<ParametersProps> {
orderParams(params: FieldModel[]): Record<string, FieldModel[]> {
const res = {};
params.forEach(param => {
params.forEach((param) => {
safePush(res, param.in, param);
});
return res;
@ -50,7 +50,7 @@ export class Parameters extends React.PureComponent<ParametersProps> {
return (
<>
{paramsPlaces.map(place => (
{paramsPlaces.map((place) => (
<ParametersGroup key={place} place={place} parameters={paramsMap[place]} />
))}
{bodyContent && <BodyContent content={bodyContent} description={bodyDescription} />}
@ -62,12 +62,15 @@ export class Parameters extends React.PureComponent<ParametersProps> {
function DropdownWithinHeader(props) {
return (
<UnderlinedHeader key="header">
Request Body schema: <DropdownOrLabel {...props} />
Request Body schema: <DropdownOrLabel {...props} aria-label="Request body schema dropdown" />
</UnderlinedHeader>
);
}
export function BodyContent(props: { content: MediaContentModel; description?: string }): JSX.Element {
export function BodyContent(props: {
content: MediaContentModel;
description?: string;
}): JSX.Element {
const { content, description } = props;
const { isRequestType } = content;
return (

11
src/components/PayloadSamples/MediaTypeSamples.tsx
View File

@ -21,9 +21,10 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
state = {
activeIdx: 0,
};
switchMedia = ({ idx }) => {
switchMedia = ({ value }) => {
this.setState({
activeIdx: idx,
activeIdx: parseInt(value, 10),
});
};
render() {
@ -41,8 +42,8 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
if (examplesNames.length > 1) {
const options = examplesNames.map((name, idx) => {
return {
value: examples[name].summary || name,
idx,
label: examples[name].summary || name,
value: idx.toString(),
};
});
@ -54,7 +55,7 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps, Media
<DropdownWrapper>
<DropdownLabel>Example</DropdownLabel>
{this.props.renderDropdown({
value: options[activeIdx].value,
value: options[activeIdx],
options,
onChange: this.switchMedia,
ariaLabel: 'Example',

13
src/components/PayloadSamples/PayloadSamples.tsx
View File

@ -21,7 +21,7 @@ export class PayloadSamples extends React.Component<PayloadSamplesProps> {
return (
<MediaTypesSwitch content={mimeContent} renderDropdown={this.renderDropdown} withLabel={true}>
{mediaType => (
{(mediaType) => (
<MediaTypeSamples
key="samples"
mediaType={mediaType}
@ -32,7 +32,14 @@ export class PayloadSamples extends React.Component<PayloadSamplesProps> {
);
}
private renderDropdown = props => {
return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
private renderDropdown = (props) => {
return (
<DropdownOrLabel
Label={MimeLabel}
Dropdown={InvertedSimpleDropdown}
aria-label="Payload sample dropdown"
{...props}
/>
);
};
}

51
src/components/PayloadSamples/styled.elements.ts
View File

@ -29,49 +29,48 @@ export const DropdownWrapper = styled.div`
export const InvertedSimpleDropdown = styled(StyledDropdown)`
&& {
margin-left: 10px;
text-transform: none;
font-size: 0.929em;
margin: 0 0 10px 0;
display: block;
background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)};
font-size: 1em;
border: none;
margin: 0 0 10px 0;
padding: 0.9em 1.6em 0.9em 0.9em;
box-shadow: none;
text-transform: none;
background-color: ${({ theme }) => transparentize(0.6, theme.rightPanel.backgroundColor)};
&:hover,
&:focus-within {
border: none;
border-bottom: 1px solid ${({ theme }) => theme.rightPanel.textColor};
border-right: 1px solid ${({ theme }) => theme.rightPanel.textColor};
border-left: 1px solid ${({ theme }) => theme.rightPanel.textColor};
border-top: none;
box-shadow: none;
}
&:focus-within {
background-color: ${({ theme }) => transparentize(0.3, theme.rightPanel.backgroundColor)};
}
.dropdown-arrow {
border-top-color: ${({ theme }) => theme.rightPanel.textColor};
}
.dropdown-selector-value {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: ${({ theme }) => theme.rightPanel.textColor};
.react-dropdown__control {
border: transparent;
background-color: transparent;
.react-dropdown__single-value {
color: ${({ theme }) => theme.rightPanel.textColor};
}
.react-dropdown__indicator {
border-color: ${({ theme }) => theme.rightPanel.textColor} transparent transparent;
}
}
.dropdown-selector-content {
margin: 0;
margin-top: 2px;
.dropdown-option {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.react-dropdown__menu {
left: 0;
}
}
`;
export const NoSampleLabel = styled.div`
font-family: ${props => props.theme.typography.code.fontFamily};
font-family: ${(props) => props.theme.typography.code.fontFamily};
font-size: 12px;
color: #ee807f;
`;

2
src/components/Redoc/styled.elements.tsx
View File

@ -29,7 +29,7 @@ export const ApiContentWrap = styled.div`
z-index: 1;
position: relative;
overflow: hidden;
width: calc(100% - ${props => props.theme.sidebar.width});
width: calc(100% - ${(props) => props.theme.sidebar.width});
${media.lessThan('small', true)`
width: 100%;
`};

8
src/components/RedocStandalone.tsx
View File

@ -1,6 +1,10 @@
import * as React from 'react';
import { argValueToBoolean, RedocNormalizedOptions, RedocRawOptions } from '../services/RedocNormalizedOptions';
import {
argValueToBoolean,
RedocNormalizedOptions,
RedocRawOptions,
} from '../services/RedocNormalizedOptions';
import { ErrorBoundary } from './ErrorBoundary';
import { Loading } from './Loading/Loading';
import { Redoc } from './Redoc/Redoc';
@ -32,4 +36,4 @@ export const RedocStandalone = function (props: RedocStandaloneProps) {
</StoreBuilder>
</ErrorBoundary>
);
}
};

4
src/components/RequestSamples/RequestSamples.tsx
View File

@ -31,13 +31,13 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
<Tabs defaultIndex={0}>
<TabList hidden={hideTabList}>
{samples.map(sample => (
{samples.map((sample) => (
<Tab key={sample.lang + '_' + (sample.label || '')}>
{sample.label !== undefined ? sample.label : sample.lang}
</Tab>
))}
</TabList>
{samples.map(sample => (
{samples.map((sample) => (
<TabPanel key={sample.lang + '_' + (sample.label || '')}>
{isPayloadSample(sample) ? (
<div>

6
src/components/ResponseSamples/ResponseSamples.tsx
View File

@ -17,7 +17,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
render() {
const { operation } = this.props;
const responses = operation.responses.filter(response => {
const responses = operation.responses.filter((response) => {
return response.content && response.content.hasSample;
});
@ -28,13 +28,13 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
<Tabs defaultIndex={0}>
<TabList>
{responses.map(response => (
{responses.map((response) => (
<Tab className={'tab-' + response.type} key={response.code}>
{response.code}
</Tab>
))}
</TabList>
{responses.map(response => (
{responses.map((response) => (
<TabPanel key={response.code}>
<div>
<PayloadSamples content={response.content!} />

2
src/components/Responses/Response.tsx
View File

@ -14,7 +14,7 @@ export class ResponseView extends React.Component<{ response: ResponseModel }> {
render() {
const { headers, type, summary, description, code, expanded, content } = this.props.response;
const mimes =
content === undefined ? [] : content.mediaTypes.filter(mime => mime.schema !== undefined);
content === undefined ? [] : content.mediaTypes.filter((mime) => mime.schema !== undefined);
const empty = headers.length === 0 && mimes.length === 0 && !description;

4
src/components/Responses/ResponseDetails.tsx
View File

@ -26,10 +26,10 @@ export class ResponseDetails extends React.PureComponent<{ response: ResponseMod
);
}
private renderDropdown = props => {
private renderDropdown = (props) => {
return (
<UnderlinedHeader key="header">
Response Schema: <DropdownOrLabel {...props} />
Response Schema: <DropdownOrLabel aria-label="Response schema dropdown" {...props} />
</UnderlinedHeader>
);
};

2
src/components/Responses/ResponsesList.tsx
View File

@ -28,7 +28,7 @@ export class ResponsesList extends React.PureComponent<ResponseListProps> {
return (
<div>
<ResponsesHeader>{isCallback ? l('callbackResponses') : l('responses')}</ResponsesHeader>
{responses.map(response => {
{responses.map((response) => {
return <ResponseView key={response.code} response={response} />;
})}
</div>

15
src/components/Schema/ArraySchema.tsx
View File

@ -16,14 +16,17 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
const schema = this.props.schema;
const itemsSchema = schema.items;
const minMaxItems = schema.minItems === undefined && schema.maxItems === undefined ?
'' :
`(${humanizeConstraints(schema)})`;
const minMaxItems =
schema.minItems === undefined && schema.maxItems === undefined
? ''
: `(${humanizeConstraints(schema)})`;
if (schema.displayType && !itemsSchema && !minMaxItems.length) {
return (<div>
<TypeName>{schema.displayType}</TypeName>
</div>);
return (
<div>
<TypeName>{schema.displayType}</TypeName>
</div>
);
}
return (

16
src/components/Schema/DiscriminatorDropdown.tsx
View File

@ -33,12 +33,12 @@ export class DiscriminatorDropdown extends React.Component<{
const options = parent.oneOf.map((subSchema, idx) => {
return {
value: subSchema.title,
idx,
value: idx.toString(),
label: subSchema.title,
};
});
const activeValue = options[parent.activeOneOf].value;
const activeValue = options[parent.activeOneOf];
this.sortOptions(options, enumValues);
@ -47,12 +47,16 @@ export class DiscriminatorDropdown extends React.Component<{
value={activeValue}
options={options}
onChange={this.changeActiveChild}
ariaLabel="Example"
className={'react-dropdown-container'}
classNamePrefix={'react-dropdown'}
isSearchable={false}
aria-label="Example"
/>
);
}
changeActiveChild = (option: DropdownOption) => {
this.props.parent.activateOneOf(option.idx);
changeActiveChild = ({ value }) => {
const idx = parseInt(value, 10);
this.props.parent.activateOneOf(idx);
};
}

2
src/components/Schema/ObjectSchema.tsx
View File

@ -36,7 +36,7 @@ export class ObjectSchema extends React.Component<ObjectSchemaProps> {
const needFilter = this.props.skipReadOnly || this.props.skipWriteOnly;
const filteredFields = needFilter
? fields.filter(item => {
? fields.filter((item) => {
return !(
(this.props.skipReadOnly && item.schema.readOnly) ||
(this.props.skipWriteOnly && item.schema.writeOnly)

4
src/components/Schema/Schema.tsx
View File

@ -73,7 +73,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
}
// TODO: maybe adjust FieldDetails to accept schema
const field = ({
const field = {
schema,
name: '',
required: false,
@ -82,7 +82,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
deprecated: false,
toggle: () => null,
expanded: false,
} as any) as FieldModel; // cast needed for hot-loader to not fail
} as any as FieldModel; // cast needed for hot-loader to not fail
return (
<div>

13
src/components/SchemaDefinition/SchemaDefinition.tsx
View File

@ -74,8 +74,15 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
);
}
private renderDropdown = props => {
return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
private renderDropdown = (props) => {
return (
<DropdownOrLabel
Label={MimeLabel}
Dropdown={InvertedSimpleDropdown}
aria-label="Schema definition dropdown"
{...props}
/>
);
};
}
@ -83,7 +90,7 @@ const MediaSamplesWrap = styled.div`
background: ${({ theme }) => theme.codeBlock.backgroundColor};
& > div,
& > pre {
padding: ${props => props.theme.spacing.unit * 4}px;
padding: ${(props) => props.theme.spacing.unit * 4}px;
margin: 0;
}

6
src/components/SearchBox/SearchBox.tsx
View File

@ -100,7 +100,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
setResults(results: SearchResult[], term: string) {
this.setState({
results,
noResults: results.length === 0
noResults: results.length === 0,
});
this.props.marker.mark(term);
}
@ -108,7 +108,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
@bind
@debounce(400)
searchCallback(searchTerm: string) {
this.props.search.search(searchTerm).then(res => {
this.props.search.search(searchTerm).then((res) => {
this.setResults(res, searchTerm);
});
}
@ -130,7 +130,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
render() {
const { activeItemIdx } = this.state;
const results = this.state.results.map(res => ({
const results = this.state.results.map((res) => ({
item: this.props.getItemById(res.meta)!,
score: res.score,
}));

22
src/components/SearchBox/styled.elements.tsx
View File

@ -11,11 +11,11 @@ export const SearchWrap = styled.div`
export const SearchInput = styled.input.attrs(() => ({
className: 'search-input',
}))`
width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
width: calc(100% - ${(props) => props.theme.spacing.unit * 8}px);
box-sizing: border-box;
margin: 0 ${props => props.theme.spacing.unit * 4}px;
padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
${props => props.theme.spacing.unit * 4}px;
margin: 0 ${(props) => props.theme.spacing.unit * 4}px;
padding: 5px ${(props) => props.theme.spacing.unit * 2}px 5px
${(props) => props.theme.spacing.unit * 4}px;
border: 0;
border-bottom: 1px solid
${({ theme }) =>
@ -26,7 +26,7 @@ export const SearchInput = styled.input.attrs(() => ({
font-family: ${({ theme }) => theme.typography.fontFamily};
font-weight: bold;
font-size: 13px;
color: ${props => props.theme.sidebar.textColor};
color: ${(props) => props.theme.sidebar.textColor};
background-color: transparent;
outline: none;
`;
@ -46,19 +46,19 @@ export const SearchIcon = styled((props: { className?: string }) => (
className: 'search-icon',
})`
position: absolute;
left: ${props => props.theme.spacing.unit * 4}px;
left: ${(props) => props.theme.spacing.unit * 4}px;
height: 1.8em;
width: 0.9em;
path {
fill: ${props => props.theme.sidebar.textColor};
fill: ${(props) => props.theme.sidebar.textColor};
}
`;
export const SearchResultsBox = styled.div`
padding: ${props => props.theme.spacing.unit}px 0;
padding: ${(props) => props.theme.spacing.unit}px 0;
background-color: ${({ theme }) => darken(0.05, theme.sidebar.backgroundColor)}};
color: ${props => props.theme.sidebar.textColor};
color: ${(props) => props.theme.sidebar.textColor};
min-height: 150px;
max-height: 250px;
border-top: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)}};
@ -89,9 +89,9 @@ export const SearchResultsBox = styled.div`
export const ClearIcon = styled.i`
position: absolute;
display: inline-block;
width: ${props => props.theme.spacing.unit * 2}px;
width: ${(props) => props.theme.spacing.unit * 2}px;
text-align: center;
right: ${props => props.theme.spacing.unit * 4}px;
right: ${(props) => props.theme.spacing.unit * 4}px;
line-height: 2em;
vertical-align: middle;
margin-right: 2px;

6
src/components/SecuritySchemes/SecuritySchemes.tsx
View File

@ -49,7 +49,7 @@ export class OAuthFlow extends React.PureComponent<OAuthFlowProps> {
<strong> Scopes: </strong>
</div>
<ul>
{Object.keys(flow!.scopes || {}).map(scope => (
{Object.keys(flow!.scopes || {}).map((scope) => (
<li key={scope}>
<code>{scope}</code> - <Markdown inline={true} source={flow!.scopes[scope] || ''} />
</li>
@ -67,7 +67,7 @@ export interface SecurityDefsProps {
export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
render() {
return this.props.securitySchemes.schemes.map(scheme => (
return this.props.securitySchemes.schemes.map((scheme) => (
<Section id={scheme.sectionId} key={scheme.id}>
<Row>
<MiddlePanel>
@ -115,7 +115,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
</td>
</tr>
) : scheme.flows ? (
Object.keys(scheme.flows).map(type => (
Object.keys(scheme.flows).map((type) => (
<OAuthFlow key={type} type={type} flow={scheme.flows[type]} />
))
) : null}

2
src/components/SelectOnClick/SelectOnClick.tsx
View File

@ -12,7 +12,7 @@ export class SelectOnClick extends React.PureComponent {
const { children } = this.props;
return (
<div
ref={el => (this.child = el)}
ref={(el) => (this.child = el)}
onClick={this.selectElement}
onFocus={this.selectElement}
tabIndex={0}

2
src/components/SideMenu/SideMenu.tsx
View File

@ -46,7 +46,7 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
});
};
private saveScrollUpdate = upd => {
private saveScrollUpdate = (upd) => {
this._updateScroll = upd;
};
}

50
src/components/SideMenu/styled.elements.ts
View File

@ -9,8 +9,8 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
}))<{ type: string }>`
width: 9ex;
display: inline-block;
height: ${props => props.theme.typography.code.fontSize};
line-height: ${props => props.theme.typography.code.fontSize};
height: ${(props) => props.theme.typography.code.fontSize};
line-height: ${(props) => props.theme.typography.code.fontSize};
background-color: #333;
border-radius: 3px;
background-repeat: no-repeat;
@ -26,43 +26,43 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
margin-top: 2px;
&.get {
background-color: ${props => props.theme.colors.http.get};
background-color: ${(props) => props.theme.colors.http.get};
}
&.post {
background-color: ${props => props.theme.colors.http.post};
background-color: ${(props) => props.theme.colors.http.post};
}
&.put {
background-color: ${props => props.theme.colors.http.put};
background-color: ${(props) => props.theme.colors.http.put};
}
&.options {
background-color: ${props => props.theme.colors.http.options};
background-color: ${(props) => props.theme.colors.http.options};
}
&.patch {
background-color: ${props => props.theme.colors.http.patch};
background-color: ${(props) => props.theme.colors.http.patch};
}
&.delete {
background-color: ${props => props.theme.colors.http.delete};
background-color: ${(props) => props.theme.colors.http.delete};
}
&.basic {
background-color: ${props => props.theme.colors.http.basic};
background-color: ${(props) => props.theme.colors.http.basic};
}
&.link {
background-color: ${props => props.theme.colors.http.link};
background-color: ${(props) => props.theme.colors.http.link};
}
&.head {
background-color: ${props => props.theme.colors.http.head};
background-color: ${(props) => props.theme.colors.http.head};
}
&.hook {
background-color: ${props => props.theme.colors.primary.main};
background-color: ${(props) => props.theme.colors.primary.main};
}
`;
@ -84,7 +84,7 @@ export const MenuItemUl = styled.ul<{ expanded: boolean }>`
font-size: 0.929em;
}
${props => (props.expanded ? '' : 'display: none;')};
${(props) => (props.expanded ? '' : 'display: none;')};
`;
export const MenuItemLi = styled.li<{ depth: number }>`
@ -92,7 +92,7 @@ export const MenuItemLi = styled.li<{ depth: number }>`
overflow: hidden;
text-overflow: ellipsis;
padding: 0;
${props => (props.depth === 0 ? 'margin-top: 15px' : '')};
${(props) => (props.depth === 0 ? 'margin-top: 15px' : '')};
`;
export const menuItemDepth = {
@ -102,17 +102,17 @@ export const menuItemDepth = {
font-size: 0.8em;
padding-bottom: 0;
cursor: default;
color: ${props => props.theme.sidebar.textColor};
color: ${(props) => props.theme.sidebar.textColor};
`,
1: css`
font-size: 0.929em;
text-transform: ${({ theme }) => theme.sidebar.level1Items.textTransform};
&:hover {
color: ${props => props.theme.sidebar.activeTextColor};
color: ${(props) => props.theme.sidebar.activeTextColor};
}
`,
2: css`
color: ${props => props.theme.sidebar.textColor};
color: ${(props) => props.theme.sidebar.textColor};
`,
};
@ -130,22 +130,22 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
}),
}))<MenuItemLabelType>`
cursor: pointer;
color: ${props =>
color: ${(props) =>
props.active ? props.theme.sidebar.activeTextColor : props.theme.sidebar.textColor};
margin: 0;
padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
padding: 12.5px ${(props) => props.theme.spacing.unit * 4}px;
${({ depth, type, theme }) =>
(type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
display: flex;
justify-content: space-between;
font-family: ${props => props.theme.typography.headings.fontFamily};
${props => menuItemDepth[props.depth]};
background-color: ${props => (props.active ? menuItemActiveBg(props.depth, props) : '')};
font-family: ${(props) => props.theme.typography.headings.fontFamily};
${(props) => menuItemDepth[props.depth]};
background-color: ${(props) => (props.active ? menuItemActiveBg(props.depth, props) : '')};
${props => (props.deprecated && deprecatedCss) || ''};
${(props) => (props.deprecated && deprecatedCss) || ''};
&:hover {
background-color: ${props => menuItemActiveBg(props.depth, props)};
background-color: ${(props) => menuItemActiveBg(props.depth, props)};
}
${ShelfIcon} {
@ -160,7 +160,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
export const MenuItemTitle = styled.span<{ width?: string }>`
display: inline-block;
vertical-align: middle;
width: ${props => (props.width ? props.width : 'auto')};
width: ${(props) => (props.width ? props.width : 'auto')};
overflow: hidden;
text-overflow: ellipsis;
`;

2
src/components/StickySidebar/ChevronSvg.tsx
View File

@ -62,5 +62,5 @@ const ChevronContainer = styled.div`
align-self: center;
display: flex;
flex-direction: column;
color: ${props => props.theme.colors.primary.main};
color: ${(props) => props.theme.colors.primary.main};
`;

10
src/components/StickySidebar/StickyResponsiveSidebar.tsx
View File

@ -26,8 +26,8 @@ export interface StickySidebarState {
const stickyfill = Stickyfill && Stickyfill();
const StyledStickySidebar = styled.div<{ open?: boolean }>`
width: ${props => props.theme.sidebar.width};
background-color: ${props => props.theme.sidebar.backgroundColor};
width: ${(props) => props.theme.sidebar.width};
background-color: ${(props) => props.theme.sidebar.backgroundColor};
overflow: hidden;
display: flex;
flex-direction: column;
@ -45,7 +45,7 @@ const StyledStickySidebar = styled.div<{ open?: boolean }>`
z-index: 20;
width: 100%;
background: ${({ theme }) => theme.sidebar.backgroundColor};
display: ${props => (props.open ? 'flex' : 'none')};
display: ${(props) => (props.open ? 'flex' : 'none')};
`};
@media print {
@ -57,7 +57,7 @@ const FloatingButton = styled.div`
outline: none;
user-select: none;
background-color: #f2f2f2;
color: ${props => props.theme.colors.primary.main};
color: ${(props) => props.theme.colors.primary.main};
display: none;
cursor: pointer;
position: fixed;
@ -134,7 +134,7 @@ export class StickyResponsiveSidebar extends React.Component<
height: `calc(100vh - ${top})`,
}}
// tslint:disable-next-line
ref={el => {
ref={(el) => {
this.stickyElement = el as any;
}}
>

6
src/components/StoreBuilder.ts
View File

@ -30,7 +30,7 @@ const { Provider, Consumer } = StoreContext;
export { Provider as StoreProvider, Consumer as StoreConsumer, StoreContext };
export function StoreBuilder(props: StoreBuilderProps) {
const {spec, specUrl, options, onLoaded, children } = props;
const { spec, specUrl, options, onLoaded, children } = props;
const [resolvedSpec, setResolvedSpec] = React.useState<any>(null);
@ -44,7 +44,7 @@ export function StoreBuilder(props: StoreBuilderProps) {
setResolvedSpec(resolved);
}
load();
}, [spec, specUrl])
}, [spec, specUrl]);
const store = React.useMemo(() => {
if (!resolvedSpec) return null;
@ -62,7 +62,7 @@ export function StoreBuilder(props: StoreBuilderProps) {
if (store && onLoaded) {
onLoaded();
}
}, [store, onLoaded])
}, [store, onLoaded]);
return children({
loading: !store,

7
src/components/__tests__/SecurityRequirement.test.tsx
View File

@ -10,14 +10,15 @@ const options = new RedocNormalizedOptions({});
describe('Components', () => {
describe('SecurityRequirement', () => {
describe('SecurityRequirement', () => {
it('should render \'None\' when empty object in security open api', () => {
const parser = new OpenAPIParser({ openapi: '3.0', info: { title: 'test', version: '0' }, paths: {} },
it("should render 'None' when empty object in security open api", () => {
const parser = new OpenAPIParser(
{ openapi: '3.0', info: { title: 'test', version: '0' }, paths: {} },
undefined,
options,
);
const securityRequirement = new SecurityRequirementModel({}, parser);
const securityElement = shallow(
<SecurityRequirement key={1} security={securityRequirement} />
<SecurityRequirement key={1} security={securityRequirement} />,
).getElement();
expect(securityElement.props.children.type.target).toEqual('span');
expect(securityElement.props.children.props.children).toEqual('None');

2
src/services/AppStore.ts
View File

@ -89,7 +89,7 @@ export class AppStore {
this.search.indexItems(this.menu.items);
}
this.disposer = observe(this.menu, 'activeItemIdx', change => {
this.disposer = observe(this.menu, 'activeItemIdx', (change) => {
this.updateMarkOnMenu(change.newValue as number);
});
}

5
src/services/MarkdownRenderer.ts
View File

@ -121,10 +121,7 @@ export class MarkdownRenderer {
prevRegexp = regexp;
prevPos = currentPos;
}
prevHeading.description = rawText
.substring(prevPos)
.replace(prevRegexp, '')
.trim();
prevHeading.description = rawText.substring(prevPos).replace(prevRegexp, '').trim();
}
headingRule = (

4
src/services/MarkerService.ts
View File

@ -37,7 +37,7 @@ export class MarkerService {
if (!term && !this.prevTerm) {
return;
}
this.map.forEach(val => {
this.map.forEach((val) => {
val.unmark();
val.mark(term || this.prevTerm);
});
@ -45,7 +45,7 @@ export class MarkerService {
}
unmark() {
this.map.forEach(val => val.unmark());
this.map.forEach((val) => val.unmark());
this.prevTerm = '';
}
}

6
src/services/MenuBuilder.ts
View File

@ -86,7 +86,7 @@ export class MenuBuilder {
}
const mapHeadingsDeep = (_parent, items, depth = 1) =>
items.map(heading => {
items.map((heading) => {
const group = new GroupModel('section', heading, _parent);
group.depth = depth;
if (heading.items) {
@ -149,7 +149,7 @@ export class MenuBuilder {
tagNames = group.tags;
}
const tags = tagNames.map(tagName => {
const tags = tagNames.map((tagName) => {
if (!tagsMap[tagName]) {
console.warn(`Non-existing tag "${tagName}" is added to the group "${group!.name}"`);
return null;
@ -226,7 +226,7 @@ export class MenuBuilder {
getTags(parser, webhooks, true);
}
if (spec.paths){
if (spec.paths) {
getTags(parser, spec.paths);
}

6
src/services/MenuStore.ts
View File

@ -144,12 +144,12 @@ export class MenuStore {
}
let item: IMenuItem | undefined;
item = this.flatItems.find(i => i.id === id);
item = this.flatItems.find((i) => i.id === id);
if (item) {
this.activateAndScroll(item, false);
} else {
if (id.startsWith(SECURITY_SCHEMES_SECTION_PREFIX)) {
item = this.flatItems.find(i => SECURITY_SCHEMES_SECTION_PREFIX.startsWith(i.id));
item = this.flatItems.find((i) => SECURITY_SCHEMES_SECTION_PREFIX.startsWith(i.id));
this.activate(item);
}
this.scroll.scrollIntoViewBySelector(`[${SECTION_ATTR}="${id}"]`);
@ -185,7 +185,7 @@ export class MenuStore {
}
getItemById = (id: string) => {
return this.flatItems.find(item => item.id === id);
return this.flatItems.find((item) => item.id === id);
};
/**

5
src/services/OpenAPIParser.ts
View File

@ -193,7 +193,10 @@ export class OpenAPIParser {
if (keys.length === 0) {
return resolved;
}
if (mergeAsAllOf && keys.some((k) => k !== 'description' && k !== 'title' && k !== 'externalDocs')) {
if (
mergeAsAllOf &&
keys.some((k) => k !== 'description' && k !== 'title' && k !== 'externalDocs')
) {
return {
allOf: [rest, resolved],
};

6
src/services/SearchStore.ts
View File

@ -23,8 +23,8 @@ export class SearchStore<T> {
searchWorker = getWorker();
indexItems(groups: Array<IMenuItem | OperationModel>) {
const recurse = items => {
items.forEach(group => {
const recurse = (items) => {
items.forEach((group) => {
if (group.type !== 'group') {
this.add(group.name, group.description || '', group.id);
}
@ -59,7 +59,7 @@ export class SearchStore<T> {
fromExternalJS(path?: string, exportName?: string) {
if (path && exportName) {
this.searchWorker.fromExternalJS(path, exportName)
this.searchWorker.fromExternalJS(path, exportName);
}
}
}

10
src/services/SearchWorker.worker.ts
View File

@ -47,14 +47,14 @@ function initEmpty() {
builder.pipeline.add(lunr.trimmer, lunr.stopWordFilter, lunr.stemmer);
index = new Promise(resolve => {
index = new Promise((resolve) => {
resolveIndex = resolve;
});
}
initEmpty();
const expandTerm = term => '*' + lunr.stemmer(new lunr.Token(term, {})) + '*';
const expandTerm = (term) => '*' + lunr.stemmer(new lunr.Token(term, {})) + '*';
export function add<T>(title: string, description: string, meta?: T) {
const ref = store.push(meta) - 1;
@ -104,11 +104,11 @@ export async function search<Meta = string>(
return [];
}
let searchResults = (await index).query(t => {
let searchResults = (await index).query((t) => {
q.trim()
.toLowerCase()
.split(/\s+/)
.forEach(term => {
.forEach((term) => {
if (term.length === 1) return;
const exp = expandTerm(term);
t.term(exp, {});
@ -119,5 +119,5 @@ export async function search<Meta = string>(
searchResults = searchResults.slice(0, limit);
}
return searchResults.map(res => ({ meta: store[res.ref], score: res.score }));
return searchResults.map((res) => ({ meta: store[res.ref], score: res.score }));
}

5
src/services/SpecStore.ts
View File

@ -28,7 +28,10 @@ export class SpecStore {
this.externalDocs = this.parser.spec.externalDocs;
this.contentItems = MenuBuilder.buildStructure(this.parser, this.options);
this.securitySchemes = new SecuritySchemesModel(this.parser);
const webhookPath: Referenced<OpenAPIPath> = {...this.parser?.spec?.['x-webhooks'], ...this.parser?.spec.webhooks};
const webhookPath: Referenced<OpenAPIPath> = {
...this.parser?.spec?.['x-webhooks'],
...this.parser?.spec.webhooks,
};
this.webhooks = new WebhookModel(this.parser, options, webhookPath);
}
}

1
src/services/__tests__/OpenAPIParser.test.ts
View File

@ -26,6 +26,5 @@ describe('Models', () => {
expect(parser.shallowDeref(schemaOrRef)).toMatchSnapshot();
});
});
});

4
src/services/__tests__/models/ApiInfo.test.ts
View File

@ -54,8 +54,8 @@ describe('Models', () => {
license: {
name: 'MIT',
identifier: 'MIT',
url: 'https://opensource.org/licenses/MIT'
}
url: 'https://opensource.org/licenses/MIT',
},
},
} as any;

1
src/services/__tests__/models/MenuBuilder.test.ts
View File

@ -19,7 +19,6 @@ describe('Models', () => {
expect(contentItems[0].id).toEqual('tag/pet');
expect(contentItems[0].name).toEqual('pet');
expect(contentItems[0].type).toEqual('tag');
});
});
});

12
src/services/__tests__/models/Response.test.ts
View File

@ -20,23 +20,23 @@ describe('Models', () => {
});
test('should calculate response type based on code', () => {
let resp = new ResponseModel({...props, code: '200' });
let resp = new ResponseModel({ ...props, code: '200' });
expect(resp.type).toEqual('success');
resp = new ResponseModel({...props, code: '120' });
resp = new ResponseModel({ ...props, code: '120' });
expect(resp.type).toEqual('info');
resp = new ResponseModel({...props, code: '301' });
resp = new ResponseModel({ ...props, code: '301' });
expect(resp.type).toEqual('redirect');
resp = new ResponseModel({...props, code: '400' });
resp = new ResponseModel({ ...props, code: '400' });
expect(resp.type).toEqual('error');
});
test('default should be successful by default', () => {
const resp = new ResponseModel({...props, code: 'default' });
const resp = new ResponseModel({ ...props, code: 'default' });
expect(resp.type).toEqual('success');
});
test('default should be error if defaultAsError is true', () => {
const resp = new ResponseModel({...props, code: 'default', defaultAsError: true });
const resp = new ResponseModel({ ...props, code: 'default', defaultAsError: true });
expect(resp.type).toEqual('error');
});
});

4
src/services/models/Example.ts
View File

@ -41,8 +41,8 @@ export class ExampleModel {
return externalExamplesCache[this.externalValueUrl];
}
externalExamplesCache[this.externalValueUrl] = fetch(this.externalValueUrl).then(res => {
return res.text().then(txt => {
externalExamplesCache[this.externalValueUrl] = fetch(this.externalValueUrl).then((res) => {
return res.text().then((txt) => {
if (!res.ok) {
return Promise.reject(new Error(txt));
}

4
src/services/models/MediaContent.ts
View File

@ -31,7 +31,7 @@ export class MediaContentModel {
if (options.unstable_ignoreMimeParameters) {
info = mergeSimilarMediaTypes(info);
}
this.mediaTypes = Object.keys(info).map(name => {
this.mediaTypes = Object.keys(info).map((name) => {
const mime = info[name];
// reset deref cache just in case something is left there
parser.resetVisited();
@ -54,6 +54,6 @@ export class MediaContentModel {
}
get hasSample(): boolean {
return this.mediaTypes.filter(mime => !!mime.examples).length > 0;
return this.mediaTypes.filter((mime) => !!mime.examples).length > 0;
}
}

2
src/services/models/MediaType.ts
View File

@ -34,7 +34,7 @@ export class MediaTypeModel {
if (info.examples !== undefined) {
this.examples = mapValues(
info.examples,
example => new ExampleModel(parser, example, name, info.encoding),
(example) => new ExampleModel(parser, example, name, info.encoding),
);
} else if (info.example !== undefined) {
this.examples = {

3
src/services/models/Operation.ts
View File

@ -173,7 +173,8 @@ export class OperationModel implements IMenuItem {
@memoize
get requestBody() {
return (
this.operationSpec.requestBody && new RequestBodyModel({
this.operationSpec.requestBody &&
new RequestBodyModel({
parser: this.parser,
infoOrRef: this.operationSpec.requestBody,
options: this.options,

2
src/services/models/RequestBody.ts
View File

@ -9,7 +9,7 @@ type RequestBodyProps = {
infoOrRef: Referenced<OpenAPIRequestBody>;
options: RedocNormalizedOptions;
isEvent: boolean;
}
};
export class RequestBodyModel {
description: string;

16
src/services/models/Response.ts
View File

@ -9,13 +9,13 @@ import { FieldModel } from './Field';
import { MediaContentModel } from './MediaContent';
type ResponseProps = {
parser: OpenAPIParser,
code: string,
defaultAsError: boolean,
infoOrRef: Referenced<OpenAPIResponse>,
options: RedocNormalizedOptions,
isEvent: boolean,
}
parser: OpenAPIParser;
code: string;
defaultAsError: boolean;
infoOrRef: Referenced<OpenAPIResponse>;
options: RedocNormalizedOptions;
isEvent: boolean;
};
export class ResponseModel {
@observable
@ -54,7 +54,7 @@ export class ResponseModel {
const headers = info.headers;
if (headers !== undefined) {
this.headers = Object.keys(headers).map(name => {
this.headers = Object.keys(headers).map((name) => {
const header = headers[name];
return new FieldModel(parser, { ...header, name }, '', options);
});

14
src/services/models/Schema.ts
View File

@ -134,7 +134,10 @@ export class SchemaModel {
this.maxItems = schema.maxItems;
if (!!schema.nullable || schema['x-nullable']) {
if (Array.isArray(this.type) && !this.type.some((value) => value === null || value === 'null')) {
if (
Array.isArray(this.type) &&
!this.type.some((value) => value === null || value === 'null')
) {
this.type = [...this.type, 'null'];
} else if (!Array.isArray(this.type) && (this.type !== null || this.type !== 'null')) {
this.type = [this.type, 'null'];
@ -142,7 +145,7 @@ export class SchemaModel {
}
this.displayType = Array.isArray(this.type)
? this.type.map(item => item === null ? 'null' : item).join(' or ')
? this.type.map((item) => (item === null ? 'null' : item)).join(' or ')
: this.type;
if (this.isCircular) {
@ -194,9 +197,8 @@ export class SchemaModel {
this.enum = this.items.enum;
}
if (Array.isArray(this.type)) {
const filteredType = this.type.filter(item => item !== 'array');
if (filteredType.length)
this.displayType += ` or ${filteredType.join(' or ')}`;
const filteredType = this.type.filter((item) => item !== 'array');
if (filteredType.length) this.displayType += ` or ${filteredType.join(' or ')}`;
}
}
@ -215,7 +217,7 @@ export class SchemaModel {
const title =
isNamedDefinition(variant.$ref) && !merged.title
? JsonPointer.baseName(variant.$ref)
: `${(merged.title || '')}${(merged.const && JSON.stringify(merged.const)) || ''}`;
: `${merged.title || ''}${(merged.const && JSON.stringify(merged.const)) || ''}`;
const schema = new SchemaModel(
parser,

4
src/services/models/SecurityRequirement.ts
View File

@ -15,7 +15,7 @@ export class SecurityRequirementModel {
const schemes = (parser.spec.components && parser.spec.components.securitySchemes) || {};
this.schemes = Object.keys(requirement || {})
.map(id => {
.map((id) => {
const scheme = parser.deref(schemes[id]);
const scopes = requirement[id] || [];
@ -31,6 +31,6 @@ export class SecurityRequirementModel {
scopes,
};
})
.filter(scheme => scheme !== undefined) as SecurityScheme[];
.filter((scheme) => scheme !== undefined) as SecurityScheme[];
}
}

2
src/services/models/SecuritySchemes.ts
View File

@ -60,7 +60,7 @@ export class SecuritySchemesModel {
constructor(parser: OpenAPIParser) {
const schemes = (parser.spec.components && parser.spec.components.securitySchemes) || {};
this.schemes = Object.keys(schemes).map(
name => new SecuritySchemeModel(parser, name, schemes[name]),
(name) => new SecuritySchemeModel(parser, name, schemes[name]),
);
}
}

6
src/standalone.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { hydrate as hydrateComponent, render } from 'react-dom';
import { configure } from "mobx"
import { configure } from 'mobx';
import { Redoc, RedocStandalone } from './components/';
import { AppStore, StoreState } from './services/AppStore';
@ -8,8 +8,8 @@ import { debugTime, debugTimeEnd } from './utils/debug';
import { querySelector } from './utils/dom';
configure({
useProxies: 'ifavailable'
})
useProxies: 'ifavailable',
});
export { Redoc, AppStore } from '.';

14
src/styled-components.ts
View File

@ -15,8 +15,8 @@ const {
export const media = {
lessThan(breakpoint, print?: boolean, extra?: string) {
return (...args) => css`
@media ${print ? 'print, ' : ''} screen and (max-width: ${props =>
props.theme.breakpoints[breakpoint]})${extra || ''} {
@media ${print ? 'print, ' : ''} screen and (max-width: ${(props) =>
props.theme.breakpoints[breakpoint]}) ${extra || ''} {
${(css as any)(...args)};
}
`;
@ -24,7 +24,7 @@ export const media = {
greaterThan(breakpoint) {
return (...args) => css`
@media (min-width: ${props => props.theme.breakpoints[breakpoint]}) {
@media (min-width: ${(props) => props.theme.breakpoints[breakpoint]}) {
${(css as any)(...args)};
}
`;
@ -32,9 +32,9 @@ export const media = {
between(firstBreakpoint, secondBreakpoint) {
return (...args) => css`
@media (min-width: ${props =>
props.theme.breakpoints[firstBreakpoint]}) and (max-width: ${props =>
props.theme.breakpoints[secondBreakpoint]}) {
@media (min-width: ${(props) => props.theme.breakpoints[firstBreakpoint]}) and (max-width: ${(
props,
) => props.theme.breakpoints[secondBreakpoint]}) {
${(css as any)(...args)};
}
`;
@ -45,7 +45,7 @@ export { css, createGlobalStyle, keyframes, ThemeProvider };
export default styled;
export function extensionsHook(styledName: string) {
return props => {
return (props) => {
if (!props.theme.extensionsHook) {
return;
}

16
src/theme.ts
View File

@ -84,21 +84,21 @@ const defaultTheme: ThemeInterface = {
},
},
schema: {
linesColor: theme =>
linesColor: (theme) =>
lighten(
theme.colors.tonalOffset,
desaturate(theme.colors.tonalOffset, theme.colors.primary.main),
),
defaultDetailsWidth: '75%',
typeNameColor: theme => theme.colors.text.secondary,
typeTitleColor: theme => theme.schema.typeNameColor,
requireLabelColor: theme => theme.colors.error.main,
typeNameColor: (theme) => theme.colors.text.secondary,
typeTitleColor: (theme) => theme.schema.typeNameColor,
requireLabelColor: (theme) => theme.colors.error.main,
labelsTextSize: '0.9em',
nestingSpacing: '1em',
nestedBackground: '#fafafa',
arrow: {
size: '1.1em',
color: theme => theme.colors.text.secondary,
color: (theme) => theme.colors.text.secondary,
},
},
typography: {
@ -134,7 +134,7 @@ const defaultTheme: ThemeInterface = {
width: '260px',
backgroundColor: '#fafafa',
textColor: '#333333',
activeTextColor: theme =>
activeTextColor: (theme) =>
theme.sidebar.textColor !== defaultTheme.sidebar!.textColor
? theme.sidebar.textColor
: theme.colors.primary.main,
@ -146,7 +146,7 @@ const defaultTheme: ThemeInterface = {
},
arrow: {
size: '1.5em',
color: theme => theme.sidebar.textColor,
color: (theme) => theme.sidebar.textColor,
},
},
logo: {
@ -170,7 +170,7 @@ export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface {
const resolvedValues = {};
let counter = 0;
const setProxy = (obj, path: string) => {
Object.keys(obj).forEach(k => {
Object.keys(obj).forEach((k) => {
const currentPath = (path ? path + '.' : '') + k;
const val = obj[k];
if (typeof val === 'function') {

4
src/utils/__tests__/loadAndBundleSpec.test.ts
View File

@ -11,7 +11,9 @@ describe('#loadAndBundleSpec', () => {
});
it('should load And Bundle Spec demo/openapi-3-1.yaml', async () => {
const spec = yaml.load(readFileSync(resolve(__dirname, '../../../demo/openapi-3-1.yaml'), 'utf-8'));
const spec = yaml.load(
readFileSync(resolve(__dirname, '../../../demo/openapi-3-1.yaml'), 'utf-8'),
);
const bundledSpec = await loadAndBundleSpec(spec);
expect(bundledSpec).toMatchSnapshot();
});

30
src/utils/__tests__/openapi.test.ts
View File

@ -103,7 +103,7 @@ describe('Utils', () => {
it('Should return pathName if no summary, operationId, description', () => {
const operation = {
pathName: '/sandbox/test'
pathName: '/sandbox/test',
};
expect(getOperationSummary(operation as any)).toBe('/sandbox/test');
});
@ -141,9 +141,9 @@ describe('Utils', () => {
object: ['maxProperties', 'minProperties', 'required', 'additionalProperties', 'properties'],
};
Object.keys(tests).forEach(name => {
Object.keys(tests).forEach((name) => {
it(`Should detect ${name} if ${name} properties are present`, () => {
tests[name].forEach(propName => {
tests[name].forEach((propName) => {
expect(
detectType({
[propName]: 0,
@ -174,7 +174,7 @@ describe('Utils', () => {
expect(isPrimitiveType(schema)).toEqual(false);
});
it('should return true for array contains object and schema hasn\'t properties', () => {
it("should return true for array contains object and schema hasn't properties", () => {
const schema = {
type: ['object', 'string'],
};
@ -231,10 +231,10 @@ describe('Utils', () => {
const schema = {
type: 'array',
items: {
type: 'array',
items: {
type: 'string'
},
type: 'array',
items: {
type: 'string',
},
},
};
expect(isPrimitiveType(schema)).toEqual(true);
@ -415,7 +415,7 @@ describe('Utils', () => {
min?: number,
max?: number,
multipleOf?: number,
uniqueItems?: boolean
uniqueItems?: boolean,
) => ({ type: 'array', minItems: min, maxItems: max, multipleOf, uniqueItems });
it('should not have a humanized constraint without schema constraints', () => {
@ -455,9 +455,9 @@ describe('Utils', () => {
});
it('should have a humanized constraint when uniqueItems is set', () => {
expect(humanizeConstraints(itemConstraintSchema(undefined, undefined, undefined, true))).toContain(
'unique',
);
expect(
humanizeConstraints(itemConstraintSchema(undefined, undefined, undefined, true)),
).toContain('unique');
});
});
@ -656,11 +656,11 @@ describe('Utils', () => {
},
];
testCases.forEach(locationTestGroup => {
testCases.forEach((locationTestGroup) => {
describe(locationTestGroup.description, () => {
locationTestGroup.cases.forEach(valueTypeTestGroup => {
locationTestGroup.cases.forEach((valueTypeTestGroup) => {
describe(valueTypeTestGroup.description, () => {
valueTypeTestGroup.cases.forEach(testCase => {
valueTypeTestGroup.cases.forEach((testCase) => {
it(`should serialize correctly when style is ${testCase.style} and explode is ${testCase.explode}`, () => {
const parameter: OpenAPIParameter = {
name: locationTestGroup.name,

2
src/utils/decorators.ts
View File

@ -12,7 +12,7 @@ function throttle(func, wait) {
context = args = null;
}
};
return function() {
return function () {
const now = new Date().getTime();
const remaining = wait - (now - previous);
context = this;

6
src/utils/dom.ts
View File

@ -15,10 +15,10 @@ export function querySelector(selector: string): Element | null {
export function html2Str(html: string): string {
return html
.split(/<[^>]+>/)
.map(chunk => {
.map((chunk) => {
return chunk.trim();
})
.filter(trimmedChunk => {
.filter((trimmedChunk) => {
return trimmedChunk.length > 0;
})
.join(' ');
@ -27,7 +27,7 @@ export function html2Str(html: string): string {
// scrollIntoViewIfNeeded polyfill
if (typeof Element !== 'undefined' && !(Element as any).prototype.scrollIntoViewIfNeeded) {
(Element as any).prototype.scrollIntoViewIfNeeded = function(centerIfNeeded) {
(Element as any).prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
const parent = this.parentNode;

2
src/utils/helpers.ts
View File

@ -50,7 +50,7 @@ export function flattenByProp<T extends object, P extends keyof T>(
for (const item of items) {
res.push(item);
if (item[prop]) {
iterate((item[prop] as any) as T[]);
iterate(item[prop] as any as T[]);
}
}
};

12
src/utils/loadAndBundleSpec.ts
View File

@ -14,8 +14,8 @@ export async function loadAndBundleSpec(specUrlOrObject: object | string): Promi
const config = new Config({});
const bundleOpts = {
config,
base: IS_BROWSER ? window.location.href : process.cwd()
}
base: IS_BROWSER ? window.location.href : process.cwd(),
};
if (IS_BROWSER) {
config.resolve.http.customFetch = global.fetch;
@ -24,13 +24,15 @@ export async function loadAndBundleSpec(specUrlOrObject: object | string): Promi
if (typeof specUrlOrObject === 'object' && specUrlOrObject !== null) {
bundleOpts['doc'] = {
source: { absoluteRef: '' } as Source,
parsed: specUrlOrObject
} as Document
parsed: specUrlOrObject,
} as Document;
} else {
bundleOpts['ref'] = specUrlOrObject;
}
const { bundle: { parsed } } = await bundle(bundleOpts);
const {
bundle: { parsed },
} = await bundle(bundleOpts);
return parsed.swagger !== undefined ? convertSwagger2OpenAPI(parsed) : parsed;
}

2
src/utils/memoize.ts
View File

@ -3,7 +3,7 @@ const SENTINEL = {};
export function memoize<T>(target: any, name: string, descriptor: TypedPropertyDescriptor<T>) {
if (typeof descriptor.value === 'function') {
return (_memoizeMethod(target, name, descriptor) as any) as TypedPropertyDescriptor<T>;
return _memoizeMethod(target, name, descriptor) as any as TypedPropertyDescriptor<T>;
} else if (typeof descriptor.get === 'function') {
return _memoizeGetter(target, name, descriptor) as TypedPropertyDescriptor<T>;
} else {

54
src/utils/openapi.ts
View File

@ -113,7 +113,10 @@ export function detectType(schema: OpenAPISchema): string {
return 'any';
}
export function isPrimitiveType(schema: OpenAPISchema, type: string | string[] | undefined = schema.type) {
export function isPrimitiveType(
schema: OpenAPISchema,
type: string | string[] | undefined = schema.type,
) {
if (schema.oneOf !== undefined || schema.anyOf !== undefined) {
return false;
}
@ -122,9 +125,10 @@ export function isPrimitiveType(schema: OpenAPISchema, type: string | string[] |
const isArray = Array.isArray(type);
if (type === 'object' || (isArray && type?.includes('object'))) {
isPrimitive = schema.properties !== undefined
? Object.keys(schema.properties).length === 0
: schema.additionalProperties === undefined;
isPrimitive =
schema.properties !== undefined
? Object.keys(schema.properties).length === 0
: schema.additionalProperties === undefined;
}
if (schema.items !== undefined && (type === 'array' || (isArray && type?.includes('array')))) {
@ -144,10 +148,10 @@ export function isFormUrlEncoded(contentType: string): boolean {
function delimitedEncodeField(fieldVal: any, fieldName: string, delimiter: string): string {
if (Array.isArray(fieldVal)) {
return fieldVal.map(v => v.toString()).join(delimiter);
return fieldVal.map((v) => v.toString()).join(delimiter);
} else if (typeof fieldVal === 'object') {
return Object.keys(fieldVal)
.map(k => `${k}${delimiter}${fieldVal[k]}`)
.map((k) => `${k}${delimiter}${fieldVal[k]}`)
.join(delimiter);
} else {
return fieldName + '=' + fieldVal.toString();
@ -160,7 +164,7 @@ function deepObjectEncodeField(fieldVal: any, fieldName: string): string {
return '';
} else if (typeof fieldVal === 'object') {
return Object.keys(fieldVal)
.map(k => `${fieldName}[${k}]=${fieldVal[k]}`)
.map((k) => `${fieldName}[${k}]=${fieldVal[k]}`)
.join('&');
} else {
console.warn('deepObject style cannot be used with non-object value:' + fieldVal.toString());
@ -192,7 +196,7 @@ export function urlFormEncodePayload(
throw new Error('Payload must have fields: ' + payload.toString());
} else {
return Object.keys(payload)
.map(fieldName => {
.map((fieldName) => {
const fieldVal = payload[fieldName];
const { style = 'form', explode = true } = encoding[fieldName] || {};
switch (style) {
@ -376,7 +380,7 @@ export function isNamedDefinition(pointer?: string): boolean {
export function getDefinitionName(pointer?: string): string | undefined {
if (!pointer) return undefined;
const match = pointer.match(/^#\/components\/(schemas|pathItems)\/([^\/]+)$/);
return match === null ? undefined : match[1]
return match === null ? undefined : match[1];
}
function humanizeMultipleOfConstraint(multipleOf: number | undefined): string | undefined {
@ -452,12 +456,14 @@ export function humanizeConstraints(schema: OpenAPISchema): string[] {
let minimum = 0;
let maximum = 0;
if (schema.minimum) minimum = schema.minimum;
if (typeof schema.exclusiveMinimum === 'number') minimum = minimum <= schema.exclusiveMinimum ? minimum : schema.exclusiveMinimum;
if (typeof schema.exclusiveMinimum === 'number')
minimum = minimum <= schema.exclusiveMinimum ? minimum : schema.exclusiveMinimum;
if (schema.maximum) maximum = schema.maximum;
if (typeof schema.exclusiveMaximum === 'number') maximum = maximum > schema.exclusiveMaximum ? maximum : schema.exclusiveMaximum;
if (typeof schema.exclusiveMaximum === 'number')
maximum = maximum > schema.exclusiveMaximum ? maximum : schema.exclusiveMaximum;
numberRange = `[${minimum} .. ${maximum}]`
numberRange = `[${minimum} .. ${maximum}]`;
}
if (numberRange !== undefined) {
@ -476,7 +482,7 @@ export function sortByRequired(fields: FieldModel[], order: string[] = []) {
const orderedFields: FieldModel[] = [];
const unorderedFields: FieldModel[] = [];
fields.forEach(field => {
fields.forEach((field) => {
if (field.required) {
order.includes(field.name) ? orderedFields.push(field) : unorderedFields.push(field);
} else {
@ -504,13 +510,13 @@ export function mergeParams(
operationParams: Array<Referenced<OpenAPIParameter>> = [],
): Array<Referenced<OpenAPIParameter>> {
const operationParamNames = {};
operationParams.forEach(param => {
operationParams.forEach((param) => {
param = parser.shallowDeref(param);
operationParamNames[param.name + '_' + param.in] = true;
});
// filter out path params overridden by operation ones with the same name
pathParams = pathParams.filter(param => {
pathParams = pathParams.filter((param) => {
param = parser.shallowDeref(param);
return !operationParamNames[param.name + '_' + param.in];
});
@ -522,7 +528,7 @@ export function mergeSimilarMediaTypes(
types: Record<string, OpenAPIMediaType>,
): Record<string, OpenAPIMediaType> {
const mergedTypes = {};
Object.keys(types).forEach(name => {
Object.keys(types).forEach((name) => {
const mime = types[name];
// ignore content type parameters (e.g. charset) and merge
const normalizedMimeName = name.split(';')[0].trim();
@ -570,7 +576,7 @@ export function normalizeServers(
return resolveUrl(baseUrl, url);
}
return servers.map(server => {
return servers.map((server) => {
return {
...server,
url: normalizeUrl(server.url),
@ -588,11 +594,11 @@ export function setSecuritySchemePrefix(prefix: string) {
SECURITY_SCHEMES_SECTION_PREFIX = prefix;
}
export const shortenHTTPVerb = verb =>
({
delete: 'del',
options: 'opts',
}[verb] || verb);
export const shortenHTTPVerb = (verb) =>
({
delete: 'del',
options: 'opts',
}[verb] || verb);
export function isRedocExtension(key: string): boolean {
const redocExtensions = {
@ -619,7 +625,7 @@ export function extractExtensions(
showExtensions: string[] | true,
): Record<string, any> {
return Object.keys(obj)
.filter(key => {
.filter((key) => {
if (showExtensions === true) {
return key.startsWith('x-') && !isRedocExtension(key);
}
@ -634,6 +640,6 @@ export function extractExtensions(
export function pluralizeType(displayType: string): string {
return displayType
.split(' or ')
.map(type => type.replace(/^(string|object|number|integer|array|boolean)s?( ?.*)/, '$1s$2'))
.map((type) => type.replace(/^(string|object|number|integer|array|boolean)s?( ?.*)/, '$1s$2'))
.join(' or ');
}

2
src/utils/test-utils.ts
View File

@ -17,7 +17,7 @@ function traverseComponent(root, fn) {
}
export function filterPropsDeep<T extends object>(component: T, paths: string[]): T {
traverseComponent(component, comp => {
traverseComponent(component, (comp) => {
if (comp.props) {
for (const path of paths) {
if (has(comp.props, path)) {