115 lines
3.5 KiB
TypeScript
115 lines
3.5 KiB
TypeScript
import { ListboxArrow, ListboxInput, ListboxList, ListboxPopover } from '@reach/listbox'
|
|
import '@reach/listbox/styles.css'
|
|
import { VisuallyHidden } from '@reach/visually-hidden'
|
|
import { FunctionComponent } from 'react'
|
|
import Icon from '@/Components/Icon/Icon'
|
|
import { DropdownItem } from './DropdownItem'
|
|
import StyledListboxButton from './StyledListboxButton'
|
|
import StyledListboxOption from './StyledListboxOption'
|
|
import { classNames } from '@standardnotes/snjs'
|
|
|
|
type DropdownProps = {
|
|
id: string
|
|
label: string
|
|
items: DropdownItem[]
|
|
value: string
|
|
onChange: (value: string, item: DropdownItem) => void
|
|
disabled?: boolean
|
|
classNameOverride?: {
|
|
wrapper?: string
|
|
button?: string
|
|
popover?: string
|
|
}
|
|
fullWidth?: boolean
|
|
portal?: boolean
|
|
}
|
|
|
|
type ListboxButtonProps = DropdownItem & {
|
|
isExpanded: boolean
|
|
}
|
|
|
|
const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
|
|
label,
|
|
isExpanded,
|
|
icon,
|
|
iconClassName = '',
|
|
}) => (
|
|
<>
|
|
<div className="flex items-center">
|
|
{icon ? (
|
|
<div className="mr-2 flex">
|
|
<Icon type={icon} className={iconClassName} size="small" />
|
|
</div>
|
|
) : null}
|
|
<div className="text-base lg:text-sm">{label}</div>
|
|
</div>
|
|
<ListboxArrow className={`flex ${isExpanded ? 'rotate-180' : ''}`}>
|
|
<Icon type="menu-arrow-down" className="text-passive-1" size="small" />
|
|
</ListboxArrow>
|
|
</>
|
|
)
|
|
|
|
const Dropdown: FunctionComponent<DropdownProps> = ({
|
|
id,
|
|
label,
|
|
items,
|
|
value,
|
|
onChange,
|
|
disabled,
|
|
classNameOverride = {},
|
|
fullWidth,
|
|
portal = true,
|
|
}) => {
|
|
const labelId = `${id}-label`
|
|
|
|
const handleChange = (value: string) => {
|
|
const selectedItem = items.find((item) => item.value === value) as DropdownItem
|
|
|
|
onChange(value, selectedItem)
|
|
}
|
|
|
|
return (
|
|
<div className={classNameOverride.wrapper}>
|
|
<VisuallyHidden id={labelId}>{label}</VisuallyHidden>
|
|
<ListboxInput value={value} onChange={handleChange} aria-labelledby={labelId} disabled={disabled}>
|
|
<StyledListboxButton
|
|
className={classNames('w-full', !fullWidth && 'md:w-fit', classNameOverride.button)}
|
|
children={({ value, label, isExpanded }) => {
|
|
const current = items.find((item) => item.value === value)
|
|
const icon = current ? current?.icon : null
|
|
const iconClassName = current ? current?.iconClassName : null
|
|
return CustomDropdownButton({
|
|
value: value ? value : label.toLowerCase(),
|
|
label,
|
|
isExpanded,
|
|
...(icon ? { icon } : null),
|
|
...(iconClassName ? { iconClassName } : null),
|
|
})
|
|
}}
|
|
/>
|
|
<ListboxPopover
|
|
portal={portal}
|
|
className={classNames('sn-dropdown sn-dropdown-popover', classNameOverride.popover)}
|
|
>
|
|
<div className="sn-component">
|
|
<ListboxList>
|
|
{items.map((item) => (
|
|
<StyledListboxOption key={item.value} value={item.value} label={item.label} disabled={item.disabled}>
|
|
{item.icon ? (
|
|
<div className="mr-3 flex">
|
|
<Icon type={item.icon} className={item.iconClassName ?? ''} size="small" />
|
|
</div>
|
|
) : null}
|
|
<div className="text-base lg:text-sm">{item.label}</div>
|
|
</StyledListboxOption>
|
|
))}
|
|
</ListboxList>
|
|
</div>
|
|
</ListboxPopover>
|
|
</ListboxInput>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Dropdown
|