feat: 多渠道回复框
Lei OT
10 months ago
parent
0a90396b6a
commit
03e437a075
@ -0,0 +1,88 @@
|
|||||||
|
import { createContext, useEffect, useState, useRef } from 'react';
|
||||||
|
import { Button, Flex, Modal } from 'antd';
|
||||||
|
import Draggable from 'react-draggable';
|
||||||
|
import 'react-quill/dist/quill.snow.css';
|
||||||
|
|
||||||
|
const EmailEditor = ({ mobile }) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [dragDisabled, setDragDisabled] = useState(true);
|
||||||
|
const [bounds, setBounds] = useState({
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
bottom: 0,
|
||||||
|
right: 0,
|
||||||
|
});
|
||||||
|
const draggleRef = useRef(null);
|
||||||
|
const onStart = (_event, uiData) => {
|
||||||
|
const { clientWidth, clientHeight } = window.document.documentElement;
|
||||||
|
const targetRect = draggleRef.current?.getBoundingClientRect();
|
||||||
|
if (!targetRect) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setBounds({
|
||||||
|
left: -targetRect.left + uiData.x,
|
||||||
|
right: clientWidth - (targetRect.right - uiData.x),
|
||||||
|
top: -targetRect.top + uiData.y,
|
||||||
|
bottom: clientHeight - (targetRect.bottom - uiData.y),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const [useAddr, setUseAddr] = useState('');
|
||||||
|
const openEditor = (email_addr) => {
|
||||||
|
setOpen(true);
|
||||||
|
setUseAddr(email_addr);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button type='primary' className='bg-violet-500 shadow shadow-violet-300 hover:!bg-violet-400 active:bg-violet-400 focus:bg-violet-400' onClick={() => openEditor('lyt@hainatravel.com')}>
|
||||||
|
lyt@hainatravel.com
|
||||||
|
</Button>
|
||||||
|
<Modal
|
||||||
|
title={
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
cursor: 'move',
|
||||||
|
}}
|
||||||
|
onMouseOver={() => {
|
||||||
|
if (dragDisabled) {
|
||||||
|
setDragDisabled(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onMouseOut={() => {
|
||||||
|
setDragDisabled(true);
|
||||||
|
}}
|
||||||
|
// fix eslintjsx-a11y/mouse-events-have-key-events
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
|
||||||
|
onFocus={() => {}}
|
||||||
|
onBlur={() => {}}
|
||||||
|
// end
|
||||||
|
>
|
||||||
|
写邮件: {useAddr}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
open={open}
|
||||||
|
width={mobile === undefined ? '75%' : '100%'}
|
||||||
|
footer={false}
|
||||||
|
onCancel={() => setOpen(false)}
|
||||||
|
destroyOnClose
|
||||||
|
modalRender={(modal) => (
|
||||||
|
<Draggable disabled={dragDisabled} bounds={bounds} nodeRef={draggleRef} onStart={(event, uiData) => onStart(event, uiData)}>
|
||||||
|
<div ref={draggleRef}>{modal}</div>
|
||||||
|
</Draggable>
|
||||||
|
)}>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const EmailComposer = ({ ...props }) => {
|
||||||
|
return (
|
||||||
|
<Flex gap={8} className='p-2 bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>
|
||||||
|
<EmailEditor />
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default EmailComposer;
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import { Children, createContext, useEffect, useState } from 'react';
|
||||||
|
import { Tabs } from 'antd';
|
||||||
|
import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
|
||||||
|
import InputComposer from './Input/InputComposer';
|
||||||
|
import EmailComposer from './Input/EmailComposer';
|
||||||
|
import { WABIcon } from './../../../components/Icons';
|
||||||
|
|
||||||
|
const ReplyWrapper = ({ ...props }) => {
|
||||||
|
const replyTypes = [
|
||||||
|
{ key: 'WABA', label: 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer isWABA /> },
|
||||||
|
{ key: 'Email', label: 'Email', icon: <MailOutlined className='text-violet-500' />, children: <EmailComposer /> },
|
||||||
|
{ key: 'WA', label: 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer /> },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div className='reply-wrapper rounded rounded-b-none emoji bg-white'>
|
||||||
|
<Tabs type={'card'} size={'small'} tabPosition={'bottom'} className='bg-white *:m-0 ' items={replyTypes} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ReplyWrapper;
|
||||||
Loading…
Reference in New Issue