diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx index 14216b7c139e9f974632c1c1e7b250858cb73301..fa2b44deed4d27b2c422e926ad30cea6e90a06ea 100644 --- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx +++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx @@ -48,6 +48,7 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => { onDelete={removeFile} info elevation={elevation as FileCardProps["elevation"]} + darkMode={false} /> ))} </div> @@ -88,7 +89,7 @@ const DemoFileMosaicDarkMode = (props: { card?: boolean }) => { flexGrow: 1, }} > - <FileMosaic {...sampleFileProps} info onDelete={removeFile} /> + <FileMosaic {...sampleFileProps} info onDelete={removeFile} darkMode={false}/> </div> <div style={{ diff --git a/src/files-ui/FilesUiProvider/FilesUiContext.ts b/src/files-ui/FilesUiProvider/FilesUiContext.ts new file mode 100644 index 0000000000000000000000000000000000000000..068bce29419f6c72bf6cbbe0bddd20c55a89ad13 --- /dev/null +++ b/src/files-ui/FilesUiProvider/FilesUiContext.ts @@ -0,0 +1,5 @@ +import React from "react"; +import { FilesUiConfig } from "./FilesUiContextType"; + +export const FilesUiContext: React.Context<FilesUiConfig> + = React.createContext({}); \ No newline at end of file diff --git a/src/files-ui/FilesUiProvider/FilesUiContextType.ts b/src/files-ui/FilesUiProvider/FilesUiContextType.ts new file mode 100644 index 0000000000000000000000000000000000000000..948a29589a96e14dbc77b270a9a8005f1dc7758b --- /dev/null +++ b/src/files-ui/FilesUiProvider/FilesUiContextType.ts @@ -0,0 +1,3 @@ +export type FilesUiConfig = { + darkMode?:boolean; +} \ No newline at end of file diff --git a/src/files-ui/FilesUiProvider/FilesUiProvider.tsx b/src/files-ui/FilesUiProvider/FilesUiProvider.tsx new file mode 100644 index 0000000000000000000000000000000000000000..ffd49fb63efb60c2146dc0862861f18eb6dd60e5 --- /dev/null +++ b/src/files-ui/FilesUiProvider/FilesUiProvider.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import { FilesUiContext } from "./FilesUiContext"; +import { FilesUiConfig } from "./FilesUiContextType"; + +interface FilesUiProviderProps { + children: React.ReactNode; + config?: FilesUiConfig; +} +const FilesUiProvider: React.FC<FilesUiProviderProps> = ( + props: FilesUiProviderProps +) => { + const { children, config } = props; + return ( + <FilesUiContext.Provider value={config || {}}> + {children} + </FilesUiContext.Provider> + ); +}; +export default FilesUiProvider; diff --git a/src/files-ui/FilesUiProvider/index.ts b/src/files-ui/FilesUiProvider/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8c88dbddcd81e284d0540560d0a209192a9ea5cb --- /dev/null +++ b/src/files-ui/FilesUiProvider/index.ts @@ -0,0 +1,2 @@ +export { default as FilesUiProvider } from "./FilesUiProvider"; +export * from "./FilesUiProvider"; \ No newline at end of file diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx index a4b68f6138f1cf87f7b000f36d10914d44d688a5..c0cbd0584a8c9984a22efca606e51a0d5ad19203 100644 --- a/src/files-ui/components/file-card/FileCard.tsx +++ b/src/files-ui/components/file-card/FileCard.tsx @@ -16,6 +16,7 @@ import FileMosaicStatus from "../file-mosaic/components/FileMosaicStatus/FileMos import FileCardUploadLayer from "./components/FileCardUploadLayer"; import { Tooltip } from "../tooltip"; import DownloadHidden from "../download-hidden/DownloadHidden"; +import { FilesUiContext } from "../../FilesUiProvider/FilesUiContext"; const setFinalElevation = (elevation: string | number): number => { // let finalElevation: number = ""; @@ -83,7 +84,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => { videoUrl, info, backgroundBlurImage = true, - darkMode, + darkMode:darkModeProp, alwaysActive = true, @@ -107,6 +108,11 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => { smartImgFit = "orientation", //} = mergeProps(props, FileCardPropsDefault); } = props; +//context +const { darkMode: darkModeContext } = React.useContext(FilesUiContext); +const darkMode: boolean | undefined = + darkModeProp !== undefined ? darkModeProp : darkModeContext; + //ref for anchor element const downloadRef = React.useRef<HTMLAnchorElement>(null); diff --git a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx index 2cc106e334297eb186377ff435eecc9d18fcdeb0..2f4564fdc507708c99c2fbe7fa78265f9e2f9c7b 100644 --- a/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx +++ b/src/files-ui/components/file-mosaic/components/file-mosaic/FileMosaic.tsx @@ -21,6 +21,7 @@ import FileMosaicInfoLayer from "../FileMosaicInfoLayer/FileMosaicInfoLayer"; import useProgress from "../../hooks/useProgress"; import DownloadHidden from "../../../download-hidden/DownloadHidden"; import FileMosaicMainLayer from "../FileMosaicMainLayer.tsx/FileMosaicMainLayer"; +import { FilesUiContext } from "../../../../FilesUiProvider/FilesUiContext"; const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => { const { @@ -47,7 +48,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => { videoUrl, info, backgroundBlurImage = true, - darkMode, + darkMode: darkModeProp, alwaysActive = true, @@ -68,6 +69,13 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => { onRightClick, smartImgFit = "orientation", } = props; + + //context + const { darkMode: darkModeContext } = React.useContext(FilesUiContext); + const darkMode: boolean | undefined = + darkModeProp !== undefined ? darkModeProp : darkModeContext; + console.log("globalConfig", darkMode); + //localizers //ref for anchor download element diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts index 86b06e27501db0d5945ee8fc7b43468aa848bf9d..f409f80f1484797d13365df49c35dd4fa6cf7ce6 100644 --- a/src/files-ui/index.ts +++ b/src/files-ui/index.ts @@ -52,4 +52,8 @@ export type { UploadResponse, UploadConfig, ValidateFileResponse -} from "./core"; \ No newline at end of file +} from "./core"; + + +export { default as FilesUiProvider } from "./FilesUiProvider/FilesUiProvider"; +export * from "./FilesUiProvider/FilesUiProvider"; \ No newline at end of file diff --git a/src/globals/providers/UserProvider.tsx b/src/globals/providers/UserProvider.tsx index a421f69e33a2e8e91dc895f1ba0dc2c50c9c145c..7158e9f6fe3801290a7b21e6fc25250959f81cd3 100644 --- a/src/globals/providers/UserProvider.tsx +++ b/src/globals/providers/UserProvider.tsx @@ -1,10 +1,11 @@ import { UserContext } from "../contexts/UserContext"; import * as React from "react"; import { UserFilesUi } from "../types/UserFilesUi"; -import { userInitializer, userReducer } from "../reducers/userReducer"; +import { userInitializer, userReducer } from "../reducers/userReducer"; import { ThemeProvider } from "@emotion/react"; import { MUItheme } from "../../theme/mainTheme"; import { FuiAction } from "../types/FuiAction"; +import { FilesUiProvider } from "../../files-ui"; export const UserProvider = (props: { children: React.ReactNode; @@ -23,7 +24,9 @@ export const UserProvider = (props: { return ( <UserContext.Provider value={[usuario, dispatch]}> <ThemeProvider theme={MUItheme(usuario.darkMode ? "dark" : "light")}> - {children} + <FilesUiProvider config={{ darkMode: usuario.darkMode }}> + {children} + </FilesUiProvider> </ThemeProvider> </UserContext.Provider> );