plane/web/hooks/use-dropdown-key-down.tsx
Aaryan Khandelwal 0d036e6bf5
refactor: dropdown button components (#3508)
* refactor: dropdown button components

* chore: dropdowns accessibility improvement

* chore: update module dropdown

* chore: update option content

* chore: hide icon from the peek overview

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
2024-01-31 15:36:55 +05:30

25 lines
700 B
TypeScript

import { useCallback } from "react";
type TUseDropdownKeyDown = {
(onEnterKeyDown: () => void, onEscKeyDown: () => void): (event: React.KeyboardEvent<HTMLElement>) => void;
};
export const useDropdownKeyDown: TUseDropdownKeyDown = (onEnterKeyDown, onEscKeyDown) => {
const handleKeyDown = useCallback(
(event: React.KeyboardEvent<HTMLElement>) => {
if (event.key === "Enter") {
event.stopPropagation();
event.preventDefault();
onEnterKeyDown();
} else if (event.key === "Escape") {
event.stopPropagation();
event.preventDefault();
onEscKeyDown();
}
},
[onEnterKeyDown, onEscKeyDown]
);
return handleKeyDown;
};