From a6b41aa00b7592512fdaa7532d9f5d85238db29b Mon Sep 17 00:00:00 2001
From: Anna Stasiuk <stasiukanya@gmail.com>
Date: Mon, 7 Sep 2020 12:53:30 +0300
Subject: [PATCH] fix: show long pattern and add toggle button (#1375)

---
 src/common-elements/fields.ts          | 11 ++++++++++
 src/components/Fields/FieldDetails.tsx | 30 +++++++++++++++++++++++---
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
index 8147dfd9..177c3b70 100644
--- 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
index 8c67c513..8584511b 100644
--- 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>