Stirling-PDF/frontend/src/hooks/useRightRailButtons.ts
EthanHealy01 5354f08766
Chore/v2/right rail cleanup (#4689)
# 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.
2025-10-16 15:58:20 +01:00

47 lines
1.7 KiB
TypeScript

import { useEffect, useMemo } from 'react';
import { useRightRail } from '../contexts/RightRailContext';
import { RightRailAction, RightRailButtonConfig } from '../types/rightRail';
export interface RightRailButtonWithAction extends RightRailButtonConfig {
onClick?: RightRailAction;
}
/**
* Registers one or more RightRail buttons and their actions.
* - Automatically registers on mount and unregisters on unmount
* - Updates registration when the input array reference changes
*/
export function useRightRailButtons(buttons: readonly RightRailButtonWithAction[]) {
const { registerButtons, unregisterButtons, setAction } = useRightRail();
// Memoize configs and ids to reduce churn
const configs: RightRailButtonConfig[] = useMemo(
() => buttons.map(({ onClick, ...cfg }) => cfg),
[buttons]
);
const ids: string[] = useMemo(() => buttons.map(b => b.id), [buttons]);
useEffect(() => {
if (!buttons || buttons.length === 0) return;
// DEV warnings for duplicate ids or missing handlers
if (process.env.NODE_ENV === 'development') {
const idSet = new Set<string>();
buttons.forEach(b => {
if (!b.onClick && !b.render) console.warn('[RightRail] Missing onClick/render for id:', b.id);
if (idSet.has(b.id)) console.warn('[RightRail] Duplicate id in buttons array:', b.id);
idSet.add(b.id);
});
}
// Register visual button configs (idempotent merge by id)
registerButtons(configs);
// Bind/update actions independent of registration
buttons.forEach(({ id, onClick }) => setAction(id, onClick));
// Cleanup unregisters by ids present in this call
return () => unregisterButtons(ids);
}, [registerButtons, unregisterButtons, setAction, configs, ids, buttons]);
}