- Add sticky positioning to form action buttons (always visible at bottom) - Add Ctrl+S / Cmd+S keyboard shortcut to save forms - Create reusable useFormShortcuts hook - Apply to all create forms: spool, filament, vendor Fixes: https://github.com/Donkie/Spoolman/issues/274 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
27 lines
800 B
TypeScript
27 lines
800 B
TypeScript
import { useEffect } from "react";
|
|
|
|
/**
|
|
* Hook to add keyboard shortcuts to forms.
|
|
* - Ctrl+S / Cmd+S: Save (calls onSave callback)
|
|
* - Escape: Cancel (calls onCancel callback if provided)
|
|
*/
|
|
export function useFormShortcuts(onSave: () => void, onCancel?: () => void) {
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
// Ctrl+S or Cmd+S to save
|
|
if ((e.ctrlKey || e.metaKey) && e.key === "s") {
|
|
e.preventDefault();
|
|
onSave();
|
|
}
|
|
// Escape to cancel (if handler provided)
|
|
if (e.key === "Escape" && onCancel) {
|
|
e.preventDefault();
|
|
onCancel();
|
|
}
|
|
};
|
|
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, [onSave, onCancel]);
|
|
}
|