File size: 2,579 Bytes
b2a00c5 | 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 | import React, { ReactNode } from 'react'
import { Annotation, canEditAnnotation } from './annotations'
import {
AnnotationAuthorshipLine,
AnnotationItemRow,
AnnotationNote,
AnnotationsListContainer
} from './annotation-list-items'
import { useRoutelessModalsContext } from '../navigation/routeless-modals-context'
import { useUserContext } from '../user-context'
import { PencilIcon } from '../components/icons'
const ScrollableArea = (props: { children: ReactNode }) => (
<div className="max-h-25 sm:max-h-40 overflow-y-auto overflow-x-hidden -mr-2.5 pr-2.5 [scrollbar-width:thin] [scrollbar-color:theme(colors.gray.600)_transparent]">
{props.children}
</div>
)
export const InteractiveAnnotationsList = ({
annotations,
isTouchDevice,
closeTooltip
}: {
annotations: Annotation[]
isTouchDevice: boolean
closeTooltip: () => void
}) => {
const { setModal } = useRoutelessModalsContext()
const user = useUserContext()
const openEdit = (annotation: Annotation) => {
closeTooltip()
setModal({ type: 'update-annotation', annotation })
}
return (
<ScrollableArea>
<AnnotationsListContainer>
{annotations.map((annotation) => {
const editable = canEditAnnotation({ type: annotation.type, user })
const content = (
<>
<AnnotationAuthorshipLine annotation={annotation} />
<AnnotationNote note={annotation.note} />
{editable && !isTouchDevice && (
<button
aria-label="Edit note"
className="absolute top-px right-0 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-gray-300 hover:text-gray-100 focus:outline-none"
onClick={() => openEdit(annotation)}
>
<PencilIcon className="size-4" />
</button>
)}
</>
)
return (
<AnnotationItemRow key={annotation.id}>
{editable && isTouchDevice ? (
<button
className="relative flex flex-col gap-y-px w-full max-w-64 text-left focus:outline-none"
onClick={() => openEdit(annotation)}
>
{content}
</button>
) : (
<div className="relative flex flex-col gap-y-px w-full max-w-64">
{content}
</div>
)}
</AnnotationItemRow>
)
})}
</AnnotationsListContainer>
</ScrollableArea>
)
}
|