Fix select item classes
This commit is contained in:
parent
45d4eda1ab
commit
da3e4621d4
2 changed files with 14 additions and 8 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue