mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-11-16 01:21:16 +01:00
d2de8e54aa
# Description of Changes - Add features to BulkSelectionPanel to allow more versatility when selecting pages - Make changes to Tooltip to: Remove non-existent props delayAppearance, fixed defaults no hardcoded maxWidth, and documented new props (closeOnOutside, containerStyle, minWidth). Clarify pinned vs. unpinned outside-click logic, hover/focus interactions, and event/ref preservation. - Made top controls show full text always rather than dynamically display the text only for the selected items --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details.
95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
import { TextInput, Button, Text, Flex, Switch } from '@mantine/core';
|
||
import { useTranslation } from 'react-i18next';
|
||
import LocalIcon from '../../shared/LocalIcon';
|
||
import { Tooltip } from '../../shared/Tooltip';
|
||
import { usePageSelectionTips } from '../../tooltips/usePageSelectionTips';
|
||
import classes from './BulkSelectionPanel.module.css';
|
||
|
||
interface PageSelectionInputProps {
|
||
csvInput: string;
|
||
setCsvInput: (value: string) => void;
|
||
onUpdatePagesFromCSV: (override?: string) => void;
|
||
onClear: () => void;
|
||
advancedOpened?: boolean;
|
||
onToggleAdvanced?: (v: boolean) => void;
|
||
}
|
||
|
||
const PageSelectionInput = ({
|
||
csvInput,
|
||
setCsvInput,
|
||
onUpdatePagesFromCSV,
|
||
onClear,
|
||
advancedOpened,
|
||
onToggleAdvanced,
|
||
}: PageSelectionInputProps) => {
|
||
const { t } = useTranslation();
|
||
const pageSelectionTips = usePageSelectionTips();
|
||
|
||
return (
|
||
<div className={classes.panelGroup}>
|
||
{/* Header row with tooltip/title and advanced toggle */}
|
||
<Flex justify="space-between" align="center" mb="sm">
|
||
<Tooltip
|
||
position="left"
|
||
offset={20}
|
||
header={pageSelectionTips.header}
|
||
portalTarget={document.body}
|
||
pinOnClick={true}
|
||
containerStyle={{ marginTop: "1rem"}}
|
||
tips={pageSelectionTips.tips}
|
||
>
|
||
<Flex onClick={(e) => e.stopPropagation()} align="center" gap="xs">
|
||
<LocalIcon icon="gpp-maybe-outline-rounded" width="1rem" height="1rem" style={{ color: 'var(--text-instruction)' }} />
|
||
<Text>Page Selection</Text>
|
||
</Flex>
|
||
</Tooltip>
|
||
{typeof advancedOpened === 'boolean' && (
|
||
<Flex align="center" gap="xs">
|
||
<Text size="sm" c="var(--text-secondary)">{t('bulkSelection.advanced.title', 'Advanced')}</Text>
|
||
<Switch
|
||
size="sm"
|
||
checked={!!advancedOpened}
|
||
onChange={(e) => onToggleAdvanced?.(e.currentTarget.checked)}
|
||
title={t('bulkSelection.advanced.title', 'Advanced')}
|
||
className={classes.advancedSwitch}
|
||
/>
|
||
</Flex>
|
||
)}
|
||
</Flex>
|
||
|
||
{/* Text input */}
|
||
<TextInput
|
||
value={csvInput}
|
||
onChange={(e) => {
|
||
const next = e.target.value;
|
||
setCsvInput(next);
|
||
onUpdatePagesFromCSV(next);
|
||
}}
|
||
placeholder="1,3,5-10"
|
||
rightSection={
|
||
csvInput && (
|
||
<Button
|
||
variant="subtle"
|
||
size="xs"
|
||
onClick={onClear}
|
||
style={{
|
||
color: 'var(--text-muted)',
|
||
minWidth: 'auto',
|
||
width: '24px',
|
||
height: '24px',
|
||
padding: 0
|
||
}}
|
||
>
|
||
×
|
||
</Button>
|
||
)
|
||
}
|
||
onKeyDown={(e) => e.key === 'Enter' && onUpdatePagesFromCSV()}
|
||
className={classes.textInput}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default PageSelectionInput;
|