Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-18 10:42:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove auto-expand in embeddding

Browse Source
This commit is contained in:
Mythie
2025-02-28 10:11:08 +11:00
parent 617e3a46e0
commit ca3d65ad10
4 changed files with 10 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/web/src/app/embed/direct/[[...url]]/client.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useEffect, useLayoutEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
@ -83,15 +83,12 @@ export const EmbedDirectTemplateClientPage = ({
const [hasCompletedDocument, setHasCompletedDocument] = useState(false);
const [isExpanded, setIsExpanded] = useState(false);
const [hasAutoExpanded, setHasAutoExpanded] = useState(false);
const [isEmailLocked, setIsEmailLocked] = useState(false);
const [isNameLocked, setIsNameLocked] = useState(false);
const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
const documentEndRef = useRef<HTMLDivElement>(null);
const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
@ -320,43 +317,6 @@ export const EmbedDirectTemplateClientPage = ({
}
}, [hasFinishedInit, hasDocumentLoaded]);
// Set up intersection observer to auto-expand widget when user reaches bottom of document
useEffect(() => {
if (!hasDocumentLoaded || !hasFinishedInit || hasAutoExpanded || isExpanded) {
return;
}
// Add a delay to ensure document has fully rendered and stabilized
const timeoutId = setTimeout(() => {
// Get the number of pages in the document
const pageCount = document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR).length;
// Only set up the observer if there's more than one page
if (pageCount <= 1) return;
const observer = new IntersectionObserver(
(entries) => {
const [entry] = entries;
if (entry.isIntersecting) {
setIsExpanded(true);
setHasAutoExpanded(true);
observer.disconnect();
}
},
{ threshold: 1.0 },
);
if (documentEndRef.current) {
observer.observe(documentEndRef.current);
}
}, 1500); // 1.5 second delay
return () => {
clearTimeout(timeoutId);
};
}, [hasDocumentLoaded, hasFinishedInit, hasAutoExpanded, isExpanded]);
if (hasCompletedDocument) {
return (
<EmbedDocumentCompleted
@ -384,14 +344,12 @@ export const EmbedDirectTemplateClientPage = ({
documentData={documentData}
onDocumentLoad={() => setHasDocumentLoaded(true)}
/>
{/* Observer target at the bottom of the document */}
<div ref={documentEndRef} className="h-4 w-full" />
</div>
{/* Widget */}
<div
key={isExpanded ? 'expanded' : 'collapsed'}
className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
data-expanded={isExpanded || undefined}
>
<div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">