rc-notification - npm Package Compare versions

Comparing version 4.6.0 to 5.0.0-alpha.0

es/index.d.ts

@@ -1,2 +0,4 @@
-import Notification from './Notification';
-export default Notification;
+import useNotification from './useNotification';
+import type { NotificationAPI, NotificationConfig } from './useNotification';
+export { useNotification };
+export type { NotificationAPI, NotificationConfig };

es/index.js

@@ -1,2 +0,2 @@
-import Notification from './Notification';
-export default Notification;
+import useNotification from './useNotification';
+export { useNotification };

es/Notice.d.ts

 import * as React from 'react';
-import { Component } from 'react';
-interface DivProps extends React.HTMLProps<HTMLDivElement> {
-    'data-testid'?: string;
-}
-export interface NoticeProps {
-    prefixCls: string;
-    style?: React.CSSProperties;
-    className?: string;
+export interface NoticeConfig {
+    content?: React.ReactNode;
     duration?: number | null;
-    children?: React.ReactNode;
-    updateMark?: string;
-    /** Mark as final key since set maxCount may keep the key but user pass key is different */
-    noticeKey: React.Key;
     closeIcon?: React.ReactNode;
     closable?: boolean;
-    props?: DivProps;
+    className?: string;
+    style?: React.CSSProperties;
+    /** @private Internal usage. Do not override in your code */
+    props?: React.HTMLAttributes<HTMLDivElement> & Record<string, any>;
+    onClose?: VoidFunction;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onClose?: (key: React.Key) => void;
-    /** @private Only for internal usage. We don't promise that we will refactor this */
-    holder?: HTMLDivElement;
-    /** @private Provided by CSSMotionList */
-    visible?: boolean;
 }
-export default class Notice extends Component<NoticeProps> {
-    static defaultProps: {
-        onClose(): void;
-        duration: number;
-    };
-    closeTimer: number | null;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: NoticeProps): void;
-    componentWillUnmount(): void;
-    close: (e?: React.MouseEvent<HTMLAnchorElement>) => void;
-    startCloseTimer: () => void;
-    clearCloseTimer: () => void;
-    restartCloseTimer(): void;
-    render(): JSX.Element;
+export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
+    prefixCls: string;
+    className?: string;
+    style?: React.CSSProperties;
+    eventKey: React.Key;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onNoticeClose?: (key: React.Key) => void;
 }
-export {};
+declare const Notify: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;
+export default Notify;

es/Notice.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
-import { Component } from 'react';
-import ReactDOM from 'react-dom';
 import classNames from 'classnames';
+var Notify = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+      style = props.style,
+      className = props.className,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 4.5 : _props$duration,
+      eventKey = props.eventKey,
+      content = props.content,
+      closable = props.closable,
+      _props$closeIcon = props.closeIcon,
+      closeIcon = _props$closeIcon === void 0 ? 'x' : _props$closeIcon,
+      divProps = props.props,
+      onClick = props.onClick,
+      onNoticeClose = props.onNoticeClose;
 
