NoticeList.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. import { Avatar, List } from 'antd';
  2. import React from 'react';
  3. import classNames from 'classnames';
  4. import styles from './NoticeList.less';
  5. export type NoticeIconTabProps = {
  6. count?: number;
  7. showClear?: boolean;
  8. showViewMore?: boolean;
  9. style?: React.CSSProperties;
  10. title: string;
  11. tabKey: API.NoticeIconItemType;
  12. onClick?: (item: API.NoticeIconItem) => void;
  13. onClear?: () => void;
  14. emptyText?: string;
  15. clearText?: string;
  16. viewMoreText?: string;
  17. list: API.NoticeIconItem[];
  18. onViewMore?: (e: any) => void;
  19. };
  20. const NoticeList: React.FC<NoticeIconTabProps> = ({
  21. list = [],
  22. onClick,
  23. onClear,
  24. title,
  25. onViewMore,
  26. emptyText,
  27. showClear = true,
  28. clearText,
  29. viewMoreText,
  30. showViewMore = false,
  31. }) => {
  32. if (!list || list.length === 0) {
  33. return (
  34. <div className={styles.notFound}>
  35. <img
  36. src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
  37. alt="not found"
  38. />
  39. <div>{emptyText}</div>
  40. </div>
  41. );
  42. }
  43. return (
  44. <div>
  45. <List<API.NoticeIconItem>
  46. className={styles.list}
  47. dataSource={list}
  48. renderItem={(item, i) => {
  49. const itemCls = classNames(styles.item, {
  50. [styles.read]: item.read,
  51. });
  52. // eslint-disable-next-line no-nested-ternary
  53. const leftIcon = item.avatar ? (
  54. typeof item.avatar === 'string' ? (
  55. <Avatar className={styles.avatar} src={item.avatar} />
  56. ) : (
  57. <span className={styles.iconElement}>{item.avatar}</span>
  58. )
  59. ) : null;
  60. return (
  61. <List.Item
  62. className={itemCls}
  63. key={item.key || i}
  64. onClick={() => {
  65. onClick?.(item);
  66. }}
  67. >
  68. <List.Item.Meta
  69. className={styles.meta}
  70. avatar={leftIcon}
  71. title={
  72. <div className={styles.title}>
  73. {item.title}
  74. <div className={styles.extra}>{item.extra}</div>
  75. </div>
  76. }
  77. description={
  78. <div>
  79. <div className={styles.description}>{item.description}</div>
  80. <div className={styles.datetime}>{item.datetime}</div>
  81. </div>
  82. }
  83. />
  84. </List.Item>
  85. );
  86. }}
  87. />
  88. <div className={styles.bottomBar}>
  89. {showClear ? (
  90. <div onClick={onClear}>
  91. {clearText} {title}
  92. </div>
  93. ) : null}
  94. {showViewMore ? (
  95. <div
  96. onClick={(e) => {
  97. if (onViewMore) {
  98. onViewMore(e);
  99. }
  100. }}
  101. >
  102. {viewMoreText}
  103. </div>
  104. ) : null}
  105. </div>
  106. </div>
  107. );
  108. };
  109. export default NoticeList;