66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { LinkingController } from '@/Controllers/LinkingController'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { SNNote } from '@standardnotes/snjs'
|
|
import Icon from '../Icon/Icon'
|
|
import { PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
|
|
import LinkedItemMeta from './LinkedItemMeta'
|
|
import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
|
|
import { LinkedItemSearchResultsAddTagOption } from './LinkedItemSearchResultsAddTagOption'
|
|
import { useCallback } from 'react'
|
|
|
|
type Props = {
|
|
createAndAddNewTag: LinkingController['createAndAddNewTag']
|
|
linkItems: LinkingController['linkItems']
|
|
results: LinkableItem[]
|
|
searchQuery: string
|
|
shouldShowCreateTag: boolean
|
|
onClickCallback?: () => void
|
|
isEntitledToNoteLinking: boolean
|
|
item: LinkableItem
|
|
}
|
|
|
|
const LinkedItemSearchResults = ({
|
|
createAndAddNewTag,
|
|
linkItems,
|
|
results,
|
|
searchQuery,
|
|
shouldShowCreateTag,
|
|
onClickCallback,
|
|
isEntitledToNoteLinking,
|
|
item,
|
|
}: Props) => {
|
|
const onClickAddNew = useCallback(
|
|
(searchQuery: string) => {
|
|
void createAndAddNewTag(searchQuery)
|
|
onClickCallback?.()
|
|
},
|
|
[createAndAddNewTag, onClickCallback],
|
|
)
|
|
|
|
return (
|
|
<div className="my-1">
|
|
{results.map((result) => {
|
|
const cannotLinkItem = !isEntitledToNoteLinking && result instanceof SNNote
|
|
return (
|
|
<button
|
|
key={result.uuid}
|
|
className="flex w-full items-center justify-between gap-4 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
|
|
onClick={() => {
|
|
void linkItems(item, result)
|
|
onClickCallback?.()
|
|
}}
|
|
>
|
|
<LinkedItemMeta item={result} searchQuery={searchQuery} />
|
|
{cannotLinkItem && <Icon type={PremiumFeatureIconName} className="ml-auto flex-shrink-0 text-info" />}
|
|
</button>
|
|
)
|
|
})}
|
|
{shouldShowCreateTag && (
|
|
<LinkedItemSearchResultsAddTagOption searchQuery={searchQuery} onClickCallback={onClickAddNew} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(LinkedItemSearchResults)
|