blob: 6a2b73e67e1678556fcfb08e46ccff43e47a351f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
import type { ComponentChildren } from 'preact';
import { useEffect, useRef, useId } from 'preact/hooks';
import { useSignal, batch } from '@preact/signals';
import Button from './Button.tsx';
import Menu from './Menu.tsx';
import './ButtonMenu.css';
export interface ButtonMenuProps {
children: ComponentChildren;
label: string;
}
const ButtonMenu = ({ children, label }: ButtonMenuProps) => {
const id = useId();
const ref = useRef(null);
const x = useSignal(0);
const y = useSignal(0);
const updateRect = () => batch(() => {
const rect = ref.current?.getBoundingClientRect();
if (!rect) return;
x.value = rect.x;
y.value = rect.y + rect.height + 1;
});
useEffect(updateRect, [ref.current]);
return (
<div
class="__ButtonMenu"
ref={ref}
onScroll={updateRect}
style={`--anchor-x: ${x}px; --anchor-y: ${y}px;`}
>
<Button kind="ghost" popoverTarget={id}>{label}</Button>
<Menu id={id} popover="auto">
{children}
</Menu>
</div>
);
};
export default ButtonMenu;
|
