diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 4ee5aa2db96af1d6d98e76b9268cf23eb69c1b06..77a26eca4a0af398e68dac4f45c15442d66153c3 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -10,6 +10,9 @@ import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
import { useNavigateToTop } from "../../hooks/useNavigateToTop";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
const { /* items, */ selectedIndex /* setSelectedIndex */ } = props;
const navigate = useNavigateToTop();
@@ -64,7 +67,6 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
index: 26,
onClick: () => navigate("/components/fullscreen"),
},
-
],
},
{
@@ -126,43 +128,31 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
index: 5,
onClick: () => navigate("/localization"),
},
+ /* {
+ label: "Code Generator",
+ index: 7,
+ onClick: () => navigate("/code-generator"),
+ }, */
+ {
+ label: "Types",
+ index: 7,
+ onClick: () => navigate("/types"),
+ },
{
label: "Server side",
index: 6,
onClick: () => navigate("/server-side"),
},
{
- label: "Code Generator",
- index: 7,
- onClick: () => navigate("/code-generator"),
- },
- {
- label: "Types",
+ label: "File readers",
index: 8,
- onClick: () => navigate("/types"),
+ onClick: () => navigate("/file-reader"),
},
+
{
- label: "Utilities Methods",
+ label: "File download",
index: 9,
- subMenu: [
- {
- label: "File readers",
- index: 81,
- onClick: () => navigate("/utilities-methods/file-reader"),
- },
-
- {
- label: "File uploader",
- index: 82,
- onClick: () => navigate("/utilities-methods/file-uploader"),
- },
-
- {
- label: "File download",
- index: 83,
- onClick: () => navigate("/utilities-methods/file-downloader"),
- },
- ],
+ onClick: () => navigate("/file-download"),
},
];
@@ -175,6 +165,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
})
);
+
/* const handleClick = () => {
//setOpen(!open);
}; */
@@ -195,11 +186,24 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
withSubMenu?: boolean
) => {
//setSelectedIndex(index);
+ console.log("newIndex",index, withSubMenu);
if (!withSubMenu) {
onClick?.();
} else {
setRegularItemsIni((arr) =>
arr.map((item) => {
+ /* if (item.subMenu) {
+ const newSubMenu = item.subMenu.map((x) => {
+ if (x.index === index) {
+ return { ...x , };
+ } else {
+ return { ...x };
+ }
+ });
+ return { ...item, subMenu: newSubMenu };
+ } else */
+
+
if (item.index === index) {
return { ...item, isOpen: !item.isOpen };
}
@@ -300,7 +304,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
style={{ padding: "2px 20px" }}
key={indexBase}
// selected={subMenu === undefined && selectedIndex === index}
- selected={isOpen && selectedIndex === index}
+ selected={
+ (subMenu === undefined || isOpen) && selectedIndex === index
+ }
onClick={(event) =>
handleListItemClick(
event,
@@ -321,6 +327,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
primary={label || ""}
primaryTypographyProps={{ fontWeight: "600" }}
/>
+ {subMenu && <>{isOpen ? <ExpandLess /> : <ExpandMore />}</>}
</ListItemButton>
{subMenu && (
@@ -336,6 +343,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
<ListItemButton
style={{ paddingTop: 0 }}
sx={{ pl: 4 }}
+ //selected={selectedIndex === index}
selected={selectedIndex === index}
key={index2 + indexBase}
onClick={(event) =>
diff --git a/src/components/layout-pages/FooterPage.scss b/src/components/layout-pages/FooterPage.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f20e45ba0a257ec5db8e02697894ac86162f89eb
--- /dev/null
+++ b/src/components/layout-pages/FooterPage.scss
@@ -0,0 +1,28 @@
+.fui-page-footer-container {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ .redirect-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .like-icon-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ @media (max-width: "960px") {
+ .redirect-container {
+ display: none;
+ }
+ .redirect-small-container {
+ display: flex;
+ }
+ .like-icon-container {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/components/layout-pages/FooterPage.tsx b/src/components/layout-pages/FooterPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..80baaa503062423c8a8f553372101eccc9f36453
--- /dev/null
+++ b/src/components/layout-pages/FooterPage.tsx
@@ -0,0 +1,67 @@
+import { Button, Divider } from "@mui/material";
+import * as React from "react";
+import KeyboardArrowLeftIcon from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { useNavigate } from "react-router";
+import "./FooterPage.scss";
+
+interface FooterPageProps {
+ labelBefore?: string;
+ labelAfter?: string;
+ linkBefore?: string;
+ linkAfter?: string;
+ page: string;
+}
+const FooterPage: React.FC<FooterPageProps> = (props: FooterPageProps) => {
+ const { labelAfter, labelBefore, linkAfter, linkBefore, page } = props;
+ const redirect = useNavigate();
+ return (
+ <footer>
+ <Divider style={{ width: "100%" }}></Divider>
+ <div className="fui-page-footer-container">
+ <div className="redirect-small-container">
+ {labelBefore && (
+ <Button
+ startIcon={<KeyboardArrowLeftIcon />}
+ onClick={linkBefore ? () => redirect(linkBefore) : undefined}
+ >
+ {labelBefore}
+ </Button>
+ )}
+ {labelAfter && (
+ <Button
+ endIcon={<KeyboardArrowRightIcon />}
+ onClick={labelAfter ? () => redirect(labelAfter) : undefined}
+ >
+ {labelAfter}
+ </Button>
+ )}
+ </div>
+
+ <div className="redirect-container">
+ {labelBefore && (
+ <Button
+ startIcon={<KeyboardArrowLeftIcon />}
+ onClick={linkBefore ? () => redirect(linkBefore) : undefined}
+ >
+ {labelBefore}
+ </Button>
+ )}
+ </div>
+
+ <div className="like-icon-container">like icons</div>
+ <div className="redirect-container">
+ {labelAfter && (
+ <Button
+ endIcon={<KeyboardArrowRightIcon />}
+ onClick={linkAfter ? () => redirect(linkAfter) : undefined}
+ >
+ {labelAfter}
+ </Button>
+ )}
+ </div>
+ </div>
+ </footer>
+ );
+};
+export default FooterPage;
diff --git a/src/components/layout-pages/MainContentContainer.jsx b/src/components/layout-pages/MainContentContainer.jsx
index eb002ad343a70f3e0a016b357fab44143fefb541..3d54657ec59e79cf903cf8fccf8963a5e7cb411b 100644
--- a/src/components/layout-pages/MainContentContainer.jsx
+++ b/src/components/layout-pages/MainContentContainer.jsx
@@ -22,6 +22,7 @@ const MainContentContainer = ({ children }) => {
}}
>
{children}
+
</Box>
</Box>
);
diff --git a/src/pages/download-page/FileDownloadPage.jsx b/src/pages/download-page/FileDownloadPage.jsx
index 4e4690fbc14b77e0dec4ee24871b43edfa1addcf..d58b9999ac90e93923fb4ef1176c02b3134e49e8 100644
--- a/src/pages/download-page/FileDownloadPage.jsx
+++ b/src/pages/download-page/FileDownloadPage.jsx
@@ -1,10 +1,42 @@
import * as React from "react";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import RightMenu from "../../components/RightMenu/RightMenu";
-const FileDownloadPage = props =>{
- return(
- <div>
- FileDownloadPage
- </div>
- )
-}
-export default FileDownloadPage;
\ No newline at end of file
+const FileDownloadPage = (props) => {
+ return (
+ <React.Fragment>
+ <MainLayoutPage selectedIndex={9}>
+ <MainContentContainer>
+ <MainTitle>File Download</MainTitle>
+ <MainParagraph>
+ API reference docs for all the important types related to files UI
+ components.
+ </MainParagraph>
+ </MainContentContainer>
+ </MainLayoutPage>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
+ );
+};
+export default FileDownloadPage;
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "From Same host",
+ referTo: "/types#extfile",
+ },
+ {
+ id: 1,
+ label: "From Another host",
+ referTo: "/types#validatefileresponse",
+ },
+
+];
diff --git a/src/pages/server-side/ServerSidePage.jsx b/src/pages/server-side/ServerSidePage.jsx
deleted file mode 100644
index 8bf6b93be532de14349ed25e21586567c135768f..0000000000000000000000000000000000000000
--- a/src/pages/server-side/ServerSidePage.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-import MainContentContainer from "../../components/layout-pages/MainContentContainer";
-import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
-import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
-import MainTitle from "../../components/main-title/MainTitle";
-import RightMenu from "../../components/RightMenu/RightMenu";
-
-const ServerSidePage = (props) => {
- return (
- <React.Fragment>
- <MainLayoutPage selectedIndex={4}>
- <MainContentContainer>
- <MainTitle>Server Side implementatios</MainTitle>
- </MainContentContainer>{" "}
- <RightMenuContainer>
- <RightMenu width="240px" items={[]} />
- </RightMenuContainer>
- </MainLayoutPage>
- </React.Fragment>
- );
-};
-export default ServerSidePage;
diff --git a/src/pages/server-side/ServerSidePage.tsx b/src/pages/server-side/ServerSidePage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..251cbfa1ddae2348578b90014953200ed9c872f2
--- /dev/null
+++ b/src/pages/server-side/ServerSidePage.tsx
@@ -0,0 +1,69 @@
+import * as React from "react";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+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";
+
+const ServerSidePage = () => {
+ return (
+ <React.Fragment>
+ <MainLayoutPage selectedIndex={6}>
+ <MainContentContainer>
+ <MainTitle>Server Side implementations</MainTitle>
+ <MainParagraph>
+ Some implementations for handling correctly the uploaded files using
+ Files UI.
+ </MainParagraph>
+ <DescParagraph>
+ If you think there should be added more of them or you want to add
+ your own in any other programming language, please contact us.
+ </DescParagraph>
+ <section id="expressjs">
+ <SubTitle content="Express JS" />
+ <DescParagraph>
+ The following code is just the main part of a project. Check it up
+ in the following{" "}
+ <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/expressjs">
+ here
+ </AnchorToTab>
+ .
+ </DescParagraph>
+ </section>
+ <section id="springboot">
+ <SubTitle content="Java - Spring boot" />{" "}
+ <DescParagraph>
+ The following code is just the main part of a project. Check it up
+ in the following{" "}
+ <AnchorToTab href="https://github.com/files-ui/files-ui-web-test/tree/master/springboot">
+ here
+ </AnchorToTab>
+ .
+ </DescParagraph>
+ </section>
+ </MainContentContainer>
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </MainLayoutPage>
+ </React.Fragment>
+ );
+};
+export default ServerSidePage;
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "ExpressJS",
+ referTo: "/server-side#expressjs",
+ },
+ {
+ id: 1,
+ label: "Spring Boot (Java)",
+ referTo: "/server-side#springboot",
+ },
+];
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
index f2ace171a1085dd7b886be7c3ca817d82e0615a7..9f9f73223059d23d218cd803621b99c8c6da06b3 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -70,7 +70,7 @@ const rightMenuItems = [
const TypesPage = (props) => {
return (
<React.Fragment>
- <MainLayoutPage selectedIndex={6}>
+ <MainLayoutPage selectedIndex={7}>
<MainContentContainer>
<MainTitle>Types</MainTitle>
<MainParagraph>
diff --git a/src/pages/utilities/FileReaderPage.tsx b/src/pages/utilities/FileReaderPage.tsx
index a97127e1ae098885cadc7dec2c8012ebb3860905..7c6d87faa919f2c7d3f55298e102c1bceda5b1a9 100644
--- a/src/pages/utilities/FileReaderPage.tsx
+++ b/src/pages/utilities/FileReaderPage.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
@@ -18,9 +19,12 @@ const FileReaderPage: React.FC<FileReaderPageProps> = (
) => {
return (
<React.Fragment>
- <MainContentContainer>
+ <MainLayoutPage selectedIndex={8}>
+ <MainContentContainer>
<MainTitle>File Reader</MainTitle>
</MainContentContainer>
+ </MainLayoutPage>
+
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
diff --git a/src/pages/utilities/FileUploaderPage.tsx b/src/pages/utilities/FileUploaderPage.tsx
index 43b2af58ec62b9b78bcc5e3cffcf29021860360a..be02427c0ce4c09549eb7955d240d2c4187cd637 100644
--- a/src/pages/utilities/FileUploaderPage.tsx
+++ b/src/pages/utilities/FileUploaderPage.tsx
@@ -1,5 +1,6 @@
import * as React from "react";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainLayoutPage from "../../components/layout-pages/MainLayoutPage";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
import MainTitle from "../../components/main-title/MainTitle";
import RightMenu from "../../components/RightMenu/RightMenu";
@@ -7,8 +8,13 @@ import RightMenu from "../../components/RightMenu/RightMenu";
const rightMenuItems = [
{
id: 0,
+ label: "Upload to server",
+ referTo: "/file-upload/#uploadtoaws",
+ },
+ {
+ id: 1,
label: "Upload to AWS",
- referTo: "/utilities-methods/file-reader/#read-as-url",
+ referTo: "/file-upload/#uploadtoaws",
},
];
@@ -18,9 +24,11 @@ const FileUploaderPage: React.FC<FileUploaderPageProps> = (
) => {
return (
<React.Fragment>
- <MainContentContainer>
- <MainTitle>File Upoad</MainTitle>
- </MainContentContainer>
+ <MainLayoutPage selectedIndex={8}>
+ <MainContentContainer>
+ <MainTitle>File Upload</MainTitle>
+ </MainContentContainer>
+ </MainLayoutPage>
<RightMenuContainer>
<RightMenu width="240px" items={rightMenuItems} />
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index 0de4a540464155f78ddcc73ce43891eacc10709d..ecc323b2c87a2721516a5e863cf5746ba0a7cc86 100644
--- a/src/routes/MainRouter.jsx
+++ b/src/routes/MainRouter.jsx
@@ -6,7 +6,7 @@ import DropzoneDemoPage from "./../pages/demo/DropzoneDemoPage";
import FileMosaicDemoPage from "./../pages/demo/FileMosaicDemoPage";
import FileCardDemoPage from "./../pages/demo/FileCardDemoPage";
import ServerSidePage from "./../pages/server-side/ServerSidePage";
-import CodeGeneratorPage from "./../pages/code-generator/CodeGeneratorPage";
+//import CodeGeneratorPage from "./../pages/code-generator/CodeGeneratorPage";
import DropzoneApi from "./../pages/api/DropzoneApi";
import FileMosaicApi from "./../pages/api/FileMosaicApi";
import FileCardApi from "./../pages/api/FileCardApi";
@@ -15,7 +15,7 @@ import TypesPage from "./../pages/types-page/TypesPage";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import MainLayoutPage from "../components/layout-pages/MainLayoutPage";
import FileReaderPage from "../pages/utilities/FileReaderPage";
-import FileUploaderPage from "../pages/utilities/FileUploaderPage";
+//import FileUploaderPage from "../pages/utilities/FileUploaderPage";
import AvatarDemoPage from "../pages/demo/AvatarDemoPage";
import FileInputButtonApi from "../pages/api/FileInputButtonApi";
import AvatarApi from "../pages/api/AvatarApi";
@@ -134,37 +134,28 @@ const router = createBrowserRouter([
path: "/server-side",
element: <ServerSidePage />,
},
- {
+/* {
path: "/code-generator",
element: <CodeGeneratorPage />,
- },
+ }, */
{
path: "/types",
element: <TypesPage />,
},
-
{
- path: "/utilities-methods",
- element: (
- <MainLayoutPage selectedIndex={7}>
- <Outlet />
- </MainLayoutPage>
- ),
- children: [
- {
- path: "/utilities-methods/file-reader",
- element: <FileReaderPage />,
- },
- {
- path: "/utilities-methods/file-uploader",
- element: <FileUploaderPage />,
- },
- {
- path: "/utilities-methods/file-downloader",
- element: <FileDownloadPage />,
- },
- ],
+ path: "/file-reader",
+ element: <FileReaderPage />,
+ },
+ {
+ path: "/file-download",
+ element: <FileDownloadPage />,
},
+ ///
+/* {
+ path: "/file-upload",
+ element: <FileUploaderPage />,
+ }, */
+
]);
const MainRouter = (props) => {
diff --git a/src/types/PageProps.ts b/src/types/PageProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8fac0f2eaed7d43f2efa6ad80c1557266bcf625d
--- /dev/null
+++ b/src/types/PageProps.ts
@@ -0,0 +1,32 @@
+export type PageList =
+ "Getting Started" |
+ "Usage" |
+ "Dropzone Demo" |
+ "FileMosaic Demo" |
+ "FileCard Demo" |
+ "FileInputButton Demo" |
+ "FullScreen Demo" |
+ "Avatar Demo" |
+ "Dropzone Api" |
+ "FileMosaic Api" |
+ "FileCard Api" |
+ "FileInputButton Api" |
+ "FullScreen Api" |
+ "Avatar Api" |
+ "ImagePreview Api" |
+ "VideoPreview Api" |
+ "File Icons" |
+ "Localization" |
+ "Server Side" |
+ "Types" |
+ "File Reders" |
+ "File Upload" |
+ "File Download"
+ ;
+
+export type PageProps = {
+ pageBefore: PageProps;
+ pageAfter: PageProps;
+ url?: string;
+ key: PageList;
+}
\ No newline at end of file