mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
Auto scroll results step
This commit is contained in:
parent
0bd050396c
commit
a921ec5909
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useRef } from 'react';
|
||||||
import { Button, Stack, Text } from '@mantine/core';
|
import { Button, Stack, Text } from '@mantine/core';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import DownloadIcon from '@mui/icons-material/Download';
|
import DownloadIcon from '@mui/icons-material/Download';
|
||||||
@ -14,24 +14,32 @@ export interface ReviewToolStepProps<TParams = unknown> {
|
|||||||
onFileClick?: (file: File) => void;
|
onFileClick?: (file: File) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createReviewToolStep<TParams = unknown>(
|
function ReviewStepContent<TParams = unknown>({ operation, onFileClick }: { operation: ToolOperationHook<TParams>; onFileClick?: (file: File) => void }) {
|
||||||
createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
|
|
||||||
props: ReviewToolStepProps<TParams>
|
|
||||||
): React.ReactElement {
|
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { operation } = props;
|
const stepRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
const previewFiles = operation.files?.map((file, index) => ({
|
const previewFiles = operation.files?.map((file, index) => ({
|
||||||
file,
|
file,
|
||||||
thumbnail: operation.thumbnails[index]
|
thumbnail: operation.thumbnails[index]
|
||||||
})) || [];
|
})) || [];
|
||||||
|
|
||||||
return createStep(t("review", "Review"), {
|
// Auto-scroll to bottom when content appears
|
||||||
isVisible: props.isVisible,
|
useEffect(() => {
|
||||||
_excludeFromCount: true,
|
if (stepRef.current && (previewFiles.length > 0 || operation.downloadUrl || operation.errorMessage)) {
|
||||||
_noPadding: true
|
const scrollableContainer = stepRef.current.closest('[style*="overflow: auto"]') as HTMLElement;
|
||||||
}, (
|
if (scrollableContainer) {
|
||||||
<Stack gap="sm" >
|
setTimeout(() => {
|
||||||
|
scrollableContainer.scrollTo({
|
||||||
|
top: scrollableContainer.scrollHeight,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}, 100); // Small delay to ensure content is rendered
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [previewFiles.length, operation.downloadUrl, operation.errorMessage]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack gap="sm" ref={stepRef}>
|
||||||
<ErrorNotification
|
<ErrorNotification
|
||||||
error={operation.errorMessage}
|
error={operation.errorMessage}
|
||||||
onClose={operation.clearError}
|
onClose={operation.clearError}
|
||||||
@ -40,7 +48,7 @@ export function createReviewToolStep<TParams = unknown>(
|
|||||||
{previewFiles.length > 0 && (
|
{previewFiles.length > 0 && (
|
||||||
<ResultsPreview
|
<ResultsPreview
|
||||||
files={previewFiles}
|
files={previewFiles}
|
||||||
onFileClick={props.onFileClick}
|
onFileClick={onFileClick}
|
||||||
isGeneratingThumbnails={operation.isGeneratingThumbnails}
|
isGeneratingThumbnails={operation.isGeneratingThumbnails}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@ -61,5 +69,23 @@ export function createReviewToolStep<TParams = unknown>(
|
|||||||
|
|
||||||
<SuggestedToolsSection />
|
<SuggestedToolsSection />
|
||||||
</Stack>
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createReviewToolStep<TParams = unknown>(
|
||||||
|
createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
|
||||||
|
props: ReviewToolStepProps<TParams>
|
||||||
|
): React.ReactElement {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return createStep(t("review", "Review"), {
|
||||||
|
isVisible: props.isVisible,
|
||||||
|
_excludeFromCount: true,
|
||||||
|
_noPadding: true
|
||||||
|
}, (
|
||||||
|
<ReviewStepContent
|
||||||
|
operation={props.operation}
|
||||||
|
onFileClick={props.onFileClick}
|
||||||
|
/>
|
||||||
));
|
));
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user