60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
import { Menu, MenuItem, SubMenu } from '@szhsin/react-menu';
|
|
import { cloneElement } from 'preact';
|
|
import { useRef } from 'preact/hooks';
|
|
|
|
function MenuConfirm({
|
|
subMenu = false,
|
|
confirm = true,
|
|
confirmLabel,
|
|
menuItemClassName,
|
|
menuFooter,
|
|
...props
|
|
}) {
|
|
const { children, onClick, ...restProps } = props;
|
|
if (!confirm) {
|
|
if (subMenu) return <MenuItem {...props} />;
|
|
if (onClick) {
|
|
return cloneElement(children, {
|
|
onClick,
|
|
});
|
|
}
|
|
return children;
|
|
}
|
|
const Parent = subMenu ? SubMenu : Menu;
|
|
const menuRef = useRef();
|
|
return (
|
|
<Parent
|
|
instanceRef={menuRef}
|
|
openTrigger="clickOnly"
|
|
direction="bottom"
|
|
overflow="auto"
|
|
gap={-8}
|
|
shift={8}
|
|
menuClassName="menu-emphasized"
|
|
{...restProps}
|
|
menuButton={subMenu ? undefined : children}
|
|
label={subMenu ? children : undefined}
|
|
// Test fix for bug; submenus not opening on Android
|
|
itemProps={{
|
|
onPointerMove: (e) => {
|
|
if (e.pointerType === 'touch') {
|
|
menuRef.current?.openMenu?.();
|
|
}
|
|
},
|
|
onPointerLeave: (e) => {
|
|
if (e.pointerType === 'touch') {
|
|
menuRef.current?.openMenu?.();
|
|
}
|
|
},
|
|
}}
|
|
>
|
|
<MenuItem className={menuItemClassName} onClick={onClick}>
|
|
{confirmLabel}
|
|
</MenuItem>
|
|
{menuFooter}
|
|
</Parent>
|
|
);
|
|
}
|
|
|
|
export default MenuConfirm;
|