/*
|
* @Company: hugeInfo
|
* @Author: xzx
|
* @Date: 2022-04-23 17:08:27
|
* @LastEditors: ldh
|
* @LastEditTime: 2022-07-13 14:57:16
|
* @Version: 1.0.0
|
* @Description: 我的消息
|
*/
|
import React, { useEffect, useState, useRef } from 'react';
|
import { Dropdown, Menu, Typography } from 'antd';
|
import { useVirtual } from 'react-virtual';
|
import { EllipsisOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import MyDrawer from '../../components/MyDrawer';
|
import MyModal from '../../components/MyModal';
|
|
const { Paragraph } = Typography;
|
|
// 虚拟滚动组件
|
function RowVirtualizer({ rows, parentRef, ellipsis, onEllipsis }) {
|
const rowVirtualizer = useVirtual({
|
size: rows.length,
|
parentRef: parentRef,
|
});
|
|
return (
|
<div className="myMessage-main" ref={parentRef}>
|
<div style={{ height: rowVirtualizer.totalSize, width: '100%', position: 'relative' }}>
|
{rowVirtualizer.virtualItems.map((virtualRow) => {
|
return (
|
<div
|
key={virtualRow.index}
|
ref={virtualRow.measureRef}
|
style={{
|
position: 'absolute',
|
top: 0,
|
left: 0,
|
width: '100%',
|
transform: `translateY(${virtualRow.start}px)`,
|
}}
|
>
|
<div className="myMessage-main-item myMessage-main-item-read" style={{ border: virtualRow.index === rows.length - 1 && 0 }}>
|
<h5>新版本上线通知{virtualRow.index}</h5>
|
{ellipsis !== virtualRow.index ? (
|
<Paragraph
|
ellipsis={{
|
rows: 2,
|
expandable: true,
|
symbol: '查看详情',
|
onExpand: () => onEllipsis(virtualRow.index),
|
}}
|
>
|
白云区矛盾纠纷多元化解平台将在本周
|
</Paragraph>
|
) : (
|
<div className="ellipsis-text-2">白云区矛盾纠纷多元化解平台将在本周三</div>
|
)}
|
<div className="myMessage-main-item-footer">
|
<span className="myMessage-main-item-color1">平台公告</span>
|
<span className="public-rightBorder">{$$.myTimeFormat(new Date(), 'MM月DD日 HH:mm')}</span>
|
</div>
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
);
|
}
|
|
/**
|
* visible, // 显隐
|
* onClose, // 关闭
|
*/
|
const MyMessage = ({ visible, onClose }) => {
|
const parentRef = useRef();
|
|
const menu = (
|
<Menu>
|
<Menu.Item key="1">全部标记为已读</Menu.Item>
|
<Menu.Item key="2">@我的</Menu.Item>
|
</Menu>
|
);
|
|
// 是否点击查看详情
|
const [ellipsis, setEllipsis] = useState();
|
|
// 滚动触发
|
useEffect(() => {
|
if (parentRef.current) {
|
parentRef.current.onscroll = () => {
|
// 滚动到底部触发加载
|
if (parentRef.current.clientHeight + parentRef.current.scrollTop > parentRef.current.scrollHeight - 30) {
|
console.log('触底');
|
}
|
};
|
}
|
}, [parentRef]);
|
|
return (
|
<>
|
<MyDrawer
|
visible={visible}
|
title="消息中心"
|
onClose={onClose}
|
width={350}
|
bodyStyle={{ height: '100%', display: 'flex', flexDirection: 'column' }}
|
mainStyle={{ flex: 1, padding: '16px 0', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
|
>
|
<div className="myMessage-header">
|
<div className="myMessage-tabs">
|
<div className={'myMessage-tabs-item myMessage-tabs-item-active'}>未读（0）</div>
|
<div className={'myMessage-tabs-item'}>已读（0）</div>
|
</div>
|
<Dropdown overlay={menu} placement="bottomRight">
|
<EllipsisOutlined style={{ fontSize: '24px' }} />
|
</Dropdown>
|
</div>
|
<RowVirtualizer rows={[]} parentRef={parentRef} ellipsis={ellipsis} onEllipsis={(index) => setEllipsis(index)} />
|
{/* <div className="myMessage-empty">{$$.MyEmpty({ description: '没有未读消息' })}</div> */}
|
</MyDrawer>
|
<MyModal
|
width={558}
|
visible={typeof ellipsis === 'number'}
|
okText="关闭页面"
|
onOk={() => setEllipsis()}
|
onCancel={() => setEllipsis()}
|
bodyStyle={{ padding: '0 16px 16px' }}
|
closable={false}
|
>
|
<div className="myMessage-modal-header">
|
<h4>平台公告</h4>
|
<div className="myMessage-modal-header-subtitle">{$$.myTimeFormat(new Date(), 'MM月DD日 HH:mm')}</div>
|
</div>
|
<div className="myMessage-modal-main">
|
<pre></pre>
|
</div>
|
</MyModal>
|
</>
|
);
|
};
|
|
export default MyMessage;
|
