index.js 2.87 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
import React, { PureComponent } from 'react';
import { Popover, Icon, Tabs, Badge, Spin } from 'antd';
import classNames from 'classnames';
import List from './NoticeList';
import styles from './index.less';

const { TabPane } = Tabs;

export default class NoticeIcon extends PureComponent {
  static defaultProps = {
    onItemClick: () => {},
    onPopupVisibleChange: () => {},
    onTabChange: () => {},
    onClear: () => {},
    loading: false,
    locale: {
      emptyText: '暂无数据',
      clear: '清空',
    },
afc163's avatar
afc163 committed
20
    emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
21 22 23 24 25 26 27 28 29 30 31 32
  };
  static Tab = TabPane;
  constructor(props) {
    super(props);
    this.state = {};
    if (props.children && props.children[0]) {
      this.state.tabType = props.children[0].props.title;
    }
  }
  onItemClick = (item, tabProps) => {
    const { onItemClick } = this.props;
    onItemClick(item, tabProps);
jim's avatar
jim committed
33 34
  };
  onTabChange = tabType => {
35 36
    this.setState({ tabType });
    this.props.onTabChange(tabType);
jim's avatar
jim committed
37
  };
38 39 40 41 42
  getNotificationBox() {
    const { children, loading, locale } = this.props;
    if (!children) {
      return null;
    }
jim's avatar
jim committed
43 44 45 46 47
    const panes = React.Children.map(children, child => {
      const title =
        child.props.list && child.props.list.length > 0
          ? `${child.props.title} (${child.props.list.length})`
          : child.props.title;
48 49 50
      return (
        <TabPane tab={title} key={child.props.title}>
          <List
afc163's avatar
afc163 committed
51
            {...child.props}
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
            data={child.props.list}
            onClick={item => this.onItemClick(item, child.props)}
            onClear={() => this.props.onClear(child.props.title)}
            title={child.props.title}
            locale={locale}
          />
        </TabPane>
      );
    });
    return (
      <Spin spinning={loading} delay={0}>
        <Tabs className={styles.tabs} onChange={this.onTabChange}>
          {panes}
        </Tabs>
      </Spin>
    );
  }
  render() {
afc163's avatar
afc163 committed
70
    const { className, count, popupAlign, onPopupVisibleChange } = this.props;
71 72 73 74 75 76 77 78 79 80 81 82
    const noticeButtonClass = classNames(className, styles.noticeButton);
    const notificationBox = this.getNotificationBox();
    const trigger = (
      <span className={noticeButtonClass}>
        <Badge count={count} className={styles.badge}>
          <Icon type="bell" className={styles.icon} />
        </Badge>
      </span>
    );
    if (!notificationBox) {
      return trigger;
    }
afc163's avatar
afc163 committed
83 84 85 86
    const popoverProps = {};
    if ('popupVisible' in this.props) {
      popoverProps.visible = this.props.popupVisible;
    }
87 88 89 90 91 92 93 94
    return (
      <Popover
        placement="bottomRight"
        content={notificationBox}
        popupClassName={styles.popover}
        trigger="click"
        arrowPointAtCenter
        popupAlign={popupAlign}
afc163's avatar
afc163 committed
95 96
        onVisibleChange={onPopupVisibleChange}
        {...popoverProps}
97 98 99 100 101 102
      >
        {trigger}
      </Popover>
    );
  }
}