mirror of
https://github.com/Redocly/redoc.git
synced 2024-12-05 06:43:43 +03:00
feat: add maxDisplayedEnumValues config and buttons for show/hide enums (#1322)
This commit is contained in:
parent
a96a11a4dc
commit
a2b018d393
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user