Skip to content

Commit fce8e3c

Browse files
JinSSJ3JinSSJ3
committed
[WIP]: Add scroll position right menu in all api pages
1 parent 23d44c0 commit fce8e3c

File tree

13 files changed

+238
-100
lines changed

13 files changed

+238
-100
lines changed

‎src/components/RightMenu/RightMenu.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ import * as React from "react";
44
import { RightMenuProps } from "./RightMenuProps";
55
import "./RightMenu.scss";
66
const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
7-
const { items, width, selectedItemProp:selectedItem=0 } = props;
8-
//const [selectedItem, setSelectedItem] = React.useState<number>(selectedItemProp);
9-
/* const handleChangeSelectedItem = (newIndex: number) =>
10-
setSelectedItem(newIndex); */
7+
const { items, width, selectedItemProp: selectedItem = 0 } = props;
8+
119
const handleClickAnchor = (
1210
e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
1311
onClick: Function | undefined,
1412
id: number
1513
) => {
1614
onClick?.();
17-
//handleChangeSelectedItem(id);
15+
1816
};
17+
18+
const finalSelectedId = selectedItem;
1919
return (
2020
<List
21-
// className="section-container"
21+
// className="section-container"
2222
sx={{ width: "100%", maxWidth: width, bgcolor: "background.paper" }}
2323
component="nav"
2424
aria-labelledby="nested-list-subheader"
@@ -32,14 +32,13 @@ const RightMenu: React.FC<RightMenuProps> = (props: RightMenuProps) => {
3232
{items &&
3333
items.map(({ isSelected, label, onClick, referTo, id }, index) => {
3434
const classNameForAnchor: string =
35-
selectedItem === id
35+
finalSelectedId === id
3636
? "right-menu-anchor-item selected"
3737
: "right-menu-anchor-item";
3838
return (
3939
<li key={index} style={{ listStyle: "none", margin: 0 }}>
4040
<a
4141
className={classNameForAnchor}
42-
//href={`${baseUrl}/#${referTo}`}
4342
href={`${referTo}`}
4443
onClick={(e) => handleClickAnchor(e, onClick, id)}
4544
>

‎src/components/RightMenu/RightMenuProps.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ export interface RightMenuProps {
1111
width: string;
1212
baseUrl?: string;
1313
selectedItemProp?:number;
14+
setSelected?:Function;
1415
}

‎src/pages/api/AvatarApi.jsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
99
import PropsTableApi from "./PropsTableApi";
1010
import { AvatarAPIPropsRows } from "../../data/AvatarAPIPropsRows";
1111
import MainParagraph from "../../components/paragraph-main/MainParagraph";
12+
import { scrollHandler } from "../../utils/scrollHandler";
1213

1314
const rightMenuItems = [
1415
{
@@ -24,6 +25,15 @@ const rightMenuItems = [
2425
];
2526

2627
const AvatarApi = (props) => {
28+
const [selectedItem, setSelectedItem] = React.useState(0);
29+
React.useEffect(() => {
30+
window.addEventListener("scroll", () =>
31+
scrollHandler(rightMenuItems, setSelectedItem)
32+
);
33+
return () => {
34+
window.removeEventListener("scroll", scrollHandler);
35+
};
36+
}, []);
2737
return (
2838
<React.Fragment>
2939
<MainContentContainer>
@@ -49,7 +59,12 @@ const AvatarApi = (props) => {
4959
</section>
5060
</MainContentContainer>
5161
<RightMenuContainer>
52-
<RightMenu width="240px" items={rightMenuItems} />
62+
<RightMenu
63+
width="240px"
64+
items={rightMenuItems}
65+
selectedItemProp={selectedItem}
66+
setSelected={setSelectedItem}
67+
/>
5368
</RightMenuContainer>
5469
</React.Fragment>
5570
);

‎src/pages/api/DropzoneApi.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
99
import PropsTableApi from "./PropsTableApi";
1010
import { DropzoneAPIPropsRows } from "../../data/DropzoneAPIPropsRows";
1111
import MainParagraph from "../../components/paragraph-main/MainParagraph";
12+
import { scrollHandler } from "../../utils/scrollHandler";
1213
const rightMenuItems = [
1314
{
1415
id: 0,
@@ -23,6 +24,19 @@ const rightMenuItems = [
2324
];
2425

2526
const DropzoneApi = () => {
27+
const [selectedItem, setSelectedItem] = React.useState(0);
28+
29+
React.useEffect(() => {
30+
window.addEventListener("scroll", () =>
31+
scrollHandler(rightMenuItems, setSelectedItem)
32+
);
33+
return () => {
34+
window.removeEventListener("scroll", () =>
35+
scrollHandler(rightMenuItems, setSelectedItem)
36+
);
37+
};
38+
}, []);
39+
2640
return (
2741
<React.Fragment>
2842
<MainContentContainer>
@@ -53,7 +67,12 @@ const DropzoneApi = () => {
5367
</section>
5468
</MainContentContainer>
5569
<RightMenuContainer>
56-
<RightMenu width="240px" items={rightMenuItems} />
70+
<RightMenu
71+
width="240px"
72+
items={rightMenuItems}
73+
selectedItemProp={selectedItem}
74+
setSelected={setSelectedItem}
75+
/>
5776
</RightMenuContainer>
5877
</React.Fragment>
5978
);

‎src/pages/api/FileCardApi.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import MainParagraph from "../../components/paragraph-main/MainParagraph";
88
import RightMenu from "../../components/RightMenu/RightMenu";
99
import AnchorToTab from "../../components/util-components/AnchorToTab";
1010
import { FileCardAPIPropsRows } from "../../data/FileCardAPIPropsRows";
11+
import { scrollHandler } from "../../utils/scrollHandler";
1112
import PropsTableApi from "./PropsTableApi";
1213

1314
const rightMenuItems = [
@@ -24,6 +25,18 @@ const rightMenuItems = [
2425
];
2526

2627
const FileCardApi = () => {
28+
const [selectedItem, setSelectedItem] = React.useState(0);
29+
30+
React.useEffect(() => {
31+
window.addEventListener("scroll", () =>
32+
scrollHandler(rightMenuItems, setSelectedItem)
33+
);
34+
return () => {
35+
window.removeEventListener("scroll", () =>
36+
scrollHandler(rightMenuItems, setSelectedItem)
37+
);
38+
};
39+
}, []);
2740
return (
2841
<React.Fragment>
2942
<MainContentContainer>
@@ -52,7 +65,12 @@ const FileCardApi = () => {
5265
</section>
5366
</MainContentContainer>
5467
<RightMenuContainer>
55-
<RightMenu width="240px" items={rightMenuItems} />
68+
<RightMenu
69+
width="240px"
70+
items={rightMenuItems}
71+
selectedItemProp={selectedItem}
72+
setSelected={setSelectedItem}
73+
/>
5674
</RightMenuContainer>
5775
</React.Fragment>
5876
);

‎src/pages/api/FileInputButtonApi.jsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
99
import PropsTableApi from "./PropsTableApi";
1010
import { FileInputButtonPropsRows } from "../../data/FileInputButtonPropsRows";
1111
import MainParagraph from "../../components/paragraph-main/MainParagraph";
12+
import { scrollHandler } from "../../utils/scrollHandler";
1213

1314
const rightMenuItems = [
1415
{
@@ -23,6 +24,18 @@ const rightMenuItems = [
2324
},
2425
];
2526
const FileInputButtonApi = (props) => {
27+
const [selectedItem, setSelectedItem] = React.useState(0);
28+
29+
React.useEffect(() => {
30+
window.addEventListener("scroll", () =>
31+
scrollHandler(rightMenuItems, setSelectedItem)
32+
);
33+
return () => {
34+
window.removeEventListener("scroll", () =>
35+
scrollHandler(rightMenuItems, setSelectedItem)
36+
);
37+
};
38+
}, []);
2639
return (
2740
<React.Fragment>
2841
<MainContentContainer>
@@ -55,7 +68,12 @@ const FileInputButtonApi = (props) => {
5568
</section>
5669
</MainContentContainer>
5770
<RightMenuContainer>
58-
<RightMenu width="240px" items={rightMenuItems} />
71+
<RightMenu
72+
width="240px"
73+
items={rightMenuItems}
74+
selectedItemProp={selectedItem}
75+
setSelected={setSelectedItem}
76+
/>
5977
</RightMenuContainer>
6078
</React.Fragment>
6179
);

‎src/pages/api/FileMosaicApi.jsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import MainParagraph from "../../components/paragraph-main/MainParagraph";
88
import RightMenu from "../../components/RightMenu/RightMenu";
99
import AnchorToTab from "../../components/util-components/AnchorToTab";
1010
import { FileMosaicAPIPropsRows } from "../../data/FileMosaicAPIPropsRows";
11+
import { scrollHandler } from "../../utils/scrollHandler";
1112
import PropsTableApi from "./PropsTableApi";
1213

1314
const rightMenuItems = [
@@ -23,6 +24,18 @@ const rightMenuItems = [
2324
},
2425
];
2526
const FileMosaicApi = (props) => {
27+
const [selectedItem, setSelectedItem] = React.useState(0);
28+
29+
React.useEffect(() => {
30+
window.addEventListener("scroll", () =>
31+
scrollHandler(rightMenuItems, setSelectedItem)
32+
);
33+
return () => {
34+
window.removeEventListener("scroll", () =>
35+
scrollHandler(rightMenuItems, setSelectedItem)
36+
);
37+
};
38+
}, []);
2639
return (
2740
<React.Fragment>
2841
<MainContentContainer>
@@ -53,7 +66,12 @@ const FileMosaicApi = (props) => {
5366
</section>
5467
</MainContentContainer>
5568
<RightMenuContainer>
56-
<RightMenu width="240px" items={rightMenuItems} />
69+
<RightMenu
70+
width="240px"
71+
items={rightMenuItems}
72+
selectedItemProp={selectedItem}
73+
setSelected={setSelectedItem}
74+
/>
5775
</RightMenuContainer>
5876
</React.Fragment>
5977
);

‎src/pages/api/FullScreenApi.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Alert from "@mui/material/Alert";
99
import PropsTableApi from "./PropsTableApi";
1010
import { FullScreenAPIPropRows } from "./FullScreenAPIPropRows";
1111
import MainParagraph from "../../components/paragraph-main/MainParagraph";
12+
import { scrollHandler } from "../../utils/scrollHandler";
1213

1314
const rightMenuItems = [
1415
{
@@ -24,6 +25,18 @@ const rightMenuItems = [
2425
];
2526

2627
const FullScreenApi = () => {
28+
const [selectedItem, setSelectedItem] = React.useState(0);
29+
30+
React.useEffect(() => {
31+
window.addEventListener("scroll", () =>
32+
scrollHandler(rightMenuItems, setSelectedItem)
33+
);
34+
return () => {
35+
window.removeEventListener("scroll", () =>
36+
scrollHandler(rightMenuItems, setSelectedItem)
37+
);
38+
};
39+
}, []);
2740
return (
2841
<React.Fragment>
2942
<MainContentContainer>
@@ -64,7 +77,12 @@ const FullScreenApi = () => {
6477
</section>
6578
</MainContentContainer>
6679
<RightMenuContainer>
67-
<RightMenu width="240px" items={rightMenuItems} />
80+
<RightMenu
81+
width="240px"
82+
items={rightMenuItems}
83+
selectedItemProp={selectedItem}
84+
setSelected={setSelectedItem}
85+
/>
6886
</RightMenuContainer>
6987
</React.Fragment>
7088
);

‎src/pages/api/ImagePreviewApi.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ImagePreviewAPIPropsRows } from "./ImagePreviewAPIPropsRows";
1111
import MainParagraph from "../../components/paragraph-main/MainParagraph";
1212
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
1313
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
14+
import { scrollHandler } from "../../utils/scrollHandler";
1415

1516
const rightMenuItems = [
1617
{
@@ -26,6 +27,18 @@ const rightMenuItems = [
2627
];
2728

2829
const ImagePreviewApi = () => {
30+
const [selectedItem, setSelectedItem] = React.useState(0);
31+
32+
React.useEffect(() => {
33+
window.addEventListener("scroll", () =>
34+
scrollHandler(rightMenuItems, setSelectedItem)
35+
);
36+
return () => {
37+
window.removeEventListener("scroll", () =>
38+
scrollHandler(rightMenuItems, setSelectedItem)
39+
);
40+
};
41+
}, []);
2942
return (
3043
<React.Fragment>
3144
<MainContentContainer>
@@ -66,7 +79,12 @@ const ImagePreviewApi = () => {
6679
</section>
6780
</MainContentContainer>
6881
<RightMenuContainer>
69-
<RightMenu width="240px" items={rightMenuItems} />
82+
<RightMenu
83+
width="240px"
84+
items={rightMenuItems}
85+
selectedItemProp={selectedItem}
86+
setSelected={setSelectedItem}
87+
/>
7088
</RightMenuContainer>
7189
</React.Fragment>
7290
);

‎src/pages/api/VideoPreviewApi.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { VideoPreviewAPIPropsRows } from "./VideoPreviewAPIPropsRows";
1111
import MainParagraph from "../../components/paragraph-main/MainParagraph";
1212
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
1313
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
14+
import { scrollHandler } from "../../utils/scrollHandler";
1415

1516
const rightMenuItems = [
1617
{
@@ -26,6 +27,18 @@ const rightMenuItems = [
2627
];
2728

2829
const VideoPreviewApi = () => {
30+
const [selectedItem, setSelectedItem] = React.useState(0);
31+
32+
React.useEffect(() => {
33+
window.addEventListener("scroll", () =>
34+
scrollHandler(rightMenuItems, setSelectedItem)
35+
);
36+
return () => {
37+
window.removeEventListener("scroll", () =>
38+
scrollHandler(rightMenuItems, setSelectedItem)
39+
);
40+
};
41+
}, []);
2942
return (
3043
<React.Fragment>
3144
<MainContentContainer>
@@ -66,7 +79,12 @@ const VideoPreviewApi = () => {
6679
</section>
6780
</MainContentContainer>
6881
<RightMenuContainer>
69-
<RightMenu width="240px" items={rightMenuItems} />
82+
<RightMenu
83+
width="240px"
84+
items={rightMenuItems}
85+
selectedItemProp={selectedItem}
86+
setSelected={setSelectedItem}
87+
/>
7088
</RightMenuContainer>
7189
</React.Fragment>
7290
);

0 commit comments

Comments
 (0)