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

chore: run prettier for all files

Browse Source
This commit is contained in:
Oleksiy Kachynskyy 2020-10-08 12:25:53 +03:00
parent f805271d90
commit ad926e2a84
74 changed files with 277 additions and 273 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( YargsParser.command(
'serve <spec>', 'serve <spec>',
'start the server', 'start the server',
yargs => { (yargs) => {
yargs.positional('spec', { yargs.positional('spec', {
describe: 'path or URL to your spec', describe: 'path or URL to your spec',
}); });
@ -75,7 +75,7 @@ YargsParser.command(
yargs.demandOption('spec'); yargs.demandOption('spec');
return yargs; return yargs;
}, },
async argv => { async (argv) => {
const config: Options = { const config: Options = {
ssr: argv.ssr as boolean, ssr: argv.ssr as boolean,
title: argv.title as string, title: argv.title as string,
@ -97,7 +97,7 @@ YargsParser.command(
.command( .command(
'bundle <spec>', 'bundle <spec>',
'bundle spec into zero-dependency HTML-file', 'bundle spec into zero-dependency HTML-file',
yargs => { (yargs) => {
yargs.positional('spec', { yargs.positional('spec', {
describe: 'path or URL to your spec', describe: 'path or URL to your spec',
}); });
@ -209,7 +209,7 @@ async function serve(port: number, pathToSpec: string, options: Options = {}) {
const watcher = watch(pathToSpecDirectory, watchOptions); const watcher = watch(pathToSpecDirectory, watchOptions);
const log = console.log.bind(console); const log = console.log.bind(console);
const handlePath = async _path => { const handlePath = async (_path) => {
try { try {
spec = await loadAndBundleSpec(pathToSpec); spec = await loadAndBundleSpec(pathToSpec);
pageHTML = await getPageHTML(spec, pathToSpec, options); pageHTML = await getPageHTML(spec, pathToSpec, options);
@ -220,18 +220,18 @@ async function serve(port: number, pathToSpec: string, options: Options = {}) {
}; };
watcher watcher
.on('change', async path => { .on('change', async (path) => {
log(`${path} changed, updating docs`); log(`${path} changed, updating docs`);
handlePath(path); handlePath(path);
}) })
.on('add', async path => { .on('add', async (path) => {
log(`File ${path} added, updating docs`); log(`File ${path} added, updating docs`);
handlePath(path); handlePath(path);
}) })
.on('addDir', path => { .on('addDir', (path) => {
log(`↗ Directory ${path} added. Files in here will trigger reload.`); 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...`)); .on('ready', () => log(`👀 Watching ${pathToSpecDirectory} for changes...`));
} }
} }
@ -360,7 +360,7 @@ function escapeClosingScriptTag(str) {
// see http://www.thespanner.co.uk/2011/07/25/the-json-specification-is-now-wrong/ // see http://www.thespanner.co.uk/2011/07/25/the-json-specification-is-now-wrong/
function escapeUnicode(str) { 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) { function handleError(error: Error) {

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

@ -7,11 +7,11 @@ export const PropertiesTableCaption = styled.caption`
text-align: right; text-align: right;
font-size: 0.9em; font-size: 0.9em;
font-weight: normal; font-weight: normal;
color: ${props => props.theme.colors.text.secondary}; color: ${(props) => props.theme.colors.text.secondary};
`; `;
export const PropertyCell = styled.td<{ kind?: string }>` 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; box-sizing: border-box;
position: relative; position: relative;
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
@ -29,16 +29,16 @@ export const PropertyCell = styled.td<{ kind?: string }>`
to bottom, to bottom,
transparent 0%, transparent 0%,
transparent 22px, transparent 22px,
${props => props.theme.schema.linesColor} 22px, ${(props) => props.theme.schema.linesColor} 22px,
${props => props.theme.schema.linesColor} 100% ${(props) => props.theme.schema.linesColor} 100%
); );
} }
tr.last > & { tr.last > & {
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
${props => props.theme.schema.linesColor} 0%, ${(props) => props.theme.schema.linesColor} 0%,
${props => props.theme.schema.linesColor} 22px, ${(props) => props.theme.schema.linesColor} 22px,
transparent 22px, transparent 22px,
transparent 100% transparent 100%
); );
@ -63,7 +63,7 @@ export const PropertyNameCell = styled(PropertyCell)`
line-height: 20px; line-height: 20px;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${(props) => props.theme.typography.code.fontFamily};
&.deprecated { &.deprecated {
${deprecatedCss}; ${deprecatedCss};
@ -77,7 +77,7 @@ export const PropertyNameCell = styled(PropertyCell)`
export const PropertyDetailsCell = styled.td` export const PropertyDetailsCell = styled.td`
border-bottom: 1px solid #9fb4be; border-bottom: 1px solid #9fb4be;
padding: 10px 0; padding: 10px 0;
width: ${props => props.theme.schema.defaultDetailsWidth}; width: ${(props) => props.theme.schema.defaultDetailsWidth};
box-sizing: border-box; box-sizing: border-box;
tr.expanded & { tr.expanded & {
@ -86,8 +86,8 @@ export const PropertyDetailsCell = styled.td`
`; `;
export const PropertyBullet = styled.span` export const PropertyBullet = styled.span`
color: ${props => props.theme.schema.linesColor}; color: ${(props) => props.theme.schema.linesColor};
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${(props) => props.theme.typography.code.fontFamily};
margin-right: 10px; margin-right: 10px;
&::before { &::before {
@ -96,7 +96,7 @@ export const PropertyBullet = styled.span`
vertical-align: middle; vertical-align: middle;
width: 10px; width: 10px;
height: 1px; height: 1px;
background: ${props => props.theme.schema.linesColor}; background: ${(props) => props.theme.schema.linesColor};
} }
&::after { &::after {
@ -104,7 +104,7 @@ export const PropertyBullet = styled.span`
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 1px; width: 1px;
background: ${props => props.theme.schema.linesColor}; background: ${(props) => props.theme.schema.linesColor};
height: 7px; height: 7px;
} }
`; `;
@ -116,7 +116,7 @@ export const InnerPropertiesWrap = styled.div`
export const PropertiesTable = styled.table` export const PropertiesTable = styled.table`
border-collapse: separate; border-collapse: separate;
border-radius: 3px; border-radius: 3px;
font-size: ${props => props.theme.typography.fontSize}; font-size: ${(props) => props.theme.typography.fontSize};
border-spacing: 0; border-spacing: 0;
width: 100%; width: 100%;

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

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

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

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

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

@ -6,7 +6,7 @@ import styled, { css } from '../styled-components';
import { HistoryService } from '../services'; import { HistoryService } from '../services';
// tslint:disable-next-line // tslint:disable-next-line
export const linkifyMixin = className => css` export const linkifyMixin = (className) => css`
${className} { ${className} {
cursor: pointer; cursor: pointer;
margin-left: -20px; margin-left: -20px;
@ -33,7 +33,7 @@ export const linkifyMixin = className => css`
} }
`; `;
const isModifiedEvent = event => const isModifiedEvent = (event) =>
!!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
export class Link extends React.Component<{ to: string; className?: string; children?: any }> { export class Link extends React.Component<{ to: string; className?: string; children?: any }> {
@ -51,7 +51,7 @@ export class Link extends React.Component<{ to: string; className?: string; chil
render() { render() {
return ( return (
<StoreConsumer> <StoreConsumer>
{store => ( {(store) => (
<a <a
className={this.props.className} className={this.props.className}
href={store!.menu.history.linkForId(this.props.to)} href={store!.menu.history.linkForId(this.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'; import styled, { media } from '../styled-components';
export const MiddlePanel = styled.div<{ compact?: boolean }>` export const MiddlePanel = styled.div<{ compact?: boolean }>`
width: calc(100% - ${props => props.theme.rightPanel.width}); width: calc(100% - ${(props) => props.theme.rightPanel.width});
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; padding: 0 ${(props) => props.theme.spacing.sectionHorizontal}px;
${({ compact, theme }) => ${({ compact, theme }) =>
media.lessThan('medium', true)` 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, [SECTION_ATTR]: props.id,
}))<{ underlined?: boolean }>` }))<{ underlined?: boolean }>`
padding: ${props => props.theme.spacing.sectionVertical}px 0; padding: ${(props) => props.theme.spacing.sectionVertical}px 0;
&:last-child { &:last-child {
min-height: calc(100vh + 1px); min-height: calc(100vh + 1px);
@ -48,20 +48,20 @@ export const Section = styled.div.attrs(props => ({
`; `;
export const RightPanel = styled.div` export const RightPanel = styled.div`
width: ${props => props.theme.rightPanel.width}; width: ${(props) => props.theme.rightPanel.width};
color: ${({ theme }) => theme.rightPanel.textColor}; color: ${({ theme }) => theme.rightPanel.textColor};
background-color: ${props => props.theme.rightPanel.backgroundColor}; background-color: ${(props) => props.theme.rightPanel.backgroundColor};
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; padding: 0 ${(props) => props.theme.spacing.sectionHorizontal}px;
${media.lessThan('medium', true)` ${media.lessThan('medium', true)`
width: 100%; width: 100%;
padding: ${props => padding: ${(props) =>
`${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`}; `${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
`}; `};
`; `;
export const DarkRightPanel = styled(RightPanel)` export const DarkRightPanel = styled(RightPanel)`
background-color: ${props => props.theme.rightPanel.backgroundColor}; background-color: ${(props) => props.theme.rightPanel.backgroundColor};
`; `;
export const Row = styled.div` export const Row = styled.div`

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

@ -46,7 +46,7 @@ export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
this.inst.destroy(); this.inst.destroy();
} }
handleRef = ref => { handleRef = (ref) => {
this._container = ref; this._container = ref;
}; };
@ -73,7 +73,7 @@ export function PerfectScrollbarWrap(
) { ) {
return ( return (
<OptionsContext.Consumer> <OptionsContext.Consumer>
{options => {(options) =>
!options.nativeScrollbars ? ( !options.nativeScrollbars ? (
<PerfectScrollbar {...props}>{props.children}</PerfectScrollbar> <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'))` export const StyledPre = styled(PrismDiv.withComponent('pre'))`
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${(props) => props.theme.typography.code.fontFamily};
font-size: ${props => props.theme.typography.code.fontSize}; font-size: ${(props) => props.theme.typography.code.fontSize};
overflow-x: auto; overflow-x: auto;
margin: 0; margin: 0;

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

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

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

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

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

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

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

@ -21,7 +21,7 @@ export interface ApiInfoProps {
@observer @observer
export class ApiInfo extends React.Component<ApiInfoProps> { export class ApiInfo extends React.Component<ApiInfoProps> {
handleDownloadClick = e => { handleDownloadClick = (e) => {
if (!e.target.href) { if (!e.target.href) {
e.target.href = this.props.store.spec.info.downloadLink; e.target.href = this.props.store.spec.info.downloadLink;
} }

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

@ -13,8 +13,8 @@ export const ApiHeader = styled(H1)`
`; `;
export const DownloadButton = styled.a` export const DownloadButton = styled.a`
border: 1px solid ${props => props.theme.colors.primary.main}; border: 1px solid ${(props) => props.theme.colors.primary.main};
color: ${props => props.theme.colors.primary.main}; color: ${(props) => props.theme.colors.primary.main};
font-weight: normal; font-weight: normal;
margin-left: 0.5em; margin-left: 0.5em;
padding: 4px 8px 4px; 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'; import styled from '../../styled-components';
export const LogoImgEl = styled.img` export const LogoImgEl = styled.img`
max-height: ${props => props.theme.logo.maxHeight}; max-height: ${(props) => props.theme.logo.maxHeight};
max-width: ${props => props.theme.logo.maxWidth}; max-width: ${(props) => props.theme.logo.maxWidth};
padding: ${props => props.theme.logo.gutter}; padding: ${(props) => props.theme.logo.gutter};
width: 100%; width: 100%;
display: block; display: block;
`; `;
@ -17,4 +17,4 @@ const Link = styled.a`
display: inline-block; display: inline-block;
`; `;
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> { export class CallbackPayloadSample extends React.Component<PayloadSampleProps> {
render() { render() {
const payloadSample = this.props.callback.codeSamples.find(sample => const payloadSample = this.props.callback.codeSamples.find((sample) =>
isPayloadSample(sample), isPayloadSample(sample),
) as XPayloadSample | undefined; ) as XPayloadSample | undefined;

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

@ -20,7 +20,7 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
static contextType = OptionsContext; static contextType = OptionsContext;
context: RedocNormalizedOptions; context: RedocNormalizedOptions;
private renderDropdown = props => { private renderDropdown = (props) => {
return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />; return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
}; };
@ -32,10 +32,10 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
} }
const operations = callbacks const operations = callbacks
.map(callback => callback.operations.map(operation => operation)) .map((callback) => callback.operations.map((operation) => operation))
.reduce((a, b) => a.concat(b), []); .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) { if (!hasSamples) {
return null; return null;
@ -59,7 +59,7 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
label={'Callback'} label={'Callback'}
options={dropdownOptions} options={dropdownOptions}
> >
{callback => ( {(callback) => (
<CallbackPayloadSample <CallbackPayloadSample
key="callbackPayloadSample" key="callbackPayloadSample"
callback={callback} callback={callback}
@ -75,5 +75,5 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
export const SamplesWrapper = styled.div` export const SamplesWrapper = styled.div`
background: ${({ theme }) => theme.codeBlock.backgroundColor}; 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 ( return (
<div> <div>
<CallbacksHeader> Callbacks </CallbacksHeader> <CallbacksHeader> Callbacks </CallbacksHeader>
{callbacks.map(callback => { {callbacks.map((callback) => {
return callback.operations.map((operation, index) => { return callback.operations.map((operation, index) => {
return ( return (
<CallbackOperation key={`${callback.name}_${index}`} callbackOperation={operation} /> <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) { if (items.length === 0) {
return null; return null;
} }
return items.map(item => { return items.map((item) => {
return <ContentItem key={item.id} item={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 @observer
export class SectionItem extends React.Component<ContentItemProps> { export class SectionItem extends React.Component<ContentItemProps> {

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 // TODO: highlight server variables, e.g. https://{user}.test.com
return ( return (
<OptionsContext.Consumer> <OptionsContext.Consumer>
{options => ( {(options) => (
<OperationEndpointWrap> <OperationEndpointWrap>
<EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}> <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
<HttpVerb type={operation.httpVerb} compact={this.props.compact}> <HttpVerb type={operation.httpVerb} compact={this.props.compact}>
@ -63,7 +63,7 @@ export class Endpoint extends React.Component<EndpointProps, EndpointState> {
/> />
</EndpointInfo> </EndpointInfo>
<ServersOverlay expanded={expanded} aria-hidden={!expanded}> <ServersOverlay expanded={expanded} aria-hidden={!expanded}>
{operation.servers.map(server => { {operation.servers.map((server) => {
const normalizedUrl = options.expandDefaultServerVariables const normalizedUrl = options.expandDefaultServerVariables
? expandDefaultServerVariables(server.url, server.variables) ? expandDefaultServerVariables(server.url, server.variables)
: server.url; : 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` export const ServerRelativeURL = styled.span`
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${(props) => props.theme.typography.code.fontFamily};
margin-left: 10px; margin-left: 10px;
flex: 1; flex: 1;
overflow-x: hidden; overflow-x: hidden;
@ -20,22 +20,22 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole
width: 100%; width: 100%;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; padding: 10px 30px 10px ${(props) => (props.inverted ? '10px' : '20px')};
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; border-radius: ${(props) => (props.inverted ? '0' : '4px 4px 0 0')};
background-color: ${props => background-color: ${(props) =>
props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor}; props.inverted ? 'transparent' : props.theme.codeBlock.backgroundColor};
display: flex; display: flex;
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
border: ${props => (props.inverted ? '0' : '1px solid transparent')}; border: ${(props) => (props.inverted ? '0' : '1px solid transparent')};
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')}; border-bottom: ${(props) => (props.inverted ? '1px solid #ccc' : '0')};
transition: border-color 0.25s ease; transition: border-color 0.25s ease;
${props => ${(props) =>
(props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''} (props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
.${ServerRelativeURL} { .${ServerRelativeURL} {
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')} color: ${(props) => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
} }
&:focus { &:focus {
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25); 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 }) => ({ export const HttpVerb = styled.span.attrs((props: { type: string; compact?: boolean }) => ({
className: `http-verb ${props.type}`, className: `http-verb ${props.type}`,
}))<{ type: string; compact?: boolean }>` }))<{ type: string; compact?: boolean }>`
font-size: ${props => (props.compact ? '0.8em' : '0.929em')}; font-size: ${(props) => (props.compact ? '0.8em' : '0.929em')};
line-height: ${props => (props.compact ? '18px' : '20px')}; line-height: ${(props) => (props.compact ? '18px' : '20px')};
background-color: ${props => props.theme.colors.http[props.type] || '#999999'}; background-color: ${(props) => props.theme.colors.http[props.type] || '#999999'};
color: #ffffff; color: #ffffff;
padding: ${props => (props.compact ? '2px 8px' : '3px 10px')}; padding: ${(props) => (props.compact ? '2px 8px' : '3px 10px')};
text-transform: uppercase; text-transform: uppercase;
font-family: ${props => props.theme.typography.headings.fontFamily}; font-family: ${(props) => props.theme.typography.headings.fontFamily};
margin: 0; margin: 0;
`; `;
@ -68,7 +68,7 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>`
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
transition: all 0.25s ease; transition: all 0.25s ease;
visibility: hidden; 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` export const ServerItem = styled.div`
@ -80,8 +80,8 @@ export const ServerUrl = styled.div`
border: 1px solid #ccc; border: 1px solid #ccc;
background: #fff; background: #fff;
word-break: break-all; word-break: break-all;
color: ${props => props.theme.colors.primary.main}; color: ${(props) => props.theme.colors.primary.main};
> span { > 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` const ToggleButton = styled.span`
color: ${props => props.theme.colors.primary.main}; color: ${(props) => props.theme.colors.primary.main};
vertical-align: middle; vertical-align: middle;
font-size: 13px; font-size: 13px;
line-height: 20px; 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; const exts = this.props.extensions;
return ( return (
<OptionsContext.Consumer> <OptionsContext.Consumer>
{options => ( {(options) => (
<> <>
{options.showExtensions && {options.showExtensions &&
Object.keys(exts).map(key => ( Object.keys(exts).map((key) => (
<Extension key={key}> <Extension key={key}>
<FieldLabel> {key.substring(2)}: </FieldLabel>{' '} <FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
<ExtensionValue> <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') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
this.toggle(); this.toggle();

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

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

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

@ -34,11 +34,11 @@ class Json extends React.PureComponent<JsonProps> {
<button onClick={this.collapseAll}> Collapse all </button> <button onClick={this.collapseAll}> Collapse all </button>
</SampleControls> </SampleControls>
<OptionsContext.Consumer> <OptionsContext.Consumer>
{options => ( {(options) => (
<PrismDiv <PrismDiv
className={this.props.className} className={this.props.className}
// tslint:disable-next-line // tslint:disable-next-line
ref={node => (this.node = node!)} ref={(node) => (this.node = node!)}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel), __html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
}} }}

4
src/components/JsonViewer/style.ts
View File

@ -5,8 +5,8 @@ export const jsonStyles = css`
display: none; display: none;
} }
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${(props) => props.theme.typography.code.fontFamily};
font-size: ${props => props.theme.typography.code.fontSize}; font-size: ${(props) => props.theme.typography.code.fontSize};
white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')}; white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
contain: content; contain: content;

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

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

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

@ -31,6 +31,6 @@ export const Spinner = styled(_Spinner)`
margin-left: -25px; margin-left: -25px;
path { 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() { render() {
return ( return (
<OptionsConsumer> <OptionsConsumer>
{options => ( {(options) => (
<StoreConsumer>{store => this.renderWithOptionsAndStore(options, store)}</StoreConsumer> <StoreConsumer>{(store) => this.renderWithOptionsAndStore(options, store)}</StoreConsumer>
)} )}
</OptionsConsumer> </OptionsConsumer>
); );
} }
renderWithOptionsAndStore(options: RedocNormalizedOptions, store?: AppStore) { renderWithOptionsAndStore(options: RedocNormalizedOptions, store?: AppStore) {
const { source, htmlWrap = i => i } = this.props; const { source, htmlWrap = (i) => i } = this.props;
if (!store) { if (!store) {
throw new Error('When using components in markdown, store prop must be provided'); 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 ( return (
<OptionsConsumer> <OptionsConsumer>
{options => ( {(options) => (
<Wrap <Wrap
className={'redoc-markdown ' + (props.className || '')} className={'redoc-markdown ' + (props.className || '')}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{

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

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

9
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> { export class Parameters extends React.PureComponent<ParametersProps> {
orderParams(params: FieldModel[]): Record<string, FieldModel[]> { orderParams(params: FieldModel[]): Record<string, FieldModel[]> {
const res = {}; const res = {};
params.forEach(param => { params.forEach((param) => {
safePush(res, param.in, param); safePush(res, param.in, param);
}); });
return res; return res;
@ -50,7 +50,7 @@ export class Parameters extends React.PureComponent<ParametersProps> {
return ( return (
<> <>
{paramsPlaces.map(place => ( {paramsPlaces.map((place) => (
<ParametersGroup key={place} place={place} parameters={paramsMap[place]} /> <ParametersGroup key={place} place={place} parameters={paramsMap[place]} />
))} ))}
{bodyContent && <BodyContent content={bodyContent} description={bodyDescription} />} {bodyContent && <BodyContent content={bodyContent} description={bodyDescription} />}
@ -67,7 +67,10 @@ function DropdownWithinHeader(props) {
); );
} }
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 { content, description } = props;
return ( return (
<MediaTypesSwitch content={content} renderDropdown={DropdownWithinHeader}> <MediaTypesSwitch content={content} renderDropdown={DropdownWithinHeader}>

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

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

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

@ -71,7 +71,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
`; `;
export const NoSampleLabel = styled.div` export const NoSampleLabel = styled.div`
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${(props) => props.theme.typography.code.fontFamily};
font-size: 12px; font-size: 12px;
color: #ee807f; color: #ee807f;
`; `;

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

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

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

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

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

@ -16,7 +16,7 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
render() { render() {
const { operation } = this.props; const { operation } = this.props;
const responses = operation.responses.filter(response => { const responses = operation.responses.filter((response) => {
return response.content && response.content.hasSample; return response.content && response.content.hasSample;
}); });
@ -27,13 +27,13 @@ export class ResponseSamples extends React.Component<ResponseSamplesProps> {
<Tabs defaultIndex={0}> <Tabs defaultIndex={0}>
<TabList> <TabList>
{responses.map(response => ( {responses.map((response) => (
<Tab className={'tab-' + response.type} key={response.code}> <Tab className={'tab-' + response.type} key={response.code}>
{response.code} {response.code}
</Tab> </Tab>
))} ))}
</TabList> </TabList>
{responses.map(response => ( {responses.map((response) => (
<TabPanel key={response.code}> <TabPanel key={response.code}>
<div> <div>
<PayloadSamples content={response.content!} /> <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() { render() {
const { headers, type, summary, description, code, expanded, content } = this.props.response; const { headers, type, summary, description, code, expanded, content } = this.props.response;
const mimes = 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; const empty = headers.length === 0 && mimes.length === 0 && !description;

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

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

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

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

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

@ -4,7 +4,7 @@ import { Schema, SchemaProps } from './Schema';
import { ArrayClosingLabel, ArrayOpenningLabel } from '../../common-elements'; import { ArrayClosingLabel, ArrayOpenningLabel } from '../../common-elements';
import styled from '../../styled-components'; import styled from '../../styled-components';
import {humanizeConstraints} from "../../utils"; import { humanizeConstraints } from '../../utils';
const PaddedSchema = styled.div` const PaddedSchema = styled.div`
padding-left: ${({ theme }) => theme.spacing.unit * 2}px; padding-left: ${({ theme }) => theme.spacing.unit * 2}px;
@ -18,7 +18,9 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
max: number | undefined = undefined, max: number | undefined = undefined,
) => ({ type: 'array', minItems: min, maxItems: max }); ) => ({ type: 'array', minItems: min, maxItems: max });
const minMaxItems = humanizeConstraints(itemConstraintSchema(itemsSchema.schema.minItems, itemsSchema.schema.maxItems)); const minMaxItems = humanizeConstraints(
itemConstraintSchema(itemsSchema.schema.minItems, itemsSchema.schema.maxItems),
);
return ( return (
<div> <div>

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 needFilter = this.props.skipReadOnly || this.props.skipWriteOnly;
const filteredFields = needFilter const filteredFields = needFilter
? fields.filter(item => { ? fields.filter((item) => {
return !( return !(
(this.props.skipReadOnly && item.schema.readOnly) || (this.props.skipReadOnly && item.schema.readOnly) ||
(this.props.skipWriteOnly && item.schema.writeOnly) (this.props.skipWriteOnly && item.schema.writeOnly)

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

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

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

@ -102,7 +102,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
@bind @bind
@debounce(400) @debounce(400)
searchCallback(searchTerm: string) { searchCallback(searchTerm: string) {
this.props.search.search(searchTerm).then(res => { this.props.search.search(searchTerm).then((res) => {
this.setResults(res, searchTerm); this.setResults(res, searchTerm);
}); });
} }
@ -124,7 +124,7 @@ export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxStat
render() { render() {
const { activeItemIdx } = this.state; const { activeItemIdx } = this.state;
const results = this.state.results.map(res => ({ const results = this.state.results.map((res) => ({
item: this.props.getItemById(res.meta)!, item: this.props.getItemById(res.meta)!,
score: res.score, 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(() => ({ export const SearchInput = styled.input.attrs(() => ({
className: 'search-input', 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; box-sizing: border-box;
margin: 0 ${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 padding: 5px ${(props) => props.theme.spacing.unit * 2}px 5px
${props => props.theme.spacing.unit * 4}px; ${(props) => props.theme.spacing.unit * 4}px;
border: 0; border: 0;
border-bottom: 1px solid border-bottom: 1px solid
${({ theme }) => ${({ theme }) =>
@ -26,7 +26,7 @@ export const SearchInput = styled.input.attrs(() => ({
font-family: ${({ theme }) => theme.typography.fontFamily}; font-family: ${({ theme }) => theme.typography.fontFamily};
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
color: ${props => props.theme.sidebar.textColor}; color: ${(props) => props.theme.sidebar.textColor};
background-color: transparent; background-color: transparent;
outline: none; outline: none;
`; `;
@ -46,19 +46,19 @@ export const SearchIcon = styled((props: { className?: string }) => (
className: 'search-icon', className: 'search-icon',
})` })`
position: absolute; position: absolute;
left: ${props => props.theme.spacing.unit * 4}px; left: ${(props) => props.theme.spacing.unit * 4}px;
height: 1.8em; height: 1.8em;
width: 0.9em; width: 0.9em;
path { path {
fill: ${props => props.theme.sidebar.textColor}; fill: ${(props) => props.theme.sidebar.textColor};
} }
`; `;
export const SearchResultsBox = styled.div` 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)}}; background-color: ${({ theme }) => darken(0.05, theme.sidebar.backgroundColor)}};
color: ${props => props.theme.sidebar.textColor}; color: ${(props) => props.theme.sidebar.textColor};
min-height: 150px; min-height: 150px;
max-height: 250px; max-height: 250px;
border-top: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)}}; border-top: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)}};
@ -85,9 +85,9 @@ export const SearchResultsBox = styled.div`
export const ClearIcon = styled.i` export const ClearIcon = styled.i`
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: ${props => props.theme.spacing.unit * 2}px; width: ${(props) => props.theme.spacing.unit * 2}px;
text-align: center; text-align: center;
right: ${props => props.theme.spacing.unit * 4}px; right: ${(props) => props.theme.spacing.unit * 4}px;
line-height: 2em; line-height: 2em;
vertical-align: middle; vertical-align: middle;
margin-right: 2px; margin-right: 2px;

10
src/components/SecurityRequirement/SecurityRequirement.tsx
View File

@ -8,8 +8,8 @@ import { SecurityRequirementModel } from '../../services/models/SecurityRequirem
import { linksCss } from '../Markdown/styled.elements'; import { linksCss } from '../Markdown/styled.elements';
const ScopeName = styled.code` const ScopeName = styled.code`
font-size: ${props => props.theme.typography.code.fontSize}; font-size: ${(props) => props.theme.typography.code.fontSize};
font-family: ${props => props.theme.typography.code.fontFamily}; font-family: ${(props) => props.theme.typography.code.fontFamily};
border: 1px solid ${({ theme }) => theme.colors.border.dark}; border: 1px solid ${({ theme }) => theme.colors.border.dark};
margin: 0 3px; margin: 0 3px;
padding: 0.2em; padding: 0.2em;
@ -67,12 +67,12 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
const security = this.props.security; const security = this.props.security;
return ( return (
<SecurityRequirementOrWrap> <SecurityRequirementOrWrap>
{security.schemes.map(scheme => { {security.schemes.map((scheme) => {
return ( return (
<SecurityRequirementAndWrap key={scheme.id}> <SecurityRequirementAndWrap key={scheme.id}>
<Link to={scheme.sectionId}>{scheme.id}</Link> <Link to={scheme.sectionId}>{scheme.id}</Link>
{scheme.scopes.length > 0 && ' ('} {scheme.scopes.length > 0 && ' ('}
{scheme.scopes.map(scope => ( {scheme.scopes.map((scope) => (
<ScopeName key={scope}>{scope}</ScopeName> <ScopeName key={scope}>{scope}</ScopeName>
))} ))}
{scheme.scopes.length > 0 && ') '} {scheme.scopes.length > 0 && ') '}
@ -89,7 +89,7 @@ const AuthHeaderColumn = styled.div`
`; `;
const SecuritiesColumn = styled.div` const SecuritiesColumn = styled.div`
width: ${props => props.theme.schema.defaultDetailsWidth}; width: ${(props) => props.theme.schema.defaultDetailsWidth};
`; `;
const AuthHeader = styled(UnderlinedHeader)` const AuthHeader = styled(UnderlinedHeader)`

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

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

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

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

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

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

2
src/services/AppStore.ts
View File

@ -89,7 +89,7 @@ export class AppStore {
this.search.indexItems(this.menu.items); 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); this.updateMarkOnMenu(change.newValue as number);
}); });
} }

