diff --git a/demo/playground/hmr-playground.tsx b/demo/playground/hmr-playground.tsx index 41b3c4ed1b..737c3db63e 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 9f82fabc99..978426f665 100644 --- a/src/components/Fields/EnumValues.tsx +++ b/src/components/Fields/EnumValues.tsx @@ -42,6 +42,16 @@ export class EnumValues extends React.PureComponent maxDisplayedEnumValues + : false; + + const toggleButtonText = maxDisplayedEnumValues + ? collapsed + ? `… ${values.length - maxDisplayedEnumValues} more` + : 'Hide' + : ''; + return (
@@ -56,13 +66,13 @@ export class EnumValues extends React.PureComponent ); })} - {maxDisplayedEnumValues ? ( + {showToggleButton ? ( { this.toggle(); }} > - {collapsed ? `… ${values.length - maxDisplayedEnumValues} more` : 'Hide'} + {toggleButtonText} ) : null}