84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
import { forwardRef } from 'react'
|
|
import { Menu } from '@headlessui/react'
|
|
import Link from 'next/link'
|
|
|
|
// FIXME: Update this to be used to dry up all picker components
|
|
|
|
/** an accessible dropdown menu for use by picker components */
|
|
export const Picker = ({ Icon, className, title, ariaLabel, iconOnly = false, children, end }) => {
|
|
return (
|
|
<Menu as="div" className={`w-auto relative`}>
|
|
<Menu.Button
|
|
className={
|
|
iconOnly
|
|
? `btn btn-sm`
|
|
: `m-0 btn btn-neutral flex flex-row gap-2
|
|
hover:bg-neutral-focus
|
|
`
|
|
}
|
|
aria-label={ariaLabel}
|
|
>
|
|
<Icon />
|
|
{!iconOnly && <span>{title}</span>}
|
|
</Menu.Button>
|
|
<Menu.Items
|
|
as="ul"
|
|
className={`p-2 shadow menu bg-base-100 rounded-box w-52 ${className} absolute ${
|
|
end ? 'right-0' : 'left-0'
|
|
} top-full mt-1`}
|
|
>
|
|
{children}
|
|
</Menu.Items>
|
|
</Menu>
|
|
)
|
|
}
|
|
|
|
/** get the menu item's class based on whether it's active */
|
|
const itemClass = (active) => 'btn btn-ghost ' + (active ? 'bg-base-200' : '')
|
|
|
|
/**
|
|
* a menu item that has a link in it
|
|
*
|
|
* Expected Props:
|
|
** href: the href for the link
|
|
** locale?: the locale the link links to
|
|
* */
|
|
export const PickerLink = (props) => {
|
|
return (
|
|
<li role="menuitem">
|
|
<Menu.Item>
|
|
{({ active }) => <ForwardLink active={active} {...props}></ForwardLink>}
|
|
</Menu.Item>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Necessary to have keyboard enter 'click' events passed to the link */
|
|
const ForwardLink = forwardRef(({ href, locale, active, children, ...rest }, ref) => (
|
|
<Link
|
|
href={href}
|
|
locale={locale}
|
|
className={itemClass(active)}
|
|
{...rest}
|
|
role={undefined}
|
|
ref={ref}
|
|
>
|
|
<span className="text-base-content">{children}</span>
|
|
</Link>
|
|
))
|
|
|
|
ForwardLink.displayName = 'ForwardLink'
|
|
|
|
/** a menu item that is a button */
|
|
export const PickerButton = ({ onClick, children }) => {
|
|
return (
|
|
<Menu.Item as="li" onClick={onClick}>
|
|
{({ active }) => (
|
|
<button className={itemClass(active)}>
|
|
<span className="text-base-content">{children}</span>
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
)
|
|
}
|