mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-09-18 01:19:24 +00:00
72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import classes from './bulkSelectionPanel/BulkSelectionPanel.module.css';
|
|
import { parseSelectionWithDiagnostics } from '../../utils/bulkselection/parseSelection';
|
|
import PageSelectionInput from './bulkSelectionPanel/PageSelectionInput';
|
|
import SelectedPagesDisplay from './bulkSelectionPanel/SelectedPagesDisplay';
|
|
import AdvancedSelectionPanel from './bulkSelectionPanel/AdvancedSelectionPanel';
|
|
|
|
interface BulkSelectionPanelProps {
|
|
csvInput: string;
|
|
setCsvInput: (value: string) => void;
|
|
selectedPageIds: string[];
|
|
displayDocument?: { pages: { id: string; pageNumber: number }[] };
|
|
onUpdatePagesFromCSV: (override?: string) => void;
|
|
}
|
|
|
|
const BulkSelectionPanel = ({
|
|
csvInput,
|
|
setCsvInput,
|
|
selectedPageIds,
|
|
displayDocument,
|
|
onUpdatePagesFromCSV,
|
|
}: BulkSelectionPanelProps) => {
|
|
const [syntaxError, setSyntaxError] = useState<string | null>(null);
|
|
const maxPages = displayDocument?.pages?.length ?? 0;
|
|
|
|
|
|
// Validate input syntax and show lightweight feedback
|
|
useEffect(() => {
|
|
const text = (csvInput || '').trim();
|
|
if (!text) {
|
|
setSyntaxError(null);
|
|
return;
|
|
}
|
|
try {
|
|
const { warning } = parseSelectionWithDiagnostics(text, maxPages);
|
|
setSyntaxError(warning ? 'There is a syntax issue. See Page Selection tips for help.' : null);
|
|
} catch {
|
|
setSyntaxError('There is a syntax issue. See Page Selection tips for help.');
|
|
}
|
|
}, [csvInput, maxPages]);
|
|
|
|
const handleClear = () => {
|
|
setCsvInput('');
|
|
onUpdatePagesFromCSV('');
|
|
};
|
|
|
|
return (
|
|
<div className={classes.panelContainer}>
|
|
<PageSelectionInput
|
|
csvInput={csvInput}
|
|
setCsvInput={setCsvInput}
|
|
onUpdatePagesFromCSV={onUpdatePagesFromCSV}
|
|
onClear={handleClear}
|
|
/>
|
|
|
|
<SelectedPagesDisplay
|
|
selectedPageIds={selectedPageIds}
|
|
displayDocument={displayDocument}
|
|
syntaxError={syntaxError}
|
|
/>
|
|
|
|
<AdvancedSelectionPanel
|
|
csvInput={csvInput}
|
|
setCsvInput={setCsvInput}
|
|
onUpdatePagesFromCSV={onUpdatePagesFromCSV}
|
|
maxPages={maxPages}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BulkSelectionPanel; |