-
-
Notifications
You must be signed in to change notification settings - Fork 54.7k
Expand file tree
/
Copy pathPureList.tsx
More file actions
73 lines (65 loc) · 2.14 KB
/
Copy pathPureList.tsx
File metadata and controls
73 lines (65 loc) · 2.14 KB
1
2
3
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
import * as React from 'react';
import { NotificationList } from '@rc-component/notification';
import type { NotificationListConfig } from '@rc-component/notification';
import { clsx } from 'clsx';
import { useComponentConfig } from '../config-provider/context';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
import type { IconType, NotificationPlacement, NotificationSemanticAllType } from './interface';
import { getCloseIcon, TypeIcon } from './PurePanel';
import useStyle from './style';
interface PureListItem {
key: React.Key;
title: React.ReactNode;
description: React.ReactNode;
type: IconType;
actions?: React.ReactNode;
duration?: number | false;
showProgress?: boolean;
}
export interface PureListProps {
items: PureListItem[];
placement?: NotificationPlacement;
classNames?: NotificationSemanticAllType['classNames'];
style?: React.CSSProperties;
}
/** @private Internal Component. Do not use in your production. */
const PureList: React.FC<PureListProps> = (props) => {
const { items, classNames, placement = 'topRight', style } = props;
const { getPrefixCls } = useComponentConfig('notification');
const prefixCls = getPrefixCls('notification');
const rootCls = useCSSVarCls(prefixCls);
const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const noticePrefixCls = `${prefixCls}-notice`;
const configList = items.map<NotificationListConfig>((item) => {
const { actions, description, duration, key, showProgress, title, type } = item;
const typeIconCls = `${noticePrefixCls}-icon-${type}`;
return {
key,
actions,
closable: {
closeIcon: getCloseIcon(noticePrefixCls),
},
description,
duration,
icon: TypeIcon[type],
showProgress,
title,
className: `${noticePrefixCls}-${type}`,
classNames: {
icon: typeIconCls,
},
};
});
return (
<NotificationList
prefixCls={prefixCls}
placement={placement}
configList={configList}
className={clsx(hashId, cssVarCls, rootCls)}
classNames={classNames}
style={style}
stack={false}
/>
);
};
export default PureList;