|
|
@ -4,11 +4,13 @@ import { ReplyIcon, ShareForwardIcon } from '@/components/Icons';
|
|
|
|
import { stringToColour } from '@/utils/commons';
|
|
|
|
import { stringToColour } from '@/utils/commons';
|
|
|
|
import EmailEditorPopup from '../Input/EmailEditorPopup';
|
|
|
|
import EmailEditorPopup from '../Input/EmailEditorPopup';
|
|
|
|
import DnDModal from '@/components/DndModal';
|
|
|
|
import DnDModal from '@/components/DndModal';
|
|
|
|
|
|
|
|
import useStyleStore from '@/stores/StyleStore';
|
|
|
|
|
|
|
|
|
|
|
|
const TagColorStyle = (tag) => {
|
|
|
|
const TagColorStyle = (tag) => {
|
|
|
|
const color = stringToColour(tag);
|
|
|
|
const color = stringToColour(tag);
|
|
|
|
return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` };
|
|
|
|
return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` };
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
|
|
|
|
const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
|
|
|
|
let { emailOrigin } = emailDetail;
|
|
|
|
let { emailOrigin } = emailDetail;
|
|
|
|
emailOrigin = emailOrigin || {};
|
|
|
|
emailOrigin = emailOrigin || {};
|
|
|
@ -39,9 +41,38 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
|
|
|
|
setOpen(false);
|
|
|
|
setOpen(false);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [mobile] = useStyleStore((state) => [state.mobile]);
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
<DnDModal open={open} setOpen={setOpen} title={emailOrigin.subject} initial={{ top: 74 }} onMove={onHandleMove} onResize={onHandleResize}>
|
|
|
|
<DnDModal
|
|
|
|
|
|
|
|
open={open}
|
|
|
|
|
|
|
|
setOpen={setOpen}
|
|
|
|
|
|
|
|
title={emailOrigin.subject}
|
|
|
|
|
|
|
|
initial={{ top: 74 }}
|
|
|
|
|
|
|
|
onMove={onHandleMove}
|
|
|
|
|
|
|
|
onResize={onHandleResize}
|
|
|
|
|
|
|
|
footer={
|
|
|
|
|
|
|
|
mobile ? (
|
|
|
|
|
|
|
|
<>
|
|
|
|
|
|
|
|
<div className='flex items-center w-full '>
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
|
|
|
onClick={() => onOpenEditor(emailOrigin, 'reply')}
|
|
|
|
|
|
|
|
size='small'
|
|
|
|
|
|
|
|
type='text'
|
|
|
|
|
|
|
|
icon={<ReplyIcon className='text-indigo-500' />}>
|
|
|
|
|
|
|
|
回复
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
|
|
|
onClick={() => onOpenEditor(emailOrigin, 'forward')}
|
|
|
|
|
|
|
|
size='small'
|
|
|
|
|
|
|
|
type='text'
|
|
|
|
|
|
|
|
icon={<ShareForwardIcon className='text-primary' />}>
|
|
|
|
|
|
|
|
转发
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
|
|
|
) : null
|
|
|
|
|
|
|
|
}>
|
|
|
|
{/* email toolbar */}
|
|
|
|
{/* email toolbar */}
|
|
|
|
<div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
|
|
|
|
<div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
|
|
|
|
{/* <div className='flex items-center justify-start '>
|
|
|
|
{/* <div className='flex items-center justify-start '>
|
|
|
@ -52,22 +83,40 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
|
|
|
|
<div className=' font-bold'>{emailOrigin.subject}</div>
|
|
|
|
<div className=' font-bold'>{emailOrigin.subject}</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<div className={['flex justify-between', window.innerWidth < 600 ? 'flex-row' : 'flex-row'].join(' ')}>
|
|
|
|
<div
|
|
|
|
|
|
|
|
className={[
|
|
|
|
|
|
|
|
'flex justify-between',
|
|
|
|
|
|
|
|
window.innerWidth < 600 ? 'flex-row' : 'flex-row',
|
|
|
|
|
|
|
|
].join(' ')}>
|
|
|
|
<div className='flex gap-2 mb-2 items-center'>
|
|
|
|
<div className='flex gap-2 mb-2 items-center'>
|
|
|
|
<Avatar className='' style={TagColorStyle(emailOrigin.fromEmail)}>
|
|
|
|
<Avatar
|
|
|
|
|
|
|
|
className=''
|
|
|
|
|
|
|
|
style={TagColorStyle(emailOrigin.fromEmail)}>
|
|
|
|
{(emailOrigin.fromName || '').substring(0, 1)}
|
|
|
|
{(emailOrigin.fromName || '').substring(0, 1)}
|
|
|
|
</Avatar>
|
|
|
|
</Avatar>
|
|
|
|
<div className=' flex flex-col'>
|
|
|
|
<div className=' flex flex-col'>
|
|
|
|
<span className=' font-bold text-base'>{emailOrigin.fromName}</span>
|
|
|
|
<span className=' font-bold text-base'>
|
|
|
|
<span className='text-neutral-500'>{emailOrigin.fromEmail}</span>
|
|
|
|
{emailOrigin.fromName}
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span className='text-neutral-500'>
|
|
|
|
|
|
|
|
{emailOrigin.fromEmail}
|
|
|
|
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className='flex flex-col justify-start gap-1 items-end'>
|
|
|
|
<div className='flex flex-col justify-start gap-1 items-end'>
|
|
|
|
<div className='flex items-center '>
|
|
|
|
<div className='flex items-center '>
|
|
|
|
<Button onClick={() => onOpenEditor(emailOrigin, 'reply')} size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
|
|
|
|
<Button
|
|
|
|
|
|
|
|
onClick={() => onOpenEditor(emailOrigin, 'reply')}
|
|
|
|
|
|
|
|
size='small'
|
|
|
|
|
|
|
|
type='text'
|
|
|
|
|
|
|
|
icon={<ReplyIcon className='text-indigo-500' />}>
|
|
|
|
回复
|
|
|
|
回复
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
<Button onClick={() => onOpenEditor(emailOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>
|
|
|
|
<Button
|
|
|
|
|
|
|
|
onClick={() => onOpenEditor(emailOrigin, 'forward')}
|
|
|
|
|
|
|
|
size='small'
|
|
|
|
|
|
|
|
type='text'
|
|
|
|
|
|
|
|
icon={<ShareForwardIcon className='text-primary' />}>
|
|
|
|
转发
|
|
|
|
转发
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -78,7 +127,9 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
|
|
|
|
<div className='text-sm'>
|
|
|
|
<div className='text-sm'>
|
|
|
|
<span className='text-neutral-500 pr-2'>收件人:</span>
|
|
|
|
<span className='text-neutral-500 pr-2'>收件人:</span>
|
|
|
|
{emailOrigin.toName}
|
|
|
|
{emailOrigin.toName}
|
|
|
|
<span className='text-neutral-600'> <{emailOrigin.toEmail}></span>
|
|
|
|
<span className='text-neutral-600'>
|
|
|
|
|
|
|
|
<{emailOrigin.toEmail}>
|
|
|
|
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{emailOrigin.cc && (
|
|
|
|
{emailOrigin.cc && (
|
|
|
|
<div className='text-sm'>
|
|
|
|
<div className='text-sm'>
|
|
|
@ -98,7 +149,9 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
|
|
|
|
</div> */}
|
|
|
|
</div> */}
|
|
|
|
<Divider className='my-2' />
|
|
|
|
<Divider className='my-2' />
|
|
|
|
{/* <div className='mt-2'>{emailOrigin.body}</div> */}
|
|
|
|
{/* <div className='mt-2'>{emailOrigin.body}</div> */}
|
|
|
|
<div className='mt-2' dangerouslySetInnerHTML={{ __html: emailOrigin.content }}></div>
|
|
|
|
<div
|
|
|
|
|
|
|
|
className='mt-2'
|
|
|
|
|
|
|
|
dangerouslySetInnerHTML={{ __html: emailOrigin.content }}></div>
|
|
|
|
{/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
|
|
|
|
{/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -113,6 +166,6 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
|
|
|
|
key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`}
|
|
|
|
key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
)
|
|
|
|
};
|
|
|
|
};
|
|
|
|
export default EmailDetail;
|
|
|
|
export default EmailDetail;
|
|
|
|