| 1 | import { ForwardedRef, forwardRef, memo, useMemo, useState } from 'react'; |
| 2 | import styles from './bellMessage.module.scss'; |
| 3 | import { Empty, Menu, MenuProps, Popover } from 'antd'; |
| 4 | import { useShallow } from 'zustand/react/shallow'; |
| 5 | import { NoticeType, useBellMessageStroe } from '../../store/bellMessageStroe'; |
| 6 | import { PubRecordStatusTag } from '../../views/publish/children/pubRecord/page'; |
| 7 | import { formatTime } from '../../utils'; |
| 8 | import PubProgressModule from '../../views/publish/components/PubProgressModule/PubProgressModule'; |
| 9 | |
| 10 | export interface IBellmessageRef {} |
| 11 | |
| 12 | export interface IBellmessageProps { |
| 13 | children?: React.ReactNode; |
| 14 | } |
| 15 | |
| 16 | type MenuItem = Required<MenuProps>['items'][number]; |
| 17 | const menuItems: MenuItem[] = [ |
| 18 | { |
| 19 | key: NoticeType.PubNotice, |
| 20 | label: '发布通知', |
| 21 | }, |
| 22 | // { |
| 23 | // key: '1', |
| 24 | // label: '系统通知', |
| 25 | // }, |
| 26 | // { |
| 27 | // key: `2`, |
| 28 | // label: '更新公告', |
| 29 | // }, |
| 30 | // { |
| 31 | // key: `3`, |
| 32 | // label: '私信通知', |
| 33 | // }, |
| 34 | // { |
| 35 | // key: `4`, |
| 36 | // label: '任务通知', |
| 37 | // }, |
| 38 | ]; |
| 39 | |
| 40 | const Bellmessage = memo( |
| 41 | forwardRef( |
| 42 | ({ children }: IBellmessageProps, ref: ForwardedRef<IBellmessageRef>) => { |
| 43 | const [menuKey, setMenuKey] = useState<string>(NoticeType.PubNotice); |
| 44 | const { noticeMap } = useBellMessageStroe( |
| 45 | useShallow((state) => ({ |
| 46 | noticeMap: state.noticeMap, |
| 47 | })), |
| 48 | ); |
| 49 | const [progressOpen, setProgressOpen] = useState(false); |
| 50 | const [pubProgressData, setPubProgressData] = useState<any[]>([]); |
| 51 | const [open, setOpen] = useState(false); |
| 52 | |
| 53 | const noticeList = useMemo(() => { |
| 54 | return noticeMap.get(NoticeType.PubNotice) || []; |
| 55 | }, [noticeMap]); |
| 56 | |
| 57 | return ( |
| 58 | <> |
| 59 | <PubProgressModule |
| 60 | pubProgressData={pubProgressData} |
| 61 | open={progressOpen} |
| 62 | onClose={() => setProgressOpen(false)} |
| 63 | /> |
| 64 | <Popover |
| 65 | open={open} |
| 66 | onOpenChange={(newOpen) => setOpen(newOpen)} |
| 67 | rootClassName={styles.bellMessagePopover} |
| 68 | placement="bottomLeft" |
| 69 | content={ |
| 70 | <> |
| 71 | <div className={styles.bellMessage}> |
| 72 | <div className="bellMessage-menu"> |
| 73 | <p className="bellMessage-menu-title">消息中心</p> |
| 74 | <Menu |
| 75 | selectedKeys={[NoticeType.PubNotice]} |
| 76 | inlineIndent={15} |
| 77 | mode="inline" |
| 78 | items={menuItems} |
| 79 | onClick={(e) => { |
| 80 | setMenuKey(e.key); |
| 81 | }} |
| 82 | /> |
| 83 | </div> |
| 84 | |
| 85 | <div className="bellMessage-content"> |
| 86 | {noticeList.length === 0 ? ( |
| 87 | <div className="bellMessage-content-empty"> |
| 88 | <Empty /> |
| 89 | </div> |
| 90 | ) : ( |
| 91 | <> |
| 92 | {noticeList.map((v) => { |
| 93 | return ( |
| 94 | <div |
| 95 | className="bellMessage-content-item" |
| 96 | onClick={() => { |
| 97 | switch (menuKey) { |
| 98 | case NoticeType.PubNotice: |
| 99 | setOpen(false); |
| 100 | setPubProgressData(v.pub!.progressList); |
| 101 | setProgressOpen(true); |
| 102 | break; |
| 103 | } |
| 104 | }} |
| 105 | key={v.id} |
| 106 | > |
| 107 | <div |
| 108 | className="bellMessage-content-item-title" |
| 109 | title={v.title} |
| 110 | > |
| 111 | {v.title} |
| 112 | </div> |
| 113 | <div className="bellMessage-content-item-des"> |
| 114 | {menuKey === NoticeType.PubNotice ? ( |
| 115 | <PubRecordStatusTag status={v.pub!.status} /> |
| 116 | ) : ( |
| 117 | <></> |
| 118 | )} |
| 119 | </div> |
| 120 | <div className="bellMessage-content-item-time"> |
| 121 | {formatTime(v.time)} |
| 122 | </div> |
| 123 | </div> |
| 124 | ); |
| 125 | })} |
| 126 | </> |
| 127 | )} |
| 128 | </div> |
| 129 | </div> |
| 130 | </> |
| 131 | } |
| 132 | > |
| 133 | {children} |
| 134 | </Popover> |
| 135 | </> |
| 136 | ); |
| 137 | }, |
| 138 | ), |
| 139 | ); |
| 140 | Bellmessage.displayName = 'Bellmessage'; |
| 141 | |
| 142 | export default Bellmessage; |
| 143 |