112 lines
3.5 KiB
TypeScript
112 lines
3.5 KiB
TypeScript
import { SuggestionProps } from '@tiptap/suggestion'
|
|
import clsx from 'clsx'
|
|
import { Contract } from 'common/contract'
|
|
import { FIXED_ANTE } from 'common/economy'
|
|
import { formatMoney } from 'common/util/format'
|
|
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { contractPath } from 'web/lib/firebase/contracts'
|
|
import { Avatar } from '../avatar'
|
|
import { Col } from '../layout/col'
|
|
import { Row } from '../layout/row'
|
|
|
|
// copied from https://tiptap.dev/api/nodes/mention#usage
|
|
const M = forwardRef((props: SuggestionProps<Contract>, ref) => {
|
|
const { items: contracts, command, query } = props
|
|
const user = useUser()
|
|
|
|
const [selectedIndex, setSelectedIndex] = useState(0)
|
|
useEffect(() => setSelectedIndex(0), [contracts])
|
|
|
|
const submitUser = (index: number) => {
|
|
const contract = contracts[index]
|
|
if (contract)
|
|
command({ id: contract.id, label: contractPath(contract) } as any)
|
|
}
|
|
|
|
const createOptions = [
|
|
{
|
|
text: `Create yes/no`,
|
|
// TODO: Get these commmands to work
|
|
onClick: () => command({ id: 'new', label: 'new' } as any),
|
|
},
|
|
{
|
|
text: `Create free response`,
|
|
onClick: () => command({ id: 'new', label: 'new' } as any),
|
|
},
|
|
]
|
|
|
|
const choiceLength =
|
|
contracts.length > 0 ? contracts.length : createOptions.length
|
|
|
|
const onUp = () =>
|
|
setSelectedIndex((i) => (i + choiceLength - 1) % choiceLength)
|
|
const onDown = () => setSelectedIndex((i) => (i + 1) % choiceLength)
|
|
const onEnter = () => submitUser(selectedIndex)
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
onKeyDown: ({ event }: any) => {
|
|
if (event.key === 'ArrowUp') {
|
|
onUp()
|
|
return true
|
|
}
|
|
if (event.key === 'ArrowDown') {
|
|
onDown()
|
|
return true
|
|
}
|
|
if (event.key === 'Enter') {
|
|
onEnter()
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
}))
|
|
|
|
return (
|
|
<div className="w-42 absolute z-10 overflow-x-hidden rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
{!contracts.length ? (
|
|
<Col>
|
|
<Row className="mx-2 my-1 gap-2 text-gray-500">
|
|
<Avatar avatarUrl={user?.avatarUrl} size="xs" /> <div>{query}</div>
|
|
</Row>
|
|
|
|
{createOptions.map((option, i) => (
|
|
<button
|
|
className={clsx(
|
|
'flex h-8 w-full cursor-pointer select-none items-center gap-2 truncate px-4 hover:bg-indigo-200',
|
|
selectedIndex == i
|
|
? 'bg-indigo-500 text-white'
|
|
: 'text-gray-900'
|
|
)}
|
|
onClick={option.onClick}
|
|
key={option.text}
|
|
>
|
|
{option.text}
|
|
<span className="inline-flex items-center rounded bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">
|
|
{formatMoney(FIXED_ANTE)}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</Col>
|
|
) : (
|
|
contracts.map((contract, i) => (
|
|
<button
|
|
className={clsx(
|
|
'flex h-8 w-full cursor-pointer select-none items-center gap-2 truncate px-4 hover:bg-indigo-200',
|
|
selectedIndex === i ? 'bg-indigo-500 text-white' : 'text-gray-900'
|
|
)}
|
|
onClick={() => submitUser(i)}
|
|
key={contract.id}
|
|
>
|
|
<Avatar avatarUrl={contract.creatorAvatarUrl} size="xs" />
|
|
{contract.question}
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
)
|
|
})
|
|
|
|
// Just to keep the formatting pretty
|
|
export { M as MentionList }
|