-var Notice = /*#__PURE__*/function (_Component) {
-  _inherits(Notice, _Component);
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      hovering = _React$useState2[0],
+      setHovering = _React$useState2[1]; // ======================== Close =========================
 
-  var _super = _createSuper(Notice);
 
-  function Notice() {
-    var _this;
+  var onInternalClose = function onInternalClose() {
+    onNoticeClose(eventKey);
+  }; // ======================== Effect ========================
 
-    _classCallCheck(this, Notice);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  React.useEffect(function () {
+    if (!hovering && duration > 0) {
+      var timeout = setTimeout(function () {
+        onInternalClose();
+      }, duration * 1000);
+      return function () {
+        clearTimeout(timeout);
+      };
     }
+  }, [duration, hovering]); // ======================== Render ========================
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.closeTimer = null;
-
-    _this.close = function (e) {
-      if (e) {
-        e.stopPropagation();
-      }
-
-      _this.clearCloseTimer();
-
-      var _this$props = _this.props,
-          onClose = _this$props.onClose,
-          noticeKey = _this$props.noticeKey;
-
-      if (onClose) {
-        onClose(noticeKey);
-      }
-    };
-
-    _this.startCloseTimer = function () {
-      if (_this.props.duration) {
-        _this.closeTimer = window.setTimeout(function () {
-          _this.close();
-        }, _this.props.duration * 1000);
-      }
-    };
-
-    _this.clearCloseTimer = function () {
-      if (_this.closeTimer) {
-        clearTimeout(_this.closeTimer);
-        _this.closeTimer = null;
-      }
-    };
-
-    return _this;
-  }
-
-  _createClass(Notice, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.startCloseTimer();
+  var noticePrefixCls = "".concat(prefixCls, "-notice");
+  return /*#__PURE__*/React.createElement("div", _extends({}, divProps, {
+    ref: ref,
+    className: classNames(noticePrefixCls, className, _defineProperty({}, "".concat(noticePrefixCls, "-closable"), closable)),
+    style: style,
+    onMouseEnter: function onMouseEnter() {
+      setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovering(false);
+    },
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(noticePrefixCls, "-content")
+  }, content), closable && /*#__PURE__*/React.createElement("a", {
+    tabIndex: 0,
+    className: "".concat(noticePrefixCls, "-close"),
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      onInternalClose();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.props.duration !== prevProps.duration || this.props.updateMark !== prevProps.updateMark || // Visible again need reset timer
-      this.props.visible !== prevProps.visible && this.props.visible) {
-        this.restartCloseTimer();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.clearCloseTimer();
-    }
-  }, {
-    key: "restartCloseTimer",
-    value: function restartCloseTimer() {
-      this.clearCloseTimer();
-      this.startCloseTimer();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          prefixCls = _this$props2.prefixCls,
-          className = _this$props2.className,
-          closable = _this$props2.closable,
-          closeIcon = _this$props2.closeIcon,
-          style = _this$props2.style,
-          onClick = _this$props2.onClick,
-          children = _this$props2.children,
-          holder = _this$props2.holder;
-      var componentClass = "".concat(prefixCls, "-notice");
-      var dataOrAriaAttributeProps = Object.keys(this.props).reduce(function (acc, key) {
-        if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') {
-          acc[key] = _this2.props[key];
-        }
-
-        return acc;
-      }, {});
-      var node = /*#__PURE__*/React.createElement("div", _extends({
-        className: classNames(componentClass, className, _defineProperty({}, "".concat(componentClass, "-closable"), closable)),
-        style: style,
-        onMouseEnter: this.clearCloseTimer,
-        onMouseLeave: this.startCloseTimer,
-        onClick: onClick
-      }, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(componentClass, "-content")
-      }, children), closable ? /*#__PURE__*/React.createElement("a", {
-        tabIndex: 0,
-        onClick: this.close,
-        className: "".concat(componentClass, "-close")
-      }, closeIcon || /*#__PURE__*/React.createElement("span", {
-        className: "".concat(componentClass, "-close-x")
-      })) : null);
-
-      if (holder) {
-        return /*#__PURE__*/ReactDOM.createPortal(node, holder);
-      }
-
-      return node;
-    }
-  }]);
-
-  return Notice;
-}(Component);
-
-Notice.defaultProps = {
-  onClose: function onClose() {},
-  duration: 1.5
-};
-export { Notice as default };
+  }, closeIcon));
+});
+export default Notify;

es/useNotification.d.ts

 import * as React from 'react';
-import type { NoticeFunc } from './Notification';
-import type Notification from './Notification';
-export default function useNotification(notificationInstance: Notification): [NoticeFunc, React.ReactElement];
+import type { OpenConfig } from './Notifications';
+import type { CSSMotionProps } from 'rc-motion';
+declare type OptionalConfig = Partial<OpenConfig>;
+export interface NotificationConfig {
+    prefixCls?: string;
+    /** Customize container. It will repeat call which means you should return same container element. */
+    getContainer?: () => HTMLElement;
+    motion?: CSSMotionProps;
+    closeIcon?: React.ReactNode;
+    closable?: boolean;
+    maxCount?: number;
+    duration?: number;
+    top?: number;
+    bottom?: number;
+}
+export interface NotificationAPI {
+    open: (config: OptionalConfig) => void;
+    close: (key: React.Key) => void;
+    destroy: () => void;
+}
+export default function useNotification(rootConfig?: NotificationConfig): [NotificationAPI, React.ReactElement];
+export {};

es/useNotification.js

 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["getContainer", "motion", "prefixCls", "maxCount", "top", "bottom"];
 import * as React from 'react';
