From a74ea0b0cf90a1969c3a4a6b9025a1bcc87f8e21 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Fri, 24 Mar 2023 12:55:11 -0500
Subject: [PATCH] [FEAT]: Add context provider feature to all components
---
.../components/dropzone/DropzoneRipple.scss | 4 +--
.../DropzoneDisabledLayer.scss | 2 +-
.../DropzoneDisabledLayer.tsx | 2 +-
.../dropzone/components/dropzone/Dropzone.tsx | 30 ++++++++++++++-----
.../components/file-card/FileCard.tsx | 12 ++++++--
.../file-input-button/FileInputButton.tsx | 16 +++++++++-
.../FileMosaicSize/FileMosaicSize.scss | 2 +-
.../FileMosaicSize/FileMosaicSize.tsx | 2 +-
.../components/file-mosaic/FileMosaic.tsx | 11 +++++--
.../UploadingProcess/UploadingProcess.scss | 8 ++---
.../UploadingProcess/UploadingProcess.tsx | 2 +-
.../material-button/MaterialButton.scss | 6 +++-
.../material-button/MaterialButton.tsx | 17 +++++++++--
.../material-button/MaterialButtonProps.ts | 6 ++++
.../previews/VideoPreview/VideoPreview.scss | 2 +-
.../previews/VideoPreview/VideoPreview.tsx | 2 +-
.../files-ui-react/utils/ripple/ripple.ts | 2 +-
src/files-ui/index.ts | 3 +-
18 files changed, 99 insertions(+), 30 deletions(-)
diff --git a/src/files-ui/components/dropzone/DropzoneRipple.scss b/src/files-ui/components/dropzone/DropzoneRipple.scss
index 0ade087..bf8ff7d 100644
--- a/src/files-ui/components/dropzone/DropzoneRipple.scss
+++ b/src/files-ui/components/dropzone/DropzoneRipple.scss
@@ -1,5 +1,5 @@
// RIPPLE
-.dropzone-ui-base-ripple-absolute {
+.filesui-base-ripple-absolute {
position: absolute;
display: none;
width: 100%;
@@ -9,7 +9,7 @@
box-sizing: border-box;
border-radius: 8px;
overflow: hidden;
- .dropzone-ui-base-ripple-relative {
+ .filesui-base-ripple-relative {
width: 100%;
height: 100%;
position: relative;
diff --git a/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss
index 928e3f8..f1d0ab5 100644
--- a/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss
+++ b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.scss
@@ -1,4 +1,4 @@
-.dropzone-ui-disabled-root{
+.filesui-disabled-root{
position: absolute;
width: 100%;
height: 100%;
diff --git a/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx
index 5eb7f2a..e07d351 100644
--- a/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneDisabledLayer/DropzoneDisabledLayer.tsx
@@ -36,7 +36,7 @@ const DropzoneDisabledLayer: React.FC<DropzoneDisabledLayerProps> = (
handleDropUtil(evt);
};
const finalDisabledLayerClassName: string = addClassName(
- "dropzone-ui-disabled-root",
+ "filesui-disabled-root",
className
);
if (open) {
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 75f8ea8..8a7bf5b 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -28,6 +28,7 @@ import {
unexpectedErrorUploadResult,
getRandomInt,
addClassName,
+ Localization,
} from "../../../../core";
import { mergeProps } from "../../../overridable";
import InputHidden from "../../../input-hidden/InputHidden";
@@ -54,7 +55,13 @@ import DropzoneHeader from "../DropzoneHeader/DropzoneHeader";
import DropzoneFooter from "../DropzoneFooter/DropzoneFooter";
import DropzoneButtons from "../DropzoneButtons/DropzoneButtons";
import { completeAsureColor } from "../../../../core";
-import { createFuiRippleFromDiv, handleClickInput, handleDragUtil, handleDropUtil } from "../../../../files-ui-react/utils";
+import {
+ createFuiRippleFromDiv,
+ handleClickInput,
+ handleDragUtil,
+ handleDropUtil,
+} from "../../../../files-ui-react/utils";
+import { FilesUiContext } from "../../../../FilesUiProvider/FilesUiContext";
//import { print_manager } from "../../../../../utils";
@@ -86,7 +93,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
//label
label,
//localization
- localization,
+ localization: locProps,
//ripple
disableRipple,
//drag operations
@@ -113,6 +120,15 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
...rest
} = mergeProps(props, defaultDrozoneProps);
+ //context
+ const {
+ // darkMode: darkModeContext,
+ //icons,
+ localization: locContext,
+ } = React.useContext(FilesUiContext);
+ const localization: Localization | undefined =
+ locProps !== undefined ? locProps : locContext;
+
const {
url,
method,
@@ -521,14 +537,14 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
//if (isUploading) return;
let fileList: FileList = evt.target.files as FileList;
let extFileListOutput: ExtFile[] = fileListToExtFileArray(fileList);
- //validate dui files
+ //validate ext files
if (validateFilesFlag) {
extFileListOutput = outerFuiValidation(extFileListOutput);
if (autoClean) {
extFileListOutput = extFileListOutput.filter((f) => f.valid);
}
}
- //init xhr on each dui file
+ //init xhr on each ext file
if (url) extFileListOutput = toUploadableExtFileList(extFileListOutput);
// Clean input element to trigger onChange event on input
@@ -646,7 +662,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
}
}
- //init xhr on each dui file
+ //init xhr on each ext file
if (url) extFileListOutput = toUploadableExtFileList(extFileListOutput);
handleFilesChange(extFileListOutput);
@@ -723,12 +739,12 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
{!disableRipple && (
<div
ref={fuiRippleRefAbs}
- className="dropzone-ui-base-ripple-absolute"
+ className="filesui-base-ripple-absolute"
style={{ borderRadius: style?.borderRadius }}
>
<div
ref={fuiRippleRefRel}
- className="dropzone-ui-base-ripple-relative"
+ className="filesui-base-ripple-relative"
></div>
</div>
)}
diff --git a/src/files-ui/components/file-card/FileCard.tsx b/src/files-ui/components/file-card/FileCard.tsx
index 9dbd635..69d27de 100644
--- a/src/files-ui/components/file-card/FileCard.tsx
+++ b/src/files-ui/components/file-card/FileCard.tsx
@@ -6,6 +6,7 @@ import "./components/FileCardPaper.scss";
import {
fileSizeFormater,
getLocalFileItemData,
+ Localization,
//handleClickUtil,
shrinkWord,
} from "../../core";
@@ -84,7 +85,7 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
xhr,
- localization,
+ localization:locProps,
preview,
imageUrl,
videoUrl,
@@ -115,9 +116,16 @@ const FileCard: React.FC<FileCardProps> = (props: FileCardProps) => {
//} = mergeProps(props, FileCardPropsDefault);
} = props;
//context
- const { darkMode: darkModeContext, icons } = React.useContext(FilesUiContext);
+ const {
+ darkMode: darkModeContext,
+ icons,
+ localization: locContext,
+ } = React.useContext(FilesUiContext);
+ const localization: Localization | undefined =
+ locProps !== undefined ? locProps : locContext;
const darkMode: boolean | undefined =
darkModeProp !== undefined ? darkModeProp : darkModeContext;
+ console.log("globalConfig", darkMode, icons);
//ref for anchor element
const downloadRef = React.useRef<HTMLAnchorElement>(null);
diff --git a/src/files-ui/components/file-input-button/FileInputButton.tsx b/src/files-ui/components/file-input-button/FileInputButton.tsx
index 4f257e1..d300d8c 100644
--- a/src/files-ui/components/file-input-button/FileInputButton.tsx
+++ b/src/files-ui/components/file-input-button/FileInputButton.tsx
@@ -14,6 +14,7 @@ import {
instantPreparingToUploadOne,
isUploadAbleExtFile,
isValidateActive,
+ Localization,
LocalLabels,
sanitizeArrExtFile,
sleepPreparing,
@@ -26,6 +27,7 @@ import {
validateExtFileList,
} from "../../core";
import { handleClickInput } from "../../files-ui-react/utils";
+import { FilesUiContext } from "../../FilesUiProvider/FilesUiContext";
import useDropzoneFileListUpdater from "../../hooks/useDropzoneFileUpdater";
import { DropzoneActions } from "../dropzone/components/dropzone/DropzoneProps";
import DropzoneButtons from "../dropzone/components/DropzoneButtons/DropzoneButtons";
@@ -68,7 +70,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
//label
label,
//localization
- localization,
+ localization: locProps,
//ripple
disableRipple,
//action butotns
@@ -91,8 +93,19 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
variant,
resetStyles,
+ darkMode: darkModeProp,
...rest
} = mergeProps(props, defaultFileInputButtonProps);
+ //context
+ const {
+ darkMode: darkModeContext,
+ //icons,
+ localization: locContext,
+ } = React.useContext(FilesUiContext);
+ const localization: Localization | undefined =
+ locProps !== undefined ? locProps : locContext;
+ const darkMode: boolean | undefined =
+ darkModeProp !== undefined ? darkModeProp : darkModeContext;
const {
url,
@@ -518,6 +531,7 @@ const FileInputButton: React.FC<FileInputButtonProps> = (
resetStyles={resetStyles}
onClick={handleClick}
disableRipple={disableRipple}
+ darkMode={darkMode}
{...rest}
>
{children || label}
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.scss b/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.scss
index 46f865f..3501786 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.scss
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.scss
@@ -1,4 +1,4 @@
-.dui-file-item-size {
+.filesui-file-item-size {
box-sizing: border-box;
font-size: 0.7rem;
border: 0.5px solid wheat;
diff --git a/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.tsx b/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.tsx
index 2f7ba08..6230e29 100644
--- a/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.tsx
+++ b/src/files-ui/components/file-mosaic/components/FileMosaicSize/FileMosaicSize.tsx
@@ -10,7 +10,7 @@ const FileMosaicSize: React.FC<FileItemSizeProps> = (
return (
<React.Fragment>
{sizeFormatted && (
- <div className="dui-file-item-size">{sizeFormatted}</div>
+ <div className="filesui-file-item-size">{sizeFormatted}</div>
)}
</React.Fragment>
);
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 a80ff71..2113dab 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
@@ -3,6 +3,7 @@ import {
addClassName,
fileSizeFormater,
getLocalFileItemData,
+ Localization,
//handleClickUtil,
} from "../../../../core";
import "./FileMosaic.scss";
@@ -43,7 +44,7 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
xhr,
- localization,
+ localization: locProps,
preview,
imageUrl,
videoUrl,
@@ -72,7 +73,13 @@ const FileMosaic: React.FC<FileMosaicProps> = (props: FileMosaicProps) => {
} = props;
//context
- const { darkMode: darkModeContext, icons } = React.useContext(FilesUiContext);
+ const {
+ darkMode: darkModeContext,
+ icons,
+ localization: locContext,
+ } = React.useContext(FilesUiContext);
+ const localization: Localization | undefined =
+ locProps !== undefined ? locProps : locContext;
const darkMode: boolean | undefined =
darkModeProp !== undefined ? darkModeProp : darkModeContext;
console.log("globalConfig", darkMode, icons);
diff --git a/src/files-ui/components/icons/UploadingProcess/UploadingProcess.scss b/src/files-ui/components/icons/UploadingProcess/UploadingProcess.scss
index d67ed16..7ec1e8e 100644
--- a/src/files-ui/components/icons/UploadingProcess/UploadingProcess.scss
+++ b/src/files-ui/components/icons/UploadingProcess/UploadingProcess.scss
@@ -1,4 +1,4 @@
-@keyframes dui-rotate-spin {
+@keyframes filesui-rotate-spin {
from {
transform: rotate(0deg);
}
@@ -7,12 +7,12 @@
transform: rotate(360deg);
}
}
-.dui-rotate {
+.filesui-rotate {
cursor: default;
}
@media (prefers-reduced-motion: no-preference) {
- .dui-rotate {
- animation: dui-rotate-spin infinite 2s linear;
+ .filesui-rotate {
+ animation: filesui-rotate-spin infinite 2s linear;
}
}
diff --git a/src/files-ui/components/icons/UploadingProcess/UploadingProcess.tsx b/src/files-ui/components/icons/UploadingProcess/UploadingProcess.tsx
index e829b0b..51534c0 100644
--- a/src/files-ui/components/icons/UploadingProcess/UploadingProcess.tsx
+++ b/src/files-ui/components/icons/UploadingProcess/UploadingProcess.tsx
@@ -17,7 +17,7 @@ const UploadingProcess: FC<UploadingProcessProps> = (
const finalSize = parseSize(size);
const finalStyle = style ? style : {};
let finalClassname = className || "";
- finalClassname += spin ? "dui-rotate" : "";
+ finalClassname += spin ? "filesui-rotate" : "";
return (
<svg
className={finalClassname}
diff --git a/src/files-ui/components/material-button/MaterialButton.scss b/src/files-ui/components/material-button/MaterialButton.scss
index 42f4a4c..bb4ad51 100644
--- a/src/files-ui/components/material-button/MaterialButton.scss
+++ b/src/files-ui/components/material-button/MaterialButton.scss
@@ -87,6 +87,10 @@ span.ripple {
background-color: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.26);
padding: 6px 16px;
+ &.darkmode {
+ background-color: rgba(255, 255, 255, 0.12);
+ color: rgba(255, 255, 255, 0.3);
+ }
}
//mobile
@@ -104,4 +108,4 @@ span.ripple {
padding: 4px 12px;
}
}
- */
\ 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 0ec05de..ba5be5e 100644
--- a/src/files-ui/components/material-button/MaterialButton.tsx
+++ b/src/files-ui/components/material-button/MaterialButton.tsx
@@ -3,6 +3,8 @@ import useMaterialButtonClassName from "./hooks/useMaterialButtonClassName";
import { MaterialButtonProps } from "./MaterialButtonProps";
import "./MaterialButton.scss";
import { createRippleButton } from "../../files-ui-react/utils";
+import { addClassName } from "../../core";
+import { FilesUiContext } from "../../FilesUiProvider/FilesUiContext";
const MaterialButton: React.FC<MaterialButtonProps> = (
props: MaterialButtonProps
@@ -20,7 +22,13 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
onClick,
resetStyles,
disableRipple,
+ darkMode: darkModeProp,
} = props;
+ //context
+ const { darkMode: darkModeContext } = React.useContext(FilesUiContext);
+ const darkMode: boolean | undefined =
+ darkModeProp !== undefined ? darkModeProp : darkModeContext;
+
const idClassName = React.useId();
@@ -35,7 +43,12 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
idClassName.replaceAll(":", ""),
resetStyles
);
+ const finalMBClassNameDarkMode: string | undefined = materialButtonClassName && darkMode
+ ? addClassName(materialButtonClassName, `darkmode`)
+ : materialButtonClassName;
+
+ console.log("finalMBClassNameDarkMode", finalMBClassNameDarkMode, darkMode);
function handleClick<T extends HTMLAnchorElement | HTMLButtonElement>(
e: React.MouseEvent<T, MouseEvent>
): void {
@@ -48,9 +61,9 @@ const MaterialButton: React.FC<MaterialButtonProps> = (
onClick?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);
}
- if (materialButtonClassName !== undefined || resetStyles)
+ if (finalMBClassNameDarkMode !== undefined || resetStyles)
return React.createElement(href ? "a" : "button", {
- className: resetStyles && className ? className : materialButtonClassName,
+ className: resetStyles && className ? className : finalMBClassNameDarkMode,
"data-testid": href ? "dui-anchor" : "dui-button",
onClick: handleClick,
href: href,
diff --git a/src/files-ui/components/material-button/MaterialButtonProps.ts b/src/files-ui/components/material-button/MaterialButtonProps.ts
index 72225f1..d6aa971 100644
--- a/src/files-ui/components/material-button/MaterialButtonProps.ts
+++ b/src/files-ui/components/material-button/MaterialButtonProps.ts
@@ -44,6 +44,12 @@ export interface MaterialButtonPropsInterface extends OverridableComponentProps
*/
disableRipple?: boolean;
+
+ /**
+ * If true, dark mode colors are used in the component.
+ */
+ darkMode?: boolean;
+
}
type DefButtonPropsMap = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreview.scss b/src/files-ui/components/previews/VideoPreview/VideoPreview.scss
index 77ad929..f869011 100644
--- a/src/files-ui/components/previews/VideoPreview/VideoPreview.scss
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreview.scss
@@ -1,4 +1,4 @@
-.dui-video-preview {
+.filesui-video-preview {
position: relative;
border-radius: 10px;
transition: transform 0.3s 0.2s;
diff --git a/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx b/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
index aa82a06..e9dab37 100644
--- a/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
+++ b/src/files-ui/components/previews/VideoPreview/VideoPreview.tsx
@@ -54,7 +54,7 @@ const VideoPreview: React.FC<VideoPreviewProps> = (
id="files-ui-video"
//controls={controls}
ref={videoRef}
- className={className || "dui-video-preview"}
+ className={className || "filesui-video-preview"}
//autoPlay={autoplay}
src={source}
//width={"100%"}
diff --git a/src/files-ui/files-ui-react/utils/ripple/ripple.ts b/src/files-ui/files-ui-react/utils/ripple/ripple.ts
index 28a73f3..d461a68 100644
--- a/src/files-ui/files-ui-react/utils/ripple/ripple.ts
+++ b/src/files-ui/files-ui-react/utils/ripple/ripple.ts
@@ -21,7 +21,7 @@ export function createFuiRippleFromDiv
// creating the span circle ripple
const circle: HTMLSpanElement = document.createElement("span");
//for searching
- circle.id = "dui-ripple";
+ circle.id = "filesui-ripple";
//for styles
circle.className = "ripple";
// calculates the diameter
diff --git a/src/files-ui/index.ts b/src/files-ui/index.ts
index f409f80..741e988 100644
--- a/src/files-ui/index.ts
+++ b/src/files-ui/index.ts
@@ -51,7 +51,8 @@ export type {
ServerResponse,
UploadResponse,
UploadConfig,
- ValidateFileResponse
+ ValidateFileResponse,
+ IconsMap
} from "./core";
--
GitLab