diff --git a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
index 744f0672fd26182714cf3c1fc3af16129a7db1a7..ccf25a75c1c262d679e30f265a37d4b9ef668aa2 100644
--- a/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneFooter/DropzoneFooter.tsx
@@ -10,6 +10,7 @@ import {
import { FooterConfig } from "../dropzone/DropzoneProps";
export interface DropzoneFooterProps extends FooterConfig {
+ firstClassName?: string;
accept?: string;
message?: string;
localization?: Localization;
@@ -31,6 +32,7 @@ const DropzoneFooter: React.FC<DropzoneFooterProps> = (
resetStyles = false,
allowedTypesLabel = true,
customMessage = undefined,
+ firstClassName = "",
} = props;
const DropzoneFooterLocalizer: LocalLabels = DropzoneLocalizerSelector(
@@ -46,10 +48,7 @@ const DropzoneFooter: React.FC<DropzoneFooterProps> = (
}
const finalClassName = resetStyles
? className
- : addClassName(
- "files-ui-footer files-ui-footer-border-rd-top-bg-color",
- className
- );
+ : addClassName("files-ui-footer" + " " + firstClassName, className);
const finalStyle = resetStyles
? style
diff --git a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
index d3cb5c4e765a6080227f657f8632b1c9124a2992..dc0d040e7a73370fbe5ab4aefdc945a74cf40318 100644
--- a/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
+++ b/src/files-ui/components/dropzone/components/DropzoneHeader/DropzoneHeader.tsx
@@ -10,6 +10,7 @@ import {
import { UploadingProcess, Clean, Cancel, Upload } from "../../../icons";
export type DropzoneHeaderProps = {
+ firstClassName?: string;
maxFileSize?: number;
numberOfValidFiles?: number;
maxFiles?: number;
@@ -23,7 +24,7 @@ export type DropzoneHeaderProps = {
style?: React.CSSProperties;
className?: string;
resetStyles?: boolean;
- color?:string;
+ color?: string;
};
const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
@@ -43,7 +44,8 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
style,
className = "",
resetStyles,
- color
+ color,
+ firstClassName="",
} = props;
const DropzoneHeaderLocalizer: LocalLabels = DropzoneLocalizerSelector(
@@ -113,7 +115,7 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
const finalClassName = resetStyles
? className
- : addClassName("files-ui-header files-ui-header-border-rd", className);
+ : addClassName("files-ui-header" + " " + firstClassName, className);
const finalStyle = resetStyles
? style
: {
@@ -121,10 +123,10 @@ const DropzoneHeader: React.FC<DropzoneHeaderProps> = (
borderTopLeftRadius: borderRadius,
borderTopRightRadius: borderRadius,
};
-console.log("headerx resetStyles", resetStyles);
-console.log("headerx style", style);
+ console.log("headerx resetStyles", resetStyles);
+ console.log("headerx style", style);
-console.log("headerx finalStyle", finalStyle);
+ console.log("headerx finalStyle", finalStyle);
return (
<div className={finalClassName} onClick={handleClick} style={finalStyle}>
{makeHeader().map((HeaderItem, index) => (
diff --git a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
index 25a413ec37e079544807ee6d04ad07f4381345b5..4edd1b02709a7eeaa8a71e6ad6bb0c0a44978cac 100644
--- a/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
+++ b/src/files-ui/components/dropzone/components/dropzone/Dropzone.tsx
@@ -74,7 +74,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
onUploadStart,
onUploadFinish,
//styling
- backgroundColor,
+ background,
minHeight,
color,
style,
@@ -430,20 +430,26 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
};
//the final className
- const dropzoneClassName: string | undefined = useDropzoneClassName(
+ const [dropzoneClassName, headerClassName, footerClassName]: [
+ string | undefined,
+ string | undefined,
+ string | undefined
+ ] = useDropzoneClassName(
+ dropzoneId,
className,
isDragging && Boolean(dropOnLayer),
// header,
// footer,
color,
//style?.borderRadius || borderRadius,
- backgroundColor,
+ background,
minHeight
);
const dropLayerClassName: string = useDropLayerClassName(
+ dropzoneId,
color as string,
- isDragging,
+ // isDragging,
!onDragEnter && !onDragLeave
);
@@ -566,6 +572,14 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
) => {
handleDragUtil(evt);
setIsDragging(true);
+ /* setTimeout(() => {
+ setIsDragging((_isDragging) => {
+ //if (_isDragging) {
+ return false;
+ //}
+ //return true;
+ });
+ }, 2000); */
//console.log("handleDragEnter");
};
const handleDragLeave: React.DragEventHandler<HTMLDivElement> = (
@@ -642,7 +656,7 @@ const Dropzone: React.FC<DropzoneProps> = (props: DropzoneProps) => {
setLocalFiles(localFiles.filter((f) => f.valid));
}
};
-console.log("Dropzone styleHeader",styleHeader);
+ console.log("Dropzone styleHeader", styleHeader);
if (!dropzoneClassName) return <></>;
return (
<React.Fragment>
@@ -693,6 +707,7 @@ console.log("Dropzone styleHeader",styleHeader);
<>{customHeader}</>
) : (
<DropzoneHeader
+ firstClassName={headerClassName}
color={completeAsureColor(color)}
style={styleHeader}
className={classNameHeader}
@@ -743,6 +758,7 @@ console.log("Dropzone styleHeader",styleHeader);
<>
{footer && (
<DropzoneFooter
+ firstClassName={footerClassName}
borderRadius={styleBorderRadius}
accept={accept}
message={isUploading ? localMessage : undefined}
@@ -757,7 +773,11 @@ console.log("Dropzone styleHeader",styleHeader);
{dropOnLayer && (
<DropLayer
open={isDragging}
- className={dropLayerClassName}
+ className={
+ !isDragging
+ ? dropLayerClassName
+ : `${dropLayerClassName} dropzone-layer-drag`
+ }
onDragLeave={handleDragLeave}
onDrop={kamui}
style={{ borderRadius: style?.borderRadius }}
diff --git a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
index 9a67c8391aedc85494b3dbedff6de7658858c8dd..05b7d5187f8f09fe638ce0081b146e5251803d45 100644
--- a/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
+++ b/src/files-ui/components/dropzone/components/dropzone/DropzoneProps.ts
@@ -120,7 +120,7 @@ export interface DropzoneFullProps extends OverridableComponentProps {
* The background color for dropzone container,
* @default 'transparent'
*/
- backgroundColor?: string;
+ background?: string;
/**
* The min height of the container in string format
* If the value is given un number format "px" will be assumed
diff --git a/src/files-ui/components/dropzone/useDropzoneClassName.ts b/src/files-ui/components/dropzone/useDropzoneClassName.ts
index 41375481b6d19ff33636d6f3897d50a05d6f1070..d1ff8a2dbb0ad92924aa76cb5f73ff159831367a 100644
--- a/src/files-ui/components/dropzone/useDropzoneClassName.ts
+++ b/src/files-ui/components/dropzone/useDropzoneClassName.ts
@@ -4,20 +4,26 @@ import { completeAsureColor } from "../../core";
import { DEFAULT_BORDER_RADIUS } from "./components/dropzone/DropzoneProps";
export default function useDropzoneClassName(
+ dropzoneId: string,
className: string | undefined,
isDragging: boolean,
//header: boolean | undefined = false,
//footer: boolean | undefined = false,
color: string | undefined,
//borderRadius: string | number | undefined,
- backgroundColor: string | undefined,
+ background: string | undefined,
minHeight: string | number | undefined
-): string | undefined {
- //console.log("useDropzoneClassName", className, isDragging, header, footer, color, backgroundColor, minHeight);
+): [string | undefined, string | undefined, string | undefined] {
+ //console.log("useDropzoneClassName", className, isDragging, header, footer, color, background, minHeight);
+ const finalDropzoneId: string = (color === undefined && background === undefined && minHeight === undefined) ? "default" : dropzoneId.replaceAll(":", "_");
+
const baseClassName: string = "fui-dropzone-root fui-dropzone-border";
+
const [idStyles, setIdStyles] = React.useState<string>("");
const [styleInjected, setStyleInjected] = React.useState<boolean>(false);
const [finalClassName, setFinalClassName] = React.useState<string | undefined>(undefined);
+ const [finalClassNameHeader, setFinalClassNameHeader] = React.useState<string | undefined>(undefined);
+ const [finalClassNameFooter, setFinalClassNameFooter] = React.useState<string | undefined>(undefined);
//const [offset, setOffset] = React.useState<number>(0);
@@ -27,21 +33,26 @@ export default function useDropzoneClassName(
// offset: number,
color: string | undefined,
//borderRadius: string | number | undefined,
- backgroundColor: string | undefined,
+ background: string | undefined,
minHeight: string | number | undefined
) => {
let finalClassName: string = baseClassName;
+ // better to come back to the custom stylesheet for each dropzone with the unique id
+
let styleSheet: DynamicSheet = makeDynamicDropzoneStyleSheet(
+ finalDropzoneId,
// offset,
isDragging,
color,
- backgroundColor,
+ background,
minHeight,
//borderRadius
);
let idStyle: string = "";
+
+
if (!styleInjected) {
idStyle = DynamiCSS.insertStyleSheet(styleSheet);
setIdStyles(idStyle);
@@ -52,14 +63,18 @@ export default function useDropzoneClassName(
DynamiCSS.editStyleSheet(idStyles, styleSheet.sheetRules || []);
}
- finalClassName += ` files-ui-dropzone-extra`;
+ finalClassName += ` files-ui-dropzone-extra-${finalDropzoneId}`;
+
if (className) {
finalClassName = `${finalClassName} ${className}`;
}
if (isDragging) {
finalClassName = `${finalClassName} fui-hide-border`;
}
+
setFinalClassName(finalClassName);
+ setFinalClassNameHeader(`files-ui-header-border-rd-${finalDropzoneId}`);
+ setFinalClassNameFooter(`files-ui-footer-border-rd-top-bg-color-${finalDropzoneId}`);
}
React.useEffect(() => {
@@ -67,56 +82,54 @@ export default function useDropzoneClassName(
//offset,
color,
// borderRadius,
- backgroundColor, minHeight);
+ background, minHeight);
// eslint-disable-next-line
}, [className, isDragging,
// offset,
color,
//borderRadius,
- backgroundColor, minHeight]);
+ background, minHeight]);
- /* React.useEffect(() => {
- setOffset(header && footer ? 50 : !header && footer ? 23 : header && !footer ? 22 : 0);
- }, [header, footer]);
- */
- return finalClassName;
+ return [finalClassName, finalClassNameHeader, finalClassNameFooter];
}
const makeDynamicDropzoneStyleSheet = (
+ dropzoneId: string,
// offset: number,
isDragging: boolean,
color: string | undefined,
- backgroundColor: string | undefined,
+ background: string | undefined,
minHeight: string | number | undefined,
// borderRadius: string | number | undefined,
): DynamicSheet => {
+
const rootColorBorderStyle: DynamicSheetRule = {
- className: `files-ui-dropzone-extra`,
+ className: `files-ui-dropzone-extra-${dropzoneId}`,
rules: {
color: completeAsureColor(color),
border: `1px dashed ${isDragging ? "transparent" : completeAsureColor(color)}`,
borderRadius: DEFAULT_BORDER_RADIUS,
- backgroundColor: backgroundColor,
+ background: background,
minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight,
},
};
-
+
const headerBorderStyle: DynamicSheetRule = {
- className: `files-ui-header-border-rd`,
+ className: `files-ui-header-border-rd-${dropzoneId}`,
rules: {
"border-top-left-radius": DEFAULT_BORDER_RADIUS,
"border-top-right-radius": DEFAULT_BORDER_RADIUS,
},
};
- const footerBorderStyle: DynamicSheetRule = {
- className: `files-ui-footer-border-rd-top-bg-color`,
+ const footerBorderStyle: DynamicSheetRule = {
+ className: `files-ui-footer-border-rd-top-bg-color-${dropzoneId}`,
rules: {
"border-bottom-left-radius": DEFAULT_BORDER_RADIUS,
"border-bottom-right-radius": DEFAULT_BORDER_RADIUS,
- backgroundColor: completeAsureColor(color, 0.129),
+ background: completeAsureColor(color, 0.129),
borderTop: `1px dotted ${completeAsureColor(color)}`
},
@@ -131,7 +144,7 @@ const makeDynamicDropzoneStyleSheet = (
}
return {
- id: "files-dropzone-ui-style-id",
+ id: "files-dropzone-ui-style-id-" + dropzoneId,
sheetRules: sheetRules
}
}
\ No newline at end of file