From 80509a8cebdac9f266d76a250db0d4af423f808c Mon Sep 17 00:00:00 2001 From: Putu Audi Pasuatmadi <63685606+audipasuatmadi@users.noreply.github.com> Date: Tue, 26 Nov 2024 13:59:10 +0800 Subject: [PATCH] feat: make virtualization configurable where the default is not using virtualization --- docs/config.md | 6 ++++++ src/components/Redoc/Redoc.tsx | 11 ++++++++++- .../__snapshots__/DiscriminatorDropdown.test.tsx.snap | 10 ++++++++++ src/services/RedocNormalizedOptions.ts | 5 +++++ 4 files changed, 31 insertions(+), 1 deletion(-) diff --git a/docs/config.md b/docs/config.md index 28e24f7e..1648e958 100644 --- a/docs/config.md +++ b/docs/config.md @@ -166,6 +166,12 @@ _Default: false_ If set to `true`, the API definition is considered untrusted and all HTML/Markdown is sanitized to prevent XSS. +### enableVirtualization + +If set to `true`, the API documentation content will use virtualization. Virtualization only renders the API content when it is currently visible in user's viewport. + +_Default: false_ + ## Theme settings * `spacing` diff --git a/src/components/Redoc/Redoc.tsx b/src/components/Redoc/Redoc.tsx index bc12a84d..483860fa 100644 --- a/src/components/Redoc/Redoc.tsx +++ b/src/components/Redoc/Redoc.tsx @@ -14,6 +14,8 @@ import { ApiContentWrap, BackgroundStub, RedocWrap } from './styled.elements'; import { SearchBox } from '../SearchBox/SearchBox'; import { StoreProvider } from '../StoreBuilder'; import VirtualizedContent from '../Virtualization/VirtualizedContent'; +import { ApiInfo } from '../ApiInfo/ApiInfo'; +import { ContentItems } from '../ContentItems/ContentItems'; export interface RedocProps { store: AppStore; @@ -56,7 +58,14 @@ export class Redoc extends React.Component { - + {options.enableVirtualization ? ( + + ) : ( + <> + + + + )} diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap index 48819982..49d0986e 100644 --- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap @@ -79,6 +79,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -351,6 +352,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -610,6 +612,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -931,6 +934,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -1215,6 +1219,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -1470,6 +1475,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -1750,6 +1756,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -2060,6 +2067,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -2332,6 +2340,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, @@ -2591,6 +2600,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView "disableSearch": false, "downloadDefinitionUrl": undefined, "downloadFileName": undefined, + "enableVirtualization": false, "enumSkipQuotes": false, "expandDefaultServerVariables": false, "expandResponses": {}, diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts index 0cdd7f9e..bdacc087 100644 --- a/src/services/RedocNormalizedOptions.ts +++ b/src/services/RedocNormalizedOptions.ts @@ -57,6 +57,8 @@ export interface RedocRawOptions { hideFab?: boolean; minCharacterLengthToInitSearch?: number; showWebhookVerb?: boolean; + + enableVirtualization?: boolean | string; } export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean { @@ -259,6 +261,8 @@ export class RedocNormalizedOptions { minCharacterLengthToInitSearch: number; showWebhookVerb: boolean; + enableVirtualization: boolean; + nonce?: string; constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) { @@ -338,5 +342,6 @@ export class RedocNormalizedOptions { this.hideFab = argValueToBoolean(raw.hideFab); this.minCharacterLengthToInitSearch = argValueToNumber(raw.minCharacterLengthToInitSearch) || 3; this.showWebhookVerb = argValueToBoolean(raw.showWebhookVerb); + this.enableVirtualization = argValueToBoolean(raw.enableVirtualization); } }