Skip to content
Snippets Groups Projects
Commit 9865add3 authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[FIX]: Sole issue when multiple dropzones are in the same page. Specify a...

[FIX]: Sole issue when multiple dropzones are in the same page. Specify a unique id for each dropzone and styles related to border, color footer, header and ripple
parent 985dc8c3
No related branches found
No related tags found
No related merge requests found
......@@ -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
......
......@@ -10,6 +10,7 @@ import {
import { UploadingProcess, Clean, Cancel, Upload } from "../../../icons";
export type DropzoneHeaderProps = {
firstClassName?: string;
maxFileSize?: number;
numberOfValidFiles?: number;
maxFiles?: number;
......@@ -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
: {
......
......@@ -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> = (
......@@ -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 }}
......
......@@ -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
......
......@@ -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`,
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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment