From 94da6fa631cd60819ee3ff2aa59140749ec71e9c Mon Sep 17 00:00:00 2001
From: Oleksiy Kachynskyy <oleksiy@redoc.ly>
Date: Wed, 22 Jul 2020 19:51:12 +0300
Subject: [PATCH] fix: update EnumValues component

---
 demo/playground/hmr-playground.tsx   |  2 +-
 src/components/Fields/EnumValues.tsx | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/demo/playground/hmr-playground.tsx b/demo/playground/hmr-playground.tsx
index 41b3c4ed..737c3db6 100644
--- a/demo/playground/hmr-playground.tsx
+++ b/demo/playground/hmr-playground.tsx
@@ -26,7 +26,7 @@ const specUrl =
   (userUrl && userUrl[1]) || (swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml');
 
 let store;
-const options: RedocRawOptions = { nativeScrollbars: false, maxDisplayedEnumValues: 2 };
+const options: RedocRawOptions = { nativeScrollbars: false, maxDisplayedEnumValues: 3 };
 
 async function init() {
   const spec = await loadAndBundleSpec(specUrl);
diff --git a/src/components/Fields/EnumValues.tsx b/src/components/Fields/EnumValues.tsx
index 9f82fabc..978426f6 100644
--- a/src/components/Fields/EnumValues.tsx
+++ b/src/components/Fields/EnumValues.tsx
@@ -42,6 +42,16 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
         ? values.slice(0, maxDisplayedEnumValues)
         : values;
 
+    const showToggleButton = maxDisplayedEnumValues
+      ? values.length > maxDisplayedEnumValues
+      : false;
+
+    const toggleButtonText = maxDisplayedEnumValues
+      ? collapsed
+        ? `… ${values.length - maxDisplayedEnumValues} more`
+        : 'Hide'
+      : '';
+
     return (
       <div>
         <FieldLabel>
@@ -56,13 +66,13 @@ export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesS
             </React.Fragment>
           );
         })}
-        {maxDisplayedEnumValues ? (
+        {showToggleButton ? (
           <ToggleButton
             onClick={() => {
               this.toggle();
             }}
           >
-            {collapsed ? `… ${values.length - maxDisplayedEnumValues} more` : 'Hide'}
+            {toggleButtonText}
           </ToggleButton>
         ) : null}
       </div>