53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import { ActionList } from '@primer/react'
|
|
|
|
import { PickerItem } from './Picker'
|
|
import { Link } from 'components/Link'
|
|
|
|
import styles from './Fields.module.scss'
|
|
|
|
export const Fields = (fieldProps: {
|
|
open: boolean
|
|
setOpen: React.Dispatch<React.SetStateAction<boolean>>
|
|
items: PickerItem[]
|
|
onSelect?: (item: PickerItem) => void
|
|
renderItem?: (item: PickerItem) => ReactNode | string
|
|
}) => {
|
|
const { open, setOpen, items, onSelect, renderItem } = fieldProps
|
|
|
|
return (
|
|
<ActionList selectionVariant="single">
|
|
{items.map((item, i) =>
|
|
item.divider ? (
|
|
<ActionList.Divider key={`divider${i}`} />
|
|
) : (
|
|
<ActionList.Item
|
|
as={Link}
|
|
key={item.text}
|
|
href={item.href}
|
|
selected={item.selected === true}
|
|
onClick={() => {
|
|
if (onSelect) onSelect(item)
|
|
setOpen(!open)
|
|
}}
|
|
// These extra links in the pickers are not a part of the selection variant
|
|
// in that they are generally external links, so we want to remove the selection
|
|
// variant span box in front of it. To date there isn't a possibility to have
|
|
// an ActionMenu in Primer that allow non-selection variant items with selection
|
|
// variant items
|
|
className={(item.extra?.arrow || item.extra?.info) && styles.extrasDisplay}
|
|
sx={{
|
|
':hover': {
|
|
textDecoration: 'none',
|
|
textAlign: 'left',
|
|
},
|
|
}}
|
|
>
|
|
{renderItem ? renderItem(item) : item.text}
|
|
</ActionList.Item>
|
|
),
|
|
)}
|
|
</ActionList>
|
|
)
|
|
}
|