5
src/services/MarkdownRenderer.ts
View File

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

4
src/services/MarkerService.ts
View File

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

4
src/services/MenuBuilder.ts
View File

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

6
src/services/MenuStore.ts
View File

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

6
src/services/OpenAPIParser.ts
View File

@ -234,7 +234,7 @@ export class OpenAPIParser {
schema: subMerged, schema: subMerged,
}; };
}) })
.filter(child => child !== undefined) as Array<{ .filter((child) => child !== undefined) as Array<{
$ref: string | undefined; $ref: string | undefined;
schema: MergedOpenAPISchema; schema: MergedOpenAPISchema;
}>; }>;
@ -311,7 +311,7 @@ export class OpenAPIParser {
const def = this.deref(schemas[defName]); const def = this.deref(schemas[defName]);
if ( if (
def.allOf !== undefined && def.allOf !== undefined &&
def.allOf.find(obj => obj.$ref !== undefined && $refs.indexOf(obj.$ref) > -1) def.allOf.find((obj) => obj.$ref !== undefined && $refs.indexOf(obj.$ref) > -1)
) { ) {
res['#/components/schemas/' + defName] = [def['x-discriminator-value'] || defName]; res['#/components/schemas/' + defName] = [def['x-discriminator-value'] || defName];
} }
@ -337,7 +337,7 @@ export class OpenAPIParser {
const beforeAllOf = allOf.slice(0, i); const beforeAllOf = allOf.slice(0, i);
const afterAllOf = allOf.slice(i + 1); const afterAllOf = allOf.slice(i + 1);
return { return {
oneOf: sub.oneOf.map(part => { oneOf: sub.oneOf.map((part) => {
const merged = this.mergeAllOf({ const merged = this.mergeAllOf({
allOf: [...beforeAllOf, part, ...afterAllOf], allOf: [...beforeAllOf, part, ...afterAllOf],
}); });

4
src/services/RedocNormalizedOptions.ts
View File

@ -250,7 +250,9 @@ export class RedocNormalizedOptions {
this.expandDefaultServerVariables = argValueToBoolean(raw.expandDefaultServerVariables); this.expandDefaultServerVariables = argValueToBoolean(raw.expandDefaultServerVariables);
this.maxDisplayedEnumValues = argValueToNumber(raw.maxDisplayedEnumValues); this.maxDisplayedEnumValues = argValueToNumber(raw.maxDisplayedEnumValues);
const ignoreNamedSchemas = Array.isArray(raw.ignoreNamedSchemas) ? raw.ignoreNamedSchemas : raw.ignoreNamedSchemas?.split(',').map(s => s.trim()); const ignoreNamedSchemas = Array.isArray(raw.ignoreNamedSchemas)
? raw.ignoreNamedSchemas
: raw.ignoreNamedSchemas?.split(',').map((s) => s.trim());
this.ignoreNamedSchemas = new Set(ignoreNamedSchemas); this.ignoreNamedSchemas = new Set(ignoreNamedSchemas);
} }
} }

6
src/services/SearchStore.ts
View File

@ -23,8 +23,8 @@ export class SearchStore<T> {
searchWorker = getWorker(); searchWorker = getWorker();
indexItems(groups: Array<IMenuItem | OperationModel>) { indexItems(groups: Array<IMenuItem | OperationModel>) {
const recurse = items => { const recurse = (items) => {
items.forEach(group => { items.forEach((group) => {
if (group.type !== 'group') { if (group.type !== 'group') {
this.add(group.name, group.description || '', group.id); this.add(group.name, group.description || '', group.id);
} }
@ -59,7 +59,7 @@ export class SearchStore<T> {
fromExternalJS(path?: string, exportName?: string) { fromExternalJS(path?: string, exportName?: string) {
if (path && exportName) { 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); builder.pipeline.add(lunr.trimmer, lunr.stopWordFilter, lunr.stemmer);
index = new Promise(resolve => { index = new Promise((resolve) => {
resolveIndex = resolve; resolveIndex = resolve;
}); });
} }
initEmpty(); 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) { export function add<T>(title: string, description: string, meta?: T) {
const ref = store.push(meta) - 1; const ref = store.push(meta) - 1;
@ -104,11 +104,11 @@ export async function search<Meta = string>(
return []; return [];
} }
let searchResults = (await index).query(t => { let searchResults = (await index).query((t) => {
q.trim() q.trim()
.toLowerCase() .toLowerCase()
.split(/\s+/) .split(/\s+/)
.forEach(term => { .forEach((term) => {
if (term.length === 1) return; if (term.length === 1) return;
const exp = expandTerm(term); const exp = expandTerm(term);
t.term(exp, {}); t.term(exp, {});
@ -119,5 +119,5 @@ export async function search<Meta = string>(
searchResults = searchResults.slice(0, limit); 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 }));
} }

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

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

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

@ -29,7 +29,7 @@ export class MediaContentModel {
if (options.unstable_ignoreMimeParameters) { if (options.unstable_ignoreMimeParameters) {
info = mergeSimilarMediaTypes(info); info = mergeSimilarMediaTypes(info);
} }
this.mediaTypes = Object.keys(info).map(name => { this.mediaTypes = Object.keys(info).map((name) => {
const mime = info[name]; const mime = info[name];
// reset deref cache just in case something is left there // reset deref cache just in case something is left there
parser.resetVisited(); parser.resetVisited();
@ -52,6 +52,6 @@ export class MediaContentModel {
} }
get hasSample(): boolean { 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

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

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

@ -47,7 +47,7 @@ export class ResponseModel {
const headers = info.headers; const headers = info.headers;
if (headers !== undefined) { if (headers !== undefined) {
this.headers = Object.keys(headers).map(name => { this.headers = Object.keys(headers).map((name) => {
const header = headers[name]; const header = headers[name];
return new FieldModel(parser, { ...header, name }, '', options); return new FieldModel(parser, { ...header, name }, '', options);
}); });

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

@ -15,7 +15,7 @@ export class SecurityRequirementModel {
const schemes = (parser.spec.components && parser.spec.components.securitySchemes) || {}; const schemes = (parser.spec.components && parser.spec.components.securitySchemes) || {};
this.schemes = Object.keys(requirement || {}) this.schemes = Object.keys(requirement || {})
.map(id => { .map((id) => {
const scheme = parser.deref(schemes[id]); const scheme = parser.deref(schemes[id]);
const scopes = requirement[id] || []; const scopes = requirement[id] || [];
@ -31,6 +31,6 @@ export class SecurityRequirementModel {
scopes, 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) { constructor(parser: OpenAPIParser) {
const schemes = (parser.spec.components && parser.spec.components.securitySchemes) || {}; const schemes = (parser.spec.components && parser.spec.components.securitySchemes) || {};
this.schemes = Object.keys(schemes).map( this.schemes = Object.keys(schemes).map(
name => new SecuritySchemeModel(parser, name, schemes[name]), (name) => new SecuritySchemeModel(parser, name, schemes[name]),
); );
} }
} }

12
src/styled-components.ts
View File

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

16
src/theme.ts
View File

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

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

@ -134,9 +134,9 @@ describe('Utils', () => {
object: ['maxProperties', 'minProperties', 'required', 'additionalProperties', 'properties'], 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`, () => { it(`Should detect ${name} if ${name} properties are present`, () => {
tests[name].forEach(propName => { tests[name].forEach((propName) => {
expect( expect(
detectType({ detectType({
[propName]: 0, [propName]: 0,
@ -569,11 +569,11 @@ describe('Utils', () => {
}, },
]; ];
testCases.forEach(locationTestGroup => { testCases.forEach((locationTestGroup) => {
describe(locationTestGroup.description, () => { describe(locationTestGroup.description, () => {
locationTestGroup.cases.forEach(valueTypeTestGroup => { locationTestGroup.cases.forEach((valueTypeTestGroup) => {
describe(valueTypeTestGroup.description, () => { 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}`, () => { it(`should serialize correctly when style is ${testCase.style} and explode is ${testCase.explode}`, () => {
const parameter: OpenAPIParameter = { const parameter: OpenAPIParameter = {
name: locationTestGroup.name, name: locationTestGroup.name,

2
src/utils/decorators.ts
View File

@ -12,7 +12,7 @@ function throttle(func, wait) {
context = args = null; context = args = null;
} }
}; };
return function() { return function () {
const now = new Date().getTime(); const now = new Date().getTime();
const remaining = wait - (now - previous); const remaining = wait - (now - previous);
context = this; 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 { export function html2Str(html: string): string {
return html return html
.split(/<[^>]+>/) .split(/<[^>]+>/)
.map(chunk => { .map((chunk) => {
return chunk.trim(); return chunk.trim();
}) })
.filter(trimmedChunk => { .filter((trimmedChunk) => {
return trimmedChunk.length > 0; return trimmedChunk.length > 0;
}) })
.join(' '); .join(' ');
@ -27,7 +27,7 @@ export function html2Str(html: string): string {
// scrollIntoViewIfNeeded polyfill // scrollIntoViewIfNeeded polyfill
if (typeof Element !== 'undefined' && !(Element as any).prototype.scrollIntoViewIfNeeded) { 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; centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
const parent = this.parentNode; const parent = this.parentNode;

26
src/utils/openapi.ts
View File

@ -140,10 +140,10 @@ export function isFormUrlEncoded(contentType: string): boolean {
function delimitedEncodeField(fieldVal: any, fieldName: string, delimiter: string): string { function delimitedEncodeField(fieldVal: any, fieldName: string, delimiter: string): string {
if (Array.isArray(fieldVal)) { 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') { } else if (typeof fieldVal === 'object') {
return Object.keys(fieldVal) return Object.keys(fieldVal)
.map(k => `${k}${delimiter}${fieldVal[k]}`) .map((k) => `${k}${delimiter}${fieldVal[k]}`)
.join(delimiter); .join(delimiter);
} else { } else {
return fieldName + '=' + fieldVal.toString(); return fieldName + '=' + fieldVal.toString();
@ -156,7 +156,7 @@ function deepObjectEncodeField(fieldVal: any, fieldName: string): string {
return ''; return '';
} else if (typeof fieldVal === 'object') { } else if (typeof fieldVal === 'object') {
return Object.keys(fieldVal) return Object.keys(fieldVal)
.map(k => `${fieldName}[${k}]=${fieldVal[k]}`) .map((k) => `${fieldName}[${k}]=${fieldVal[k]}`)
.join('&'); .join('&');
} else { } else {
console.warn('deepObject style cannot be used with non-object value:' + fieldVal.toString()); console.warn('deepObject style cannot be used with non-object value:' + fieldVal.toString());
@ -188,7 +188,7 @@ export function urlFormEncodePayload(
throw new Error('Payload must have fields: ' + payload.toString()); throw new Error('Payload must have fields: ' + payload.toString());
} else { } else {
return Object.keys(payload) return Object.keys(payload)
.map(fieldName => { .map((fieldName) => {
const fieldVal = payload[fieldName]; const fieldVal = payload[fieldName];
const { style = 'form', explode = true } = encoding[fieldName] || {}; const { style = 'form', explode = true } = encoding[fieldName] || {};
switch (style) { switch (style) {
@ -372,7 +372,7 @@ export function isNamedDefinition(pointer?: string): boolean {
export function getDefinitionName(pointer?: string): string | undefined { export function getDefinitionName(pointer?: string): string | undefined {
if (!pointer) return undefined; if (!pointer) return undefined;
const match = pointer.match(/^#\/components\/schemas\/([^\/]+)$/); const match = pointer.match(/^#\/components\/schemas\/([^\/]+)$/);
return match === null ? undefined : match[1] return match === null ? undefined : match[1];
} }
function humanizeMultipleOfConstraint(multipleOf: number | undefined): string | undefined { function humanizeMultipleOfConstraint(multipleOf: number | undefined): string | undefined {
@ -456,7 +456,7 @@ export function sortByRequired(fields: FieldModel[], order: string[] = []) {
const orderedFields: FieldModel[] = []; const orderedFields: FieldModel[] = [];
const unorderedFields: FieldModel[] = []; const unorderedFields: FieldModel[] = [];
fields.forEach(field => { fields.forEach((field) => {
if (field.required) { if (field.required) {
order.includes(field.name) ? orderedFields.push(field) : unorderedFields.push(field); order.includes(field.name) ? orderedFields.push(field) : unorderedFields.push(field);
} else { } else {
@ -484,13 +484,13 @@ export function mergeParams(
operationParams: Array<Referenced<OpenAPIParameter>> = [], operationParams: Array<Referenced<OpenAPIParameter>> = [],
): Array<Referenced<OpenAPIParameter>> { ): Array<Referenced<OpenAPIParameter>> {
const operationParamNames = {}; const operationParamNames = {};
operationParams.forEach(param => { operationParams.forEach((param) => {
param = parser.shalowDeref(param); param = parser.shalowDeref(param);
operationParamNames[param.name + '_' + param.in] = true; operationParamNames[param.name + '_' + param.in] = true;
}); });
// filter out path params overridden by operation ones with the same name // filter out path params overridden by operation ones with the same name
pathParams = pathParams.filter(param => { pathParams = pathParams.filter((param) => {
param = parser.shalowDeref(param); param = parser.shalowDeref(param);
return !operationParamNames[param.name + '_' + param.in]; return !operationParamNames[param.name + '_' + param.in];
}); });
@ -502,7 +502,7 @@ export function mergeSimilarMediaTypes(
types: Record<string, OpenAPIMediaType>, types: Record<string, OpenAPIMediaType>,
): Record<string, OpenAPIMediaType> { ): Record<string, OpenAPIMediaType> {
const mergedTypes = {}; const mergedTypes = {};
Object.keys(types).forEach(name => { Object.keys(types).forEach((name) => {
const mime = types[name]; const mime = types[name];
// ignore content type parameters (e.g. charset) and merge // ignore content type parameters (e.g. charset) and merge
const normalizedMimeName = name.split(';')[0].trim(); const normalizedMimeName = name.split(';')[0].trim();
@ -550,7 +550,7 @@ export function normalizeServers(
return resolveUrl(baseUrl, url); return resolveUrl(baseUrl, url);
} }
return servers.map(server => { return servers.map((server) => {
return { return {
...server, ...server,
url: normalizeUrl(server.url), url: normalizeUrl(server.url),
@ -568,7 +568,7 @@ export function setSecuritySchemePrefix(prefix: string) {
SECURITY_SCHEMES_SECTION_PREFIX = prefix; SECURITY_SCHEMES_SECTION_PREFIX = prefix;
} }
export const shortenHTTPVerb = verb => export const shortenHTTPVerb = (verb) =>
({ ({
delete: 'del', delete: 'del',
options: 'opts', options: 'opts',
@ -599,7 +599,7 @@ export function extractExtensions(
showExtensions: string[] | true, showExtensions: string[] | true,
): Record<string, any> { ): Record<string, any> {
return Object.keys(obj) return Object.keys(obj)
.filter(key => { .filter((key) => {
if (showExtensions === true) { if (showExtensions === true) {
return key.startsWith('x-') && !isRedocExtension(key); return key.startsWith('x-') && !isRedocExtension(key);
} }
@ -614,6 +614,6 @@ export function extractExtensions(
export function pluralizeType(displayType: string): string { export function pluralizeType(displayType: string): string {
return displayType return displayType
.split(' or ') .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 '); .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 { export function filterPropsDeep<T extends object>(component: T, paths: string[]): T {
traverseComponent(component, comp => { traverseComponent(component, (comp) => {
if (comp.props) { if (comp.props) {
for (const path of paths) { for (const path of paths) {
if (has(comp.props, path)) { if (has(comp.props, path)) {