chore: Release 2.0.0-rc.32 🔖

CHANGELOG.md

@@ -1,3 +1,27 @@
+# [2.0.0-rc.32](https://github.com/Redocly/redoc/compare/v2.0.0-rc.31...v2.0.0-rc.32) (2020-07-21)
+
+
+### Bug Fixes
+
+* default style and explode for params ([633d712](https://github.com/Redocly/redoc/commit/633d71293fa9af2bda3bf456a9258625ee2b94a1)), closes [#1016](https://github.com/Redocly/redoc/issues/1016)
+* fix contrast ratio for response titles ([47c6319](https://github.com/Redocly/redoc/commit/47c63192062d87b2b3205b915472930eaff6cc03))
+* fix expand variable for vars with hyphens or dots ([0904b3f](https://github.com/Redocly/redoc/commit/0904b3fec24edc56c4a4951501fe02ae22fd852b)), closes [#926](https://github.com/Redocly/redoc/issues/926)
+* make dropdowns accessible by keyboard ([e8a0d10](https://github.com/Redocly/redoc/commit/e8a0d105ca52204b0d6fd61f5e909d9dbbe6f147))
+* make endpoint dropdown accessible ([3d25005](https://github.com/Redocly/redoc/commit/3d25005f084f06ac01b8fa13eb1d69092e99fd27))
+* make properties focusable ([05fd754](https://github.com/Redocly/redoc/commit/05fd7543a29e0aeb364c1ba3f2d736656de7b3b7))
+* make response sections focusable ([442014c](https://github.com/Redocly/redoc/commit/442014c06d6a7d2260adf7bc5798dd29869f10c9))
+* make sample controls focusable ([006031c](https://github.com/Redocly/redoc/commit/006031c51787b617f2b0aed80a4b8486c5d2d3ca))
+* update focus styling ([30a27c1](https://github.com/Redocly/redoc/commit/30a27c116b366428570d0b5516b5b2b4bcd0c5fc))
+
+
+### Features
+
+* add maxDisplayedEnumValues config and buttons for show/hide enums ([#1322](https://github.com/Redocly/redoc/issues/1322)) ([a2b018d](https://github.com/Redocly/redoc/commit/a2b018d393ee25fb8e9233f8123c29d14ab054c7))
+* array size info based on min max Items properties ([#1308](https://github.com/Redocly/redoc/issues/1308)) ([644e96a](https://github.com/Redocly/redoc/commit/644e96ae457047ce09f55aa1f14a42c41dbc1dc8))
+* new option sortEnumValuesAlphabetically ([#1321](https://github.com/Redocly/redoc/issues/1321)) ([a96a11a](https://github.com/Redocly/redoc/commit/a96a11a4dc8a509c6c3fba67dc4e065b66624e18))
+
+
+
 # [2.0.0-rc.31](https://github.com/Redocly/redoc/compare/v2.0.0-rc.30...v2.0.0-rc.31) (2020-06-25)
 
 

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 };
+const options: RedocRawOptions = { nativeScrollbars: false, maxDisplayedEnumValues: 2 };
 
 async function init() {
   const spec = await loadAndBundleSpec(specUrl);

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "redoc",
-  "version": "2.0.0-rc.31",
+  "version": "2.0.0-rc.32",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redoc",
-  "version": "2.0.0-rc.31",
+  "version": "2.0.0-rc.32",
   "description": "ReDoc",
   "repository": {
     "type": "git",

src/components/Fields/EnumValues.tsx

@@ -3,28 +3,51 @@ import { ExampleValue, FieldLabel } from '../../common-elements/fields';
 
 import { l } from '../../services/Labels';
 import { OptionsContext } from '../OptionsProvider';
+import { RedocRawOptions, styled } from '../..';
 
 export interface EnumValuesProps {
   values: string[];
   type: string;
 }
 
-export class EnumValues extends React.PureComponent<EnumValuesProps> {
+export interface EnumValuesState {
+  collapsed: boolean;
+}
+
+export class EnumValues extends React.PureComponent<EnumValuesProps, EnumValuesState> {
+  state: EnumValuesState = {
+    collapsed: true,
+  };
+
   static contextType = OptionsContext;
+
+  private toggle() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
   render() {
     const { values, type } = this.props;
-    const { enumSkipQuotes } = this.context;
+    const { collapsed } = this.state;
+
+    // TODO: provide context interface in more elegant way
+    const { enumSkipQuotes, maxDisplayedEnumValues } = this.context as RedocRawOptions;
+
     if (!values.length) {
       return null;
     }
 
+    const displayedItems =
+      this.state.collapsed && maxDisplayedEnumValues
+        ? values.slice(0, maxDisplayedEnumValues)
+        : values;
+
     return (
       <div>
         <FieldLabel>
           {type === 'array' ? l('enumArray') : ''}{' '}
           {values.length === 1 ? l('enumSingleValue') : l('enum')}:
         </FieldLabel>{' '}
-        {values.map((value, idx) => {
+        {displayedItems.map((value, idx) => {
           const exampleValue = enumSkipQuotes ? value : JSON.stringify(value);
           return (
             <React.Fragment key={idx}>
@@ -32,7 +55,25 @@ export class EnumValues extends React.PureComponent<EnumValuesProps> {
             </React.Fragment>
           );
         })}
+        {maxDisplayedEnumValues ? (
+          <ToggleButton
+            onClick={() => {
+              this.toggle();
+            }}
+          >
+            {collapsed ? `… ${values.length - maxDisplayedEnumValues} more` : 'Hide'}
+          </ToggleButton>
+        ) : null}
       </div>
     );
   }
 }
+
+const ToggleButton = styled.span`
+  color: ${props => props.theme.colors.primary.main};
+  vertical-align: middle;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 0 5px;
+  cursor: pointer;
+`;

src/services/RedocNormalizedOptions.ts

@@ -38,6 +38,7 @@ export interface RedocRawOptions {
   enumSkipQuotes?: boolean | string;
 
   expandDefaultServerVariables?: boolean;
+  maxDisplayedEnumValues?: number;
 }
 
 function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
@@ -50,6 +51,16 @@ function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): bool
   return val;
 }
 
+function argValueToNumber(value: number | string | undefined): number | undefined {
+  if (typeof value === 'string') {
+    return parseInt(value, 10);
+  }
+
+  if (typeof value === 'number') {
+    return value;
+  }
+}
+
 export class RedocNormalizedOptions {
   static normalizeExpandResponses(value: RedocRawOptions['expandResponses']) {
     if (value === 'all') {
@@ -177,6 +188,7 @@ export class RedocNormalizedOptions {
   allowedMdComponents: Record<string, MDXComponentMeta>;
 
   expandDefaultServerVariables: boolean;
+  maxDisplayedEnumValues?: number;
 
   constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) {
     raw = { ...defaults, ...raw };
@@ -232,5 +244,6 @@ export class RedocNormalizedOptions {
     this.allowedMdComponents = raw.allowedMdComponents || {};
 
     this.expandDefaultServerVariables = argValueToBoolean(raw.expandDefaultServerVariables);
+    this.maxDisplayedEnumValues = argValueToNumber(raw.maxDisplayedEnumValues);
   }
 }