From d527b44c00005c62e73c52b73efe6aed5440d215 Mon Sep 17 00:00:00 2001 From: Lucas Rosa Date: Thu, 18 Jan 2024 17:34:28 -0300 Subject: [PATCH 1/3] fix x-codeSamples load when switch language tabs --- .../theme/ApiExplorer/CodeSnippets/index.tsx | 4 +++ .../src/theme/ApiExplorer/CodeTabs/index.tsx | 27 ++++++++++++------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx index e0fe433d6..fbe45db86 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx @@ -344,7 +344,9 @@ function CodeSnippets({ postman, codeSamples }: Props) { action={{ setLanguage: setLanguage, setSelectedVariant: setSelectedVariant, + setSelectedSample: setSelectedSample, }} + mergedLanguages={mergedLangs} lazy > {mergedLangs.map((lang) => { @@ -367,6 +369,7 @@ function CodeSnippets({ postman, codeSamples }: Props) { includeSample={true} currentLanguage={lang.language} defaultValue={selectedSample} + mergedLanguages={mergedLangs} lazy > {lang.samples.map((sample, index) => { @@ -406,6 +409,7 @@ function CodeSnippets({ postman, codeSamples }: Props) { includeVariant={true} currentLanguage={lang.language} defaultValue={selectedVariant} + mergedLanguages={mergedLangs} lazy > {lang.variants.map((variant, index) => { diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx index 1777b68bb..15d5c067e 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx @@ -15,7 +15,7 @@ import { } from "@docusaurus/theme-common/internal"; import { TabItemProps } from "@docusaurus/theme-common/lib/utils/tabsUtils"; import useIsBrowser from "@docusaurus/useIsBrowser"; -import { Language, languageSet } from "@theme/ApiExplorer/CodeSnippets"; +import { Language } from "@theme/ApiExplorer/CodeSnippets"; import clsx from "clsx"; export interface Props { @@ -23,16 +23,18 @@ export interface Props { [key: string]: React.Dispatch; }; currentLanguage: Language; + languageSet: Language[]; includeVariant: boolean; } -export interface TabListProps extends Props, TabProps { +export interface CodeTabsProps extends Props, TabProps { includeSample?: boolean; } function TabList({ action, currentLanguage, + languageSet, includeVariant, includeSample, className, @@ -40,7 +42,7 @@ function TabList({ selectedValue, selectValue, tabValues, -}: TabListProps & ReturnType) { +}: CodeTabsProps & ReturnType) { const tabRefs: (HTMLLIElement | null)[] = []; const { blockElementScrollPositionUntilNextRender } = useScrollPositionBlocker(); @@ -68,15 +70,18 @@ function TabList({ )[0]; newLanguage.variant = newTabValue; action.setSelectedVariant(newTabValue.toLowerCase()); + } else if (currentLanguage && includeSample) { + newLanguage = languageSet.filter( + (lang: Language) => lang.language === currentLanguage + )[0]; + newLanguage.sample = newTabValue; + action.setSelectedSample(newTabValue); } else { newLanguage = languageSet.filter( (lang: Language) => lang.language === newTabValue )[0]; action.setSelectedVariant(newLanguage.variant.toLowerCase()); - } - if (currentLanguage && includeSample) { - newLanguage.sample = newTabValue; - action.setSelectedSample(newTabValue.toLowerCase()); + action.setSelectedSample(newLanguage.sample); } action.setLanguage(newLanguage); } @@ -151,7 +156,7 @@ function TabContent({ lazy, children, selectedValue, -}: TabProps & ReturnType): React.JSX.Element | null { +}: CodeTabsProps & ReturnType): React.JSX.Element | null { const childTabs = (Array.isArray(children) ? children : [children]).filter( Boolean ) as ReactElement[]; @@ -177,7 +182,7 @@ function TabContent({ ); } -function TabsComponent(props: TabProps & Props): React.JSX.Element { +function TabsComponent(props: CodeTabsProps & Props): React.JSX.Element { const tabs = useTabs(props); const { className } = props; @@ -191,7 +196,9 @@ function TabsComponent(props: TabProps & Props): React.JSX.Element { ); } -export default function CodeTabs(props: TabProps & Props): React.JSX.Element { +export default function CodeTabs( + props: CodeTabsProps & Props +): React.JSX.Element { const isBrowser = useIsBrowser(); return ( Date: Thu, 18 Jan 2024 17:38:11 -0300 Subject: [PATCH 2/3] update prop name --- .../src/theme/ApiExplorer/CodeSnippets/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx index fbe45db86..70060ed4f 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx @@ -346,7 +346,7 @@ function CodeSnippets({ postman, codeSamples }: Props) { setSelectedVariant: setSelectedVariant, setSelectedSample: setSelectedSample, }} - mergedLanguages={mergedLangs} + languageSet={mergedLangs} lazy > {mergedLangs.map((lang) => { @@ -369,7 +369,7 @@ function CodeSnippets({ postman, codeSamples }: Props) { includeSample={true} currentLanguage={lang.language} defaultValue={selectedSample} - mergedLanguages={mergedLangs} + languageSet={mergedLangs} lazy > {lang.samples.map((sample, index) => { @@ -409,7 +409,7 @@ function CodeSnippets({ postman, codeSamples }: Props) { includeVariant={true} currentLanguage={lang.language} defaultValue={selectedVariant} - mergedLanguages={mergedLangs} + languageSet={mergedLangs} lazy > {lang.variants.map((variant, index) => { From 0f05ee1563ecf19daabb8b1c5932810a6ec043ed Mon Sep 17 00:00:00 2001 From: Lucas Rosa Date: Mon, 22 Jan 2024 18:43:21 -0300 Subject: [PATCH 3/3] set code sample text on initial state load --- .../theme/ApiExplorer/CodeSnippets/index.tsx | 22 ++++++++----------- .../ApiExplorer/CodeSnippets/languages.ts | 16 ++++++++++++++ 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx index 70060ed4f..07cd94694 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx @@ -17,7 +17,10 @@ import { useTypedSelector } from "@theme/ApiItem/hooks"; import merge from "lodash/merge"; import { CodeSample, Language } from "./code-snippets-types"; -import { mergeCodeSampleLanguage } from "./languages"; +import { + getCodeSampleSourceFromLanguage, + mergeCodeSampleLanguage, +} from "./languages"; export const languageSet: Language[] = [ { @@ -198,20 +201,13 @@ function CodeSnippets({ postman, codeSamples }: Props) { return defaultLang[0] ?? mergedLangs[0]; }); const [codeText, setCodeText] = useState(""); - const [codeSampleCodeText, setCodeSampleCodeText] = useState(""); + const [codeSampleCodeText, setCodeSampleCodeText] = useState< + string | (() => string) + >(() => getCodeSampleSourceFromLanguage(language)); useEffect(() => { - // initial active language is custom code sample - if ( - language && - language.sample && - language.samples && - language.samplesSources - ) { - const sampleIndex = language.samples.findIndex( - (smp) => smp === language.sample - ); - setCodeSampleCodeText(language.samplesSources[sampleIndex]); + if (language && !!language.sample) { + setCodeSampleCodeText(getCodeSampleSourceFromLanguage(language)); } if (language && !!language.options) { diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/languages.ts b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/languages.ts index 38ed4adac..61ad2d9ee 100644 --- a/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/languages.ts +++ b/packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/languages.ts @@ -35,3 +35,19 @@ export function mergeCodeSampleLanguage( return language; }); } + +export function getCodeSampleSourceFromLanguage(language: Language) { + if ( + language && + language.sample && + language.samples && + language.samplesSources + ) { + const sampleIndex = language.samples.findIndex( + (smp) => smp === language.sample + ); + return language.samplesSources[sampleIndex]; + } + + return ""; +}