[WIP]: Add scroll position right menu in all api pages

src/components/RightMenu/RightMenu.tsx

@@ -4,21 +4,21 @@ import * as React from "react";
 import { RightMenuProps } from "./RightMenuProps";
 import "./RightMenu.scss";
 const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
-  const { items, width, selectedItemProp:selectedItem=0 } = props;
-  //const [selectedItem, setSelectedItem] = React.useState<number>(selectedItemProp);
-/*   const handleChangeSelectedItem = (newIndex: number) =>
-    setSelectedItem(newIndex); */
+  const { items, width, selectedItemProp: selectedItem = 0 } = props;
+
   const handleClickAnchor = (
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
     onClick: Function | undefined,
     id: number
   ) => {
     onClick?.();
-    //handleChangeSelectedItem(id);
+
   };
+
+  const finalSelectedId = selectedItem;
   return (
     <List
-   // className="section-container"
+      // className="section-container"
       sx={{ width: "100%", maxWidth: width, bgcolor: "background.paper" }}
       component="nav"
       aria-labelledby="nested-list-subheader"
@@ -32,14 +32,13 @@ const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
         {items &&
           items.map(({ isSelected, label, onClick, referTo, id }, index) => {
             const classNameForAnchor: string =
-              selectedItem === id
+              finalSelectedId === id
                 ? "right-menu-anchor-item selected"
                 : "right-menu-anchor-item";
             return (
               <li key={index} style={{ listStyle: "none", margin: 0 }}>
                 <a
                   className={classNameForAnchor}
-                  //href={`${baseUrl}/#${referTo}`}
                   href={`${referTo}`}
                   onClick={(e) => handleClickAnchor(e, onClick, id)}
                 >

src/components/RightMenu/RightMenuProps.ts

@@ -11,4 +11,5 @@ export interface RightMenuProps {
     width: string;
     baseUrl?: string;
     selectedItemProp?:number;
+    setSelected?:Function;
 }
\ No newline at end of file

src/pages/api/AvatarApi.jsx

@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
 import PropsTableApi from "./PropsTableApi";
 import { AvatarAPIPropsRows } from "../../data/AvatarAPIPropsRows";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
 
 const rightMenuItems = [
   {
@@ -24,6 +25,15 @@ const rightMenuItems = [
 ];
 
 const AvatarApi = (props) => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", scrollHandler);
+    };
+  }, []);
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -49,7 +59,12 @@ const AvatarApi = (props) => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+        <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/api/DropzoneApi.tsx

@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
 import PropsTableApi from "./PropsTableApi";
 import { DropzoneAPIPropsRows } from "../../data/DropzoneAPIPropsRows";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
 const rightMenuItems = [
   {
     id: 0,
@@ -23,6 +24,19 @@ const rightMenuItems = [
 ];
 
 const DropzoneApi = () => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
+
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -53,7 +67,12 @@ const DropzoneApi = () => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+        <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/api/FileCardApi.tsx

@@ -8,6 +8,7 @@ import MainParagraph from "../../components/paragraph-main/MainParagraph";
 import RightMenu from "../../components/RightMenu/RightMenu";
 import AnchorToTab from "../../components/util-components/AnchorToTab";
 import { FileCardAPIPropsRows } from "../../data/FileCardAPIPropsRows";
+import { scrollHandler } from "../../utils/scrollHandler";
 import PropsTableApi from "./PropsTableApi";
 
 const rightMenuItems = [
@@ -24,6 +25,18 @@ const rightMenuItems = [
 ];
 
 const FileCardApi = () => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -52,7 +65,12 @@ const FileCardApi = () => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+      <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/api/FileInputButtonApi.jsx

@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
 import PropsTableApi from "./PropsTableApi";
 import { FileInputButtonPropsRows } from "../../data/FileInputButtonPropsRows";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
 
 const rightMenuItems = [
   {
@@ -23,6 +24,18 @@ const rightMenuItems = [
   },
 ];
 const FileInputButtonApi = (props) => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -55,7 +68,12 @@ const FileInputButtonApi = (props) => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+        <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/api/FileMosaicApi.jsx

@@ -8,6 +8,7 @@ import MainParagraph from "../../components/paragraph-main/MainParagraph";
 import RightMenu from "../../components/RightMenu/RightMenu";
 import AnchorToTab from "../../components/util-components/AnchorToTab";
 import { FileMosaicAPIPropsRows } from "../../data/FileMosaicAPIPropsRows";
+import { scrollHandler } from "../../utils/scrollHandler";
 import PropsTableApi from "./PropsTableApi";
 
 const rightMenuItems = [
@@ -23,6 +24,18 @@ const rightMenuItems = [
   },
 ];
 const FileMosaicApi = (props) => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -53,7 +66,12 @@ const FileMosaicApi = (props) => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+        <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/api/FullScreenApi.tsx

@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
 import PropsTableApi from "./PropsTableApi";
 import { FullScreenAPIPropRows } from "./FullScreenAPIPropRows";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import { scrollHandler } from "../../utils/scrollHandler";
 
 const rightMenuItems = [
   {
@@ -24,6 +25,18 @@ const rightMenuItems = [
 ];
 
 const FullScreenApi = () => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -64,7 +77,12 @@ const FullScreenApi = () => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+        <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/api/ImagePreviewApi.tsx

@@ -11,6 +11,7 @@ import { ImagePreviewAPIPropsRows } from "./ImagePreviewAPIPropsRows";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
 import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
 import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import { scrollHandler } from "../../utils/scrollHandler";
 
 const rightMenuItems = [
   {
@@ -26,6 +27,18 @@ const rightMenuItems = [
 ];
 
 const ImagePreviewApi = () => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -66,7 +79,12 @@ const ImagePreviewApi = () => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+        <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/api/VideoPreviewApi.tsx

@@ -11,6 +11,7 @@ import { VideoPreviewAPIPropsRows } from "./VideoPreviewAPIPropsRows";
 import MainParagraph from "../../components/paragraph-main/MainParagraph";
 import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
 import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import { scrollHandler } from "../../utils/scrollHandler";
 
 const rightMenuItems = [
   {
@@ -26,6 +27,18 @@ const rightMenuItems = [
 ];
 
 const VideoPreviewApi = () => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -66,7 +79,12 @@ const VideoPreviewApi = () => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+        <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/demo/FileCardDemoPage.jsx

@@ -25,8 +25,22 @@ import DemoFileCardActions from "../../components/demo-components/filemosaic-dem
 import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
 import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
 import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
+import { scrollHandler } from "../../utils/scrollHandler";
 
 const FileCardDemoPage = (props) => {
+  const [selectedItem, setSelectedItem] = React.useState(0);
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
+    return () => {
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
+    };
+  }, []);
+
   return (
     <React.Fragment>
       <MainContentContainer>
@@ -74,7 +88,10 @@ const FileCardDemoPage = (props) => {
             <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
             component for allowing the user to select files. For further
             information of this component check out the{" "}
-            <AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
+            <AnchorToTab href="/components/fileinputbutton">
+              FileInputButton
+            </AnchorToTab>{" "}
+            page.
           </Alert>
           <br />
           <Alert severity="info">
@@ -374,7 +391,12 @@ const FileCardDemoPage = (props) => {
         </section>
       </MainContentContainer>
       <RightMenuContainer>
-        <RightMenu width="240px" items={rightMenuItems} />
+        <RightMenu
+          width="240px"
+          items={rightMenuItems}
+          selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
+        />
       </RightMenuContainer>
     </React.Fragment>
   );

src/pages/demo/FileMosaicDemoPage.jsx

@@ -29,94 +29,19 @@ import DemoFileCardActions from "../../components/demo-components/filemosaic-dem
 import CodeJSFileCardActions from "../../components/demo-components/filemosaic-demo/CodeJSFileCardActions";
 import DemoFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit";
 import CodeJSFileMosaicSmartImgFit from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit";
+import { scrollHandler } from "../../utils/scrollHandler";
 
 const FileMosaicDemoPage = (props) => {
   const [selectedItem, setSelectedItem] = React.useState(0);
 
-  const scrollHandler = () => {
-    let menu = document.querySelector(".section-container");
-
-    const rightMenuItemsWithIdSec = rightMenuItems.map((x) => {
-      return {
-        ...x,
-        idSec: x.referTo.split("#")[1],
-      };
-    });
-
-    const arrElements = rightMenuItemsWithIdSec.map((x) => {
-      return { ...x, element: document.getElementById(x.idSec) };
-    });
-
-    let pos_menu = window.pageYOffset + menu.offsetHeight;
-    console.log("scrollHandler pos_menu", pos_menu);
-
-    const arrElementsEnhanced = arrElements.map((x) => {
-      const element = x.element;
-      const postElement = element.offsetTop + element.offsetHeight;
-      const distance = Math.round(postElement - pos_menu,0);
-      return { ...x, distance };
-    });
-
-    console.log(
-      "scrollHandler distances",
-      pos_menu,
-      arrElementsEnhanced.map(({ distance }) => distance)
-    );
-    console.log(
-      "scrollHandler ids",
-      pos_menu,
-      arrElementsEnhanced.map(({ id }) => id)
-    );
-    let min = Math.min(
-      ...arrElementsEnhanced
-        .map((x) => Math.round(x.distance, 0))
-        .filter((x) => x > 0)
-    );
-
-    console.log(
-      "prev foundelement distance min id",
-      min,
-      arrElementsEnhanced.map((y) => y.distance)
-    );
-
-    arrElementsEnhanced.forEach((x) => {
-      if (x.distance === min) {
-     /*    console.log(
-          "foundelement distance min id",
-          arrElementsEnhanced.map((y) => y.distance),
-          x.distance,
-          min,
-          x.id
-        ); */
-        setSelectedItem((_id) => {
-          return x.id;
-        });
-      }
-    });
-
-    console.log(
-      "distance min",
-      min,
-      arrElementsEnhanced.map((x) => x.distance)
-    );
-
-    // if (min === distance_A) setSelectedItem(0);
-    //document.querySelectorAll(".Menu .Item")[0].classList.add("Highlight");
-    // if (min === distance_B) setSelectedItem(1);
-    // if (min === distance_C) setSelectedItem(2);
-    /*  if (min === distance_B)
-      document.querySelectorAll(".Menu .Item")[1].classList.add("Highlight");
-    if (min === distance_C)
-      document.querySelectorAll(".Menu .Item")[2].classList.add("Highlight"); */
-  };
   React.useEffect(() => {
-    console.log("scrollHandler container");
-
-    window.addEventListener("scroll", scrollHandler);
-
+    window.addEventListener("scroll", () =>
+      scrollHandler(rightMenuItems, setSelectedItem)
+    );
     return () => {
-      console.log("foundelement", "removing event");
-      window.removeEventListener("scroll", scrollHandler);
+      window.removeEventListener("scroll", () =>
+        scrollHandler(rightMenuItems, setSelectedItem)
+      );
     };
   }, []);
 
@@ -488,6 +413,7 @@ const FileMosaicDemoPage = (props) => {
           width="240px"
           items={rightMenuItems}
           selectedItemProp={selectedItem}
+          setSelected={setSelectedItem}
         />
       </RightMenuContainer>
     </React.Fragment>

src/utils/scrollHandler.ts

+export type RightMenuItemComplete = {
+  id: number;
+  label: string;
+  referTo: string;
+  element?: HTMLElement;
+}
+
+export const scrollHandler = (rightMenuItems: RightMenuItemComplete[],
+  setSelectedItem: React.Dispatch<React.SetStateAction<number>>) => {
+
+  if (rightMenuItems.length === 0) return;
+  let menu: HTMLElement | null = document.querySelector(".section-container");
+  if (menu === null) return;
+
+  const rightMenuItemsWithIdSec = rightMenuItems.map((x) => {
+    return {
+      ...x,
+      idSec: x.referTo.split("#")[1],
+    };
+  });
+
+  const arrElements = rightMenuItemsWithIdSec.map((x) => {
+    return { ...x, element: document.getElementById(x.idSec) };
+  });
+
+  let pos_menu = window.pageYOffset + menu.offsetHeight;
+
+  const arrElementsEnhanced = arrElements.map((x) => {
+    const element = x.element;
+    const postElement = element ? element.offsetTop + element.offsetHeight : Infinity;
+    const distance = Math.round(postElement - pos_menu);
+    return { ...x, distance };
+  });
+
+  let min = Math.min(
+    ...arrElementsEnhanced
+      .map((x) => Math.round(x.distance))
+      .filter((x) => x > 0)
+  );
+
+  arrElementsEnhanced.forEach((x) => {
+    if (x.distance === min) {
+      setSelectedItem((_id) => {
+        return x.id;
+      });
+    }
+  });
+};