You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
2 years ago
|
import React, { useContext } from "react";
|
||
|
import { EVENT } from "../../constants";
|
||
|
import { composeEventHandlers } from "../../utils";
|
||
|
|
||
|
export const DropdownMenuContentPropsContext = React.createContext<{
|
||
|
onSelect?: (event: Event) => void;
|
||
|
}>({});
|
||
|
|
||
1 year ago
|
export const getDropdownMenuItemClassName = (
|
||
|
className = "",
|
||
|
selected = false,
|
||
|
) => {
|
||
|
return `dropdown-menu-item dropdown-menu-item-base ${className} ${
|
||
|
selected ? "dropdown-menu-item--selected" : ""
|
||
|
}`.trim();
|
||
2 years ago
|
};
|
||
|
|
||
|
export const useHandleDropdownMenuItemClick = (
|
||
|
origOnClick:
|
||
|
| React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>
|
||
|
| undefined,
|
||
|
onSelect: ((event: Event) => void) | undefined,
|
||
|
) => {
|
||
|
const DropdownMenuContentProps = useContext(DropdownMenuContentPropsContext);
|
||
|
|
||
|
return composeEventHandlers(origOnClick, (event) => {
|
||
|
const itemSelectEvent = new CustomEvent(EVENT.MENU_ITEM_SELECT, {
|
||
|
bubbles: true,
|
||
|
cancelable: true,
|
||
|
});
|
||
|
onSelect?.(itemSelectEvent);
|
||
|
if (!itemSelectEvent.defaultPrevented) {
|
||
|
DropdownMenuContentProps.onSelect?.(itemSelectEvent);
|
||
|
}
|
||
|
});
|
||
|
};
|