Simplify dropzone overlay to use fixed positioning without portal
Remove createPortal and main element ref/state in favor of a simple fixed overlay with top-12 offset. This avoids React 19 strict mode violations around ref access during render and setState in effects. Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
@@ -22,8 +22,7 @@ import {
|
|||||||
useDialogRef,
|
useDialogRef,
|
||||||
useToast,
|
useToast,
|
||||||
} from "@probo/ui";
|
} from "@probo/ui";
|
||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
import { useCallback, useEffect, useRef } from "react";
|
||||||
import { createPortal } from "react-dom";
|
|
||||||
import { useDropzone } from "react-dropzone";
|
import { useDropzone } from "react-dropzone";
|
||||||
import {
|
import {
|
||||||
graphql,
|
graphql,
|
||||||
@@ -190,34 +189,19 @@ export default function AuditsPage(props: Props) {
|
|||||||
setDroppedFile(null);
|
setDroppedFile(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const [mainEl, setMainEl] = useState<HTMLElement | null>(null);
|
|
||||||
useEffect(() => {
|
|
||||||
const el = document.querySelector("main");
|
|
||||||
if (el) {
|
|
||||||
el.style.position = "relative";
|
|
||||||
setMainEl(el);
|
|
||||||
}
|
|
||||||
return () => {
|
|
||||||
if (el) {
|
|
||||||
el.style.position = "";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{isDragging && canCreateAudit && mainEl && createPortal(
|
{isDragging && canCreateAudit && (
|
||||||
<div
|
<div
|
||||||
{...getRootProps()}
|
{...getRootProps()}
|
||||||
className="border-primary bg-primary/5 pointer-events-auto absolute inset-0 z-40 flex flex-col items-center justify-center border-2 border-dashed"
|
className="border-primary bg-primary/5 pointer-events-auto fixed inset-0 top-12 z-40 flex flex-col items-center justify-center border-2 border-dashed"
|
||||||
>
|
>
|
||||||
<input {...getInputProps()} />
|
<input {...getInputProps()} />
|
||||||
<IconUpload className="text-primary mb-2 size-8" />
|
<IconUpload className="text-primary mb-2 size-8" />
|
||||||
<p className="text-primary text-sm font-medium">
|
<p className="text-primary text-sm font-medium">
|
||||||
{__("Drop a PDF to create an audit with a report")}
|
{__("Drop a PDF to create an audit with a report")}
|
||||||
</p>
|
</p>
|
||||||
</div>,
|
</div>
|
||||||
mainEl,
|
|
||||||
)}
|
)}
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title={__("Audits")}
|
title={__("Audits")}
|
||||||
|
|||||||
Reference in New Issue
Block a user