diff --git a/src/files-ui/components/dropzone/DropzoneRipple.scss b/src/files-ui/components/dropzone/DropzoneRipple.scss
index 0ade0878568a159af43d5aa2505981d4fffc013f..bf8ff7dcde5fc634f159fde05816f145c0151be7 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 928e3f813b1bd0733f01dba8c6597b53510b4720..f1d0ab56edb9bcdd85d313d0650970b8e82461ae 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 5eb7f2a0fb3664c1506210cdb8e99dfd744ccfa4..e07d351aefa37ff4269f4f91acc9dd4a5a0978fb 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 75f8ea85274114d4efce30c276f83ba9d85cc2bb..8a7bf5bb6d52389373294be63ccc4c680a995f94 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 9dbd635cae9e4169a70851ff840bb67b11cd878a..69d27de19c1a7b1a8bf6f020a48cf43281cd4d24 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 4f257e16987eed5c16a6e0279d62e5a091113a99..d300d8cb8ad724c2d146874e619a7f961959efa1 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 46f865f054f7c8d8bc177a8e9099bd4c97f65ae7..3501786f3c15dafe164fbe07dea405dbf4d29924 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 2f7ba08c6093be8b3284f4bf230fa729d184213f..6230e2941d073d21e4ffcda413d27cb51f993f79 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 a80ff71f10814e79147980b0ac2c7cac90805bd7..2113dabba44a4ec02fb080d9005f04aad969a23d 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 d67ed165fa98b84934b4183bae888bbc14c25ebf..7ec1e8e94b5e060c96f91d79a065242924162d7a 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 e829b0b012f2cd106966df774859e182fc5246d9..51534c0f5fdf36b381bdc75c86732dc4270edea9 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 42f4a4c4d17e236abdb27f7246c28bb858ec8912..bb4ad5180dd213da02995e7a2ca23abb6e1a638f 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 0ec05dee63071c88ac1d8c9bf05aaacc9653887c..ba5be5e22bd62545d2b5b9c9ad36892b25d8d936 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 72225f121de7b2eb8355b8f8a697843174c31c1b..d6aa971644ed67d07912554068b9dd9053fe057a 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 77ad92967d08fb10dbbd28c6a1405684db478b16..f8690117895324ef9b5d481d4cd77723f90b7fa1 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 aa82a06c55d7c262a950a14cf60fc8bffba6a172..e9dab371f9e2f885bd8e3525ef0951d23b228203 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 28a73f312720af0e197c22c4b68897d6200e448b..d461a6803201b5690eb45b3843ab4db3a7260c26 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 f409f80f1484797d13365df49c35dd4fa6cf7ce6..741e988de3e48a492203f624759d0a2e0ccf79ee 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";