fix: wrong display when combining multiple auth requirements

fies #577
This commit is contained in:
Roman Hotsiy 2018-07-25 13:11:24 +03:00
parent 0045958d3b
commit f96c481b34
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0

View File

@ -24,12 +24,34 @@ const ScopeName = styled.code`
}
`;
const SecurityRequirementWrap = styled.span`
const SecurityRequirementAndWrap = styled.span`
&:after {
content: ' OR ';
content: ' AND ';
font-weight: bold;
}
&:last-child:after {
content: none;
}
${linksCss};
`;
const SecurityRequirementOrWrap = styled.span`
&:before {
content: '( ';
font-weight: bold;
}
&:after {
content: ' ) OR ';
font-weight: bold;
}
&:last-child:after {
content: ' )';
}
&:only-child:before,
&:only-child:after {
content: none;
}
@ -43,17 +65,20 @@ export interface SecurityRequirementProps {
export class SecurityRequirement extends React.PureComponent<SecurityRequirementProps> {
render() {
const security = this.props.security;
return security.schemes.map((scheme, idx) => {
return (
<SecurityRequirementWrap key={scheme.id}>
<a href={'#' + scheme.sectionId}>{scheme.id}</a>
{scheme.scopes.length > 0 && ' ('}
{scheme.scopes.map(scope => <ScopeName key={scope}>{scope}</ScopeName>)}
{scheme.scopes.length > 0 && ') '}
{idx < security.schemes.length - 1 && ' & '}
</SecurityRequirementWrap>
);
});
return (
<SecurityRequirementOrWrap>
{security.schemes.map(scheme => {
return (
<SecurityRequirementAndWrap key={scheme.id}>
<a href={'#' + scheme.sectionId}>{scheme.id}</a>
{scheme.scopes.length > 0 && ' ('}
{scheme.scopes.map(scope => <ScopeName key={scope}>{scope}</ScopeName>)}
{scheme.scopes.length > 0 && ') '}
</SecurityRequirementAndWrap>
);
})}
</SecurityRequirementOrWrap>
);
}
}