Spaces:
Build error
Build error
File size: 4,106 Bytes
a8b3f00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import type { FC } from 'react'
import { useMemo, useState } from 'react'
import { RiArrowDownSLine, RiCheckLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
import cn from '@/utils/classnames'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
export type Item = {
value: number | string
name: string
} & Record<string, any>
type Props = {
className?: string
panelClassName?: string
showLeftIcon?: boolean
leftIcon?: any
value: number | string
items: Item[]
onSelect: (item: any) => void
onClear: () => void
}
const Chip: FC<Props> = ({
className,
panelClassName,
showLeftIcon = true,
leftIcon,
value,
items,
onSelect,
onClear,
}) => {
const [open, setOpen] = useState(false)
const triggerContent = useMemo(() => {
return items.find(item => item.value === value)?.name || ''
}, [items, value])
return (
<PortalToFollowElem
open={open}
onOpenChange={setOpen}
placement='bottom-start'
offset={4}
>
<div className='relative'>
<PortalToFollowElemTrigger
onClick={() => setOpen(v => !v)}
className='block'
>
<div className={cn(
'flex items-center min-h-8 px-2 py-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
open && !value && '!bg-state-base-hover-alt hover:bg-state-base-hover-alt',
!open && !!value && '!bg-components-button-secondary-bg shadow-xs !border-components-button-secondary-border hover:!bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover',
open && !!value && '!bg-components-button-secondary-bg-hover !border-components-button-secondary-border-hover shadow-xs hover:!bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover',
className,
)}>
{showLeftIcon && (
<div className='p-0.5'>
{leftIcon || (
<RiFilter3Line className={cn('h-4 w-4 text-text-tertiary', !!value && 'text-text-secondary')} />
)}
</div>
)}
<div className='grow first-line:p-1 flex items-center gap-0.5'>
<div className={cn('system-sm-regular text-text-tertiary', !!value && 'text-text-secondary')}>
{triggerContent}
</div>
</div>
{!value && <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />}
{!!value && (
<div className='p-[1px] cursor-pointer group/clear' onClick={(e) => {
e.stopPropagation()
onClear()
}}>
<RiCloseCircleFill className='h-3.5 w-3.5 text-text-quaternary group-hover/clear:text-text-tertiary' />
</div>
)}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1002]'>
<div className={cn('relative w-[240px] bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg', panelClassName)}>
<div className='p-1 max-h-72 overflow-auto'>
{items.map(item => (
<div
key={item.value}
className='flex items-center gap-2 pl-3 py-[6px] px-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
onClick={() => {
onSelect(item)
setOpen(false)
}}
>
<div title={item.name} className='grow text-text-secondary system-sm-medium truncate'>{item.name}</div>
{value === item.value && <RiCheckLine className='shrink-0 w-4 h-4 text-util-colors-blue-light-blue-light-600' />}
</div>
))}
</div>
</div>
</PortalToFollowElemContent>
</div>
</PortalToFollowElem>
)
}
export default Chip
|