Tweak custom content (#630)

shhdgit · web-flow · commit 31684685fa69 · 2025-08-21T17:13:42.000+08:00
* refactor: update CustomContent and useCustomContent to support language parameter

- Modified useCustomContent to accept an optional language parameter, enhancing its flexibility.
- Updated CustomContent to conditionally display content based on both page type and language, improving content rendering logic.

* refactor: improve language handling in CustomContent component

- Updated CustomContent to split the language parameter into an array, allowing for more flexible language matching.
- Enhanced the logic to determine content display based on both page type and language, improving overall rendering accuracy.

* refactor: enhance SimpleTab component to support dynamic tab rendering
diff --git a/src/components/MDXComponents/CustomContent.tsx b/src/components/MDXComponents/CustomContent.tsx
@@ -1,32 +1,56 @@
-import { PropsWithChildren, useEffect, useState } from "react";
+import { PropsWithChildren } from "react";
 import { PageType } from "shared/utils";
 
 interface CustomContentProps {
-  platform: "tidb" | "tidb-cloud";
+  platform?: "tidb" | "tidb-cloud";
+  language?: string;
   pageTypeFromURL?: PageType;
+  languageFromURL?: string;
 }
 
-export const useCustomContent = (pageTypeFromURL: PageType) => {
+export const useCustomContent = (
+  pageTypeFromURL: PageType,
+  languageFromURL?: string
+) => {
   return (props: PropsWithChildren<CustomContentProps>) => {
-    return <CustomContent {...props} pageTypeFromURL={pageTypeFromURL} />;
+    return (
+      <CustomContent
+        {...props}
+        pageTypeFromURL={pageTypeFromURL}
+        languageFromURL={languageFromURL}
+      />
+    );
   };
 };
 
 export const CustomContent: React.FC<PropsWithChildren<CustomContentProps>> = (
   props
 ) => {
-  const { platform: _pageType, pageTypeFromURL, children } = props;
-  const pageType = _pageType.replace("-", "");
-  const [shouldDisplay, setShouldDisplay] = useState(
-    pageTypeFromURL === pageType
-  );
-  useEffect(() => {
-    const currentPath = window?.location?.pathname || "";
-    if (currentPath.includes(`/${pageType}/`)) {
-      setShouldDisplay(true);
-    } else {
-      setShouldDisplay(false);
-    }
-  }, []);
+  const {
+    platform: _pageType,
+    pageTypeFromURL,
+    children,
+    languageFromURL,
+    language,
+  } = props;
+  const pageType = _pageType?.replace("-", "") || "";
+  const shouldDisplayByPageType = pageTypeFromURL === pageType;
+
+  const languageArray = language
+    ? language.split(",").map((lang) => lang.trim())
+    : [];
+  const shouldDisplayByLanguage = languageArray.includes(languageFromURL || "");
+
+  const onlyPageType = !!pageType && !language;
+  const onlyLanguage = !pageType && !!language;
+  const showOnlyPageType = onlyPageType && shouldDisplayByPageType;
+  const showOnlyLanguage = onlyLanguage && shouldDisplayByLanguage;
+  const showAll =
+    !!pageType &&
+    !!languageFromURL &&
+    shouldDisplayByPageType &&
+    shouldDisplayByLanguage;
+  const shouldDisplay = showOnlyPageType || showOnlyLanguage || showAll;
+
   return <>{shouldDisplay ? children : <></>}</>;
 };
diff --git a/src/components/MDXComponents/SimpleTab.tsx b/src/components/MDXComponents/SimpleTab.tsx
@@ -1,12 +1,10 @@
 import { tabs, active, hidden } from "./simple-tab.module.css";
 
-import { ReactElement, useState } from "react";
+import { ReactElement, useState, useMemo, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setTabGroup } from "state";
 import clsx from "clsx";
 
-// TODO: refactor with MUI and Recoil
-
 export function SimpleTab({
   groupId,
   children,
@@ -18,7 +16,32 @@ export function SimpleTab({
     children: ReactElement[];
   }>[];
 }) {
-  const defaultValue = children[0]!.props?.value || children[0].props.label;
+  const [renderedTabs, setRenderedTabs] = useState<string[]>([]);
+  const actualTabs = useMemo(() => {
+    const tabs: ReactElement[] = [];
+
+    const extractTabs = (elements: ReactElement[]) => {
+      elements.forEach((element) => {
+        if (element.props.mdxType === "CustomContent") {
+          if (element.props.children) {
+            const childrenArray = Array.isArray(element.props.children)
+              ? element.props.children
+              : [element.props.children];
+            extractTabs(childrenArray);
+          }
+        } else {
+          tabs.push(element);
+        }
+      });
+    };
+
+    extractTabs(children);
+
+    return tabs;
+  }, [children]);
+
+  const defaultValue =
+    actualTabs[0]?.props?.value || actualTabs[0]?.props.label;
   const [activeTab, setActiveTab] = useState(defaultValue);
   const dispatch = useDispatch();
   const { tabGroup } = useSelector((state) => state) as any;
@@ -28,7 +51,7 @@ export function SimpleTab({
     if (
       activeTabGroup &&
       activeTabGroup !== activeTab &&
-      children.some(
+      actualTabs.some(
         (child) => child.props?.value || child.props.label === activeTabGroup
       )
     ) {
@@ -43,11 +66,25 @@ export function SimpleTab({
     }
   };
 
+  if (!actualTabs.length) {
+    return null;
+  }
+
+  useEffect(() => {
+    if (!renderedTabs.length) {
+      return;
+    }
+    setActiveTab(renderedTabs[0]);
+  }, [renderedTabs]);
+
   return (
     <>
       <ul className={clsx(tabs, "simple-tab-container")}>
-        {children.map((child) => {
+        {actualTabs.map((child) => {
           const id: string = child.props?.value || child.props.label;
+          if (!renderedTabs.includes(id)) {
+            return null;
+          }
           return (
             <li
               key={id}
@@ -59,14 +96,61 @@ export function SimpleTab({
           );
         })}
       </ul>
-      {children.map((child) => {
-        const id: string = child.props?.value || child.props.label;
+      {children.map((child, index) => {
+        const actualChild = actualTabs[index];
+        const id: string = actualChild.props?.value || actualChild.props.label;
         return (
-          <div key={id} className={clsx({ [hidden]: activeTab !== id })}>
-            {child.props.children}
-          </div>
+          <TabContentDetector
+            key={id}
+            id={id}
+            activeTab={activeTab}
+            onRendered={() => {
+              setRenderedTabs((prev) => {
+                if (prev.includes(id)) {
+                  return prev;
+                }
+                // Add the new tab and then sort based on actualTabs order
+                const newTabs = [...prev, id];
+                return newTabs.sort((a, b) => {
+                  const aIndex = actualTabs.findIndex(
+                    (tab) => (tab.props?.value || tab.props.label) === a
+                  );
+                  const bIndex = actualTabs.findIndex(
+                    (tab) => (tab.props?.value || tab.props.label) === b
+                  );
+                  return aIndex - bIndex;
+                });
+              });
+            }}
+          >
+            {child}
+          </TabContentDetector>
         );
       })}
     </>
   );
 }
+
+export const TabContentDetector = ({
+  children,
+  id,
+  activeTab,
+  onRendered,
+}: {
+  children: ReactElement;
+  id: string;
+  activeTab: string;
+  onRendered: (id: string) => void;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (ref.current && ref.current.children.length > 0) {
+      onRendered(id);
+    }
+  }, []);
+  return (
+    <div ref={ref} key={id} className={clsx({ [hidden]: activeTab !== id })}>
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/MDXContent.tsx b/src/components/MDXContent.tsx
@@ -41,7 +41,7 @@ export default function MDXContent(props: {
   } = props;
 
   const pageType = getPageType(language, pageUrl);
-  const CustomContentWithPageType = useCustomContent(pageType);
+  const CustomContent = useCustomContent(pageType, language);
   // const isAutoTranslation = useIsAutoTranslation(pageUrl || "");
 
   React.useEffect(() => {
@@ -67,7 +67,7 @@ export default function MDXContent(props: {
           components={{
             ...MDXComponents,
             pre: Pre,
-            CustomContent: CustomContentWithPageType,
+            CustomContent,
           }}
         >
           <MDXRenderer>{data}</MDXRenderer>
