Fix select item classes

This commit is contained in:
Justin Edmund 2023-06-24 15:35:32 -07:00
parent 45d4eda1ab
commit da3e4621d4
2 changed files with 14 additions and 8 deletions

View file

@ -1,4 +1,4 @@
.SelectItem { .item {
align-items: center; align-items: center;
border-radius: $item-corner; border-radius: $item-corner;
border: 2px solid transparent; border: 2px solid transparent;

View file

@ -6,23 +6,29 @@ import classNames from 'classnames'
interface Props extends ComponentProps<'div'> { interface Props extends ComponentProps<'div'> {
value: string | number value: string | number
iconSrc?: string icon?: {
altText?: string src: string
alt: string
}
} }
const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem( const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
{ children, value, ...props }, { icon, value, children, ...props },
forwardedRef forwardedRef
) { ) {
const { altText, iconSrc, ...rest } = props
return ( return (
<Select.Item <Select.Item
{...rest} {...props}
className={classNames({ SelectItem: true }, props.className)} className={classNames(
{
[styles.item]: true,
},
props.className
)}
ref={forwardedRef} ref={forwardedRef}
value={`${value}`} value={`${value}`}
> >
{iconSrc ? <img alt={altText} src={iconSrc} /> : ''} {icon ? <img alt={icon.alt} src={icon.src} /> : ''}
<Select.ItemText>{children}</Select.ItemText> <Select.ItemText>{children}</Select.ItemText>
</Select.Item> </Select.Item>
) )