useNotification.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createVNode as _createVNode } from "vue";
  3. var __rest = this && this.__rest || function (s, e) {
  4. var t = {};
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  8. }
  9. return t;
  10. };
  11. import { shallowRef, watch } from 'vue';
  12. import HookNotification, { getUuid } from './HookNotification';
  13. const defaultGetContainer = () => document.body;
  14. let uniqueKey = 0;
  15. function mergeConfig() {
  16. const clone = {};
  17. for (var _len = arguments.length, objList = new Array(_len), _key = 0; _key < _len; _key++) {
  18. objList[_key] = arguments[_key];
  19. }
  20. objList.forEach(obj => {
  21. if (obj) {
  22. Object.keys(obj).forEach(key => {
  23. const val = obj[key];
  24. if (val !== undefined) {
  25. clone[key] = val;
  26. }
  27. });
  28. }
  29. });
  30. return clone;
  31. }
  32. export default function useNotification() {
  33. let rootConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  34. const {
  35. getContainer = defaultGetContainer,
  36. motion,
  37. prefixCls,
  38. maxCount,
  39. getClassName,
  40. getStyles,
  41. onAllRemoved
  42. } = rootConfig,
  43. shareConfig = __rest(rootConfig, ["getContainer", "motion", "prefixCls", "maxCount", "getClassName", "getStyles", "onAllRemoved"]);
  44. const notices = shallowRef([]);
  45. const notificationsRef = shallowRef();
  46. const add = (originNotice, holderCallback) => {
  47. const key = originNotice.key || getUuid();
  48. const notice = _extends(_extends({}, originNotice), {
  49. key
  50. });
  51. const noticeIndex = notices.value.map(v => v.notice.key).indexOf(key);
  52. const updatedNotices = notices.value.concat();
  53. if (noticeIndex !== -1) {
  54. updatedNotices.splice(noticeIndex, 1, {
  55. notice,
  56. holderCallback
  57. });
  58. } else {
  59. if (maxCount && notices.value.length >= maxCount) {
  60. notice.key = updatedNotices[0].notice.key;
  61. notice.updateMark = getUuid();
  62. notice.userPassKey = key;
  63. updatedNotices.shift();
  64. }
  65. updatedNotices.push({
  66. notice,
  67. holderCallback
  68. });
  69. }
  70. notices.value = updatedNotices;
  71. };
  72. const removeNotice = removeKey => {
  73. notices.value = notices.value.filter(_ref => {
  74. let {
  75. notice: {
  76. key,
  77. userPassKey
  78. }
  79. } = _ref;
  80. const mergedKey = userPassKey || key;
  81. return mergedKey !== removeKey;
  82. });
  83. };
  84. const destroy = () => {
  85. notices.value = [];
  86. };
  87. const contextHolder = () => _createVNode(HookNotification, {
  88. "ref": notificationsRef,
  89. "prefixCls": prefixCls,
  90. "maxCount": maxCount,
  91. "notices": notices.value,
  92. "remove": removeNotice,
  93. "getClassName": getClassName,
  94. "getStyles": getStyles,
  95. "animation": motion,
  96. "hashId": rootConfig.hashId,
  97. "onAllRemoved": onAllRemoved,
  98. "getContainer": getContainer
  99. }, null);
  100. const taskQueue = shallowRef([]);
  101. // ========================= Refs =========================
  102. const api = {
  103. open: config => {
  104. const mergedConfig = mergeConfig(shareConfig, config);
  105. //@ts-ignore
  106. if (mergedConfig.key === null || mergedConfig.key === undefined) {
  107. //@ts-ignore
  108. mergedConfig.key = `vc-notification-${uniqueKey}`;
  109. uniqueKey += 1;
  110. }
  111. taskQueue.value = [...taskQueue.value, {
  112. type: 'open',
  113. config: mergedConfig
  114. }];
  115. },
  116. close: key => {
  117. taskQueue.value = [...taskQueue.value, {
  118. type: 'close',
  119. key
  120. }];
  121. },
  122. destroy: () => {
  123. taskQueue.value = [...taskQueue.value, {
  124. type: 'destroy'
  125. }];
  126. }
  127. };
  128. // ======================== Effect ========================
  129. watch(taskQueue, () => {
  130. // Flush task when node ready
  131. if (taskQueue.value.length) {
  132. taskQueue.value.forEach(task => {
  133. switch (task.type) {
  134. case 'open':
  135. // @ts-ignore
  136. add(task.config);
  137. break;
  138. case 'close':
  139. removeNotice(task.key);
  140. break;
  141. case 'destroy':
  142. destroy();
  143. break;
  144. }
  145. });
  146. taskQueue.value = [];
  147. }
  148. });
  149. // ======================== Return ========================
  150. return [api, contextHolder];
  151. }