[docs–infra] Small polish on API toggle (#39704)

mui · Nov 2, 2023 · b30069d · b30069d
1 parent c0127b2
commit b30069d
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 25 deletions.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -111,6 +111,11 @@ export const AD_MARGIN_TOP = 3;
 export const AD_MARGIN_BOTTOM = 3;
 export const AD_HEIGHT = 126;
 
+// https://stackoverflow.com/a/20084661
+function isBot() {
+  return /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
+}
+
 export default function Ad() {
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
@@ -121,7 +126,7 @@ export default function Ad() {
   let children;
   let label;
   // Hide the content to google bot to avoid its indexation.
-  if ((typeof window !== 'undefined' && /Googlebot/.test(navigator.userAgent)) || disableAd) {
+  if ((typeof window !== 'undefined' && isBot()) || disableAd) {
     children = <span />;
   } else if (adblock) {
     if (randomAdblock < 0.2) {

diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
@@ -84,9 +84,7 @@ export default function ClassesSection(props: ClassesSectionProps) {
         </Level>
         <ToggleDisplayOption displayOption={displayOption} setDisplayOption={setDisplayOption} />
       </Box>
-
       {spreadHint && <p dangerouslySetInnerHTML={{ __html: spreadHint }} />}
-
       {displayOption === 'table' ? (
         <ClassesTable classes={formatedClasses} />
       ) : (

diff --git a/docs/src/modules/components/ApiPage/sections/CssSection.tsx b/docs/src/modules/components/ApiPage/sections/CssSection.tsx
@@ -114,9 +114,7 @@ export default function CSSSection(props: CSSSectionProps) {
         </Level>
         <ToggleDisplayOption displayOption={displayOption} setDisplayOption={setDisplayOption} />
       </Box>
-
       {spreadHint && <p dangerouslySetInnerHTML={{ __html: spreadHint }} />}
-
       {displayOption === 'table' ? (
         <CSSTable classes={formatedClasses} />
       ) : (

diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
@@ -66,9 +66,7 @@ export default function SlotsSection(props: SlotsSectionProps) {
         </Level>
         <ToggleDisplayOption displayOption={displayOption} setDisplayOption={setDisplayOption} />
       </Box>
-
       {spreadHint && <p dangerouslySetInnerHTML={{ __html: spreadHint }} />}
-
       {displayOption === 'table' ? (
         <SlotsTable slots={formatedSlots} />
       ) : (

diff --git a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
@@ -8,7 +8,7 @@ import TableChartRoundedIcon from '@mui/icons-material/TableChartRounded';
 import ReorderRoundedIcon from '@mui/icons-material/ReorderRounded';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 
-export type ApiDisplayOptions = 'collapsed' | 'expended' | 'table';
+type ApiDisplayOptions = 'collapsed' | 'expended' | 'table';
 
 const options: ApiDisplayOptions[] = ['collapsed', 'expended', 'table'];
 const DEFAULT_LAYOUT: ApiDisplayOptions = 'expended';
@@ -21,8 +21,13 @@ export const API_LAYOUT_STORAGE_KEYS = {
   classes: 'apiPage_classes',
 } as const;
 
-const getRandomOption = () => {
-  if (/bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent)) {
+// https://stackoverflow.com/a/20084661
+function isBot() {
+  return /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent);
+}
+
+function getRandomOption() {
+  if (isBot()) {
     // When crawlers visit the page, they should not have to expand items
     return DEFAULT_LAYOUT;
   }
@@ -42,11 +47,11 @@ const getRandomOption = () => {
     // Do nothing
   }
   return randomOption;
-};
+}
 
 let neverHydrated = true;
 
-const getOption = (storageKey: string) => {
+function getOption(storageKey: string) {
   if (neverHydrated) {
     return DEFAULT_LAYOUT;
   }
@@ -63,32 +68,27 @@ const getOption = (storageKey: string) => {
   } catch (error) {
     return DEFAULT_LAYOUT;
   }
-};
+}
 
 export function useApiPageOption(
   storageKey: string,
 ): [ApiDisplayOptions, (newOption: ApiDisplayOptions) => void] {
   const [option, setOption] = React.useState(getOption(storageKey));
-  const [needsScroll, setNeedsScroll] = React.useState(false);
 
   useEnhancedEffect(() => {
     neverHydrated = false;
     const newOption = getOption(storageKey);
     setOption(newOption);
-    setNeedsScroll(newOption !== DEFAULT_LAYOUT);
   }, [storageKey]);
 
   React.useEffect(() => {
-    setNeedsScroll(false);
-    if (needsScroll) {
-      return () => {
-        const id = document?.location.hash.slice(1);
-        const element = document.getElementById(id);
-        element?.scrollIntoView();
-      };
+    if (option !== DEFAULT_LAYOUT) {
+      const id = document.location.hash.slice(1);
+      const element = document.getElementById(id);
+      element?.scrollIntoView();
     }
-    return () => {};
-  }, [needsScroll]);
+    return undefined;
+  }, [option]);
 
   const updateOption = React.useCallback(
     (newOption: ApiDisplayOptions) => {
@@ -129,7 +129,7 @@ type TooltipToggleButtonProps = ToggleButtonProps & {
 };
 
 // Catch props and forward to ToggleButton
-const TooltipToggleButton: React.FC<TooltipToggleButtonProps> = React.forwardRef(
+const TooltipToggleButton = React.forwardRef<HTMLButtonElement, TooltipToggleButtonProps>(
   ({ title, TooltipProps: tooltipProps, ...props }, ref) => {
     return (
       <Tooltip {...tooltipProps} title={title}>