useNotification.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = useNotification;
  8. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  9. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  10. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  11. var React = _interopRequireWildcard(require("react"));
  12. var _Notifications = _interopRequireDefault(require("../Notifications"));
  13. var _rcUtil = require("rc-util");
  14. var _excluded = ["getContainer", "motion", "prefixCls", "maxCount", "className", "style", "onAllRemoved", "stack", "renderNotifications"];
  15. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
  16. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  17. var defaultGetContainer = function defaultGetContainer() {
  18. return document.body;
  19. };
  20. var uniqueKey = 0;
  21. function mergeConfig() {
  22. var clone = {};
  23. for (var _len = arguments.length, objList = new Array(_len), _key = 0; _key < _len; _key++) {
  24. objList[_key] = arguments[_key];
  25. }
  26. objList.forEach(function (obj) {
  27. if (obj) {
  28. Object.keys(obj).forEach(function (key) {
  29. var val = obj[key];
  30. if (val !== undefined) {
  31. clone[key] = val;
  32. }
  33. });
  34. }
  35. });
  36. return clone;
  37. }
  38. function useNotification() {
  39. var rootConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  40. var _rootConfig$getContai = rootConfig.getContainer,
  41. getContainer = _rootConfig$getContai === void 0 ? defaultGetContainer : _rootConfig$getContai,
  42. motion = rootConfig.motion,
  43. prefixCls = rootConfig.prefixCls,
  44. maxCount = rootConfig.maxCount,
  45. className = rootConfig.className,
  46. style = rootConfig.style,
  47. onAllRemoved = rootConfig.onAllRemoved,
  48. stack = rootConfig.stack,
  49. renderNotifications = rootConfig.renderNotifications,
  50. shareConfig = (0, _objectWithoutProperties2.default)(rootConfig, _excluded);
  51. var _React$useState = React.useState(),
  52. _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
  53. container = _React$useState2[0],
  54. setContainer = _React$useState2[1];
  55. var notificationsRef = React.useRef();
  56. var contextHolder = /*#__PURE__*/React.createElement(_Notifications.default, {
  57. container: container,
  58. ref: notificationsRef,
  59. prefixCls: prefixCls,
  60. motion: motion,
  61. maxCount: maxCount,
  62. className: className,
  63. style: style,
  64. onAllRemoved: onAllRemoved,
  65. stack: stack,
  66. renderNotifications: renderNotifications
  67. });
  68. var _React$useState3 = React.useState([]),
  69. _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
  70. taskQueue = _React$useState4[0],
  71. setTaskQueue = _React$useState4[1];
  72. var open = (0, _rcUtil.useEvent)(function (config) {
  73. var mergedConfig = mergeConfig(shareConfig, config);
  74. if (mergedConfig.key === null || mergedConfig.key === undefined) {
  75. mergedConfig.key = "rc-notification-".concat(uniqueKey);
  76. uniqueKey += 1;
  77. }
  78. setTaskQueue(function (queue) {
  79. return [].concat((0, _toConsumableArray2.default)(queue), [{
  80. type: 'open',
  81. config: mergedConfig
  82. }]);
  83. });
  84. });
  85. // ========================= Refs =========================
  86. var api = React.useMemo(function () {
  87. return {
  88. open: open,
  89. close: function close(key) {
  90. setTaskQueue(function (queue) {
  91. return [].concat((0, _toConsumableArray2.default)(queue), [{
  92. type: 'close',
  93. key: key
  94. }]);
  95. });
  96. },
  97. destroy: function destroy() {
  98. setTaskQueue(function (queue) {
  99. return [].concat((0, _toConsumableArray2.default)(queue), [{
  100. type: 'destroy'
  101. }]);
  102. });
  103. }
  104. };
  105. }, []);
  106. // ======================= Container ======================
  107. // React 18 should all in effect that we will check container in each render
  108. // Which means getContainer should be stable.
  109. React.useEffect(function () {
  110. setContainer(getContainer());
  111. });
  112. // ======================== Effect ========================
  113. React.useEffect(function () {
  114. // Flush task when node ready
  115. if (notificationsRef.current && taskQueue.length) {
  116. taskQueue.forEach(function (task) {
  117. switch (task.type) {
  118. case 'open':
  119. notificationsRef.current.open(task.config);
  120. break;
  121. case 'close':
  122. notificationsRef.current.close(task.key);
  123. break;
  124. case 'destroy':
  125. notificationsRef.current.destroy();
  126. break;
  127. }
  128. });
  129. // https://github.com/ant-design/ant-design/issues/52590
  130. // React `startTransition` will run once `useEffect` but many times `setState`,
  131. // So `setTaskQueue` with filtered array will cause infinite loop.
  132. // We cache the first match queue instead.
  133. var oriTaskQueue;
  134. var tgtTaskQueue;
  135. // React 17 will mix order of effect & setState in async
  136. // - open: setState[0]
  137. // - effect[0]
  138. // - open: setState[1]
  139. // - effect setState([]) * here will clean up [0, 1] in React 17
  140. setTaskQueue(function (oriQueue) {
  141. if (oriTaskQueue !== oriQueue || !tgtTaskQueue) {
  142. oriTaskQueue = oriQueue;
  143. tgtTaskQueue = oriQueue.filter(function (task) {
  144. return !taskQueue.includes(task);
  145. });
  146. }
  147. return tgtTaskQueue;
  148. });
  149. }
  150. }, [taskQueue]);
  151. // ======================== Return ========================
  152. return [api, contextHolder];
  153. }