From fce8e3c003273455cece003a6f09af7cd78962c4 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Wed, 22 Mar 2023 17:53:12 -0500
Subject: [PATCH] [WIP]: Add scroll position right menu in all api pages
---
src/components/RightMenu/RightMenu.tsx | 15 ++--
src/components/RightMenu/RightMenuProps.ts | 1 +
src/pages/api/AvatarApi.jsx | 17 +++-
src/pages/api/DropzoneApi.tsx | 21 ++++-
src/pages/api/FileCardApi.tsx | 20 ++++-
src/pages/api/FileInputButtonApi.jsx | 20 ++++-
src/pages/api/FileMosaicApi.jsx | 20 ++++-
src/pages/api/FullScreenApi.tsx | 20 ++++-
src/pages/api/ImagePreviewApi.tsx | 20 ++++-
src/pages/api/VideoPreviewApi.tsx | 20 ++++-
src/pages/demo/FileCardDemoPage.jsx | 26 ++++++-
src/pages/demo/FileMosaicDemoPage.jsx | 90 ++--------------------
src/utils/scrollHandler.ts | 48 ++++++++++++
13 files changed, 238 insertions(+), 100 deletions(-)
create mode 100644 src/utils/scrollHandler.ts
diff --git a/src/components/RightMenu/RightMenu.tsx b/src/components/RightMenu/RightMenu.tsx
index c4323e1..10a6ec8 100644
--- a/src/components/RightMenu/RightMenu.tsx
+++ b/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)}
>
diff --git a/src/components/RightMenu/RightMenuProps.ts b/src/components/RightMenu/RightMenuProps.ts
index f2818b8..e8d1444 100644
--- a/src/components/RightMenu/RightMenuProps.ts
+++ b/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
diff --git a/src/pages/api/AvatarApi.jsx b/src/pages/api/AvatarApi.jsx
index 2a7be2b..4a77225 100644
--- a/src/pages/api/AvatarApi.jsx
+++ b/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>
);
diff --git a/src/pages/api/DropzoneApi.tsx b/src/pages/api/DropzoneApi.tsx
index 25f25b5..dc17bba 100644
--- a/src/pages/api/DropzoneApi.tsx
+++ b/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>
);
diff --git a/src/pages/api/FileCardApi.tsx b/src/pages/api/FileCardApi.tsx
index eb80d00..129261c 100644
--- a/src/pages/api/FileCardApi.tsx
+++ b/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>
);
diff --git a/src/pages/api/FileInputButtonApi.jsx b/src/pages/api/FileInputButtonApi.jsx
index 4cc5a8d..81c97a1 100644
--- a/src/pages/api/FileInputButtonApi.jsx
+++ b/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>
);
diff --git a/src/pages/api/FileMosaicApi.jsx b/src/pages/api/FileMosaicApi.jsx
index 20d1ac3..b13d06b 100644
--- a/src/pages/api/FileMosaicApi.jsx
+++ b/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>
);
diff --git a/src/pages/api/FullScreenApi.tsx b/src/pages/api/FullScreenApi.tsx
index 071c78d..5fc7ae7 100644
--- a/src/pages/api/FullScreenApi.tsx
+++ b/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>
);
diff --git a/src/pages/api/ImagePreviewApi.tsx b/src/pages/api/ImagePreviewApi.tsx
index f9fefef..fa973d0 100644
--- a/src/pages/api/ImagePreviewApi.tsx
+++ b/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>
);
diff --git a/src/pages/api/VideoPreviewApi.tsx b/src/pages/api/VideoPreviewApi.tsx
index 3c6af3e..775f9f6 100644
--- a/src/pages/api/VideoPreviewApi.tsx
+++ b/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>
);
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index c4c96d3..30cad0d 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/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>
);
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index f66d0d6..f879a6c 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/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>
diff --git a/src/utils/scrollHandler.ts b/src/utils/scrollHandler.ts
new file mode 100644
index 0000000..6772527
--- /dev/null
+++ b/src/utils/scrollHandler.ts
@@ -0,0 +1,48 @@
+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;
+ });
+ }
+ });
+};
--
GitLab