1  import { Menu, MenuItem, SubMenu } from '@szhsin/react-menu';
 2  import { cloneElement } from 'preact';
 3  import { useRef } from 'preact/hooks';
 4  
 5  function MenuConfirm({
 6    subMenu = false,
 7    confirm = true,
 8    confirmLabel,
 9    menuItemClassName,
10    menuFooter,
11    ...props
12  }) {
13    const { children, onClick, ...restProps } = props;
14    if (!confirm) {
15      if (subMenu) return <MenuItem {...props} />;
16      if (onClick) {
17        return cloneElement(children, {
18          onClick,
19        });
20      }
21      return children;
22    }
23    const Parent = subMenu ? SubMenu : Menu;
24    const menuRef = useRef();
25    return (
26      <Parent
27        instanceRef={menuRef}
28        openTrigger="clickOnly"
29        direction="bottom"
30        overflow="auto"
31        gap={-8}
32        shift={8}
33        menuClassName="menu-emphasized"
34        {...restProps}
35        menuButton={subMenu ? undefined : children}
36        label={subMenu ? children : undefined}
37        // Test fix for bug; submenus not opening on Android
38        itemProps={{
39          onPointerMove: (e) => {
40            if (e.pointerType === 'touch') {
41              menuRef.current?.openMenu?.();
42            }
43          },
44          onPointerLeave: (e) => {
45            if (e.pointerType === 'touch') {
46              menuRef.current?.openMenu?.();
47            }
48          },
49        }}
50      >
51        <MenuItem className={menuItemClassName} onClick={onClick}>
52          {confirmLabel}
53        </MenuItem>
54        {menuFooter}
55      </Parent>
56    );
57  }
58  
59  export default MenuConfirm;