rc-countdown-view - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

es/index.js

 import { __rest, __read, __assign } from 'tslib';
-import React, { forwardRef, useRef, useState, useImperativeHandle, useEffect } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import CountDownPro from 'countdown-pro';
+import { useSafeState, useLatest, useUpdateEffect } from 'rc-hooks';
 
+function formatTime(timestamp, format) {
+    if (typeof format === 'string') {
+        return CountDownPro.format(timestamp, format);
+    }
+    else if (format instanceof Function) {
+        return format(timestamp, CountDownPro.parseTimeData(timestamp));
+    }
+    else {
+        return '' + timestamp;
+    }
+}
 var CountDown = forwardRef(function (_a, ref) {
     var _b = _a.time, time = _b === void 0 ? 0 : _b, _c = _a.interval, interval = _c === void 0 ? 1000 : _c, _d = _a.format, format = _d === void 0 ? 'HH:mm:ss' : _d, _e = _a.autoStart, autoStart = _e === void 0 ? true : _e, onChange = _a.onChange, onEnd = _a.onEnd, restProps = __rest(_a, ["time", "interval", "format", "autoStart", "onChange", "onEnd"]);
-    var formatTime = function (timestamp) {
-        if (typeof format === 'string') {
-            return CountDownPro.format(timestamp, format);
-        }
-        else if (format instanceof Function) {
-            return format(timestamp, CountDownPro.parseTimeData(timestamp));
-        }
-        else {
-            return '' + timestamp;
-        }
-    };
-    var unmountedRef = useRef(false);
-    var _f = __read(useState(function () { return formatTime(time); }), 2), timeState = _f[0], setTimeState = _f[1];
-    var handleChange = function (currentTime) {
-        if (!unmountedRef.current) {
-            var fmtTime = formatTime(currentTime);
-            setTimeState(fmtTime);
-            onChange === null || onChange === void 0 ? void 0 : onChange(fmtTime);
-        }
-    };
-    var countdownRef = useRef();
+    var _f = __read(useSafeState(function () { return formatTime(time, format); }), 2), timeState = _f[0], setTimeState = _f[1];
+    var changeLatest = useLatest(onChange);
+    var endLatest = useLatest(onEnd);
+    var formatLatest = useLatest(format);
+    var countdownRef = useRef(null);
     if (!countdownRef.current) {
@@ -32,4 +28,12 @@ countdownRef.current = new CountDownPro({
             interval: interval,
-            onChange: handleChange,
-            onEnd: onEnd
+            onChange: function (currentTime) {
+                var _a;
+                var fmtTime = formatTime(currentTime, formatLatest.current);
+                setTimeState(fmtTime);
+                (_a = changeLatest.current) === null || _a === void 0 ? void 0 : _a.call(changeLatest, fmtTime);
+            },
+            onEnd: function () {
+                var _a;
+                (_a = endLatest.current) === null || _a === void 0 ? void 0 : _a.call(endLatest);
+            }
         });
@@ -45,7 +49,10 @@ }
             var _a;
-            unmountedRef.current = true;
             (_a = countdownRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            countdownRef.current = null;
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    useUpdateEffect(function () {
+        var _a;
+        (_a = countdownRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ time: time, interval: interval });
+    }, [time, interval]);
     return React.createElement("span", __assign({}, restProps), timeState);
@@ -52,0 +59,0 @@ });

lib/index.js

@@ -6,26 +6,22 @@ 'use strict';
 var CountDownPro = require('countdown-pro');
+var rcHooks = require('rc-hooks');
 
