useMessage.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { shallowRef, computed, defineComponent } from 'vue';
  13. import { useNotification as useVcNotification } from '../vc-notification';
  14. import CloseOutlined from "@ant-design/icons-vue/es/icons/CloseOutlined";
  15. import useStyle from './style';
  16. import { PureContent } from './PurePanel';
  17. import { getMotion } from '../vc-trigger/utils/motionUtil';
  18. import { wrapPromiseFn } from '../_util/util';
  19. import useConfigInject from '../config-provider/hooks/useConfigInject';
  20. import classNames from '../_util/classNames';
  21. const DEFAULT_OFFSET = 8;
  22. const DEFAULT_DURATION = 3;
  23. const Holder = defineComponent({
  24. name: 'Holder',
  25. inheritAttrs: false,
  26. props: ['top', 'prefixCls', 'getContainer', 'maxCount', 'duration', 'rtl', 'transitionName', 'onAllRemoved'],
  27. setup(props, _ref) {
  28. let {
  29. expose
  30. } = _ref;
  31. var _a, _b;
  32. const {
  33. getPrefixCls,
  34. getPopupContainer
  35. } = useConfigInject('message', props);
  36. const prefixCls = computed(() => getPrefixCls('message', props.prefixCls));
  37. const [, hashId] = useStyle(prefixCls);
  38. // =============================== Style ===============================
  39. const getStyles = () => {
  40. var _a;
  41. const top = (_a = props.top) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET;
  42. return {
  43. left: '50%',
  44. transform: 'translateX(-50%)',
  45. top: typeof top === 'number' ? `${top}px` : top
  46. };
  47. };
  48. const getClassName = () => classNames(hashId.value, props.rtl ? `${prefixCls.value}-rtl` : '');
  49. // ============================== Motion ===============================
  50. const getNotificationMotion = () => {
  51. var _a;
  52. return getMotion({
  53. prefixCls: prefixCls.value,
  54. animation: (_a = props.animation) !== null && _a !== void 0 ? _a : `move-up`,
  55. transitionName: props.transitionName
  56. });
  57. };
  58. // ============================ Close Icon =============================
  59. const mergedCloseIcon = _createVNode("span", {
  60. "class": `${prefixCls.value}-close-x`
  61. }, [_createVNode(CloseOutlined, {
  62. "class": `${prefixCls.value}-close-icon`
  63. }, null)]);
  64. // ============================== Origin ===============================
  65. const [api, holder] = useVcNotification({
  66. //@ts-ignore
  67. getStyles,
  68. prefixCls: prefixCls.value,
  69. getClassName,
  70. motion: getNotificationMotion,
  71. closable: false,
  72. closeIcon: mergedCloseIcon,
  73. duration: (_a = props.duration) !== null && _a !== void 0 ? _a : DEFAULT_DURATION,
  74. getContainer: (_b = props.staticGetContainer) !== null && _b !== void 0 ? _b : getPopupContainer.value,
  75. maxCount: props.maxCount,
  76. onAllRemoved: props.onAllRemoved
  77. });
  78. // ================================ Ref ================================
  79. expose(_extends(_extends({}, api), {
  80. prefixCls,
  81. hashId
  82. }));
  83. return holder;
  84. }
  85. });
  86. // ==============================================================================
  87. // == Hook ==
  88. // ==============================================================================
  89. let keyIndex = 0;
  90. export function useInternalMessage(messageConfig) {
  91. const holderRef = shallowRef(null);
  92. const holderKey = Symbol('messageHolderKey');
  93. // ================================ API ================================
  94. // Wrap with notification content
  95. // >>> close
  96. const close = key => {
  97. var _a;
  98. (_a = holderRef.value) === null || _a === void 0 ? void 0 : _a.close(key);
  99. };
  100. // >>> Open
  101. const open = config => {
  102. if (!holderRef.value) {
  103. const fakeResult = () => {};
  104. fakeResult.then = () => {};
  105. return fakeResult;
  106. }
  107. const {
  108. open: originOpen,
  109. prefixCls,
  110. hashId
  111. } = holderRef.value;
  112. const noticePrefixCls = `${prefixCls}-notice`;
  113. const {
  114. content,
  115. icon,
  116. type,
  117. key,
  118. class: className,
  119. onClose
  120. } = config,
  121. restConfig = __rest(config, ["content", "icon", "type", "key", "class", "onClose"]);
  122. let mergedKey = key;
  123. if (mergedKey === undefined || mergedKey === null) {
  124. keyIndex += 1;
  125. mergedKey = `antd-message-${keyIndex}`;
  126. }
  127. return wrapPromiseFn(resolve => {
  128. originOpen(_extends(_extends({}, restConfig), {
  129. key: mergedKey,
  130. content: () => _createVNode(PureContent, {
  131. "prefixCls": prefixCls,
  132. "type": type,
  133. "icon": typeof icon === 'function' ? icon() : icon
  134. }, {
  135. default: () => [typeof content === 'function' ? content() : content]
  136. }),
  137. placement: 'top',
  138. // @ts-ignore
  139. class: classNames(type && `${noticePrefixCls}-${type}`, hashId, className),
  140. onClose: () => {
  141. onClose === null || onClose === void 0 ? void 0 : onClose();
  142. resolve();
  143. }
  144. }));
  145. // Return close function
  146. return () => {
  147. close(mergedKey);
  148. };
  149. });
  150. };
  151. // >>> destroy
  152. const destroy = key => {
  153. var _a;
  154. if (key !== undefined) {
  155. close(key);
  156. } else {
  157. (_a = holderRef.value) === null || _a === void 0 ? void 0 : _a.destroy();
  158. }
  159. };
  160. const wrapAPI = {
  161. open,
  162. destroy
  163. };
  164. const keys = ['info', 'success', 'warning', 'error', 'loading'];
  165. keys.forEach(type => {
  166. const typeOpen = (jointContent, duration, onClose) => {
  167. let config;
  168. if (jointContent && typeof jointContent === 'object' && 'content' in jointContent) {
  169. config = jointContent;
  170. } else {
  171. config = {
  172. content: jointContent
  173. };
  174. }
  175. // Params
  176. let mergedDuration;
  177. let mergedOnClose;
  178. if (typeof duration === 'function') {
  179. mergedOnClose = duration;
  180. } else {
  181. mergedDuration = duration;
  182. mergedOnClose = onClose;
  183. }
  184. const mergedConfig = _extends(_extends({
  185. onClose: mergedOnClose,
  186. duration: mergedDuration
  187. }, config), {
  188. type
  189. });
  190. return open(mergedConfig);
  191. };
  192. wrapAPI[type] = typeOpen;
  193. });
  194. // ============================== Return ===============================
  195. return [wrapAPI, () => _createVNode(Holder, _objectSpread(_objectSpread({
  196. "key": holderKey
  197. }, messageConfig), {}, {
  198. "ref": holderRef
  199. }), null)];
  200. }
  201. export default function useMessage(messageConfig) {
  202. return useInternalMessage(messageConfig);
  203. }