-import Notice from './Notice';
-export default function useNotification(notificationInstance) {
-  var createdRef = React.useRef({});
+import Notifications from './Notifications';
 
-  var _React$useState = React.useState([]),
+var defaultGetContainer = function defaultGetContainer() {
+  return document.body;
+};
+
+export default function useNotification() {
+  var rootConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _rootConfig$getContai = rootConfig.getContainer,
+      getContainer = _rootConfig$getContai === void 0 ? defaultGetContainer : _rootConfig$getContai,
+      motion = rootConfig.motion,
+      prefixCls = rootConfig.prefixCls,
+      maxCount = rootConfig.maxCount,
+      top = rootConfig.top,
+      bottom = rootConfig.bottom,
+      shareConfig = _objectWithoutProperties(rootConfig, _excluded);
+
+  var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      elements = _React$useState2[0],
-      setElements = _React$useState2[1];
+      container = _React$useState2[0],
+      setContainer = _React$useState2[1];
 
-  function notify(noticeProps) {
-    var firstMount = true;
-    notificationInstance.add(noticeProps, function (div, props) {
-      var key = props.key;
+  var notificationsRef = React.useRef();
+  var contextHolder = /*#__PURE__*/React.createElement(Notifications, {
+    container: container,
+    ref: notificationsRef,
+    prefixCls: prefixCls,
+    motion: motion,
+    maxCount: maxCount,
+    top: top,
+    bottom: bottom
+  });
 
-      if (div && (!createdRef.current[key] || firstMount)) {
-        var noticeEle = /*#__PURE__*/React.createElement(Notice, _extends({}, props, {
-          holder: div
-        }));
-        createdRef.current[key] = noticeEle;
-        setElements(function (originElements) {
-          var index = originElements.findIndex(function (ele) {
-            return ele.key === props.key;
-          });
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      taskQueue = _React$useState4[0],
+      setTaskQueue = _React$useState4[1]; // ========================= Refs =========================
 
-          if (index === -1) {
-            return [].concat(_toConsumableArray(originElements), [noticeEle]);
-          }
 
-          var cloneList = _toConsumableArray(originElements);
+  var api = React.useMemo(function () {
+    return {
+      open: function open(config) {
+        var _config$key;
 
-          cloneList[index] = noticeEle;
-          return cloneList;
+        var mergedConfig = _objectSpread(_objectSpread(_objectSpread({}, shareConfig), config), {}, {
+          key: (_config$key = config.key) !== null && _config$key !== void 0 ? _config$key : Date.now()
         });
+
+        setTaskQueue(function (queue) {
+          return [].concat(_toConsumableArray(queue), [{
+            type: 'open',
+            config: mergedConfig
+          }]);
+        });
+      },
+      close: function close(key) {
+        setTaskQueue(function (queue) {
+          return [].concat(_toConsumableArray(queue), [{
+            type: 'close',
+            key: key
+          }]);
+        });
+      },
+      destroy: function destroy() {
+        setTaskQueue(function (queue) {
+          return [].concat(_toConsumableArray(queue), [{
+            type: 'destroy'
+          }]);
+        });
       }
+    };
+  }, []); // ======================= Container ======================
+  // React 18 should all in effect that we will check container in each render
+  // Which means getContainer should be stable.
 
-      firstMount = false;
-    });
-  }
+  React.useEffect(function () {
+    setContainer(getContainer());
+  }); // ======================== Effect ========================
 
-  return [notify, /*#__PURE__*/React.createElement(React.Fragment, null, elements)];
+  React.useEffect(function () {
+    // Flush task when node ready
+    if (notificationsRef.current && taskQueue.length) {
+      taskQueue.forEach(function (task) {
+        switch (task.type) {
+          case 'open':
+            notificationsRef.current.open(task.config);
+            break;
+
+          case 'close':
+            notificationsRef.current.close(task.key);
+            break;
+
+          case 'destroy':
+            notificationsRef.current.destroy();
+            break;
+        }
+      });
+      setTaskQueue([]);
+    }
+  }, [taskQueue]); // ======================== Return ========================
+
+  return [api, contextHolder];
 }

lib/index.d.ts

@@ -1,2 +0,4 @@
-import Notification from './Notification';
-export default Notification;
+import useNotification from './useNotification';
+import type { NotificationAPI, NotificationConfig } from './useNotification';
+export { useNotification };
+export type { NotificationAPI, NotificationConfig };

lib/index.js

@@ -8,7 +8,9 @@ "use strict";
 });
-exports.default = void 0;
+Object.defineProperty(exports, "useNotification", {
+  enumerable: true,
+  get: function get() {
+    return _useNotification.default;
+  }
+});
 
-var _Notification = _interopRequireDefault(require("./Notification"));
-
-var _default = _Notification.default;
-exports.default = _default;
+var _useNotification = _interopRequireDefault(require("./useNotification"));

lib/Notice.d.ts

 import * as React from 'react';
-import { Component } from 'react';
-interface DivProps extends React.HTMLProps<HTMLDivElement> {
-    'data-testid'?: string;
-}
-export interface NoticeProps {
-    prefixCls: string;
-    style?: React.CSSProperties;
-    className?: string;
+export interface NoticeConfig {
+    content?: React.ReactNode;
     duration?: number | null;
-    children?: React.ReactNode;
-    updateMark?: string;
-    /** Mark as final key since set maxCount may keep the key but user pass key is different */
-    noticeKey: React.Key;
     closeIcon?: React.ReactNode;
     closable?: boolean;
-    props?: DivProps;
+    className?: string;
+    style?: React.CSSProperties;
+    /** @private Internal usage. Do not override in your code */
+    props?: React.HTMLAttributes<HTMLDivElement> & Record<string, any>;
+    onClose?: VoidFunction;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onClose?: (key: React.Key) => void;
-    /** @private Only for internal usage. We don't promise that we will refactor this */
-    holder?: HTMLDivElement;
-    /** @private Provided by CSSMotionList */
-    visible?: boolean;
 }
-export default class Notice extends Component<NoticeProps> {
-    static defaultProps: {
-        onClose(): void;
-        duration: number;
-    };
-    closeTimer: number | null;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: NoticeProps): void;
-    componentWillUnmount(): void;
-    close: (e?: React.MouseEvent<HTMLAnchorElement>) => void;
-    startCloseTimer: () => void;
-    clearCloseTimer: () => void;
-    restartCloseTimer(): void;
-    render(): JSX.Element;
+export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
+    prefixCls: string;
+    className?: string;
+    style?: React.CSSProperties;
+    eventKey: React.Key;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onNoticeClose?: (key: React.Key) => void;
 }
-export {};
+declare const Notify: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;
+export default Notify;

lib/Notice.js

@@ -16,143 +16,70 @@ "use strict";
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var React = _interopRequireWildcard(require("react"));
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var Notice = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Notice, _Component);
+var Notify = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+      style = props.style,
+      className = props.className,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 4.5 : _props$duration,
+      eventKey = props.eventKey,
+      content = props.content,
+      closable = props.closable,
+      _props$closeIcon = props.closeIcon,
+      closeIcon = _props$closeIcon === void 0 ? 'x' : _props$closeIcon,
+      divProps = props.props,
+      onClick = props.onClick,
+      onNoticeClose = props.onNoticeClose;
 
-  var _super = (0, _createSuper2.default)(Notice);
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      hovering = _React$useState2[0],
+      setHovering = _React$useState2[1]; // ======================== Close =========================
 
-  function Notice() {
-    var _this;
 
-    (0, _classCallCheck2.default)(this, Notice);
+  var onInternalClose = function onInternalClose() {
+    onNoticeClose(eventKey);
+  }; // ======================== Effect ========================
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.closeTimer = null;
-
-    _this.close = function (e) {
-      if (e) {
-        e.stopPropagation();
-      }
-
-      _this.clearCloseTimer();
-
-      var _this$props = _this.props,
-          onClose = _this$props.onClose,
-          noticeKey = _this$props.noticeKey;
-
-      if (onClose) {
-        onClose(noticeKey);
-      }
-    };
-
-    _this.startCloseTimer = function () {
-      if (_this.props.duration) {
-        _this.closeTimer = window.setTimeout(function () {
-          _this.close();
-        }, _this.props.duration * 1000);
-      }
-    };
-
-    _this.clearCloseTimer = function () {
-      if (_this.closeTimer) {
-        clearTimeout(_this.closeTimer);
-        _this.closeTimer = null;
-      }
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(Notice, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.startCloseTimer();
+  React.useEffect(function () {
+    if (!hovering && duration > 0) {
+      var timeout = setTimeout(function () {
+        onInternalClose();
+      }, duration * 1000);
+      return function () {
+        clearTimeout(timeout);
+      };
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.props.duration !== prevProps.duration || this.props.updateMark !== prevProps.updateMark || // Visible again need reset timer
-      this.props.visible !== prevProps.visible && this.props.visible) {
-        this.restartCloseTimer();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.clearCloseTimer();
-    }
-  }, {
-    key: "restartCloseTimer",
-    value: function restartCloseTimer() {
-      this.clearCloseTimer();
-      this.startCloseTimer();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  }, [duration, hovering]); // ======================== Render ========================
 
-      var _this$props2 = this.props,
-          prefixCls = _this$props2.prefixCls,
-          className = _this$props2.className,
-          closable = _this$props2.closable,
-          closeIcon = _this$props2.closeIcon,
-          style = _this$props2.style,
-          onClick = _this$props2.onClick,
-          children = _this$props2.children,
-          holder = _this$props2.holder;
-      var componentClass = "".concat(prefixCls, "-notice");
-      var dataOrAriaAttributeProps = Object.keys(this.props).reduce(function (acc, key) {
-        if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') {
-          acc[key] = _this2.props[key];
-        }
-
-        return acc;
-      }, {});
-      var node = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-        className: (0, _classnames.default)(componentClass, className, (0, _defineProperty2.default)({}, "".concat(componentClass, "-closable"), closable)),
-        style: style,
-        onMouseEnter: this.clearCloseTimer,
-        onMouseLeave: this.startCloseTimer,
-        onClick: onClick
-      }, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(componentClass, "-content")
-      }, children), closable ? /*#__PURE__*/React.createElement("a", {
-        tabIndex: 0,
-        onClick: this.close,
-        className: "".concat(componentClass, "-close")
-      }, closeIcon || /*#__PURE__*/React.createElement("span", {
-        className: "".concat(componentClass, "-close-x")
-      })) : null);
-
-      if (holder) {
-        return /*#__PURE__*/_reactDom.default.createPortal(node, holder);
-      }
-
-      return node;
+  var noticePrefixCls = "".concat(prefixCls, "-notice");
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, divProps, {
+    ref: ref,
+    className: (0, _classnames.default)(noticePrefixCls, className, (0, _defineProperty2.default)({}, "".concat(noticePrefixCls, "-closable"), closable)),
+    style: style,
+    onMouseEnter: function onMouseEnter() {
+      setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovering(false);
+    },
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(noticePrefixCls, "-content")
+  }, content), closable && /*#__PURE__*/React.createElement("a", {
+    tabIndex: 0,
+    className: "".concat(noticePrefixCls, "-close"),
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      onInternalClose();
     }
-  }]);
-  return Notice;
-}(React.Component);
-
-exports.default = Notice;
-Notice.defaultProps = {
-  onClose: function onClose() {},
-  duration: 1.5
-};
+  }, closeIcon));
+});
+var _default = Notify;
+exports.default = _default;

