index.js 2.9 KB
Newer Older
dengxiaofeng's avatar
dengxiaofeng committed
1 2
import React from 'react';

张烨's avatar
张烨 committed
3
import { Badge, Spin, Tabs } from 'antd';
dengxiaofeng's avatar
dengxiaofeng committed
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
import classNames from 'classnames';
import useMergeValue from 'use-merge-value';

import { BellOutlined } from '@ant-design/icons';

import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import NoticeList from './NoticeList';

const { TabPane } = Tabs;
const NoticeIcon = props => {
  const getNotificationBox = () => {
    const {
      children,
      loading,
      onClear,
      onTabChange,
      onItemClick,
      onViewMore,
      clearText,
      viewMoreText,
    } = props;
    if (!children) {
      return null;
    }
    const panes = [];
    React.Children.forEach(children, child => {
      if (!child) {
        return;
      }
      const {
        list,
        title,
        count,
        tabKey,
        showClear,
        showViewMore,
      } = child.props;
      const len = list && list.length ? list.length : 0;
      const msgCount = count || count === 0 ? count : len;
      const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title;
      panes.push(
        <TabPane tab={tabTitle} key={tabKey}>
          <NoticeList
            {...child.props}
            clearText={clearText}
            viewMoreText={viewMoreText}
            data={list}
            onClear={() => onClear && onClear(title, tabKey)}
            onClick={item => onItemClick && onItemClick(item, child.props)}
            onViewMore={event => onViewMore && onViewMore(child.props, event)}
            showClear={showClear}
            showViewMore={showViewMore}
            title={title}
          />
        </TabPane>,
      );
    });
    return (
      <Spin spinning={loading} delay={300}>
        <Tabs className={styles.tabs} onChange={onTabChange}>
          {panes}
        </Tabs>
      </Spin>
    );
  };

  const { className, count, bell } = props;

  const [visible, setVisible] = useMergeValue(false, {
    value: props.popupVisible,
    onChange: props.onPopupVisibleChange,
  });
张烨's avatar
张烨 committed
77
  const noticeButtonClass = classNames(className, styles.noticeButton);
dengxiaofeng's avatar
dengxiaofeng committed
78
  const notificationBox = getNotificationBox();
张烨's avatar
张烨 committed
79
  const NoticeBellIcon = bell || <BellOutlined className={styles.icon} />;
dengxiaofeng's avatar
dengxiaofeng committed
80 81 82 83 84
  const trigger = (
    <span className={classNames(noticeButtonClass, { opened: visible })}>
      <Badge
        count={count}
        style={{ boxShadow: 'none' }}
dengxiaofeng's avatar
dengxiaofeng committed
85
        className={styles.badge}
dengxiaofeng's avatar
dengxiaofeng committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
      >
        {NoticeBellIcon}
      </Badge>
    </span>
  );
  if (!notificationBox) {
    return trigger;
  }

  return (
    <HeaderDropdown
      placement="bottomRight"
      overlay={notificationBox}
      overlayClassName={styles.popover}
      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;