blob: 1cb518a153b083bc085cde969a5d978a92767328 (
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
43
44
45
46
|
import type { ComponentChildren } from 'preact';
import { useEffect, useCallback, useRef, useId } from 'preact/hooks';
import { useSignal, batch } from '@preact/signals';
import Button from './Button.tsx';
import Menu from './Menu.tsx';
import chevronRight from '../icons/chevron-right.svg';
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 = useCallback(() => 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}>
<img src={chevronRight} />
{label}
</Button>
<Menu id={id} popover="auto">
{children}
</Menu>
</div>
);
};
export default ButtonMenu;
|
