element-call/src/Menu.tsx

80 lines
1.8 KiB
TypeScript
Raw Normal View History

2021-12-07 01:34:10 +00:00
import React, { useRef, useState } from "react";
import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu";
import { TreeState, useTreeState } from "@react-stately/tree";
2021-12-07 01:34:10 +00:00
import { mergeProps } from "@react-aria/utils";
import { useFocus } from "@react-aria/interactions";
import classNames from "classnames";
import { Node } from "@react-types/shared";
import styles from "./Menu.module.css";
2021-12-07 01:34:10 +00:00
interface MenuProps<T> extends AriaMenuOptions<T> {
className: String;
onAction: () => void;
onClose: () => void;
}
export function Menu<T extends object>({
className,
onAction,
onClose,
...rest
}: MenuProps<T>) {
const state = useTreeState<T>({ ...rest, selectionMode: "none" });
2021-12-07 01:34:10 +00:00
const menuRef = useRef();
const { menuProps } = useMenu<T>(rest, state, menuRef);
2021-12-07 01:34:10 +00:00
return (
<ul
{...mergeProps(menuProps, rest)}
ref={menuRef}
className={classNames(styles.menu, className)}
>
{[...state.collection].map((item) => (
<MenuItem
key={item.key}
item={item}
state={state}
onAction={onAction}
onClose={onClose}
2021-12-07 01:34:10 +00:00
/>
))}
</ul>
);
}
interface MenuItemProps<T> {
item: Node<T>;
state: TreeState<T>;
onAction: () => void;
onClose: () => void;
}
function MenuItem<T>({ item, state, onAction, onClose }: MenuItemProps<T>) {
2021-12-07 01:34:10 +00:00
const ref = useRef();
const { menuItemProps } = useMenuItem(
{
key: item.key,
onAction,
onClose,
},
state,
ref
);
const [isFocused, setFocused] = useState(false);
const { focusProps } = useFocus({ onFocusChange: setFocused });
return (
<li
{...mergeProps(menuItemProps, focusProps)}
ref={ref}
className={classNames(styles.menuItem, {
[styles.focused]: isFocused,
})}
>
{item.rendered}
</li>
);
}