From a9218f570f1941555337e2d09d462da399e6d936 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Thu, 23 Mar 2023 00:39:27 -0500
Subject: [PATCH] [WIP][FEAT]: Add context for darkmode in Files-ui. Missing to
add param icons
---
.../DemoFileMosaicDarkMode.tsx | 3 ++-
.../FilesUiProvider/FilesUiContext.ts | 5 +++++
.../FilesUiProvider/FilesUiContextType.ts | 3 +++
.../FilesUiProvider/FilesUiProvider.tsx | 19 +++++++++++++++++++
src/files-ui/FilesUiProvider/index.ts | 2 ++
.../components/file-card/FileCard.tsx | 8 +++++++-
.../components/file-mosaic/FileMosaic.tsx | 10 +++++++++-
src/files-ui/index.ts | 6 +++++-
src/globals/providers/UserProvider.tsx | 7 +++++--
9 files changed, 57 insertions(+), 6 deletions(-)
create mode 100644 src/files-ui/FilesUiProvider/FilesUiContext.ts
create mode 100644 src/files-ui/FilesUiProvider/FilesUiContextType.ts
create mode 100644 src/files-ui/FilesUiProvider/FilesUiProvider.tsx
create mode 100644 src/files-ui/FilesUiProvider/index.ts
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicDarkMode.tsx
index 14216b7..fa2b44d 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 0000000..068bce2
--- /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 0000000..948a295
--- /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 0000000..ffd49fb
--- /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 0000000..8c88dbd
--- /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 a4b68f6..c0cbd05 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 2cc106e..2f4564f 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 86b06e2..f409f80 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 a421f69..7158e9f 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>
);
--
GitLab