|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import React, { useEffect, useState, useRef } from 'react';
|
|
|
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
|
|
|
import { Dropdown, Input, Button, Tag, Popover, Form, Tooltip } from 'antd';
|
|
|
|
|
import { Dropdown, Input, Button, Tag, Popover, Form, Tooltip, Spin } from 'antd';
|
|
|
|
|
import { CloseCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
|
|
|
|
|
import { fetchConversationItemClose, fetchConversationsSearch, fetchConversationItemUnread, fetchConversationItemTop, postConversationTags, deleteConversationTags } from '@/actions/ConversationActions';
|
|
|
|
|
import { ChatItem } from 'react-chat-elements';
|
|
|
|
@ -75,6 +75,8 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
|
|
|
|
|
|
|
|
|
|
const setClosedConversationList = useConversationStore((state) => state.setClosedConversationList);
|
|
|
|
|
|
|
|
|
|
const [currentHandleChat, setCurrentHandleChat] = useState({});
|
|
|
|
|
|
|
|
|
|
const itemTagsKeys = (item.tags || []).map(t => t.key);
|
|
|
|
|
const [tags, addTag] = useConversationStore(state => [state.tags, state.addTag]);
|
|
|
|
|
const handleConversationItemClose = async (item) => {
|
|
|
|
@ -85,18 +87,28 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
|
|
|
|
|
}
|
|
|
|
|
const _clist = await fetchConversationsSearch({ opisn: userId, session_enable: 0 });
|
|
|
|
|
setClosedConversationList(_clist);
|
|
|
|
|
setCurrentHandleChat({});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleConversationItemUnread = async (item) => {
|
|
|
|
|
await fetchConversationItemUnread({ conversationid: item.sn });
|
|
|
|
|
await refreshConversationList(item.lasttime);
|
|
|
|
|
setListUpdateFlag(Math.random());
|
|
|
|
|
setCurrentHandleChat({});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleConversationItemTop = async (item) => {
|
|
|
|
|
await fetchConversationItemTop({ conversationid: item.sn, top_state: item.top_state === 0 ? 1 : 0 });
|
|
|
|
|
await refreshConversationList(item.lasttime);
|
|
|
|
|
setListUpdateFlag(Math.random());
|
|
|
|
|
setCurrentHandleChat({});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleConversationItemMuted = async (item) => {
|
|
|
|
|
await fetchConversationItemTop({ conversationid: item.sn, top_state: item.top_state === -1 ? 0 : -1 });
|
|
|
|
|
await refreshConversationList(item.lasttime);
|
|
|
|
|
setListUpdateFlag(Math.random());
|
|
|
|
|
setCurrentHandleChat({});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleConversationItemTags = async (item, tagKey, tagLabel) => {
|
|
|
|
@ -117,12 +129,16 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
|
|
|
|
|
await refreshConversationList(item.lasttime);
|
|
|
|
|
setListUpdateFlag(Math.random());
|
|
|
|
|
setContextMenuOpen(false);
|
|
|
|
|
setCurrentHandleChat({});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const [contextMenuOpen, setContextMenuOpen] = useState(false);
|
|
|
|
|
const handleContextMenuOpenChange = (nextOpen, info) => {
|
|
|
|
|
const handleContextMenuOpenChange = (nextOpen, info, item) => {
|
|
|
|
|
if (info.source === 'trigger' || nextOpen) {
|
|
|
|
|
setContextMenuOpen(nextOpen);
|
|
|
|
|
setCurrentHandleChat(nextOpen ? item : {})
|
|
|
|
|
} else {
|
|
|
|
|
// setCurrentHandleChat({});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
@ -152,11 +168,12 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
|
|
|
|
|
trigger={['contextMenu']}
|
|
|
|
|
overlayClassName='z-[998]'
|
|
|
|
|
open={contextMenuOpen}
|
|
|
|
|
onOpenChange={handleContextMenuOpenChange}
|
|
|
|
|
onOpenChange={(nextOpen, info) => handleContextMenuOpenChange(nextOpen, info, item)}
|
|
|
|
|
menu={{
|
|
|
|
|
items: [
|
|
|
|
|
item.top_state === 1 ? { label: '取消置顶', key: 'top' } : { label: '置顶会话', key: 'top' },
|
|
|
|
|
{ label: '标记为未读', key: 'unread' },
|
|
|
|
|
item.top_state === -1 ? { label: '取消静音', key: 'mute' } : { label: '设为静音', key: 'mute' },
|
|
|
|
|
{
|
|
|
|
|
label: '设置标签',
|
|
|
|
|
key: 'tags',
|
|
|
|
@ -214,14 +231,17 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
|
|
|
|
|
}
|
|
|
|
|
switch (key) {
|
|
|
|
|
case 'top':
|
|
|
|
|
setContextMenuOpen(false)
|
|
|
|
|
return handleConversationItemTop(item)
|
|
|
|
|
setContextMenuOpen(false);
|
|
|
|
|
return handleConversationItemTop(item);
|
|
|
|
|
case 'mute':
|
|
|
|
|
setContextMenuOpen(false);
|
|
|
|
|
return handleConversationItemMuted(item);
|
|
|
|
|
case 'unread':
|
|
|
|
|
setContextMenuOpen(false)
|
|
|
|
|
return handleConversationItemUnread(item)
|
|
|
|
|
setContextMenuOpen(false);
|
|
|
|
|
return handleConversationItemUnread(item);
|
|
|
|
|
case 'close':
|
|
|
|
|
setContextMenuOpen(false)
|
|
|
|
|
return handleConversationItemClose(item)
|
|
|
|
|
setContextMenuOpen(false);
|
|
|
|
|
return handleConversationItemClose(item);
|
|
|
|
|
case 'edit0':
|
|
|
|
|
setOpenTags([])
|
|
|
|
|
setEditingChat({ ...item, is_new: false })
|
|
|
|
@ -245,11 +265,14 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
|
|
|
|
|
: item.top_state === 1
|
|
|
|
|
? 'bg-stone-100'
|
|
|
|
|
: '',
|
|
|
|
|
'hover:bg-slate-100',
|
|
|
|
|
(item.sn) === (currentHandleChat?.sn) ? ' bg-slate-100 text-slate-500' : '',
|
|
|
|
|
// String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : '',
|
|
|
|
|
].join(' ')}>
|
|
|
|
|
{/* <div className='pl-4 pt-1 text-xs text-right'>
|
|
|
|
|
{tags.map((tag) => <Tag color={tag.color} key={tag.value}>{tag.label}</Tag>)}
|
|
|
|
|
</div> */}
|
|
|
|
|
<Spin spinning={(item.sn) === (currentHandleChat?.sn) && props.conversationsListLoading} size='small'>
|
|
|
|
|
<ChatItem
|
|
|
|
|
{...item}
|
|
|
|
|
key={item.sn}
|
|
|
|
@ -289,8 +312,8 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
|
|
|
|
|
date={item.lasttime || item.last_received_time || item.last_send_time}
|
|
|
|
|
dateString='' // 为了覆盖: 其他客户端发送的失败消息, 推送到此处产生新会话, 但是dataString是长字符串
|
|
|
|
|
unread={item.unread_msg_count > 99 ? 0 : item.unread_msg_count}
|
|
|
|
|
// muted={item.unread_msg_count>0}
|
|
|
|
|
// showMute={item.unread_msg_count>0}
|
|
|
|
|
muted={item.top_state === -1}
|
|
|
|
|
showMute={item.top_state === -1}
|
|
|
|
|
// className={[
|
|
|
|
|
// String(item.sn) === String(currentConversation.sn) ? '__active text-primary bg-whatsapp-bg' : '',
|
|
|
|
|
// String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : '',
|
|
|
|
@ -313,6 +336,7 @@ const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitch
|
|
|
|
|
// () => <span key={'tag'} className='self-end>💎💴❤👑💼🤝💤💔💨✅🕳❓❔❇✳❎🚫❌🎈🎊🎁📜</span>,
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</Spin>
|
|
|
|
|
</div>
|
|
|
|
|
</Dropdown>
|
|
|
|
|
</>
|
|
|
|
|