import React from 'react'; import { Badge, Button, ConfigProvider } from 'antd'; // eslint-disable-next-line import/no-unresolved import classNames from 'classnames'; import useMergeValue from 'use-merge-value'; import Icon from '@ant-design/icons'; import HeaderDropdown from '@wisdom-utils/components/lib/AppLayout/components/HeaderDropdown'; import NoticeList from './list'; import './style/index.less'; const messageSvg = () => ( <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enableBackground="new 0 0 24 24" space="preserve" > <path fill="hsla(221, 100%, 95%, 0.7)" d="M20.486,16.373l-1.721-2.246v-0.984v-0.352V9.924c0-1.919-0.664-3.698-1.871-5.007 c-0.712-0.776-1.57-1.349-2.551-1.705c-0.091-0.514-0.35-0.983-0.737-1.335c-0.879-0.791-2.334-0.791-3.21,0 c-0.394,0.354-0.653,0.823-0.741,1.336C8.676,3.568,7.817,4.14,7.105,4.917C5.899,6.229,5.234,8.008,5.234,9.923l0.005,4.194 l-1.708,2.234c-0.241,0.256-0.372,0.584-0.372,0.932v1.092c0,0.75,0.615,1.357,1.372,1.357H19.47c0.757,0,1.371-0.607,1.371-1.357 v-1.092C20.841,16.936,20.71,16.607,20.486,16.373z M4.899,17.996v1.016l-0.001-2.061l1.628-2.154 c0.227-0.244,0.353-0.561,0.353-0.893v-4.05c0-1.516,0.509-2.914,1.436-3.935c0.459-0.506,1.001-0.895,1.608-1.166 c1.276-0.565,2.883-0.565,4.155,0c0.609,0.273,1.15,0.667,1.608,1.168c0.925,1.021,1.437,2.417,1.437,3.934v2.762v0.338v0.949 c0,0.334,0.123,0.654,0.336,0.875l1.642,2.164l0.013,1.037L4.899,17.996z" /> <path fill="hsla(221, 100%, 95%, 0.7)" d="M13.685,20.236c-0.101,0.238-0.248,0.453-0.444,0.631c-0.677,0.617-1.799,0.615-2.473,0.002 c-0.194-0.18-0.344-0.396-0.446-0.633H8.895c0.146,0.627,0.474,1.199,0.955,1.639c0.588,0.543,1.354,0.841,2.158,0.841 c0.801,0,1.566-0.298,2.154-0.837c0.481-0.439,0.808-1.012,0.954-1.641L13.685,20.236z" /> </svg> ); const BellOutlined = props => <Icon component={messageSvg} {...props} />; const NoticeIcon = props => { const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext); const prefixCls = props.prefixCls || getPrefixCls(); const btnPrefixCls = `${prefixCls}-head-notifier-button`; const popPrefixCls = `${prefixCls}-head-notifier-popover`; const getNotificationBox = () => { const { children, confirmRead, renderFooter } = props; if (!children) { return null; } const panes = []; React.Children.forEach(children, child => { if (!child) { return; } const { list, title } = child.props; panes.push(<NoticeList {...child.props} data={list} key={child} title={title} config={props.config} />); }); const childProps = panes.length === 1 ? panes[0].props : { list: [] }; return ( <> <div className={`${popPrefixCls}-header`}> <span className={`${popPrefixCls}-title`}>通知</span> <Button type="link" onClick={() => (childProps.list.length > 0 ? confirmRead(true) : null)} disabled={childProps.list.length === 0} > 全部标记已读 </Button> </div> {panes} {renderFooter && renderFooter()} </> ); }; const { className, bell } = props; const [visible, setVisible] = useMergeValue(false, { value: props.popupVisible, onChange: props.onPopupVisibleChange, }); const noticeButtonClass = classNames(className, btnPrefixCls); const notificationBox = getNotificationBox(); const NoticeBellIcon = bell || <BellOutlined className={`${btnPrefixCls}-icon`} title="报警" />; const trigger = ( <span className={classNames(noticeButtonClass, { opened: visible })}> <Badge count={props.count} overflowCount={99} offset={[0, 8]} style={{ boxShadow: 'none' }} title="报警" className={classNames(`${btnPrefixCls}-badge`, props.count > 0 ? `${btnPrefixCls}-fountMessage` : '')} > {NoticeBellIcon} </Badge> {!props.bell && <span className={`${btnPrefixCls}-title`}>消息</span>} </span> ); if (!notificationBox) { return trigger; } return ( <> <HeaderDropdown placement="bottomRight" overlay={notificationBox} overlayClassName={popPrefixCls} trigger={['click']} visible={visible} onVisibleChange={setVisible} > {trigger} </HeaderDropdown> </> ); }; NoticeIcon.defaultProps = { emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg', }; NoticeIcon.Tab = NoticeList; export default NoticeIcon; // const mapStateToProps = state => ({ // global: state.getIn(['global', 'globalConfig']), // }); // export default connect( // mapStateToProps, // null, // )(NoticeIcon);