WGShare.Client.Electron/src/page/Meeting/NoticeWindow/index.tsx

106 lines
3.6 KiB
TypeScript

import styles from '@/page/Meeting/NoticeWindow/index.module.scss'
import { Button, notification } from 'antd';
import { useEffect } from "react";
const NoticeWindow: React.FC = () => {
const [api, contextHolder] = notification.useNotification({
stack: {
threshold: 3
}
});
const channel = new BroadcastChannel('meeting_channel');
useEffect(() => {
window.electron.setChildWindowShow({
key: 'noticeWindow',
bool: false
})
channel.onmessage = function (event) {
const { type, noticeItem } = event.data;
switch (type) {
case 'noticeItem':
api.open({
message: '',
description: <div>
<div style={{ fontSize: '16px' }}>
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={noticeItem.uname}>{noticeItem.uname}</div>
<div></div>
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end' }} className='drag'>
<Button
type="primary"
className='m-ant-btn'
onClick={async (e: any) => {
let i = e.nativeEvent.path;
if (i) {
i.forEach((i: any) => {
if (i.className === 'ant-notification-notice ant-notification-notice-closable') {
i.childNodes.forEach((row: any) => {
if (row.className === 'ant-notification-notice-close') {
row.click()
channel.postMessage({
type: 'noticeWindowPostRoomManager',
noticeWindowPostRoomManager: {
uid: noticeItem.uid
}
});
}
})
}
})
}
}}
></Button>
<Button
type="primary"
onClick={(e: any) => {
let item = e.nativeEvent.path;
if (item) {
item.forEach((item: any) => {
if (item.className === 'ant-notification-notice ant-notification-notice-closable') {
item.childNodes.forEach((row: any) => {
if (row.className === 'ant-notification-notice-close') {
row.click()
}
})
}
})
}
}}
style={{ backgroundColor: '#EC3C3C', marginLeft: '14px' }}
></Button>
</div>
</div>,
onClose: () => {
setTimeout(() => {
const dom = document.getElementsByClassName('ant-notification')
if (dom.length === 0) {
window.electron.setChildWindowShow({
key: 'noticeWindow',
bool: false
})
}
}, 500);
},
duration: 10,
placement: 'bottomRight',
showProgress: true,
pauseOnHover: false,
});
break;
}
}
return () => {
channel.close();
};
}, []);
return (
<>
<div className={`${styles.noticeWindow} drag`}>
{contextHolder}
</div>
</>
)
}
export default NoticeWindow