1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
3 | import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
4 | import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
5 | import * as React from 'react';
|
6 | import { createPortal } from 'react-dom';
|
7 | import { CSSMotionList } from 'rc-motion';
|
8 | import classNames from 'classnames';
|
9 | import Notice from './Notice';
|
10 |
|
11 | var Notifications = React.forwardRef(function (props, ref) {
|
12 | var _props$prefixCls = props.prefixCls,
|
13 | prefixCls = _props$prefixCls === void 0 ? 'rc-notification' : _props$prefixCls,
|
14 | container = props.container,
|
15 | motion = props.motion,
|
16 | maxCount = props.maxCount,
|
17 | className = props.className,
|
18 | style = props.style,
|
19 | onAllRemoved = props.onAllRemoved;
|
20 | var _React$useState = React.useState([]),
|
21 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
22 | configList = _React$useState2[0],
|
23 | setConfigList = _React$useState2[1];
|
24 |
|
25 | var onNoticeClose = function onNoticeClose(key) {
|
26 | var _config$onClose;
|
27 |
|
28 | var config = configList.find(function (item) {
|
29 | return item.key === key;
|
30 | });
|
31 | config === null || config === void 0 ? void 0 : (_config$onClose = config.onClose) === null || _config$onClose === void 0 ? void 0 : _config$onClose.call(config);
|
32 | setConfigList(function (list) {
|
33 | return list.filter(function (item) {
|
34 | return item.key !== key;
|
35 | });
|
36 | });
|
37 | };
|
38 |
|
39 | React.useImperativeHandle(ref, function () {
|
40 | return {
|
41 | open: function open(config) {
|
42 | setConfigList(function (list) {
|
43 | var clone = _toConsumableArray(list);
|
44 |
|
45 | var index = clone.findIndex(function (item) {
|
46 | return item.key === config.key;
|
47 | });
|
48 | var innerConfig = _objectSpread({}, config);
|
49 | if (index >= 0) {
|
50 | var _list$index;
|
51 | innerConfig.times = (((_list$index = list[index]) === null || _list$index === void 0 ? void 0 : _list$index.times) || 0) + 1;
|
52 | clone[index] = innerConfig;
|
53 | } else {
|
54 | innerConfig.times = 0;
|
55 | clone.push(innerConfig);
|
56 | }
|
57 | if (maxCount > 0 && clone.length > maxCount) {
|
58 | clone = clone.slice(-maxCount);
|
59 | }
|
60 | return clone;
|
61 | });
|
62 | },
|
63 | close: function close(key) {
|
64 | onNoticeClose(key);
|
65 | },
|
66 | destroy: function destroy() {
|
67 | setConfigList([]);
|
68 | }
|
69 | };
|
70 | });
|
71 |
|
72 | var _React$useState3 = React.useState({}),
|
73 | _React$useState4 = _slicedToArray(_React$useState3, 2),
|
74 | placements = _React$useState4[0],
|
75 | setPlacements = _React$useState4[1];
|
76 | React.useEffect(function () {
|
77 | var nextPlacements = {};
|
78 | configList.forEach(function (config) {
|
79 | var _config$placement = config.placement,
|
80 | placement = _config$placement === void 0 ? 'topRight' : _config$placement;
|
81 | if (placement) {
|
82 | nextPlacements[placement] = nextPlacements[placement] || [];
|
83 | nextPlacements[placement].push(config);
|
84 | }
|
85 | });
|
86 |
|
87 | Object.keys(placements).forEach(function (placement) {
|
88 | nextPlacements[placement] = nextPlacements[placement] || [];
|
89 | });
|
90 | setPlacements(nextPlacements);
|
91 | }, [configList]);
|
92 |
|
93 | var onAllNoticeRemoved = function onAllNoticeRemoved(placement) {
|
94 | setPlacements(function (originPlacements) {
|
95 | var clone = _objectSpread({}, originPlacements);
|
96 | var list = clone[placement] || [];
|
97 | if (!list.length) {
|
98 | delete clone[placement];
|
99 | }
|
100 | return clone;
|
101 | });
|
102 | };
|
103 |
|
104 | var emptyRef = React.useRef(false);
|
105 | React.useEffect(function () {
|
106 | if (Object.keys(placements).length > 0) {
|
107 | emptyRef.current = true;
|
108 | } else if (emptyRef.current) {
|
109 |
|
110 | onAllRemoved === null || onAllRemoved === void 0 ? void 0 : onAllRemoved();
|
111 | emptyRef.current = false;
|
112 | }
|
113 | }, [placements]);
|
114 |
|
115 | if (!container) {
|
116 | return null;
|
117 | }
|
118 | var placementList = Object.keys(placements);
|
119 | return createPortal( React.createElement(React.Fragment, null, placementList.map(function (placement) {
|
120 | var placementConfigList = placements[placement];
|
121 | var keys = placementConfigList.map(function (config) {
|
122 | return {
|
123 | config: config,
|
124 | key: config.key
|
125 | };
|
126 | });
|
127 | var placementMotion = typeof motion === 'function' ? motion(placement) : motion;
|
128 | return React.createElement(CSSMotionList, _extends({
|
129 | key: placement,
|
130 | className: classNames(prefixCls, "".concat(prefixCls, "-").concat(placement), className === null || className === void 0 ? void 0 : className(placement)),
|
131 | style: style === null || style === void 0 ? void 0 : style(placement),
|
132 | keys: keys,
|
133 | motionAppear: true
|
134 | }, placementMotion, {
|
135 | onAllRemoved: function onAllRemoved() {
|
136 | onAllNoticeRemoved(placement);
|
137 | }
|
138 | }), function (_ref, nodeRef) {
|
139 | var config = _ref.config,
|
140 | motionClassName = _ref.className,
|
141 | motionStyle = _ref.style;
|
142 | var key = config.key,
|
143 | times = config.times;
|
144 | var configClassName = config.className,
|
145 | configStyle = config.style;
|
146 | return React.createElement(Notice, _extends({}, config, {
|
147 | ref: nodeRef,
|
148 | prefixCls: prefixCls,
|
149 | className: classNames(motionClassName, configClassName),
|
150 | style: _objectSpread(_objectSpread({}, motionStyle), configStyle),
|
151 | times: times,
|
152 | key: key,
|
153 | eventKey: key,
|
154 | onNoticeClose: onNoticeClose
|
155 | }));
|
156 | });
|
157 | })), container);
|
158 | });
|
159 | if (process.env.NODE_ENV !== 'production') {
|
160 | Notifications.displayName = 'Notifications';
|
161 | }
|
162 | export default Notifications; |
\ | No newline at end of file |