Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-29 12:03:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: show long pattern and add toggle button (#1375)

Browse Source
This commit is contained in:
Anna Stasiuk 2020-09-07 12:53:30 +03:00 committed by GitHub
parent c801b87d2a
commit a6b41aa00b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -108,3 +108,14 @@ export const ConstraintItem = styled(FieldLabel)`
} }
${extensionsHook('ConstraintItem')}; ${extensionsHook('ConstraintItem')};
`; `;
export const ToggleButton = styled.button`
background-color: transparent;
border: 0;
color: ${({ theme }) => theme.colors.text.secondary};
margin-left: ${({ theme }) => theme.spacing.unit}px;
border-radius: 2px;
cursor: pointer;
outline-color: ${({ theme }) => theme.colors.text.secondary};
font-size: 12px;
`;

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

@ -8,6 +8,7 @@ import {
TypeName, TypeName,
TypePrefix, TypePrefix,
TypeTitle, TypeTitle,
ToggleButton,
} from '../../common-elements/fields'; } from '../../common-elements/fields';
import { serializeParameterValue } from '../../utils/openapi'; import { serializeParameterValue } from '../../utils/openapi';
import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation'; import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
@ -25,10 +26,22 @@ import { OptionsContext } from '../OptionsProvider';
const MAX_PATTERN_LENGTH = 45; const MAX_PATTERN_LENGTH = 45;
export class FieldDetails extends React.PureComponent<FieldProps> { export class FieldDetails extends React.PureComponent<FieldProps, { patternShown: boolean }> {
state = {
patternShown: false,
};
static contextType = OptionsContext; static contextType = OptionsContext;
togglePattern = () => {
this.setState({
patternShown: !this.state.patternShown,
});
};
render() { render() {
const { showExamples, field, renderDiscriminatorSwitch } = this.props; const { showExamples, field, renderDiscriminatorSwitch } = this.props;
const { patternShown } = this.state;
const { enumSkipQuotes, hideSchemaTitles } = this.context; const { enumSkipQuotes, hideSchemaTitles } = this.context;
const { schema, description, example, deprecated } = field; const { schema, description, example, deprecated } = field;
@ -64,8 +77,19 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
{schema.title && !hideSchemaTitles && <TypeTitle> ({schema.title}) </TypeTitle>} {schema.title && !hideSchemaTitles && <TypeTitle> ({schema.title}) </TypeTitle>}
<ConstraintsView constraints={schema.constraints} /> <ConstraintsView constraints={schema.constraints} />
{schema.nullable && <NullableLabel> {l('nullable')} </NullableLabel>} {schema.nullable && <NullableLabel> {l('nullable')} </NullableLabel>}
{schema.pattern && schema.pattern.length < MAX_PATTERN_LENGTH && ( {schema.pattern && (
<PatternLabel> {schema.pattern} </PatternLabel> <>
<PatternLabel>
{patternShown || schema.pattern.length < MAX_PATTERN_LENGTH
? schema.pattern
: `${schema.pattern.substr(0, MAX_PATTERN_LENGTH)}...`}
</PatternLabel>
{schema.pattern.length > MAX_PATTERN_LENGTH && (
<ToggleButton onClick={this.togglePattern}>
{patternShown ? 'Hide pattern' : 'Show pattern'}
</ToggleButton>
)}
</>
)} )}
{schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>} {schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>}
</div> </div>