Notification.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  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 = void 0;
  8. var _vue = require("vue");
  9. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  11. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  12. var _transition = require("../_util/transition");
  13. var _Notice = _interopRequireDefault(require("./Notice"));
  14. var _configProvider = _interopRequireWildcard(require("../config-provider"));
  15. var _excluded = ["name", "getContainer", "appContext", "prefixCls", "rootPrefixCls", "transitionName", "hasTransitionName"];
  16. function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
  17. function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
  18. var seed = 0;
  19. var now = Date.now();
  20. function getUuid() {
  21. var id = seed;
  22. seed += 1;
  23. return "rcNotification_".concat(now, "_").concat(id);
  24. }
  25. var Notification = (0, _vue.defineComponent)({
  26. name: 'Notification',
  27. inheritAttrs: false,
  28. props: ['prefixCls', 'transitionName', 'animation', 'maxCount', 'closeIcon'],
  29. setup: function setup(props, _ref) {
  30. var attrs = _ref.attrs,
  31. expose = _ref.expose,
  32. slots = _ref.slots;
  33. var hookRefs = new Map();
  34. var notices = (0, _vue.ref)([]);
  35. var transitionProps = (0, _vue.computed)(function () {
  36. var prefixCls = props.prefixCls,
  37. _props$animation = props.animation,
  38. animation = _props$animation === void 0 ? 'fade' : _props$animation;
  39. var name = props.transitionName;
  40. if (!name && animation) {
  41. name = "".concat(prefixCls, "-").concat(animation);
  42. }
  43. return (0, _transition.getTransitionGroupProps)(name);
  44. });
  45. var add = function add(originNotice, holderCallback) {
  46. var key = originNotice.key || getUuid();
  47. var notice = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, originNotice), {}, {
  48. key: key
  49. });
  50. var maxCount = props.maxCount;
  51. var noticeIndex = notices.value.map(function (v) {
  52. return v.notice.key;
  53. }).indexOf(key);
  54. var updatedNotices = notices.value.concat();
  55. if (noticeIndex !== -1) {
  56. updatedNotices.splice(noticeIndex, 1, {
  57. notice: notice,
  58. holderCallback: holderCallback
  59. });
  60. } else {
  61. if (maxCount && notices.value.length >= maxCount) {
  62. // XXX, use key of first item to update new added (let React to move exsiting
  63. // instead of remove and mount). Same key was used before for both a) external
  64. // manual control and b) internal react 'key' prop , which is not that good.
  65. // eslint-disable-next-line no-param-reassign
  66. // zombieJ: Not know why use `updateKey`. This makes Notice infinite loop in jest.
  67. // Change to `updateMark` for compare instead.
  68. // https://github.com/react-component/notification/commit/32299e6be396f94040bfa82517eea940db947ece
  69. notice.key = updatedNotices[0].notice.key;
  70. notice.updateMark = getUuid();
  71. // zombieJ: That's why. User may close by key directly.
  72. // We need record this but not re-render to avoid upper issue
  73. // https://github.com/react-component/notification/issues/129
  74. notice.userPassKey = key;
  75. updatedNotices.shift();
  76. }
  77. updatedNotices.push({
  78. notice: notice,
  79. holderCallback: holderCallback
  80. });
  81. }
  82. notices.value = updatedNotices;
  83. };
  84. var remove = function remove(removeKey) {
  85. notices.value = notices.value.filter(function (_ref2) {
  86. var _ref2$notice = _ref2.notice,
  87. key = _ref2$notice.key,
  88. userPassKey = _ref2$notice.userPassKey;
  89. var mergedKey = userPassKey || key;
  90. return mergedKey !== removeKey;
  91. });
  92. };
  93. expose({
  94. add: add,
  95. remove: remove,
  96. notices: notices
  97. });
  98. return function () {
  99. var _slots$closeIcon, _className;
  100. var prefixCls = props.prefixCls,
  101. _props$closeIcon = props.closeIcon,
  102. closeIcon = _props$closeIcon === void 0 ? (_slots$closeIcon = slots.closeIcon) === null || _slots$closeIcon === void 0 ? void 0 : _slots$closeIcon.call(slots, {
  103. prefixCls: prefixCls
  104. }) : _props$closeIcon;
  105. var noticeNodes = notices.value.map(function (_ref3, index) {
  106. var notice = _ref3.notice,
  107. holderCallback = _ref3.holderCallback;
  108. var updateMark = index === notices.value.length - 1 ? notice.updateMark : undefined;
  109. var key = notice.key,
  110. userPassKey = notice.userPassKey;
  111. var content = notice.content;
  112. var noticeProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  113. prefixCls: prefixCls,
  114. closeIcon: typeof closeIcon === 'function' ? closeIcon({
  115. prefixCls: prefixCls
  116. }) : closeIcon
  117. }, notice), notice.props), {}, {
  118. key: key,
  119. noticeKey: userPassKey || key,
  120. updateMark: updateMark,
  121. onClose: function onClose(noticeKey) {
  122. var _notice$onClose;
  123. remove(noticeKey);
  124. (_notice$onClose = notice.onClose) === null || _notice$onClose === void 0 ? void 0 : _notice$onClose.call(notice);
  125. },
  126. onClick: notice.onClick
  127. });
  128. if (holderCallback) {
  129. return (0, _vue.createVNode)("div", {
  130. "key": key,
  131. "class": "".concat(prefixCls, "-hook-holder"),
  132. "ref": function ref(div) {
  133. if (typeof key === 'undefined') {
  134. return;
  135. }
  136. if (div) {
  137. hookRefs.set(key, div);
  138. holderCallback(div, noticeProps);
  139. } else {
  140. hookRefs.delete(key);
  141. }
  142. }
  143. }, null);
  144. }
  145. return (0, _vue.createVNode)(_Notice.default, noticeProps, {
  146. default: function _default() {
  147. return [typeof content === 'function' ? content({
  148. prefixCls: prefixCls
  149. }) : content];
  150. }
  151. });
  152. });
  153. var className = (_className = {}, (0, _defineProperty2.default)(_className, prefixCls, 1), (0, _defineProperty2.default)(_className, attrs.class, !!attrs.class), _className);
  154. return (0, _vue.createVNode)("div", {
  155. "class": className,
  156. "style": attrs.style || {
  157. top: '65px',
  158. left: '50%'
  159. }
  160. }, [(0, _vue.createVNode)(_vue.TransitionGroup, (0, _objectSpread2.default)({
  161. "tag": "div"
  162. }, transitionProps.value), {
  163. default: function _default() {
  164. return [noticeNodes];
  165. }
  166. })]);
  167. };
  168. }
  169. });
  170. Notification.newInstance = function newNotificationInstance(properties, callback) {
  171. var _ref4 = properties || {},
  172. _ref4$name = _ref4.name,
  173. name = _ref4$name === void 0 ? 'notification' : _ref4$name,
  174. getContainer = _ref4.getContainer,
  175. appContext = _ref4.appContext,
  176. customizePrefixCls = _ref4.prefixCls,
  177. customRootPrefixCls = _ref4.rootPrefixCls,
  178. customTransitionName = _ref4.transitionName,
  179. hasTransitionName = _ref4.hasTransitionName,
  180. props = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
  181. var div = document.createElement('div');
  182. if (getContainer) {
  183. var root = getContainer();
  184. root.appendChild(div);
  185. } else {
  186. document.body.appendChild(div);
  187. }
  188. var Wrapper = (0, _vue.defineComponent)({
  189. compatConfig: {
  190. MODE: 3
  191. },
  192. name: 'NotificationWrapper',
  193. setup: function setup(_props, _ref5) {
  194. var attrs = _ref5.attrs;
  195. var notiRef = (0, _vue.ref)();
  196. (0, _vue.onMounted)(function () {
  197. callback({
  198. notice: function notice(noticeProps) {
  199. var _notiRef$value;
  200. (_notiRef$value = notiRef.value) === null || _notiRef$value === void 0 ? void 0 : _notiRef$value.add(noticeProps);
  201. },
  202. removeNotice: function removeNotice(key) {
  203. var _notiRef$value2;
  204. (_notiRef$value2 = notiRef.value) === null || _notiRef$value2 === void 0 ? void 0 : _notiRef$value2.remove(key);
  205. },
  206. destroy: function destroy() {
  207. (0, _vue.render)(null, div);
  208. if (div.parentNode) {
  209. div.parentNode.removeChild(div);
  210. }
  211. },
  212. component: notiRef
  213. });
  214. });
  215. return function () {
  216. var global = _configProvider.globalConfigForApi;
  217. var prefixCls = global.getPrefixCls(name, customizePrefixCls);
  218. var rootPrefixCls = global.getRootPrefixCls(customRootPrefixCls, prefixCls);
  219. var transitionName = hasTransitionName ? customTransitionName : "".concat(rootPrefixCls, "-").concat(customTransitionName);
  220. return (0, _vue.createVNode)(_configProvider.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, global), {}, {
  221. "notUpdateGlobalConfig": true,
  222. "prefixCls": rootPrefixCls
  223. }), {
  224. default: function _default() {
  225. return [(0, _vue.createVNode)(Notification, (0, _objectSpread2.default)((0, _objectSpread2.default)({
  226. "ref": notiRef
  227. }, attrs), {}, {
  228. "prefixCls": prefixCls,
  229. "transitionName": transitionName
  230. }), null)];
  231. }
  232. });
  233. };
  234. }
  235. });
  236. var vm = (0, _vue.createVNode)(Wrapper, props);
  237. vm.appContext = appContext || vm.appContext;
  238. (0, _vue.render)(vm, div);
  239. };
  240. var _default2 = Notification;
  241. exports.default = _default2;