rc-notification - npm Package Compare versions

Comparing version 5.4.0 to 5.5.0

es/hooks/useNotification.d.ts

@@ -17,2 +17,3 @@ import type { CSSMotionProps } from 'rc-motion';
     duration?: number;
+    showProgress?: boolean;
     /** @private. Config for notification holder style. Safe to remove if refactor */
@@ -19,0 +20,0 @@ className?: (placement: Placement) => string;

es/interface.d.ts

@@ -7,2 +7,3 @@ import type React from 'react';
     duration?: number | null;
+    showProgress?: boolean;
     closeIcon?: React.ReactNode;
@@ -9,0 +10,0 @@ closable?: boolean | ({

es/Notice.js

@@ -15,2 +15,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
     duration = _props$duration === void 0 ? 4.5 : _props$duration,
+    showProgress = props.showProgress,
     eventKey = props.eventKey,
@@ -30,3 +31,12 @@ content = props.content,
     setHovering = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    percent = _React$useState4[0],
+    setPercent = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    spentTime = _React$useState6[0],
+    setSpentTime = _React$useState6[1];
   var mergedHovering = forcedHovering || hovering;
+  var mergedShowProgress = duration > 0 && showProgress;
 
@@ -46,7 +56,9 @@ // ======================== Close =========================
     if (!mergedHovering && duration > 0) {
+      var start = Date.now() - spentTime;
       var timeout = setTimeout(function () {
         onInternalClose();
-      }, duration * 1000);
+      }, duration * 1000 - spentTime);
       return function () {
         clearTimeout(timeout);
+        setSpentTime(Date.now() - start);
       };
@@ -56,2 +68,24 @@ }
   }, [duration, mergedHovering, times]);
+  React.useEffect(function () {
+    if (!mergedHovering && mergedShowProgress) {
+      var start = performance.now();
+      var animationFrame;
+      var calculate = function calculate() {
+        cancelAnimationFrame(animationFrame);
+        animationFrame = requestAnimationFrame(function (timestamp) {
+          var runtime = timestamp + spentTime - start;
+          var progress = Math.min(runtime / (duration * 1000), 1);
+          setPercent(progress * 100);
+          if (progress < 1) {
+            calculate();
+          }
+        });
+      };
+      calculate();
+      return function () {
+        cancelAnimationFrame(animationFrame);
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, mergedHovering, mergedShowProgress, times]);
 
@@ -72,2 +106,5 @@ // ======================== Closable ========================
 
+  // ======================== Progress ========================
+  var validPercent = 100 - (!percent || percent < 0 ? 0 : percent > 100 ? 100 : percent);
+
   // ======================== Render ========================
@@ -103,4 +140,8 @@ var noticePrefixCls = "".concat(prefixCls, "-notice");
     }
-  }), closableObj.closeIcon));
+  }), closableObj.closeIcon), mergedShowProgress && /*#__PURE__*/React.createElement("progress", {
+    className: "".concat(noticePrefixCls, "-progress"),
+    max: "100",
+    value: validPercent
+  }, validPercent + '%'));
 });
 export default Notify;

lib/hooks/useNotification.d.ts

@@ -17,2 +17,3 @@ import type { CSSMotionProps } from 'rc-motion';
     duration?: number;
+    showProgress?: boolean;
     /** @private. Config for notification holder style. Safe to remove if refactor */
@@ -19,0 +20,0 @@ className?: (placement: Placement) => string;

lib/interface.d.ts

@@ -7,2 +7,3 @@ import type React from 'react';
     duration?: number | null;
+    showProgress?: boolean;
     closeIcon?: React.ReactNode;
@@ -9,0 +10,0 @@ closable?: boolean | ({

lib/Notice.js

@@ -25,2 +25,3 @@ "use strict";
     duration = _props$duration === void 0 ? 4.5 : _props$duration,
+    showProgress = props.showProgress,
     eventKey = props.eventKey,
@@ -40,3 +41,12 @@ content = props.content,
     setHovering = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    percent = _React$useState4[0],
+    setPercent = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    spentTime = _React$useState6[0],
+    setSpentTime = _React$useState6[1];
   var mergedHovering = forcedHovering || hovering;
+  var mergedShowProgress = duration > 0 && showProgress;
 
@@ -56,7 +66,9 @@ // ======================== Close =========================
     if (!mergedHovering && duration > 0) {
+      var start = Date.now() - spentTime;
       var timeout = setTimeout(function () {
         onInternalClose();
-      }, duration * 1000);
+      }, duration * 1000 - spentTime);
       return function () {
         clearTimeout(timeout);
+        setSpentTime(Date.now() - start);
       };
@@ -66,2 +78,24 @@ }
   }, [duration, mergedHovering, times]);
+  React.useEffect(function () {
+    if (!mergedHovering && mergedShowProgress) {
+      var start = performance.now();
+      var animationFrame;
+      var calculate = function calculate() {
+        cancelAnimationFrame(animationFrame);
+        animationFrame = requestAnimationFrame(function (timestamp) {
+          var runtime = timestamp + spentTime - start;
+          var progress = Math.min(runtime / (duration * 1000), 1);
+          setPercent(progress * 100);
+          if (progress < 1) {
+            calculate();
+          }
+        });
+      };
+      calculate();
+      return function () {
+        cancelAnimationFrame(animationFrame);
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration, mergedHovering, mergedShowProgress, times]);
 
@@ -82,2 +116,5 @@ // ======================== Closable ========================
 
+  // ======================== Progress ========================
+  var validPercent = 100 - (!percent || percent < 0 ? 0 : percent > 100 ? 100 : percent);
+
   // ======================== Render ========================
@@ -113,4 +150,8 @@ var noticePrefixCls = "".concat(prefixCls, "-notice");
     }
-  }), closableObj.closeIcon));
+  }), closableObj.closeIcon), mergedShowProgress && /*#__PURE__*/React.createElement("progress", {
+    className: "".concat(noticePrefixCls, "-progress"),
+    max: "100",
+    value: validPercent
+  }, validPercent + '%'));
 });
 var _default = exports.default = Notify;

package.json

 {
   "name": "rc-notification",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "notification ui component for react",
@@ -5,0 +5,0 @@ "engines": {

README.md

@@ -134,2 +134,8 @@ # rc-notification
         <tr>
+          <td>showProgress</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>show with progress bar for auto-closing notification</td>
+        </tr>
+        <tr>
           <td>style</td>
@@ -136,0 +142,0 @@ <td>Object</td>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87501

increased by5.77%

Lines of code

1780

increased by6.4%

Number of lines in readme file

186

increased by3.33%

No dependency changes