fix: update EnumValues component (#1324)

Redocly · Jul 24, 2020 · de27ac0 · de27ac0
1 parent 676faa9
commit de27ac0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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>