123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- import { Avatar, List } from 'antd';
- import React from 'react';
- import classNames from 'classnames';
- import styles from './NoticeList.less';
- export type NoticeIconTabProps = {
- count?: number;
- showClear?: boolean;
- showViewMore?: boolean;
- style?: React.CSSProperties;
- title: string;
- tabKey: API.NoticeIconItemType;
- onClick?: (item: API.NoticeIconItem) => void;
- onClear?: () => void;
- emptyText?: string;
- clearText?: string;
- viewMoreText?: string;
- list: API.NoticeIconItem[];
- onViewMore?: (e: any) => void;
- };
- const NoticeList: React.FC<NoticeIconTabProps> = ({
- list = [],
- onClick,
- onClear,
- title,
- onViewMore,
- emptyText,
- showClear = true,
- clearText,
- viewMoreText,
- showViewMore = false,
- }) => {
- if (!list || list.length === 0) {
- return (
- <div className={styles.notFound}>
- <img
- src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
- alt="not found"
- />
- <div>{emptyText}</div>
- </div>
- );
- }
- return (
- <div>
- <List<API.NoticeIconItem>
- className={styles.list}
- dataSource={list}
- renderItem={(item, i) => {
- const itemCls = classNames(styles.item, {
- [styles.read]: item.read,
- });
- // eslint-disable-next-line no-nested-ternary
- const leftIcon = item.avatar ? (
- typeof item.avatar === 'string' ? (
- <Avatar className={styles.avatar} src={item.avatar} />
- ) : (
- <span className={styles.iconElement}>{item.avatar}</span>
- )
- ) : null;
- return (
- <List.Item
- className={itemCls}
- key={item.key || i}
- onClick={() => {
- onClick?.(item);
- }}
- >
- <List.Item.Meta
- className={styles.meta}
- avatar={leftIcon}
- title={
- <div className={styles.title}>
- {item.title}
- <div className={styles.extra}>{item.extra}</div>
- </div>
- }
- description={
- <div>
- <div className={styles.description}>{item.description}</div>
- <div className={styles.datetime}>{item.datetime}</div>
- </div>
- }
- />
- </List.Item>
- );
- }}
- />
- <div className={styles.bottomBar}>
- {showClear ? (
- <div onClick={onClear}>
- {clearText} {title}
- </div>
- ) : null}
- {showViewMore ? (
- <div
- onClick={(e) => {
- if (onViewMore) {
- onViewMore(e);
- }
- }}
- >
- {viewMoreText}
- </div>
- ) : null}
- </div>
- </div>
- );
- };
- export default NoticeList;
|