File size: 1,382 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 |
import { memo } from 'react'
type VariableMenuItemProps = {
title: string
icon?: JSX.Element
extraElement?: JSX.Element
isSelected: boolean
queryString: string | null
onClick: () => void
onMouseEnter: () => void
setRefElement?: (element: HTMLDivElement) => void
}
export const VariableMenuItem = memo(({
title,
icon,
extraElement,
isSelected,
queryString,
onClick,
onMouseEnter,
setRefElement,
}: VariableMenuItemProps) => {
let before = title
let middle = ''
let after = ''
if (queryString) {
const regex = new RegExp(queryString, 'i')
const match = regex.exec(title)
if (match) {
before = title.substring(0, match.index)
middle = match[0]
after = title.substring(match.index + match[0].length)
}
}
return (
<div
className={`
flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer
${isSelected && 'bg-primary-50'}
`}
tabIndex={-1}
ref={setRefElement}
onMouseEnter={onMouseEnter}
onClick={onClick}>
<div className='mr-2'>
{icon}
</div>
<div className='grow text-[13px] text-gray-900 truncate' title={title}>
{before}
<span className='text-[#2970FF]'>{middle}</span>
{after}
</div>
{extraElement}
</div>
)
})
VariableMenuItem.displayName = 'VariableMenuItem'
|