[WIP][FEAT]: Add context for darkmode in Files-ui. Missing to add param icons

Author: JinSSJ3

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={{

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({});

src/files-ui/FilesUiProvider/FilesUiContextType.ts

@@ -0,0 +1,3 @@
+export type FilesUiConfig = {
+    darkMode?:boolean;
+}

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;

src/files-ui/FilesUiProvider/index.ts

@@ -0,0 +1,2 @@
+export { default as FilesUiProvider } from "./FilesUiProvider";
+export * from "./FilesUiProvider";

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);

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

src/files-ui/index.ts

@@ -52,4 +52,8 @@ export type {
     UploadResponse,
     UploadConfig,
     ValidateFileResponse
-} from "./core";
+} from "./core";
+
+
+export { default as FilesUiProvider } from "./FilesUiProvider/FilesUiProvider";
+export * from "./FilesUiProvider/FilesUiProvider";

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>
   );