EthanHealy01andGitHub
5354f08766
# Description of Changes
- Migrated all dynamic right-rail controls into their owning views (file
editor, page editor, viewer) using dedicated helper hooks, so the rail
is
purely a renderer now.
- Tightened layout/animation: dynamic buttons grow in with a top-down
reveal
and center correctly.
---
## Checklist
### General
- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [x] 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)
- [x] I have performed a self-review of my own code
- [x] 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.
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useRightRailButtons, RightRailButtonWithAction } from '../../hooks/useRightRailButtons';
|
|
import LocalIcon from '../shared/LocalIcon';
|
|
|
|
interface FileEditorRightRailButtonsParams {
|
|
totalItems: number;
|
|
selectedCount: number;
|
|
onSelectAll: () => void;
|
|
onDeselectAll: () => void;
|
|
onCloseSelected: () => void;
|
|
}
|
|
|
|
export function useFileEditorRightRailButtons({
|
|
totalItems,
|
|
selectedCount,
|
|
onSelectAll,
|
|
onDeselectAll,
|
|
onCloseSelected,
|
|
}: FileEditorRightRailButtonsParams) {
|
|
const { t } = useTranslation();
|
|
|
|
const buttons = useMemo<RightRailButtonWithAction[]>(() => [
|
|
{
|
|
id: 'file-select-all',
|
|
icon: <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />,
|
|
tooltip: t('rightRail.selectAll', 'Select All'),
|
|
ariaLabel: typeof t === 'function' ? t('rightRail.selectAll', 'Select All') : 'Select All',
|
|
section: 'top' as const,
|
|
order: 10,
|
|
disabled: totalItems === 0 || selectedCount === totalItems,
|
|
visible: totalItems > 0,
|
|
onClick: onSelectAll,
|
|
},
|
|
{
|
|
id: 'file-deselect-all',
|
|
icon: <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />,
|
|
tooltip: t('rightRail.deselectAll', 'Deselect All'),
|
|
ariaLabel: typeof t === 'function' ? t('rightRail.deselectAll', 'Deselect All') : 'Deselect All',
|
|
section: 'top' as const,
|
|
order: 20,
|
|
disabled: selectedCount === 0,
|
|
visible: totalItems > 0,
|
|
onClick: onDeselectAll,
|
|
},
|
|
{
|
|
id: 'file-close-selected',
|
|
icon: <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />,
|
|
tooltip: t('rightRail.closeSelected', 'Close Selected Files'),
|
|
ariaLabel: typeof t === 'function' ? t('rightRail.closeSelected', 'Close Selected Files') : 'Close Selected Files',
|
|
section: 'top' as const,
|
|
order: 30,
|
|
disabled: selectedCount === 0,
|
|
visible: totalItems > 0,
|
|
onClick: onCloseSelected,
|
|
},
|
|
], [t, totalItems, selectedCount, onSelectAll, onDeselectAll, onCloseSelected]);
|
|
|
|
useRightRailButtons(buttons);
|
|
}
|