98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import { PLAIN_EDITOR_NAME } from '@/Constants/Constants'
|
|
import { sanitizeHtmlString, SNNote } from '@standardnotes/snjs'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { FunctionComponent } from 'react'
|
|
import Icon from '@/Components/Icon/Icon'
|
|
import ListItemConflictIndicator from './ListItemConflictIndicator'
|
|
import ListItemFlagIcons from './ListItemFlagIcons'
|
|
import ListItemTags from './ListItemTags'
|
|
import ListItemMetadata from './ListItemMetadata'
|
|
import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
|
|
|
|
const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
|
|
application,
|
|
viewControllerManager,
|
|
hideDate,
|
|
hideIcon,
|
|
hideTags,
|
|
hidePreview,
|
|
item,
|
|
selected,
|
|
sortBy,
|
|
tags,
|
|
}) => {
|
|
const editorForNote = application.componentManager.editorForNote(item as SNNote)
|
|
const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
|
|
const [icon, tint] = application.iconsController.getIconAndTintForNoteType(editorForNote?.package_info.note_type)
|
|
const hasFiles = application.items.getFilesForNote(item as SNNote).length > 0
|
|
|
|
const openNoteContextMenu = (posX: number, posY: number) => {
|
|
viewControllerManager.notesController.setContextMenuClickLocation({
|
|
x: posX,
|
|
y: posY,
|
|
})
|
|
viewControllerManager.notesController.reloadContextMenuLayout()
|
|
viewControllerManager.notesController.setContextMenuOpen(true)
|
|
}
|
|
|
|
const openContextMenu = async (posX: number, posY: number) => {
|
|
const { didSelect } = await viewControllerManager.selectionController.selectItem(item.uuid, true)
|
|
if (didSelect) {
|
|
openNoteContextMenu(posX, posY)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`content-list-item flex items-stretch w-full cursor-pointer ${
|
|
selected && 'selected border-0 border-l-2px border-solid border-info'
|
|
}`}
|
|
id={item.uuid}
|
|
onClick={() => {
|
|
void viewControllerManager.selectionController.selectItem(item.uuid, true)
|
|
}}
|
|
onContextMenu={(event) => {
|
|
event.preventDefault()
|
|
void openContextMenu(event.clientX, event.clientY)
|
|
}}
|
|
>
|
|
{!hideIcon ? (
|
|
<div className="flex flex-col items-center justify-between p-4 pr-3 mr-0">
|
|
<Icon ariaLabel={`Icon for ${editorName}`} type={icon} className={`color-accessory-tint-${tint}`} />
|
|
</div>
|
|
) : (
|
|
<div className="pr-4" />
|
|
)}
|
|
<div className="flex-grow min-w-0 py-4 px-0 border-0 border-b-1 border-solid border-main">
|
|
<div className="flex items-start justify-between font-semibold text-base leading-1.3 overflow-hidden">
|
|
<div className="break-word mr-2">{item.title}</div>
|
|
</div>
|
|
{!hidePreview && !item.hidePreview && !item.protected && (
|
|
<div className="overflow-hidden overflow-ellipsis text-sm">
|
|
{item.preview_html && (
|
|
<div
|
|
className="my-1"
|
|
dangerouslySetInnerHTML={{
|
|
__html: sanitizeHtmlString(item.preview_html),
|
|
}}
|
|
></div>
|
|
)}
|
|
{!item.preview_html && item.preview_plain && (
|
|
<div className="leading-1.3 overflow-hidden line-clamp-1 mt-1">{item.preview_plain}</div>
|
|
)}
|
|
{!item.preview_html && !item.preview_plain && item.text && (
|
|
<div className="leading-1.3 overflow-hidden line-clamp-1 mt-1">{item.text}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
|
|
<ListItemTags hideTags={hideTags} tags={tags} />
|
|
<ListItemConflictIndicator item={item} />
|
|
</div>
|
|
<ListItemFlagIcons item={item} hasFiles={hasFiles} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(NoteListItem)
|