diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index ba39bdd3bd85642c58def2c3ce91dc12b0171b65..16e855bf3427898fec69c0a5961d739286773967 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/src/components/MainMenu/MainMenuSideBar.tsx
@@ -8,12 +8,14 @@ import Collapse from "@mui/material/Collapse";
import { MainMenuSideBarItems, MainMenuSideBarProps } from "./MenuSideBarProps";
import { useNavigate } from "react-router";
-import ElectricBoltIcon from '@mui/icons-material/ElectricBolt';
+import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
+import { useNavigateToTop } from "../../hooks/useNavigateToTop";
export default function MainMenuSideBar(props: MainMenuSideBarProps) {
const { /* items, */ selectedIndex, setSelectedIndex } = props;
- const navigate = useNavigate();
- const quickStartItems: MainMenuSideBarItems[] = [
+ const navigate = useNavigateToTop();
+
+ const quickStartItemsIni: MainMenuSideBarItems[] = [
{
label: "Getting started",
index: 0,
@@ -25,25 +27,32 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
onClick: () => navigate("/usage"),
},
];
- const Regularitems: MainMenuSideBarItems[] = [
+
+ const RegularItemsIni: MainMenuSideBarItems[] = [
{
//Icon: <FileOpenIcon />,
label: "Components",
index: 2,
+ isOpen:false,
subMenu: [
{
label: "Dropzone",
- index: 3,
+ index: 21,
onClick: () => navigate("/components/dropzone"),
},
{
label: "FileMosaic",
- index: 4,
+ index: 22,
onClick: () => navigate("/components/filemosaic"),
},
+ {
+ label: "FileInputButton",
+ index: 23,
+ onClick: () => navigate("/components/fileinputbutton"),
+ },
{
label: "FileCard",
- index: 5,
+ index: 24,
onClick: () => navigate("/components/filecard"),
},
],
@@ -51,48 +60,78 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{
// Icon: <DocumentScannerIcon />,
label: "API documentation",
- index: 6,
+ index: 3,
+ isOpen:false,
+
subMenu: [
{
label: "Dropzone",
- index: 5,
+ index: 31,
onClick: () => navigate("/api/dropzone"),
},
+
{
label: "FileMosaic",
- index: 6,
+ index: 32,
onClick: () => navigate("/api/filemosaic"),
},
+ {
+ label: "FileInputButton",
+ index: 33,
+ onClick: () => navigate("/api/fileinputbutton"),
+ },
{
label: "FileCard",
- index: 7,
+ index: 34,
onClick: () => navigate("/api/filecard"),
},
+ {
+ label: "FullScreenPreview",
+ index: 34,
+ onClick: () => navigate("/api/fullscreenpreview"),
+ },
+ {
+ label: "ImagePreview",
+ index: 34,
+ onClick: () => navigate("/api/imagepreview"),
+ },
+ {
+ label: "VideoPreview",
+ index: 34,
+ onClick: () => navigate("/api/videopreview"),
+ },
],
},
{
label: "Server side",
- index: 7,
+ index: 5,
onClick: () => navigate("/server-side"),
},
{
label: "Code Generator",
- index: 8,
+ index: 6,
onClick: () => navigate("/code-generator"),
},
- { label: "Types", index: 9, onClick: () => navigate("/types") },
+ {
+ label: "Types",
+ index: 7,
+ onClick: () => navigate("/types"),
+ },
{
label: "Utilities Methods",
- index: 10,
+ index: 8,
onClick: () => navigate("/utilities-methods"),
},
];
- const [open, setOpen] = React.useState(true);
+ const [quickStartItems, setQuickStartItems] =
+ React.useState(quickStartItemsIni);
+
+ const [regularItems, setRegularItemsIni] = React.useState(RegularItemsIni);
const handleClick = () => {
- setOpen(!open);
+ //setOpen(!open);
};
const handleCLickItem = (
@@ -110,9 +149,19 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
onClick: Function | undefined,
withSubMenu?: boolean
) => {
- setSelectedIndex(index);
+ //setSelectedIndex(index);
if (!withSubMenu) {
onClick?.();
+ } else {
+
+ setRegularItemsIni((arr) =>
+ arr.map((item) => {
+ if (item.index === index) {
+ return { ...item, isOpen: !item.isOpen };
+ }
+ return { ...item };
+ })
+ );
}
};
@@ -124,13 +173,13 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
- <ElectricBoltIcon/> Quick Start
+ <ElectricBoltIcon /> Quick Start
</ListSubheader>
}
>
{quickStartItems &&
quickStartItems.map(
- ({ Icon, label, onClick, index, subMenu }, indexBase) => (
+ ({ Icon, label, onClick, index, subMenu, isOpen }, indexBase) => (
<React.Fragment key={indexBase}>
<ListItemButton
style={{ padding: "2px 20px" }}
@@ -160,7 +209,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{subMenu && (
<Collapse
- in={open}
+ in={isOpen}
timeout="auto"
unmountOnExit
key={"collapse-submenu" + indexBase}
@@ -198,9 +247,9 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
</ListSubheader>
}
>
- {Regularitems &&
- Regularitems.map(
- ({ Icon, label, onClick, index, subMenu }, indexBase) => (
+ {regularItems &&
+ regularItems.map(
+ ({ Icon, label, onClick, index, subMenu, isOpen }, indexBase) => (
<React.Fragment key={indexBase}>
<ListItemButton
style={{ padding: "2px 20px" }}
@@ -230,7 +279,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{subMenu && (
<Collapse
- in={open}
+ in={isOpen}
timeout="auto"
unmountOnExit
key={"collapse-submenu" + indexBase}
@@ -239,6 +288,7 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
{subMenu.map(
({ Icon, label, onClick, index }, index2) => (
<ListItemButton
+ style={{ paddingTop: 0 }}
sx={{ pl: 4 }}
selected={selectedIndex === index}
key={index2 + indexBase}
diff --git a/src/components/MainMenu/MenuSideBarProps.ts b/src/components/MainMenu/MenuSideBarProps.ts
index 765fa2527ea321d21065931eb85c07c181e3bd6e..be74a5870e621c1ad49dc662d94a87a2edca41ff 100644
--- a/src/components/MainMenu/MenuSideBarProps.ts
+++ b/src/components/MainMenu/MenuSideBarProps.ts
@@ -10,7 +10,8 @@ export type MainMenuSideBarItems = {
Icon?: any,
onClick?: Function,
index: number,
- subMenu?: Array<MainMenuSideBarPropsIndividual>
+ subMenu?: Array<MainMenuSideBarPropsIndividual>,
+ isOpen?:boolean;
}
export type MainMenuSideBarProps = {
diff --git a/src/components/MainPage/GettingStarted.jsx b/src/components/MainPage/GettingStarted.jsx
index 7acc55b43655d86c06b948afb590a6205ea48281..dde679e6d94ef4a250710843285897b8e68d799a 100644
--- a/src/components/MainPage/GettingStarted.jsx
+++ b/src/components/MainPage/GettingStarted.jsx
@@ -5,6 +5,7 @@ import CheckIcon from "@mui/icons-material/Check";
import "../../styles/GettingStarted.scss";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import { useNavigate } from "react-router";
+import { useNavigateToTop } from "../../hooks/useNavigateToTop";
const CodeButton = styled(Button)({
display: "flex",
justifyContent: "space-between",
@@ -17,7 +18,7 @@ const CodeButton = styled(Button)({
});
const GettingStarted = ({ darkModeOn }) => {
- const navigator = useNavigate();
+ const navigator = useNavigateToTop();
const [copiedNpm, setCopiedNpm] = React.useState(false);
const [copiedYarn, setCopiedYarn] = React.useState(false);
diff --git a/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx b/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
index 7f7f00f2b4951428f16e75e05607da8292ed0907..4c9f7adaa3ede79c349cad7dd81ee46d1efc7bb8 100644
--- a/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
+++ b/src/components/demo-components/filemosaic-demo/BasicFileMosaicDemo.jsx
@@ -1,4 +1,5 @@
import * as React from "react";
+import { InputButton } from "../../../files-ui";
import { FileMosaic } from "../../../files-ui/components/file-mosaic";
const sampleFile = {
id: ":0:",
@@ -9,19 +10,17 @@ const sampleFile = {
};
const BasicFileMosaicDemo = (props) => {
const [value, setValue] = React.useState([]);
+
+ const updateFiles = (incommingFiles) => {
+ console.log("incomming extFiles", incommingFiles);
+ setValue(incommingFiles);
+ };
const removeFile = () => {
setValue([]);
};
return (
<>
- <FileMosaic
- key={sampleFile.id}
- {...sampleFile}
- onDelete={() => {}}
- info
- alwaysActive
- />
- {value.length>0 ? (
+ {value.length > 0 ? (
<FileMosaic
key={sampleFile.id + ":"}
{...value[0]}
@@ -30,8 +29,21 @@ const BasicFileMosaicDemo = (props) => {
alwaysActive
/>
) : (
- <div onClick={() => setValue([sampleFile])}>InputFileButton</div>
+ <>
+ <InputButton
+ label="Browse Files..."
+ onChange={updateFiles}
+ textDecoration="uppercase"
+ />
+ </>
)}
+ <FileMosaic
+ key={sampleFile.id}
+ {...sampleFile}
+ onDelete={() => {}}
+ info
+ alwaysActive
+ />
</>
);
};
diff --git a/src/components/layout-pages/MainLayoutPage.jsx b/src/components/layout-pages/MainLayoutPage.jsx
index 205ff469b900c125791d93714b173f68b298ae1d..2e61dfe4d39bcb292b54259f267324b6519c8411 100644
--- a/src/components/layout-pages/MainLayoutPage.jsx
+++ b/src/components/layout-pages/MainLayoutPage.jsx
@@ -2,9 +2,9 @@ import { Stack, Box } from "@mui/material";
import * as React from "react";
import NavBarTemplate from "../../templates/NavBarTemplate";
-const MainLayoutPage = ({ mainContent, rightMenu, children }) => {
+const MainLayoutPage = ({ mainContent, rightMenu, children, selectedIndex }) => {
return (
- <NavBarTemplate>
+ <NavBarTemplate selectedIndex={selectedIndex}>
<Stack direction={"row"} sx={{ position: "relative" }}>
<Box
sx={{
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
index 417b0a361895a2592004ca8512e8a31e4c804e7d..86929c08dc421dba6e9ac1ba079bfccdab77d9b7 100644
--- a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
+++ b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
@@ -75,6 +75,7 @@ export interface DropzoneFullProps extends OverridableComponentProps {
* the user drops files or selects files
*/
disableRipple?: boolean;
+
/////////////// VALIDATION STAGE ///////////////
/**
* The max file size allowed in bytes
@@ -189,12 +190,12 @@ export interface DropzoneFullProps extends OverridableComponentProps {
onUploadFinish?: (responses: UploadResponse[]) => void;
- /**
- * The configuration needed for uploading the files.
- * When "uploadConfig" is not given or uploadConfig.url is undefined
- * the upload button will not be visible
- * and uploadOnDrop flag will not work
- */
+ /**
+ * The configuration needed for uploading the files.
+ * When "uploadConfig" is not given or uploadConfig.url is undefined
+ * the upload button will not be visible
+ * and uploadOnDrop flag will not work
+ */
actionButtons?: DropzoneActions;
//advancedConfig?: DropzoneAdvancedConfig;
@@ -262,7 +263,7 @@ export type DropzoneActionButton = {
style?: React.CSSProperties;
className?: string;
resetStyles: boolean;
- onClick?:Function;
+ onClick?: Function;
}
export interface DropzoneActions {
diff --git a/src/files-ui/components/index.ts b/src/files-ui/components/index.ts
index cd790fe513bbf4aa6774d11f25734451457c92dd..fad03ef4e7ab86e50d4bac95958a6cae30de32a4 100644
--- a/src/files-ui/components/index.ts
+++ b/src/files-ui/components/index.ts
@@ -4,6 +4,8 @@ export * from "./dropzone";
export { FileItem } from "./file-item";
export * from "./file-item";
+export { InputButton } from "./input-button";
+export * from "./input-button";
// internal components
diff --git a/src/files-ui/components/input-button/InputButton.tsx b/src/files-ui/components/input-button/InputButton.tsx
index dcb379e4c7d7bd9291c012b91c14cbc296a6380b..5f15a55d1d692477c67dbe093a3c803a407e1908 100644
--- a/src/files-ui/components/input-button/InputButton.tsx
+++ b/src/files-ui/components/input-button/InputButton.tsx
@@ -25,7 +25,8 @@ import {
import useDropzoneFileListUpdater from "../../hooks/useDropzoneFileUpdater";
import InputHidden from "../input-hidden/InputHidden";
import { MaterialButton } from "../material-button";
-import { InputButtonProps } from "./InputButtonProps";
+import { mergeProps } from "../overridable";
+import { defaultInputButtonProps, InputButtonProps } from "./InputButtonProps";
const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
const {
@@ -41,7 +42,15 @@ const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
disabled,
onUploadFinish,
fakeUpload,
- } = props;
+ label,
+ children,
+ style,
+ className,
+ color,
+ variant,
+ textDecoration,
+ resetStyles,
+ } = mergeProps(props, defaultInputButtonProps);
const {
url,
method,
@@ -109,7 +118,7 @@ const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
* @returns nothing
*/
const uploadfiles = async (localFiles: ExtFile[]): Promise<void> => {
- if(!url) return;
+ if (!url) return;
setIsUploading(true);
print_manager(localFiles, "start");
@@ -233,7 +242,7 @@ const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
const finishUploadMessenger: FunctionLabel =
DropzoneLocalizer.uploadFinished as FunctionLabel;
- /* setLocalMessage(
+ /* setLocalMessage(
finishUploadMessenger(missingUpload - totalRejected, totalRejected)
); */
setIsUploading(false);
@@ -322,15 +331,27 @@ const InputButton: React.FC<InputButtonProps> = (props: InputButtonProps) => {
handleClickInput(inputRef.current);
}
+
return (
- <MaterialButton onClick={handleClick}>
+ <>
+ <MaterialButton
+ className={className}
+ style={style}
+ color={color}
+ variant={variant}
+ textDecoration={textDecoration}
+ resetStyles={resetStyles}
+ onClick={handleClick}
+ >
+ {children || label}
+ </MaterialButton>
<InputHidden
multiple={maxFiles ? maxFiles > 1 : true}
accept={accept || ""}
inputRef={inputRef}
onChange={handleChangeInput}
/>
- </MaterialButton>
+ </>
);
};
export default InputButton;
diff --git a/src/files-ui/components/input-button/InputButtonProps.ts b/src/files-ui/components/input-button/InputButtonProps.ts
index 3b66faab708a6145b985bc0dc91ba09c4a04c2d0..a7dd4686abed16cc6d8bae4fcd7927575e436228 100644
--- a/src/files-ui/components/input-button/InputButtonProps.ts
+++ b/src/files-ui/components/input-button/InputButtonProps.ts
@@ -1,32 +1,33 @@
import { CustomValidateFileResponse, ExtFile, Localization, UploadConfig, UploadResponse } from "../../core";
+import { DropzoneActions } from "../dropzone/components/dropzone/DropzoneProps";
import { MaterialButtonProps } from "../material-button/MaterialButtonProps";
import { OverridableComponentProps } from "../overridable";
interface InputButtonFullProps extends OverridableComponentProps {
/**
- * Probably one of the most important methods (callbacks).
- * `onChange()` returns as first parameter an array of `ExtFile` objects,
- * with at least the following structure:
- *
- * ```jsx
- * export type ExtFile =
- * {
- * id: number | string | undefined;
- * file: File;
- * valid: boolean;
- * errors?: string[];
- * uploadMessage?: string;
- * uploadStatus?: undefined | "uploading", "success", "error";
- * }
- * ```
- * This event is triggered when upload starts and when upload
- * finishes for each file in order to update the props on each ExtFile
- */
+ * Probably one of the most important methods (callbacks).
+ * `onChange()` returns as first parameter an array of `ExtFile` objects,
+ * with at least the following structure:
+ *
+ * ```jsx
+ * export type ExtFile =
+ * {
+ * id: number | string | undefined;
+ * file: File;
+ * valid: boolean;
+ * errors?: string[];
+ * uploadMessage?: string;
+ * uploadStatus?: undefined | "uploading", "success", "error";
+ * }
+ * ```
+ * This event is triggered when upload starts and when upload
+ * finishes for each file in order to update the props on each ExtFile
+ */
onChange?: (files: ExtFile[]) => void;
/**
- * Just like any other input component.
- * The value of the input element, required for a controlled component.
- */
+ * Just like any other input component.
+ * The value of the input element, required for a controlled component.
+ */
value?: ExtFile[];
/**
@@ -40,11 +41,7 @@ interface InputButtonFullProps extends OverridableComponentProps {
* the user drops files or selects files
*/
disableRipple?: boolean;
- /**
- * The behaviour when new files are selected or dropped
- * @default 'add'
- */
- behaviour?: 'add' | 'replace';
+
/////////////// VALIDATION STAGE ///////////////
/**
* The max file size allowed in bytes
@@ -77,6 +74,17 @@ interface InputButtonFullProps extends OverridableComponentProps {
* ```
*/
validator?: (f: File) => CustomValidateFileResponse;
+ /**
+ * Flag that indicates that dropzone will automatically remove non valid files.
+ * This will happen every time user drops files or selects files from file dialog.
+ * This flag will only work if validation is active.
+ */
+ autoClean?: boolean;
+ /**
+ * The behaviour when new files are selected or dropped
+ * @default 'add'
+ */
+ behaviour?: 'add' | 'replace';
/////////////// UPLOAD STAGE ///////////////
/**
* The configuration needed for uploading the files.
@@ -93,6 +101,13 @@ interface InputButtonFullProps extends OverridableComponentProps {
*/
fakeUpload?: boolean;
/**
+ * This event is triggered when upload process starts
+ * also returns the list of files that will be uploaded,
+ * Unlike Onchange, onUploadStart will only return a list of files thta are candidates to be uploaded,
+ * in case they are valid or upload status is "error"
+ */
+ onUploadStart?: (files: ExtFile[]) => void;
+ /**
* This event returns as first aparameter the list of responses for each file following the structure:
* responses = [
* {id: <the file id>, serverResponse: the server response}
@@ -101,6 +116,14 @@ interface InputButtonFullProps extends OverridableComponentProps {
onUploadFinish?: (responses: UploadResponse[]) => void;
+
+ /**
+ * The configuration needed for uploading the files.
+ * When "uploadConfig" is not given or uploadConfig.url is undefined
+ * the upload button will not be visible
+ * and uploadOnDrop flag will not work
+ */
+ actionButtons?: DropzoneActions;
}
@@ -110,4 +133,14 @@ export declare type InputButtonProps =
[D in keyof InputButtonFullProps]: InputButtonFullProps[D]
} & {
[D in keyof MaterialButtonProps]: MaterialButtonProps[D]
- }
\ No newline at end of file
+ }
+
+
+export const defaultInputButtonProps: InputButtonProps =
+{
+
+ behaviour: "add",
+ disabled: false,
+ uploadConfig: {},
+ actionButtons: {},
+}
\ No newline at end of file
diff --git a/src/files-ui/components/input-button/index.ts b/src/files-ui/components/input-button/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da51a83f2100f45bc6d09c0734292ea5779570a2
--- /dev/null
+++ b/src/files-ui/components/input-button/index.ts
@@ -0,0 +1,2 @@
+export { default as InputButton} from "./InputButton";
+export * from "./InputButton";
\ No newline at end of file
diff --git a/src/files-ui/components/material-button/MaterialButton.tsx b/src/files-ui/components/material-button/MaterialButton.tsx
index bd00289106bb7a0d26e22e2a7144941eb693e345..478d1de0c6322f3c46688fffe51bb09879704e4f 100644
--- a/src/files-ui/components/material-button/MaterialButton.tsx
+++ b/src/files-ui/components/material-button/MaterialButton.tsx
@@ -1,7 +1,6 @@
import * as React from "react";
import useMaterialButtonClassName from "./hooks/useMaterialButtonClassName";
import { MaterialButtonProps } from "./MaterialButtonProps";
-import MaterialButtonStyleManager from "./utils/MaterialButtonStyleManager";
import "./MaterialButton.scss";
import { createRippleButton } from "../../core";
diff --git a/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts b/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
index 4c6a82f578ee941b1e99b1d157b512f87d73fb4e..7bf9aeb3debbc8053c6e63f862c0fcd8865cd009 100644
--- a/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
+++ b/src/files-ui/components/material-button/hooks/useMaterialButtonClassName.ts
@@ -43,7 +43,7 @@ const useMaterialButtonClassName = (
disabled,
color,
textColor,
- // textDecoration
+ textDecoration
);
let idStyle: string = "";
diff --git a/src/files-ui/components/material-button/utils/MaterialButtonStyleManager.ts b/src/files-ui/components/material-button/utils/MaterialButtonStyleManager.ts
index cc2d8376780737149309726bc859923400956b92..0114833574e9c9f76098297d7d300795f77b768c 100644
--- a/src/files-ui/components/material-button/utils/MaterialButtonStyleManager.ts
+++ b/src/files-ui/components/material-button/utils/MaterialButtonStyleManager.ts
@@ -27,7 +27,7 @@ export default class MaterialButtonStyleManager {
disabled?: boolean,
color?: string,
textColor?: string,
- //textDecoration?: string
+ textDecoration?: "uppercase" | "capitalize" | "lowercase" | "none",
//nextClassName?: number
): DynamicSheet => {
//([{ variant, disabled, color, textColor, nextClassName }]);
@@ -59,7 +59,7 @@ export default class MaterialButtonStyleManager {
asureColor(colourNameToHex(color)),
1
),
- //textDecoration: finalTextDecoration
+ textDecoration: textDecoration
};
sheetRules[1].rules = {
":hover": {
@@ -80,7 +80,7 @@ export default class MaterialButtonStyleManager {
)}`,
color: asureColor(colourNameToHex(color)),
backgroundColor: "transparent",
- //textDecoration: finalTextDecoration
+ textDecoration: textDecoration
};
sheetRules[1].rules = {
":hover": {
@@ -99,7 +99,7 @@ export default class MaterialButtonStyleManager {
sheetRules[0].rules = {
color: asureColor(colourNameToHex(color)),
backgroundColor: "transparent",
- //textDecoration: finalTextDecoration
+ textDecoration: textDecoration
};
sheetRules[1].rules = {
":hover": {
diff --git a/src/hooks/useNavigateToTop.ts b/src/hooks/useNavigateToTop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fe4179d8353919c790aea6b688ee00d6a4b29e72
--- /dev/null
+++ b/src/hooks/useNavigateToTop.ts
@@ -0,0 +1,15 @@
+import { useNavigate } from "react-router-dom";
+
+/** Navigate to the top of a page so that the scroll position
+ * isn't persisted between pages. Use this instead of React Dom's
+ * build-in @see {@link useNavigate}. */
+export const useNavigateToTop = () => {
+ const navigate = useNavigate();
+
+ const navigateAndReset = (to: string) => {
+ navigate(to, { replace: true });
+ window.scrollTo(0, 0);
+ };
+
+ return navigateAndReset;
+};
\ No newline at end of file
diff --git a/src/pages/api/FileMosaicApi.jsx b/src/pages/api/FileMosaicApi.jsx
index 6c84ea135986028ace0a2de770d70de3c289316a..d303d479b9cd2300911880490cdf553e08cc14d6 100644
--- a/src/pages/api/FileMosaicApi.jsx
+++ b/src/pages/api/FileMosaicApi.jsx
@@ -26,6 +26,7 @@ const FileMosaicApi = (props) => {
<React.Fragment>
<MainLayoutPage
rightMenu={<RightMenu width="240px" items={rightMenuItems} />}
+ MainLayoutPage={7}
>
<MainTitle>FileMosaic API</MainTitle>
<DescParagraph>
diff --git a/src/templates/NavBarTemplate.jsx b/src/templates/NavBarTemplate.jsx
index 05411571c66e80760b34090331ac808028e03874..e224810e38f4762e63ed80d4c309d3a247f80938 100644
--- a/src/templates/NavBarTemplate.jsx
+++ b/src/templates/NavBarTemplate.jsx
@@ -25,6 +25,7 @@ import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
import InputIcon from "@mui/icons-material/Input";
import FileOpenIcon from "@mui/icons-material/FileOpen";
import { useNavigate } from "react-router";
+import { useNavigateToTop } from "../hooks/useNavigateToTop";
const drawerWidth = 280;
const StyledImage = styled("img")(({ theme }) => ({
@@ -37,11 +38,11 @@ const StyledImage = styled("img")(({ theme }) => ({
},
}));
function NavBarTemplate(props) {
- const navigate = useNavigate();
- const { window, children, darkModeOn, handleDarkMode } = props;
+ const navigate = useNavigateToTop();
+ const { window, children, darkModeOn, handleDarkMode, selectedIndex } = props;
const [mobileOpen, setMobileOpen] = React.useState(false);
- const [selectedIndex, setSelectedIndex] = React.useState(0);
+ //const [selectedIndex, setSelectedIndex] = React.useState(0);
const handleGoGitRepo = () => {
window.open("https://github.com/files-ui", "_blank");
@@ -77,7 +78,7 @@ function NavBarTemplate(props) {
<Divider />
<MainMenuSideBar
- setSelectedIndex={setSelectedIndex}
+ //setSelectedIndex={setSelectedIndex}
selectedIndex={selectedIndex}
//items={}
/>
@@ -88,7 +89,7 @@ function NavBarTemplate(props) {
window !== undefined ? () => window().document.body : undefined;
return (
- <Box sx={{ display: "flex", flexDirection: { xs: "column",sm:"row" } }}>
+ <Box sx={{ display: "flex", flexDirection: { xs: "column", sm: "row" } }}>
<CssBaseline />
<AppBar
position="fixed"