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

Redocly · Sep 7, 2020 · a6b41aa · a6b41aa
1 parent c801b87
commit a6b41aa
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
@@ -108,3 +108,14 @@ export const ConstraintItem = styled(FieldLabel)`
   }
   ${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;
+`;
diff --git a/src/components/Fields/FieldDetails.tsx b/src/components/Fields/FieldDetails.tsx
@@ -8,6 +8,7 @@ import {
   TypeName,
   TypePrefix,
   TypeTitle,
+  ToggleButton,
 } from '../../common-elements/fields';
 import { serializeParameterValue } from '../../utils/openapi';
 import { ExternalDocumentation } from '../ExternalDocumentation/ExternalDocumentation';
@@ -25,10 +26,22 @@ import { OptionsContext } from '../OptionsProvider';
 
 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;
+
+  togglePattern = () => {
+    this.setState({
+      patternShown: !this.state.patternShown,
+    });
+  };
+
   render() {
     const { showExamples, field, renderDiscriminatorSwitch } = this.props;
+    const { patternShown } = this.state;
     const { enumSkipQuotes, hideSchemaTitles } = this.context;
 
     const { schema, description, example, deprecated } = field;
@@ -64,8 +77,19 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
           {schema.title && !hideSchemaTitles && <TypeTitle> ({schema.title}) </TypeTitle>}
           <ConstraintsView constraints={schema.constraints} />
           {schema.nullable && <NullableLabel> {l('nullable')} </NullableLabel>}
-          {schema.pattern && schema.pattern.length < MAX_PATTERN_LENGTH && (
-            <PatternLabel> {schema.pattern} </PatternLabel>
+          {schema.pattern && (
+            <>
+              <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>}
         </div>