HookNotification.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode } from "vue";
  4. import { watch, computed, defineComponent, ref, TransitionGroup } from 'vue';
  5. import Notice from './Notice';
  6. import { getTransitionGroupProps } from '../_util/transition';
  7. import classNames from '../_util/classNames';
  8. import Portal from '../_util/Portal';
  9. let seed = 0;
  10. const now = Date.now();
  11. export function getUuid() {
  12. const id = seed;
  13. seed += 1;
  14. return `rcNotification_${now}_${id}`;
  15. }
  16. const Notification = defineComponent({
  17. name: 'HookNotification',
  18. inheritAttrs: false,
  19. props: ['prefixCls', 'transitionName', 'animation', 'maxCount', 'closeIcon', 'hashId', 'remove', 'notices', 'getStyles', 'getClassName', 'onAllRemoved', 'getContainer'],
  20. setup(props, _ref) {
  21. let {
  22. attrs,
  23. slots
  24. } = _ref;
  25. const hookRefs = new Map();
  26. const notices = computed(() => props.notices);
  27. const transitionProps = computed(() => {
  28. let name = props.transitionName;
  29. if (!name && props.animation) {
  30. switch (typeof props.animation) {
  31. case 'string':
  32. name = props.animation;
  33. break;
  34. case 'function':
  35. name = props.animation().name;
  36. break;
  37. case 'object':
  38. name = props.animation.name;
  39. break;
  40. default:
  41. name = `${props.prefixCls}-fade`;
  42. break;
  43. }
  44. }
  45. return getTransitionGroupProps(name);
  46. });
  47. const remove = key => props.remove(key);
  48. const placements = ref({});
  49. watch(notices, () => {
  50. const nextPlacements = {};
  51. // init placements with animation
  52. Object.keys(placements.value).forEach(placement => {
  53. nextPlacements[placement] = [];
  54. });
  55. props.notices.forEach(config => {
  56. const {
  57. placement = 'topRight'
  58. } = config.notice;
  59. if (placement) {
  60. nextPlacements[placement] = nextPlacements[placement] || [];
  61. nextPlacements[placement].push(config);
  62. }
  63. });
  64. placements.value = nextPlacements;
  65. });
  66. const placementList = computed(() => Object.keys(placements.value));
  67. return () => {
  68. var _a;
  69. const {
  70. prefixCls,
  71. closeIcon = (_a = slots.closeIcon) === null || _a === void 0 ? void 0 : _a.call(slots, {
  72. prefixCls
  73. })
  74. } = props;
  75. const noticeNodes = placementList.value.map(placement => {
  76. var _a, _b;
  77. const noticesForPlacement = placements.value[placement];
  78. const classes = (_a = props.getClassName) === null || _a === void 0 ? void 0 : _a.call(props, placement);
  79. const styles = (_b = props.getStyles) === null || _b === void 0 ? void 0 : _b.call(props, placement);
  80. const noticeNodesForPlacement = noticesForPlacement.map((_ref2, index) => {
  81. let {
  82. notice,
  83. holderCallback
  84. } = _ref2;
  85. const updateMark = index === notices.value.length - 1 ? notice.updateMark : undefined;
  86. const {
  87. key,
  88. userPassKey
  89. } = notice;
  90. const {
  91. content
  92. } = notice;
  93. const noticeProps = _extends(_extends(_extends({
  94. prefixCls,
  95. closeIcon: typeof closeIcon === 'function' ? closeIcon({
  96. prefixCls
  97. }) : closeIcon
  98. }, notice), notice.props), {
  99. key,
  100. noticeKey: userPassKey || key,
  101. updateMark,
  102. onClose: noticeKey => {
  103. var _a;
  104. remove(noticeKey);
  105. (_a = notice.onClose) === null || _a === void 0 ? void 0 : _a.call(notice);
  106. },
  107. onClick: notice.onClick
  108. });
  109. if (holderCallback) {
  110. return _createVNode("div", {
  111. "key": key,
  112. "class": `${prefixCls}-hook-holder`,
  113. "ref": div => {
  114. if (typeof key === 'undefined') {
  115. return;
  116. }
  117. if (div) {
  118. hookRefs.set(key, div);
  119. holderCallback(div, noticeProps);
  120. } else {
  121. hookRefs.delete(key);
  122. }
  123. }
  124. }, null);
  125. }
  126. return _createVNode(Notice, _objectSpread(_objectSpread({}, noticeProps), {}, {
  127. "class": classNames(noticeProps.class, props.hashId)
  128. }), {
  129. default: () => [typeof content === 'function' ? content({
  130. prefixCls
  131. }) : content]
  132. });
  133. });
  134. const className = {
  135. [prefixCls]: 1,
  136. [`${prefixCls}-${placement}`]: 1,
  137. [attrs.class]: !!attrs.class,
  138. [props.hashId]: true,
  139. [classes]: !!classes
  140. };
  141. function onAfterLeave() {
  142. var _a;
  143. if (noticesForPlacement.length > 0) {
  144. return;
  145. }
  146. Reflect.deleteProperty(placements.value, placement);
  147. (_a = props.onAllRemoved) === null || _a === void 0 ? void 0 : _a.call(props);
  148. }
  149. return _createVNode("div", {
  150. "key": placement,
  151. "class": className,
  152. "style": attrs.style || styles || {
  153. top: '65px',
  154. left: '50%'
  155. }
  156. }, [_createVNode(TransitionGroup, _objectSpread(_objectSpread({
  157. "tag": "div"
  158. }, transitionProps.value), {}, {
  159. "onAfterLeave": onAfterLeave
  160. }), {
  161. default: () => [noticeNodesForPlacement]
  162. })]);
  163. });
  164. return _createVNode(Portal, {
  165. "getContainer": props.getContainer
  166. }, {
  167. default: () => [noticeNodes]
  168. });
  169. };
  170. }
  171. });
  172. export default Notification;