mirror of
https://github.com/Redocly/redoc.git
synced 2025-08-07 13:44:54 +03:00
chore: run prettier for all files
This commit is contained in:
Oleksiy Kachynskyy
parent
f805271d90
commit
ad926e2a84
18
cli/index.ts
18
cli/index.ts
|
|
@ -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',
|
||||
});
|
||||
|
|
@ -75,7 +75,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,
|
||||
|
|
@ -97,7 +97,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',
|
||||
});
|
||||
|
|
@ -209,7 +209,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(pathToSpec);
|
||||
pageHTML = await getPageHTML(spec, pathToSpec, options);
|
||||
|
|
@ -220,18 +220,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...`));
|
||||
}
|
||||
}
|
||||
|
|
@ -360,7 +360,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) {
|
||||
|
|
|
|||
|
|
@ -7,11 +7,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;
|
||||
|
|
@ -29,16 +29,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%
|
||||
);
|
||||
|
|
@ -63,7 +63,7 @@ export const PropertyNameCell = styled(PropertyCell)`
|
|||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
font-family: ${props => props.theme.typography.code.fontFamily};
|
||||
font-family: ${(props) => props.theme.typography.code.fontFamily};
|
||||
|
||||
&.deprecated {
|
||||
${deprecatedCss};
|
||||
|
|
@ -77,7 +77,7 @@ export const PropertyNameCell = styled(PropertyCell)`
|
|||
export const PropertyDetailsCell = styled.td`
|
||||
border-bottom: 1px solid #9fb4be;
|
||||
padding: 10px 0;
|
||||
width: ${props => props.theme.schema.defaultDetailsWidth};
|
||||
width: ${(props) => props.theme.schema.defaultDetailsWidth};
|
||||
box-sizing: border-box;
|
||||
|
||||
tr.expanded & {
|
||||
|
|
@ -86,8 +86,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 {
|
||||
|
|
@ -96,7 +96,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 {
|
||||
|
|
@ -104,7 +104,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;
|
||||
}
|
||||
`;
|
||||
|
|
@ -116,7 +116,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%;
|
||||
|
|
|
|||
|
|
@ -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.2, props.theme.schema.typeNameColor)};
|
||||
color: ${(props) => transparentize(0.2, 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;
|
||||
|
|
|
|||
|
|
@ -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]};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import styled, { css } from '../styled-components';
|
|||
import { HistoryService } from '../services';
|
||||
|
||||
// tslint:disable-next-line
|
||||
export const linkifyMixin = className => css`
|
||||
export const linkifyMixin = (className) => css`
|
||||
${className} {
|
||||
cursor: pointer;
|
||||
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);
|
||||
|
||||
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() {
|
||||
return (
|
||||
<StoreConsumer>
|
||||
{store => (
|
||||
{(store) => (
|
||||
<a
|
||||
className={this.props.className}
|
||||
href={store!.menu.history.linkForId(this.props.to)}
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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: ']';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,15 +35,15 @@ 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: ${props =>
|
||||
fill: ${(props) =>
|
||||
(props.color && props.theme.colors[props.color] && props.theme.colors[props.color].main) ||
|
||||
props.color};
|
||||
}
|
||||
|
|
@ -53,9 +53,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;
|
||||
|
|
|
|||
|
|
@ -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.color};
|
||||
color: ${(props) => props.theme.colors.responses.success.color};
|
||||
}
|
||||
|
||||
&.tab-redirect {
|
||||
color: ${props => props.theme.colors.responses.redirect.color};
|
||||
color: ${(props) => props.theme.colors.responses.redirect.color};
|
||||
}
|
||||
|
||||
&.tab-info {
|
||||
color: ${props => props.theme.colors.responses.info.color};
|
||||
color: ${(props) => props.theme.colors.responses.info.color};
|
||||
}
|
||||
|
||||
&.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};
|
||||
& > 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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`;
|
||||
|
|
@ -17,4 +17,4 @@ const Link = styled.a`
|
|||
display: inline-block;
|
||||
`;
|
||||
|
||||
export const LinkWrap = url => Component => <Link href={url}>{Component}</Link>;
|
||||
export const LinkWrap = (url) => (Component) => <Link href={url}>{Component}</Link>;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
|
|||
static contextType = OptionsContext;
|
||||
context: RedocNormalizedOptions;
|
||||
|
||||
private renderDropdown = props => {
|
||||
private renderDropdown = (props) => {
|
||||
return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
|
||||
};
|
||||
|
||||
|
|
@ -32,10 +32,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;
|
||||
|
|
@ -59,7 +59,7 @@ export class CallbackSamples extends React.Component<CallbackSamplesProps> {
|
|||
label={'Callback'}
|
||||
options={dropdownOptions}
|
||||
>
|
||||
{callback => (
|
||||
{(callback) => (
|
||||
<CallbackPayloadSample
|
||||
key="callbackPayloadSample"
|
||||
callback={callback}
|
||||
|
|
@ -75,5 +75,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;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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> {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export class Field extends React.Component<FieldProps> {
|
|||
}
|
||||
};
|
||||
|
||||
handleKeyPress = e => {
|
||||
handleKeyPress = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -34,11 +34,11 @@ class Json extends React.PureComponent<JsonProps> {
|
|||
<button onClick={this.collapseAll}> Collapse all </button>
|
||||
</SampleControls>
|
||||
<OptionsContext.Consumer>
|
||||
{options => (
|
||||
{(options) => (
|
||||
<PrismDiv
|
||||
className={this.props.className}
|
||||
// tslint:disable-next-line
|
||||
ref={node => (this.node = node!)}
|
||||
ref={(node) => (this.node = node!)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: jsonToHTML(this.props.data, options.jsonSampleExpandLevel),
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ export const jsonStyles = css`
|
|||
display: none;
|
||||
}
|
||||
|
||||
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};
|
||||
|
||||
white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
|
||||
contain: content;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,6 @@ export const Spinner = styled(_Spinner)`
|
|||
margin-left: -25px;
|
||||
|
||||
path {
|
||||
fill: ${props => props.color};
|
||||
fill: ${(props) => props.color};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export function SanitizedMarkdownHTML(
|
|||
|
||||
return (
|
||||
<OptionsConsumer>
|
||||
{options => (
|
||||
{(options) => (
|
||||
<Wrap
|
||||
className={'redoc-markdown ' + (props.className || '')}
|
||||
dangerouslySetInnerHTML={{
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -27,9 +27,9 @@ export const StyledMarkdownBlock = styled(
|
|||
>,
|
||||
)`
|
||||
|
||||
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 +56,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};
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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} />}
|
||||
|
|
@ -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;
|
||||
return (
|
||||
<MediaTypesSwitch content={content} renderDropdown={DropdownWithinHeader}>
|
||||
|
|
|
|||
|
|
@ -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,7 @@ export class PayloadSamples extends React.Component<PayloadSamplesProps> {
|
|||
);
|
||||
}
|
||||
|
||||
private renderDropdown = props => {
|
||||
private renderDropdown = (props) => {
|
||||
return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
|
|||
`;
|
||||
|
||||
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;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
`};
|
||||
|
|
|
|||
|
|
@ -30,13 +30,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>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,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;
|
||||
});
|
||||
|
||||
|
|
@ -27,13 +27,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!} />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export class ResponseDetails extends React.PureComponent<{ response: ResponseMod
|
|||
);
|
||||
}
|
||||
|
||||
private renderDropdown = props => {
|
||||
private renderDropdown = (props) => {
|
||||
return (
|
||||
<UnderlinedHeader key="header">
|
||||
Response Schema: <DropdownOrLabel {...props} />
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export class ResponsesList extends React.PureComponent<ResponseListProps> {
|
|||
return (
|
||||
<div>
|
||||
<ResponsesHeader>{isCallback ? 'Callback responses' : 'Responses'}</ResponsesHeader>
|
||||
{responses.map(response => {
|
||||
{responses.map((response) => {
|
||||
return <ResponseView key={response.code} response={response} />;
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Schema, SchemaProps } from './Schema';
|
|||
|
||||
import { ArrayClosingLabel, ArrayOpenningLabel } from '../../common-elements';
|
||||
import styled from '../../styled-components';
|
||||
import {humanizeConstraints} from "../../utils";
|
||||
import { humanizeConstraints } from '../../utils';
|
||||
|
||||
const PaddedSchema = styled.div`
|
||||
padding-left: ${({ theme }) => theme.spacing.unit * 2}px;
|
||||
|
|
@ -18,7 +18,9 @@ export class ArraySchema extends React.PureComponent<SchemaProps> {
|
|||
max: number | undefined = undefined,
|
||||
) => ({ 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 (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export class SchemaDefinition extends React.PureComponent<ObjectDescriptionProps
|
|||
);
|
||||
}
|
||||
|
||||
private renderDropdown = props => {
|
||||
private renderDropdown = (props) => {
|
||||
return <DropdownOrLabel Label={MimeLabel} Dropdown={InvertedSimpleDropdown} {...props} />;
|
||||
};
|
||||
}
|
||||
|
|
@ -83,7 +83,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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -102,7 +102,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);
|
||||
});
|
||||
}
|
||||
|
|
@ -124,7 +124,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,
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -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)}};
|
||||
|
|
@ -85,9 +85,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;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import { SecurityRequirementModel } from '../../services/models/SecurityRequirem
|
|||
import { linksCss } from '../Markdown/styled.elements';
|
||||
|
||||
const ScopeName = styled.code`
|
||||
font-size: ${props => props.theme.typography.code.fontSize};
|
||||
font-family: ${props => props.theme.typography.code.fontFamily};
|
||||
font-size: ${(props) => props.theme.typography.code.fontSize};
|
||||
font-family: ${(props) => props.theme.typography.code.fontFamily};
|
||||
border: 1px solid ${({ theme }) => theme.colors.border.dark};
|
||||
margin: 0 3px;
|
||||
padding: 0.2em;
|
||||
|
|
@ -67,12 +67,12 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
|
|||
const security = this.props.security;
|
||||
return (
|
||||
<SecurityRequirementOrWrap>
|
||||
{security.schemes.map(scheme => {
|
||||
{security.schemes.map((scheme) => {
|
||||
return (
|
||||
<SecurityRequirementAndWrap key={scheme.id}>
|
||||
<Link to={scheme.sectionId}>{scheme.id}</Link>
|
||||
{scheme.scopes.length > 0 && ' ('}
|
||||
{scheme.scopes.map(scope => (
|
||||
{scheme.scopes.map((scope) => (
|
||||
<ScopeName key={scope}>{scope}</ScopeName>
|
||||
))}
|
||||
{scheme.scopes.length > 0 && ') '}
|
||||
|
|
@ -89,7 +89,7 @@ const AuthHeaderColumn = styled.div`
|
|||
`;
|
||||
|
||||
const SecuritiesColumn = styled.div`
|
||||
width: ${props => props.theme.schema.defaultDetailsWidth};
|
||||
width: ${(props) => props.theme.schema.defaultDetailsWidth};
|
||||
`;
|
||||
|
||||
const AuthHeader = styled(UnderlinedHeader)`
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
|
|||
});
|
||||
};
|
||||
|
||||
private saveScrollUpdate = upd => {
|
||||
private saveScrollUpdate = (upd) => {
|
||||
this._updateScroll = upd;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = (
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -142,12 +142,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}"]`);
|
||||
|
|
@ -183,7 +183,7 @@ export class MenuStore {
|
|||
}
|
||||
|
||||
getItemById = (id: string) => {
|
||||
return this.flatItems.find(item => item.id === id);
|
||||
return this.flatItems.find((item) => item.id === id);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@ export class OpenAPIParser {
|
|||
schema: subMerged,
|
||||
};
|
||||
})
|
||||
.filter(child => child !== undefined) as Array<{
|
||||
.filter((child) => child !== undefined) as Array<{
|
||||
$ref: string | undefined;
|
||||
schema: MergedOpenAPISchema;
|
||||
}>;
|
||||
|
|
@ -311,7 +311,7 @@ export class OpenAPIParser {
|
|||
const def = this.deref(schemas[defName]);
|
||||
if (
|
||||
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];
|
||||
}
|
||||
|
|
@ -337,7 +337,7 @@ export class OpenAPIParser {
|
|||
const beforeAllOf = allOf.slice(0, i);
|
||||
const afterAllOf = allOf.slice(i + 1);
|
||||
return {
|
||||
oneOf: sub.oneOf.map(part => {
|
||||
oneOf: sub.oneOf.map((part) => {
|
||||
const merged = this.mergeAllOf({
|
||||
allOf: [...beforeAllOf, part, ...afterAllOf],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -250,7 +250,9 @@ export class RedocNormalizedOptions {
|
|||
|
||||
this.expandDefaultServerVariables = argValueToBoolean(raw.expandDefaultServerVariables);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,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();
|
||||
|
|
@ -52,6 +52,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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,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 = {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const {
|
|||
export const media = {
|
||||
lessThan(breakpoint, print?: boolean) {
|
||||
return (...args) => css`
|
||||
@media ${print ? 'print, ' : ''} screen and (max-width: ${props =>
|
||||
@media ${print ? 'print, ' : ''} screen and (max-width: ${(props) =>
|
||||
props.theme.breakpoints[breakpoint]}) {
|
||||
${(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
16
src/theme.ts
|
|
@ -80,21 +80,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: {
|
||||
|
|
@ -130,7 +130,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,
|
||||
|
|
@ -142,7 +142,7 @@ const defaultTheme: ThemeInterface = {
|
|||
},
|
||||
arrow: {
|
||||
size: '1.5em',
|
||||
color: theme => theme.sidebar.textColor,
|
||||
color: (theme) => theme.sidebar.textColor,
|
||||
},
|
||||
},
|
||||
logo: {
|
||||
|
|
@ -166,7 +166,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') {
|
||||
|
|
|
|||
|
|
@ -134,9 +134,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,
|
||||
|
|
@ -569,11 +569,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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -140,10 +140,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();
|
||||
|
|
@ -156,7 +156,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());
|
||||
|
|
@ -188,7 +188,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) {
|
||||
|
|
@ -372,7 +372,7 @@ export function isNamedDefinition(pointer?: string): boolean {
|
|||
export function getDefinitionName(pointer?: string): string | undefined {
|
||||
if (!pointer) return undefined;
|
||||
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 {
|
||||
|
|
@ -456,7 +456,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 {
|
||||
|
|
@ -484,13 +484,13 @@ export function mergeParams(
|
|||
operationParams: Array<Referenced<OpenAPIParameter>> = [],
|
||||
): Array<Referenced<OpenAPIParameter>> {
|
||||
const operationParamNames = {};
|
||||
operationParams.forEach(param => {
|
||||
operationParams.forEach((param) => {
|
||||
param = parser.shalowDeref(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.shalowDeref(param);
|
||||
return !operationParamNames[param.name + '_' + param.in];
|
||||
});
|
||||
|
|
@ -502,7 +502,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();
|
||||
|
|
@ -550,7 +550,7 @@ export function normalizeServers(
|
|||
return resolveUrl(baseUrl, url);
|
||||
}
|
||||
|
||||
return servers.map(server => {
|
||||
return servers.map((server) => {
|
||||
return {
|
||||
...server,
|
||||
url: normalizeUrl(server.url),
|
||||
|
|
@ -568,7 +568,7 @@ export function setSecuritySchemePrefix(prefix: string) {
|
|||
SECURITY_SCHEMES_SECTION_PREFIX = prefix;
|
||||
}
|
||||
|
||||
export const shortenHTTPVerb = verb =>
|
||||
export const shortenHTTPVerb = (verb) =>
|
||||
({
|
||||
delete: 'del',
|
||||
options: 'opts',
|
||||
|
|
@ -599,7 +599,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);
|
||||
}
|
||||
|
|
@ -614,6 +614,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 ');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user