lib/useNotification.d.ts

 import * as React from 'react';
-import type { NoticeFunc } from './Notification';
-import type Notification from './Notification';
-export default function useNotification(notificationInstance: Notification): [NoticeFunc, React.ReactElement];
+import type { OpenConfig } from './Notifications';
+import type { CSSMotionProps } from 'rc-motion';
+declare type OptionalConfig = Partial<OpenConfig>;
+export interface NotificationConfig {
+    prefixCls?: string;
+    /** Customize container. It will repeat call which means you should return same container element. */
+    getContainer?: () => HTMLElement;
+    motion?: CSSMotionProps;
+    closeIcon?: React.ReactNode;
+    closable?: boolean;
+    maxCount?: number;
+    duration?: number;
+    top?: number;
+    bottom?: number;
+}
+export interface NotificationAPI {
+    open: (config: OptionalConfig) => void;
+    close: (key: React.Key) => void;
+    destroy: () => void;
+}
+export default function useNotification(rootConfig?: NotificationConfig): [NotificationAPI, React.ReactElement];
+export {};

lib/useNotification.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -14,48 +14,113 @@ value: true
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var React = _interopRequireWildcard(require("react"));
 
-var _Notice = _interopRequireDefault(require("./Notice"));
+var _Notifications = _interopRequireDefault(require("./Notifications"));
 
