125 lines
3.2 KiB
TypeScript
125 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { tagProps } from 'App/services/NotesService';
|
|
import { GridItem } from 'App/components/Spots/SpotsList/SpotListItem';
|
|
import { confirm } from 'UI';
|
|
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
|
|
import { Tag } from 'antd';
|
|
import copy from 'copy-to-clipboard';
|
|
import { Eye, Link } from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import { resentOrDate } from 'App/date';
|
|
import { noNoteMsg } from 'App/mstore/notesStore';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
function HighlightClip({
|
|
note = 'Highlight note',
|
|
tag = 'ISSUE',
|
|
user = 'user@openreplay.com',
|
|
createdAt = '12/12/2025',
|
|
hId = 1234,
|
|
thumbnail = undefined,
|
|
openEdit = () => undefined,
|
|
onItemClick = () => undefined,
|
|
onDelete = () => undefined,
|
|
canEdit = false,
|
|
}: {
|
|
note: string | null;
|
|
tag: string;
|
|
user: string;
|
|
createdAt: string;
|
|
hId: number;
|
|
thumbnail?: string;
|
|
openEdit: (id: any) => any;
|
|
onItemClick: (id: any) => any;
|
|
onDelete: (id: any) => any;
|
|
canEdit: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const noteMsg = note || noNoteMsg;
|
|
const copyToClipboard = () => {
|
|
const currUrl = window.location.href;
|
|
const hUrl = `${currUrl}?highlight=${hId}`;
|
|
copy(hUrl);
|
|
};
|
|
|
|
const menuItems = [
|
|
{
|
|
key: 'copy',
|
|
icon: <Link size={14} strokeWidth={1} />,
|
|
label: t('Copy Link'),
|
|
},
|
|
{
|
|
key: 'edit',
|
|
icon: <EditOutlined />,
|
|
label: t('Edit'),
|
|
disabled: !canEdit,
|
|
},
|
|
{
|
|
key: 'visibility',
|
|
icon: <Eye strokeWidth={1} size={14} />,
|
|
label: t('Visibility'),
|
|
disabled: !canEdit,
|
|
},
|
|
{
|
|
key: 'delete',
|
|
icon: <DeleteOutlined />,
|
|
label: t('Delete'),
|
|
disabled: !canEdit,
|
|
},
|
|
];
|
|
|
|
const onMenuClick = async ({ key }: any) => {
|
|
switch (key) {
|
|
case 'edit':
|
|
return openEdit();
|
|
case 'copy':
|
|
copyToClipboard();
|
|
toast.success(t('Highlight link copied to clipboard'));
|
|
return;
|
|
case 'delete':
|
|
const res = await confirm({
|
|
header: t('Are you sure delete this Highlight?'),
|
|
confirmation:
|
|
t('Deleting a Highlight will only remove this instance and its associated note. It will not affect the original session.'),
|
|
confirmButton: t('Yes, Delete'),
|
|
});
|
|
if (res) {
|
|
onDelete();
|
|
}
|
|
return;
|
|
case 'visibility':
|
|
return openEdit();
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
return (
|
|
<GridItem
|
|
title={noteMsg}
|
|
onItemClick={onItemClick}
|
|
thumbnail={thumbnail}
|
|
setLoading={() => null}
|
|
loading={false}
|
|
copyToClipboard={copyToClipboard}
|
|
user={user}
|
|
createdAt={resentOrDate(createdAt, true)}
|
|
menuItems={menuItems}
|
|
onMenuClick={onMenuClick}
|
|
modifier={
|
|
tag ? (
|
|
<div className="left-0 bottom-8 flex relative gap-2 justify-end pe-2 pb-2 ">
|
|
<Tag
|
|
color={tagProps[tag]}
|
|
className="border-0 rounded-lg hover:inherit gap-2 w-14 text-center capitalize"
|
|
bordered={false}
|
|
>
|
|
{tag.toLowerCase()}
|
|
</Tag>
|
|
</div>
|
|
) : null
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default HighlightClip;
|