useMessage.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = useMessage;
  9. exports.useInternalMessage = useInternalMessage;
  10. var React = _interopRequireWildcard(require("react"));
  11. var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
  12. var _classnames = _interopRequireDefault(require("classnames"));
  13. var _rcNotification = require("rc-notification");
  14. var _warning = require("../_util/warning");
  15. var _configProvider = require("../config-provider");
  16. var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
  17. var _PurePanel = require("./PurePanel");
  18. var _style = _interopRequireDefault(require("./style"));
  19. var _util = require("./util");
  20. var __rest = void 0 && (void 0).__rest || function (s, e) {
  21. var t = {};
  22. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  23. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  24. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  25. }
  26. return t;
  27. };
  28. const DEFAULT_OFFSET = 8;
  29. const DEFAULT_DURATION = 3;
  30. const Wrapper = ({
  31. children,
  32. prefixCls
  33. }) => {
  34. const rootCls = (0, _useCSSVarCls.default)(prefixCls);
  35. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
  36. return wrapCSSVar(/*#__PURE__*/React.createElement(_rcNotification.NotificationProvider, {
  37. classNames: {
  38. list: (0, _classnames.default)(hashId, cssVarCls, rootCls)
  39. }
  40. }, children));
  41. };
  42. const renderNotifications = (node, {
  43. prefixCls,
  44. key
  45. }) => (/*#__PURE__*/React.createElement(Wrapper, {
  46. prefixCls: prefixCls,
  47. key: key
  48. }, node));
  49. const Holder = /*#__PURE__*/React.forwardRef((props, ref) => {
  50. const {
  51. top,
  52. prefixCls: staticPrefixCls,
  53. getContainer: staticGetContainer,
  54. maxCount,
  55. duration = DEFAULT_DURATION,
  56. rtl,
  57. transitionName,
  58. onAllRemoved
  59. } = props;
  60. const {
  61. getPrefixCls,
  62. getPopupContainer,
  63. message,
  64. direction
  65. } = React.useContext(_configProvider.ConfigContext);
  66. const prefixCls = staticPrefixCls || getPrefixCls('message');
  67. // =============================== Style ===============================
  68. const getStyle = () => ({
  69. left: '50%',
  70. transform: 'translateX(-50%)',
  71. top: top !== null && top !== void 0 ? top : DEFAULT_OFFSET
  72. });
  73. const getClassName = () => (0, _classnames.default)({
  74. [`${prefixCls}-rtl`]: rtl !== null && rtl !== void 0 ? rtl : direction === 'rtl'
  75. });
  76. // ============================== Motion ===============================
  77. const getNotificationMotion = () => (0, _util.getMotion)(prefixCls, transitionName);
  78. // ============================ Close Icon =============================
  79. const mergedCloseIcon = /*#__PURE__*/React.createElement("span", {
  80. className: `${prefixCls}-close-x`
  81. }, /*#__PURE__*/React.createElement(_CloseOutlined.default, {
  82. className: `${prefixCls}-close-icon`
  83. }));
  84. // ============================== Origin ===============================
  85. const [api, holder] = (0, _rcNotification.useNotification)({
  86. prefixCls,
  87. style: getStyle,
  88. className: getClassName,
  89. motion: getNotificationMotion,
  90. closable: false,
  91. closeIcon: mergedCloseIcon,
  92. duration,
  93. getContainer: () => (staticGetContainer === null || staticGetContainer === void 0 ? void 0 : staticGetContainer()) || (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer()) || document.body,
  94. maxCount,
  95. onAllRemoved,
  96. renderNotifications
  97. });
  98. // ================================ Ref ================================
  99. React.useImperativeHandle(ref, () => Object.assign(Object.assign({}, api), {
  100. prefixCls,
  101. message
  102. }));
  103. return holder;
  104. });
  105. // ==============================================================================
  106. // == Hook ==
  107. // ==============================================================================
  108. let keyIndex = 0;
  109. function useInternalMessage(messageConfig) {
  110. const holderRef = React.useRef(null);
  111. const warning = (0, _warning.devUseWarning)('Message');
  112. // ================================ API ================================
  113. const wrapAPI = React.useMemo(() => {
  114. // Wrap with notification content
  115. // >>> close
  116. const close = key => {
  117. var _a;
  118. (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.close(key);
  119. };
  120. // >>> Open
  121. const open = config => {
  122. if (!holderRef.current) {
  123. process.env.NODE_ENV !== "production" ? warning(false, 'usage', 'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.') : void 0;
  124. const fakeResult = () => {};
  125. fakeResult.then = () => {};
  126. return fakeResult;
  127. }
  128. const {
  129. open: originOpen,
  130. prefixCls,
  131. message
  132. } = holderRef.current;
  133. const noticePrefixCls = `${prefixCls}-notice`;
  134. const {
  135. content,
  136. icon,
  137. type,
  138. key,
  139. className,
  140. style,
  141. onClose
  142. } = config,
  143. restConfig = __rest(config, ["content", "icon", "type", "key", "className", "style", "onClose"]);
  144. let mergedKey = key;
  145. if (mergedKey === undefined || mergedKey === null) {
  146. keyIndex += 1;
  147. mergedKey = `antd-message-${keyIndex}`;
  148. }
  149. return (0, _util.wrapPromiseFn)(resolve => {
  150. originOpen(Object.assign(Object.assign({}, restConfig), {
  151. key: mergedKey,
  152. content: (/*#__PURE__*/React.createElement(_PurePanel.PureContent, {
  153. prefixCls: prefixCls,
  154. type: type,
  155. icon: icon
  156. }, content)),
  157. placement: 'top',
  158. className: (0, _classnames.default)(type && `${noticePrefixCls}-${type}`, className, message === null || message === void 0 ? void 0 : message.className),
  159. style: Object.assign(Object.assign({}, message === null || message === void 0 ? void 0 : message.style), style),
  160. onClose: () => {
  161. onClose === null || onClose === void 0 ? void 0 : onClose();
  162. resolve();
  163. }
  164. }));
  165. // Return close function
  166. return () => {
  167. close(mergedKey);
  168. };
  169. });
  170. };
  171. // >>> destroy
  172. const destroy = key => {
  173. var _a;
  174. if (key !== undefined) {
  175. close(key);
  176. } else {
  177. (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
  178. }
  179. };
  180. const clone = {
  181. open,
  182. destroy
  183. };
  184. const keys = ['info', 'success', 'warning', 'error', 'loading'];
  185. keys.forEach(type => {
  186. const typeOpen = (jointContent, duration, onClose) => {
  187. let config;
  188. if (jointContent && typeof jointContent === 'object' && 'content' in jointContent) {
  189. config = jointContent;
  190. } else {
  191. config = {
  192. content: jointContent
  193. };
  194. }
  195. // Params
  196. let mergedDuration;
  197. let mergedOnClose;
  198. if (typeof duration === 'function') {
  199. mergedOnClose = duration;
  200. } else {
  201. mergedDuration = duration;
  202. mergedOnClose = onClose;
  203. }
  204. const mergedConfig = Object.assign(Object.assign({
  205. onClose: mergedOnClose,
  206. duration: mergedDuration
  207. }, config), {
  208. type
  209. });
  210. return open(mergedConfig);
  211. };
  212. clone[type] = typeOpen;
  213. });
  214. return clone;
  215. }, []);
  216. // ============================== Return ===============================
  217. return [wrapAPI, /*#__PURE__*/React.createElement(Holder, Object.assign({
  218. key: "message-holder"
  219. }, messageConfig, {
  220. ref: holderRef
  221. }))];
  222. }
  223. function useMessage(messageConfig) {
  224. return useInternalMessage(messageConfig);
  225. }