-function useNotification(notificationInstance) {
-  var createdRef = React.useRef({});
+var _excluded = ["getContainer", "motion", "prefixCls", "maxCount", "top", "bottom"];
 
-  var _React$useState = React.useState([]),
+var defaultGetContainer = function defaultGetContainer() {
+  return document.body;
+};
+
+function useNotification() {
+  var rootConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _rootConfig$getContai = rootConfig.getContainer,
+      getContainer = _rootConfig$getContai === void 0 ? defaultGetContainer : _rootConfig$getContai,
+      motion = rootConfig.motion,
+      prefixCls = rootConfig.prefixCls,
+      maxCount = rootConfig.maxCount,
+      top = rootConfig.top,
+      bottom = rootConfig.bottom,
+      shareConfig = (0, _objectWithoutProperties2.default)(rootConfig, _excluded);
+
+  var _React$useState = React.useState(),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      elements = _React$useState2[0],
-      setElements = _React$useState2[1];
+      container = _React$useState2[0],
+      setContainer = _React$useState2[1];
 
-  function notify(noticeProps) {
-    var firstMount = true;
-    notificationInstance.add(noticeProps, function (div, props) {
-      var key = props.key;
+  var notificationsRef = React.useRef();
+  var contextHolder = /*#__PURE__*/React.createElement(_Notifications.default, {
+    container: container,
+    ref: notificationsRef,
+    prefixCls: prefixCls,
+    motion: motion,
+    maxCount: maxCount,
+    top: top,
+    bottom: bottom
+  });
 
-      if (div && (!createdRef.current[key] || firstMount)) {
-        var noticeEle = /*#__PURE__*/React.createElement(_Notice.default, (0, _extends2.default)({}, props, {
-          holder: div
-        }));
-        createdRef.current[key] = noticeEle;
-        setElements(function (originElements) {
-          var index = originElements.findIndex(function (ele) {
-            return ele.key === props.key;
-          });
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      taskQueue = _React$useState4[0],
+      setTaskQueue = _React$useState4[1]; // ========================= Refs =========================
 
-          if (index === -1) {
-            return [].concat((0, _toConsumableArray2.default)(originElements), [noticeEle]);
-          }
 
-          var cloneList = (0, _toConsumableArray2.default)(originElements);
-          cloneList[index] = noticeEle;
-          return cloneList;
+  var api = React.useMemo(function () {
+    return {
+      open: function open(config) {
+        var _config$key;
+
+        var mergedConfig = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, shareConfig), config), {}, {
+          key: (_config$key = config.key) !== null && _config$key !== void 0 ? _config$key : Date.now()
         });
+        setTaskQueue(function (queue) {
+          return [].concat((0, _toConsumableArray2.default)(queue), [{
+            type: 'open',
+            config: mergedConfig
+          }]);
+        });
+      },
+      close: function close(key) {
+        setTaskQueue(function (queue) {
+          return [].concat((0, _toConsumableArray2.default)(queue), [{
+            type: 'close',
+            key: key
+          }]);
+        });
+      },
+      destroy: function destroy() {
+        setTaskQueue(function (queue) {
+          return [].concat((0, _toConsumableArray2.default)(queue), [{
+            type: 'destroy'
+          }]);
+        });
       }
+    };
+  }, []); // ======================= Container ======================
+  // React 18 should all in effect that we will check container in each render
+  // Which means getContainer should be stable.
 
-      firstMount = false;
-    });
-  }
+  React.useEffect(function () {
+    setContainer(getContainer());
+  }); // ======================== Effect ========================
 
-  return [notify, /*#__PURE__*/React.createElement(React.Fragment, null, elements)];
+  React.useEffect(function () {
+    // Flush task when node ready
+    if (notificationsRef.current && taskQueue.length) {
+      taskQueue.forEach(function (task) {
+        switch (task.type) {
+          case 'open':
+            notificationsRef.current.open(task.config);
+            break;
+
+          case 'close':
+            notificationsRef.current.close(task.key);
+            break;
+
+          case 'destroy':
+            notificationsRef.current.destroy();
+            break;
+        }
+      });
+      setTaskQueue([]);
+    }
+  }, [taskQueue]); // ======================== Return ========================
+
+  return [api, contextHolder];
 }

package.json

 {
   "name": "rc-notification",
-  "version": "4.6.0",
+  "version": "5.0.0-alpha.0",
   "description": "notification ui component for react",
@@ -75,5 +75,5 @@ "engines": {
     "classnames": "2.x",
-    "rc-motion": "^2.2.0",
+    "rc-motion": "^2.6.0",
     "rc-util": "^5.20.1"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

44758

decreased by-17.09%

Lines of code

840

decreased by-27.15%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedrc-motion@^2.6.0