+function formatTime(timestamp, format) {
+    if (typeof format === 'string') {
+        return CountDownPro.format(timestamp, format);
+    }
+    else if (format instanceof Function) {
+        return format(timestamp, CountDownPro.parseTimeData(timestamp));
+    }
+    else {
+        return '' + timestamp;
+    }
+}
 var CountDown = React.forwardRef(function (_a, ref) {
     var _b = _a.time, time = _b === void 0 ? 0 : _b, _c = _a.interval, interval = _c === void 0 ? 1000 : _c, _d = _a.format, format = _d === void 0 ? 'HH:mm:ss' : _d, _e = _a.autoStart, autoStart = _e === void 0 ? true : _e, onChange = _a.onChange, onEnd = _a.onEnd, restProps = tslib.__rest(_a, ["time", "interval", "format", "autoStart", "onChange", "onEnd"]);
-    var formatTime = function (timestamp) {
-        if (typeof format === 'string') {
-            return CountDownPro.format(timestamp, format);
-        }
-        else if (format instanceof Function) {
-            return format(timestamp, CountDownPro.parseTimeData(timestamp));
-        }
-        else {
-            return '' + timestamp;
-        }
-    };
-    var unmountedRef = React.useRef(false);
-    var _f = tslib.__read(React.useState(function () { return formatTime(time); }), 2), timeState = _f[0], setTimeState = _f[1];
-    var handleChange = function (currentTime) {
-        if (!unmountedRef.current) {
-            var fmtTime = formatTime(currentTime);
-            setTimeState(fmtTime);
-            onChange === null || onChange === void 0 ? void 0 : onChange(fmtTime);
-        }
-    };
-    var countdownRef = React.useRef();
+    var _f = tslib.__read(rcHooks.useSafeState(function () { return formatTime(time, format); }), 2), timeState = _f[0], setTimeState = _f[1];
+    var changeLatest = rcHooks.useLatest(onChange);
+    var endLatest = rcHooks.useLatest(onEnd);
+    var formatLatest = rcHooks.useLatest(format);
+    var countdownRef = React.useRef(null);
     if (!countdownRef.current) {
@@ -35,4 +31,12 @@ countdownRef.current = new CountDownPro({
             interval: interval,
-            onChange: handleChange,
-            onEnd: onEnd
+            onChange: function (currentTime) {
+                var _a;
+                var fmtTime = formatTime(currentTime, formatLatest.current);
+                setTimeState(fmtTime);
+                (_a = changeLatest.current) === null || _a === void 0 ? void 0 : _a.call(changeLatest, fmtTime);
+            },
+            onEnd: function () {
+                var _a;
+                (_a = endLatest.current) === null || _a === void 0 ? void 0 : _a.call(endLatest);
+            }
         });
@@ -48,7 +52,10 @@ }
             var _a;
-            unmountedRef.current = true;
             (_a = countdownRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            countdownRef.current = null;
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    rcHooks.useUpdateEffect(function () {
+        var _a;
+        (_a = countdownRef.current) === null || _a === void 0 ? void 0 : _a.updateOptions({ time: time, interval: interval });
+    }, [time, interval]);
     return React.createElement("span", tslib.__assign({}, restProps), timeState);
@@ -55,0 +62,0 @@ });

package.json

 {
   "name": "rc-countdown-view",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "A simple countdown react component.",
@@ -53,3 +53,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "countdown-pro": "^2.0.4",
+    "countdown-pro": "^2.1.0",
+    "rc-hooks": "^3.0.12",
     "tslib": "^2.6.3"
@@ -66,2 +67,4 @@ },
     "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
@@ -82,4 +85,5 @@ "@types/react": "^18.3.3",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^13.3.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
@@ -86,0 +90,0 @@ "react-dom": "^18.3.1",

types/index.d.ts

 import React from 'react';
 import CountDownPro, { Options } from 'countdown-pro';
-export type ActionType = {
-    start: () => void;
-    pause: () => void;
-    reset: () => void;
-};
+type CountDownInstanceType = InstanceType<typeof CountDownPro>;
+export type ActionType = CountDownInstanceType;
+type FormatType = string | ((timestamp: number, format: ReturnType<typeof CountDownPro.parseTimeData>) => string);
 export interface CountDownProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange'>, Pick<Options, 'time' | 'interval' | 'onEnd'> {
-    format?: string | ((timestamp: number, formatRes: ReturnType<typeof CountDownPro.parseTimeData>) => string);
+    format?: FormatType;
     autoStart?: boolean;
     onChange?: (formatTime: string) => void;
 }
-declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<ActionType>>;
+declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<CountDownPro>>;
 export default CountDown;

No alert changes

Improved metrics

Total package byte prevSize

11597

9.58%

Lines of code

131

10.08%

Worsened metrics

Dependency count

4

33.33%

Dev dependency count

33

10%

Dependency changes

• + Added

  rc-hooks@^3.0.12

• + Added

  cache2@3.1.6
  (transitive)

• + Added

  emitter-pro@1.2.4
  (transitive)

• + Added

  rc-hooks@3.4.0
  (transitive)

• + Added

  ut2@1.21.5
  (transitive)

• + Added

  util-helpers@5.8.1
  (transitive)

• Updated

  countdown-pro@^2.1.0