diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
index 670d538f43ca34f00035fe43a832ee221c869387..6de6f8cd82f8d60eed80a8389c0962aa4658916f 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
@@ -38,32 +38,31 @@ const splittedCodeJS = `<Dropzone
uploadButton: {},
}}
>
- {extFiles.map((file) => (
- <FileMosaic
- {...file}
- key={file.id}
- onDelete={onDelete}
- onSee={handleSee}
- onWatch={handleWatch}
- onAbort={handleAbort}
- onCancel={handleCancel}
- resultOnTooltip
- alwaysActive
- preview
- info
- />
- ))}
+ {extFiles.map((file) => (
+ <FileMosaic
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ onAbort={handleAbort}
+ onCancel={handleCancel}
+ resultOnTooltip
+ preview
+ info
+ />
+ ))}
</Dropzone>
<FullScreen
open={imageSrc !== undefined}
onClose={() => setImageSrc(undefined)}
- >
+>
<ImagePreview src={imageSrc} />
</FullScreen>
<FullScreen
open={videoSrc !== undefined}
onClose={() => setVideoSrc(undefined)}
- >
+>
<VideoPreview src={videoSrc} autoPlay controls />
</FullScreen>`;
const completeCodeJS = `import {
@@ -72,9 +71,9 @@ const completeCodeJS = `import {
FullScreen,
ImagePreview,
VideoPreview,
- } from "@files-ui/react";
+} from "@files-ui/react";
- const BASE_URL =
+const BASE_URL =
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
export default function AdvancedDropzoneDemo() {
@@ -122,26 +121,26 @@ export default function AdvancedDropzoneDemo() {
return (
<>
<Dropzone
- onChange={updateFiles}
- minHeight="195px"
- value={extFiles}
- maxFiles={3}
- // FmaxFileSize={2998000 * 20}
- label="Drag'n drop files here or click to browse"
- // accept=".png,image/*, video/*"
- uploadConfig={{
- // autoUpload: true
- url: BASE_URL + "/file/28048465460",
- cleanOnUpload: true,
+ onChange={updateFiles}
+ minHeight="195px"
+ value={extFiles}
+ maxFiles={3}
+ // FmaxFileSize={2998000 * 20}
+ label="Drag'n drop files here or click to browse"
+ // accept=".png,image/*, video/*"
+ uploadConfig={{
+ // autoUpload: true
+ url: BASE_URL + "/file/28048465460",
+ cleanOnUpload: true,
}}
- onUploadStart={handleStart}
- onUploadFinish={handleFinish}
- //fakeUpload
- actionButtons={{
- position: "after",
- abortButton: {},
- deleteButton: {},
- uploadButton: {},
+ onUploadStart={handleStart}
+ onUploadFinish={handleFinish}
+ //fakeUpload
+ actionButtons={{
+ position: "after",
+ abortButton: {},
+ deleteButton: {},
+ uploadButton: {},
}}
>
{extFiles.map((file) => (
diff --git a/src/pages/demo/AvatarDemoPage.tsx b/src/pages/demo/AvatarDemoPage.tsx
index edc71e4c42769f52c0334f3de7a5388935ab3255..403e3ae202e72f31b7b9e52b72132a48b2b094e1 100644
--- a/src/pages/demo/AvatarDemoPage.tsx
+++ b/src/pages/demo/AvatarDemoPage.tsx
@@ -26,11 +26,24 @@ import DemoAvatarLoading from "../../components/demo-components/avatar-demo/Demo
import CodeDemoAvatarLoading from "../../components/demo-components/avatar-demo/CodeDemoAvatarLoading";
import CodeDemoAvatarVariant from "../../components/demo-components/avatar-demo/CodeAvatarVariant";
import CodeDemoAvatarLabels from "../../components/demo-components/avatar-demo/CodeDemoAvatarLabels";
+import { scrollHandler } from "../../utils/scrollHandler";
interface AvatarDemoPageProps {}
const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
props: AvatarDemoPageProps
) => {
+ 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>
@@ -221,8 +234,8 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
not set.
</li>
<li>
- <CodeHighlight>changeLabel</CodeHighlight>: when there is a valid
- source set.
+ <CodeHighlight>changeLabel</CodeHighlight>: when there is a
+ valid source set.
</li>
<li>
<CodeHighlight>loadingLabel</CodeHighlight>: when you want to
@@ -261,7 +274,12 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
</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/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 01b4c266d843f490e9b0b48d6e74214b809e44db..96e159c68bd486175a0796f324560ba0a33a15fa 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -39,8 +39,21 @@ import CodeDemoDropzoneClickable from "../../components/demo-components/dropzone
import CodeDemoDropzoneDropLayer from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer";
import CodeDemoDropzoneBehaviour from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour";
import CodeDemoDropzoneLabel from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoLabel";
+import { scrollHandler } from "../../utils/scrollHandler";
const DropzoneDemoPage = (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>
@@ -642,7 +655,12 @@ const DropzoneDemoPage = (props) => {
</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/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
index 621353cc67d663faa9d4d4c56f3f0ecd11c0d748..6e4586b3015cbc23b253d515d97cbe70bd3f3ea0 100644
--- a/src/pages/demo/FileInputButtonDemoPage.tsx
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -34,11 +34,24 @@ import DemoDropzoneUploading from "../../components/demo-components/dropzone-dem
import CodeDemoDropzoneUploading from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneUploading";
import DemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/DemoDropzoneActionButtons";
import CodeDemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons";
+import { scrollHandler } from "../../utils/scrollHandler";
interface FileInputButtonDemoPageProps {}
const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
props: FileInputButtonDemoPageProps
) => {
+ 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>
@@ -213,9 +226,10 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<Alert severity="info">
<AlertTitle> "fakeUpload" </AlertTitle>
By giving this prop, the {"<FileInputButton/>"} component will
- simulate the upload operation by randomly setting the upload status and
- message on each uploadable <TypeHighlight>ExtFile</TypeHighlight>.
- It will also set a fake progress.
+ simulate the upload operation by randomly setting the upload status
+ and message on each uploadable{" "}
+ <TypeHighlight>ExtFile</TypeHighlight>. It will also set a fake
+ progress.
</Alert>
<br />
<Alert severity="info">
@@ -453,7 +467,12 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
</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/FullScreenDemoPage.tsx b/src/pages/demo/FullScreenDemoPage.tsx
index aef7d771f00399c926d078a81ffe64b14093d531..18c088163ebb6112aa277e3f4cf44c4e0362dcd8 100644
--- a/src/pages/demo/FullScreenDemoPage.tsx
+++ b/src/pages/demo/FullScreenDemoPage.tsx
@@ -13,10 +13,23 @@ import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
+import { scrollHandler } from "../../utils/scrollHandler";
interface FullScreenDemoPageProps {}
const FullScreenDemoPage: React.FC<FullScreenDemoPageProps> = (
props: FullScreenDemoPageProps
) => {
+ 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>
@@ -127,7 +140,12 @@ const FullScreenDemoPage: React.FC<FullScreenDemoPageProps> = (
</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/download-page/FileDownloadPage.tsx b/src/pages/download-page/FileDownloadPage.tsx
index 8657bba2f0f78db4dc87aa6cdb00caf86ac7d997..ef7e7db102c78cc98fb9e5a2a35529cdb259b067 100644
--- a/src/pages/download-page/FileDownloadPage.tsx
+++ b/src/pages/download-page/FileDownloadPage.tsx
@@ -16,8 +16,21 @@ import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
+import { scrollHandler } from "../../utils/scrollHandler";
const FileDownloadPage = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainLayoutPage selectedIndex={9}>
@@ -25,10 +38,8 @@ const FileDownloadPage = () => {
<MainTitle>File Download</MainTitle>
<MainParagraph>
In this page you will find some demos for downloading files with{" "}
- <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight>{" "}
- and {" "}
- <CodeHighlight>{"<FileCard/>"}</CodeHighlight>{" "}
- components.
+ <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
+ <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components.
</MainParagraph>
<section id="samehost">
<SubTitle content="Same origin URL" />
@@ -162,7 +173,12 @@ const FileDownloadPage = () => {
</MainLayoutPage>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/file-icons/FileIconsPage.jsx b/src/pages/file-icons/FileIconsPage.jsx
index c7032b5f234f94f6cf76d117ee5d14a998f66324..996e48628abb01252d50b364a12581376f57c1e4 100644
--- a/src/pages/file-icons/FileIconsPage.jsx
+++ b/src/pages/file-icons/FileIconsPage.jsx
@@ -12,7 +12,20 @@ import DemoFileMosaicFileIcons from "../../components/demo-components/filemosaic
import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
+import { scrollHandler } from "../../utils/scrollHandler";
const FileIconsPage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
const [component, setComponent] = React.useState("FileMosaic");
const handleChangeComponent = (newVal) => {
setComponent(newVal);
@@ -24,11 +37,11 @@ const FileIconsPage = (props) => {
<MainTitle>File Icons (extensive list)</MainTitle>
<MainParagraph>
Both <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and{" "}
- <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a file icon
- according to the file mime type. A media type (also known as a
- Multipurpose Internet Mail Extensions or MIME type) indicates the
- nature and format of a document, file, or assortment of bytes. You
- can find more information{" "}
+ <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components diplay a
+ file icon according to the file mime type. A media type (also known
+ as a Multipurpose Internet Mail Extensions or MIME type) indicates
+ the nature and format of a document, file, or assortment of bytes.
+ You can find more information{" "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">
here
</AnchorToTab>
@@ -63,11 +76,15 @@ const FileIconsPage = (props) => {
<DemoFileMosaicFileIcons card={component === "FileCard"} />
</Paper>
</section>
-
- <RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
- </RightMenuContainer>
</MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
+ </RightMenuContainer>
</MainLayoutPage>
</React.Fragment>
);
diff --git a/src/pages/getting-started/GettingStartedPage.jsx b/src/pages/getting-started/GettingStartedPage.jsx
index 6a545ba15cf9e6d53f0e965dca981224b8a6454a..74d99bd03f64de6dd146260fe76cb3a6aac4ba4b 100644
--- a/src/pages/getting-started/GettingStartedPage.jsx
+++ b/src/pages/getting-started/GettingStartedPage.jsx
@@ -16,7 +16,21 @@ import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import { scrollHandler } from "../../utils/scrollHandler";
const GettingStartedPage = ({ darkModeOn }) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
+
return (
<MainLayoutPage selectedIndex={0}>
<MainContentContainer>
@@ -63,7 +77,12 @@ const GettingStartedPage = ({ darkModeOn }) => {
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</MainLayoutPage>
);
diff --git a/src/pages/localization/LocalizationPage.jsx b/src/pages/localization/LocalizationPage.jsx
index 730aa0b6ce76dc2409053b9152e117e497683bb0..e1885031556903f831a6af56c38eddbe0f04d333 100644
--- a/src/pages/localization/LocalizationPage.jsx
+++ b/src/pages/localization/LocalizationPage.jsx
@@ -14,8 +14,21 @@ import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
import DemoFileMosaicLocalization from "../../components/demo-components/localization/DemoFileMosaicLocalization";
import CodeJSFileMosaicLocalization from "../../components/demo-components/localization/CodeJSFileMosaicLocalization";
+import { scrollHandler } from "../../utils/scrollHandler";
const LocalizationPage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
const [component, setComponent] = React.useState("FileMosaic");
const handleChangeComponent = (newVal) => {
setComponent(newVal);
@@ -80,7 +93,12 @@ const LocalizationPage = (props) => {
</section>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</MainContentContainer>
</MainLayoutPage>
diff --git a/src/pages/server-side/ServerSidePage.tsx b/src/pages/server-side/ServerSidePage.tsx
index ffbd314bde1b9bd41bc1c872752b24fbbb09e468..4252902e75ac3c9c6bb7ee31bce585b800495eba 100644
--- a/src/pages/server-side/ServerSidePage.tsx
+++ b/src/pages/server-side/ServerSidePage.tsx
@@ -13,7 +13,20 @@ import RightMenu from "../../components/RightMenu/RightMenu";
import AnchorToTab from "../../components/util-components/AnchorToTab";
import { FileMosaic } from "../../files-ui";
import { redirect } from "../../utils/redirect";
+import { scrollHandler } from "../../utils/scrollHandler";
const ServerSidePage = () => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<React.Fragment>
<MainLayoutPage selectedIndex={6}>
@@ -63,12 +76,9 @@ const ServerSidePage = () => {
link
</AnchorToTab>
.
-
-
-
</DescParagraph>
</Paper>
- <CodeDemoServerSideExpress splittedOnly/>
+ <CodeDemoServerSideExpress splittedOnly />
</section>
<section id="springboot">
<SubTitle content="Java - Spring boot" />{" "}
@@ -101,12 +111,18 @@ const ServerSidePage = () => {
.
</DescParagraph>
</Paper>
- <CodeDemoServerSideJava splittedOnly/>
+ <CodeDemoServerSideJava splittedOnly />
</section>
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
+
</MainLayoutPage>
</React.Fragment>
);
@@ -132,7 +148,6 @@ const logoExpress = {
type: "image/png",
imageUrl: "/serverside/nodeexpress.jpg",
name: "Click me!",
-
};
const logoJava = {
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
index 9f9f73223059d23d218cd803621b99c8c6da06b3..90bdd76b474d8e0681b2ea66f7be558d5029b102 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -17,6 +17,7 @@ import { HeaderConfigAPIRows } from "../../data/HeaderConfigAPIRows";
import { ServerResponseAPIRows } from "../../data/ServerResponseAPIRows";
import { UploadConfigAPIRows } from "../../data/UploadConfigAPIRows";
import { ValidateFileResponseAPIrows } from "../../data/ValidateFileResponseAPIrows";
+import { scrollHandler } from "../../utils/scrollHandler";
import PropsTableApi from "../api/PropsTableApi";
const rightMenuItems = [
@@ -68,6 +69,19 @@ const rightMenuItems = [
];
const TypesPage = (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>
<MainLayoutPage selectedIndex={7}>
@@ -165,7 +179,12 @@ const TypesPage = (props) => {
</MainContentContainer>
</MainLayoutPage>{" "}
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</React.Fragment>
);
diff --git a/src/pages/usage/UsagePage.jsx b/src/pages/usage/UsagePage.jsx
index 33ace5eeef67d58c1792373ca2cfbeb59c6a775b..f1193068bf5fc8fc1182ce88baa0e9841907f40d 100644
--- a/src/pages/usage/UsagePage.jsx
+++ b/src/pages/usage/UsagePage.jsx
@@ -12,6 +12,7 @@ import AdvancedDropzoneCodeJS from "../../components/demo-components/dropzone-de
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
import MainTitle from "../../components/main-title/MainTitle";
+import { scrollHandler } from "../../utils/scrollHandler";
const rightMenuItems = [
{ id: 0, label: "Quick start", referTo: "/usage#quick-start" },
{
@@ -21,6 +22,18 @@ const rightMenuItems = [
},
];
const UsagePage = (props) => {
+ const [selectedItem, setSelectedItem] = React.useState(0);
+
+ React.useEffect(() => {
+ window.addEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ return () => {
+ window.removeEventListener("scroll", () =>
+ scrollHandler(rightMenuItems, setSelectedItem)
+ );
+ };
+ }, []);
return (
<MainLayoutPage selectedIndex={1}>
<MainContentContainer>
@@ -54,21 +67,21 @@ const UsagePage = (props) => {
demo below. Try adding the <CodeHighlight>accept</CodeHighlight>{" "}
prop to the Dropzone to see the changes:
</DescParagraph>
- {/* <iframe
- title="codesandbox"
- src="https://codesandbox.io/embed/dropzone-ui-basic-3j01v"
- //src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
- //src="https://codesandbox.io/s/material-ui-u9sy1h"
- style={{
- width: "100%",
- height: "500px",
- border: "0px none",
- borderRadius: "4px",
- overflow: "hidden",
- }}
- allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
- sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- ></iframe> */}
+ <iframe
+ title="codesandbox"
+ src="https://codesandbox.io/embed/dropzone-ui-basic-3j01v"
+ //src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
+ //src="https://codesandbox.io/s/material-ui-u9sy1h"
+ style={{
+ width: "100%",
+ height: "500px",
+ border: "0px none",
+ borderRadius: "4px",
+ overflow: "hidden",
+ }}
+ allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+ ></iframe>
</section>
<section id="advanced-example">
@@ -100,7 +113,12 @@ const UsagePage = (props) => {
</MainContentContainer>
<RightMenuContainer>
- <RightMenu width="240px" items={rightMenuItems} />
+ <RightMenu
+ width="240px"
+ items={rightMenuItems}
+ selectedItemProp={selectedItem}
+ setSelected={setSelectedItem}
+ />
</RightMenuContainer>
</MainLayoutPage>
);