VSinerva/freesewing
1
0
Fork 0
Code Activity

cleanup

Browse source
This commit is contained in:
Enoch Riese 2022-07-02 11:27:39 -05:00
parent 9997fc528a
commit e6cfde4f18
5 changed files with 29 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

22
sites/shared/components/picker.js
View file

@ -1,8 +1,9 @@
import {useRef, forwardRef} from 'react'
import {forwardRef} from 'react'
import { Menu } from '@headlessui/react'
import Link from 'next/link'
export const Picker = ({Icon, className, title, iconOnly=false, children, isStatic=false}) => {
/** an accessible dropdown menu for use by picker components */
export const Picker = ({Icon, className, title, ariaLabel, iconOnly=false, children}) => {
return (<Menu as="div" className={`dropdown dropdown-end w-auto`}>
<Menu.Button className={iconOnly
@ -10,18 +11,26 @@ export const Picker = ({Icon, className, title, iconOnly=false, children, isStat
: `m-0 btn btn-neutral flex flex-row gap-2
hover:bg-neutral-content hover:border-neutral-content hover:text-neutral
`}
aria-label="Choose Theme">
aria-label={ariaLabel}>
<Icon />
{!iconOnly && <span>{title}</span>}
</Menu.Button>
<Menu.Items as="ul" className={`p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 ${className}`} static={isStatic}>
</Menu.Button>
<Menu.Items as="ul" className={`p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 ${className}`}>
{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>
@ -30,6 +39,8 @@ export const PickerLink = (props) => {
</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}>
<a className={itemClass(active)} {...rest} role={undefined} ref={ref}>
@ -40,6 +51,7 @@ const ForwardLink = forwardRef(({href, locale, active, children, ...rest}, ref)
</Link>
))
/** a menu item that is a button */
export const PickerButton = ({onClick, children}) => {
return (<Menu.Item as="li" onClick={onClick}>
{({ active }) => (