react-progress-bar-timer - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/index.d.ts

@@ -1,2 +0,2 @@
-export { default } from './ProgressTimer';
-export { default as ProgressTimerProps, Direction, Variant, ProgressTimerHandle } from './ProgressTimer.types';
+export { default, ProgressTimerProps, Direction, Variant, ProgressTimerHandle } from './components';
+export { default as useTimer, UseTimerProps } from './hooks';

dist/react-progress-bar-timer.cjs.development.js

@@ -30,2 +30,107 @@ 'use strict';
 
+var useTimer = function useTimer(_ref) {
+  var duration = _ref.duration,
+      _ref$onTick = _ref.onTick,
+      onTick = _ref$onTick === void 0 ? function () {} : _ref$onTick,
+      _ref$onFinish = _ref.onFinish,
+      onFinish = _ref$onFinish === void 0 ? function () {} : _ref$onFinish;
+
+  var _useState = react.useState(duration),
+      time = _useState[0],
+      setTime = _useState[1];
+
+  var _useState2 = react.useState(),
+      timer = _useState2[0],
+      setTimer = _useState2[1];
+
+  var isRunning = Boolean(timer && time);
+  var callbackRef = react.useRef();
+  /**
+   * Update callback ref on changes to callback props
+   * to allow changes to reflect within setInterval's callback.
+   */
+
+  react.useEffect(function () {
+    callbackRef.current = {
+      onTick: onTick,
+      onFinish: onFinish
+    };
+  }, [onTick, onFinish]);
+  /**
+   * Starts a stopped timer.
+   */
+
+  var start = function start() {
+    setTime(duration);
+    var timer = setInterval(function () {
+      var _callbackRef$current;
+
+      (_callbackRef$current = callbackRef.current) == null ? void 0 : _callbackRef$current.onTick == null ? void 0 : _callbackRef$current.onTick();
+      setTime(function (prevTime) {
+        var updatedTime = prevTime - 1;
+
+        if (!updatedTime) {
+          var _callbackRef$current2;
+
+          clearInterval(timer);
+          (_callbackRef$current2 = callbackRef.current) == null ? void 0 : _callbackRef$current2.onFinish == null ? void 0 : _callbackRef$current2.onFinish();
+        }
+
+        return updatedTime;
+      });
+    }, 1000);
+    setTimer(timer);
+  };
+  /**
+   * Stops a running timer.
+   */
+
+
+  var stop = function stop() {
+    clearInterval(timer);
+    setTimer(undefined);
+  };
+  /**
+   * Restarts a running or finished timer.
+   */
+
+
+  var restart = function restart() {
+    setTime(0);
+    stop();
+  };
+  /**
+   * Restarts the timer if time is 0.
+   * This allows UI to reset visually prior to restarting.
+   */
+
+
+  var handleRestart = function handleRestart() {
+    if (time) {
+      return;
+    }
+
+    start();
+  };
+
+  react.useEffect(handleRestart, [timer]);
+  /**
+   * Cleanup by clearing interval on unmount.
+   */
+
+  react.useEffect(function () {
+    return function () {
+      return clearInterval(timer);
+    };
+  }, []);
+  return {
+    time: time,
+    timer: timer,
+    isRunning: isRunning,
+    start: start,
+    stop: stop,
+    restart: restart
+  };
+};
+
 var _templateObject;
@@ -113,3 +218,5 @@ var useStyles = /*#__PURE__*/mui.makeStyles()({
       barRounded = _ref$barRounded === void 0 ? false : _ref$barRounded,
-      started = _ref.started;
+      started = _ref.started,
+      _ref$onFinish = _ref.onFinish,
+      _onFinish = _ref$onFinish === void 0 ? function () {} : _ref$onFinish;
 
@@ -120,49 +227,15 @@ var _useStyles = useStyles(),
 
-  var _useState = react.useState(duration),
-      time = _useState[0],
-      setTime = _useState[1];
-
-  var _useState2 = react.useState(),
-      timer = _useState2[0],
-      setTimer = _useState2[1];
-
-  var isRunning = Boolean(timer && time);
+  var _useTimer = useTimer({
+    duration: duration,
+    onFinish: function onFinish() {
+      return _onFinish(label || buttonText);
+    }
+  }),
+      time = _useTimer.time,
+      timer = _useTimer.timer,
+      isRunning = _useTimer.isRunning,
+      start = _useTimer.start,
+      stop = _useTimer.stop,
+      restart = _useTimer.restart;
   /**
-   * Starts a stopped timer.
-   */
-
-  var startTimer = function startTimer() {
-    setTime(duration);
-    var timer = setInterval(function () {
-      setTime(function (prevTime) {
-        var updatedTime = --prevTime;
-
-        if (!updatedTime) {
-          clearInterval(timer);
-        }
-
-        return updatedTime;
-      });
-    }, 1000);
-    setTimer(timer);
-  };
-  /**
-   * Stops a running timer.
-   */
-
-
-  var stopTimer = function stopTimer() {
-    clearInterval(timer);
-    setTimer(undefined);
-  };
-  /**
-   * Restarts a running or finished timer.
-   */
-
-
-  var restartTimer = function restartTimer() {
-    setTime(0);
-    stopTimer();
-  };
-  /**
    * Controls timer via functions instead of "started" prop.
@@ -174,5 +247,5 @@ */
     return {
-      start: startTimer,
-      stop: stopTimer,
-      restart: restartTimer
+      start: start,
+      stop: stop,
+      restart: restart
     };
@@ -214,15 +287,2 @@ });
   /**
-   * Restarts the timer if time is 0.
-   * This allows the bar to reset visually prior to restarting.
-   */
-
-
-  var handleRestart = function handleRestart() {
-    if (time) {
-      return;
-    }
-
-    startTimer();
-  };
-  /**
    * Controls timer via "started" prop.
@@ -239,12 +299,11 @@ */
       if (timer) {
-        restartTimer();
+        restart();
       } else {
-        startTimer();
+        start();
       }
     } else {
-      stopTimer();
+      stop();
     }
   };
 
-  react.useEffect(handleRestart, [timer]);
   react.useEffect(handleStartedChange, [started]);
@@ -256,3 +315,4 @@ return jsxRuntime.jsx(material.ButtonBase, {
     },
-    onClick: timer ? stopTimer : startTimer,
+    onClick: timer ? stop : start,
+    "aria-label": label,
     children: jsxRuntime.jsxs("div", {
@@ -302,2 +362,3 @@ className: cx(styles.progressContainer, classes.progressContainer, (_cx = {}, _cx[cx(styles.finished, classes.finished)] = !time && variant === exports.Variant.Empty, _cx)),
 exports.default = ProgressTimer;
+exports.useTimer = useTimer;
 //# sourceMappingURL=react-progress-bar-timer.cjs.development.js.map

dist/react-progress-bar-timer.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,r,i=require("react/jsx-runtime"),n=require("react"),o=require("@mui/material"),a=require("tss-react/mui"),s=require("@emotion/react");function l(e,t){return t||(t=e.slice(0)),e.raw=t,e}(e=exports.Direction||(exports.Direction={})).Left="left",e.Right="right",(t=exports.Variant||(exports.Variant={})).Fill="fill",t.Empty="empty";var c=a.makeStyles()({root:{width:"100%"},progressContainer:{flex:1,position:"relative",overflowX:"hidden",borderRadius:4},progress:{zIndex:1,inset:0,position:"absolute",transformOrigin:"left center"},textContainer:{boxSizing:"border-box",position:"relative",height:"4em",zIndex:2,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:4,margin:8,overflowY:"hidden",fontWeight:500},label:{lineHeight:"normal",letterSpacing:"0.0285em",fontWeight:"inherit",fontSize:"0.9em",transition:"transform 300ms cubic-bezier(0, 0, 0.2, 1) 0ms"},time:{fontWeight:"inherit",fontSize:"2em",lineHeight:1},finished:{animation:s.keyframes(r||(r=l(["\n      0% {\n        opacity: 0.8;\n        background-color: orangered;\n      }\n      "])))+" 1s 5"}}),d=function(e){return(""+e).padStart(2,"0")},u=function(e){return e?4:0};exports.default=n.forwardRef((function(e,t){var r,a,s,l,f=e.direction,p=void 0===f?exports.Direction.Right:f,m=e.variant,x=void 0===m?exports.Variant.Fill:m,h=e.color,v=void 0===h?"rgb(255, 165, 0)":h,g=e.fontColor,b=void 0===g?"#212121":g,y=e.duration,C=void 0===y?60:y,S=e.label,j=void 0===S?"":S,R=e.buttonText,z=void 0===R?"":R,D=e.classes,I=void 0===D?{}:D,k=e.fontSize,w=e.showDuration,E=void 0!==w&&w,N=e.rootRounded,V=void 0===N||N,q=e.barRounded,B=void 0!==q&&q,F=e.started,O=c(),H=O.classes,T=O.cx,W=n.useState(C),L=W[0],M=W[1],X=n.useState(),_=X[0],P=X[1],Y=Boolean(_&&L),A=function(){M(C);var e=setInterval((function(){M((function(t){var r=--t;return r||clearInterval(e),r}))}),1e3);P(e)},G=function(){clearInterval(_),P(void 0)},J=function(){M(0),G()};return n.useImperativeHandle(t,(function(){return{start:A,stop:G,restart:J}})),n.useEffect((function(){L||A()}),[_]),n.useEffect((function(){null!=F&&(F?_?J():A():G())}),[F]),i.jsx(o.ButtonBase,{className:T(H.root,I.root),style:{borderRadius:u(V)},onClick:_?G:A,children:i.jsxs("div",{className:T(H.progressContainer,I.progressContainer,(r={},r[T(H.finished,I.finished)]=!L&&x===exports.Variant.Empty,r)),style:{borderRadius:u(V),backgroundColor:o.alpha(v,.4)},children:[i.jsxs(o.Box,{className:T(H.textContainer,I.textContainer),fontSize:k,color:b,children:[(j||z&&!_||!L)&&i.jsx(o.Typography,{className:T(H.label,I.label),sx:{transform:Y||E?void 0:"scale(1.86)"},children:!Y&&z?z:j}),i.jsx(o.Slide,{direction:"up",timeout:{enter:100,exit:70},in:E||Y,mountOnEnter:!0,unmountOnExit:!0,children:i.jsx(o.Typography,{className:T(H.time,I.time),children:d(Math.floor(L/60))+":"+d(L%60)})})]}),i.jsx("span",{className:T(H.progress,I.progress,(a={},a[T(H.finished,I.finished)]=!L&&x===exports.Variant.Fill,a)),style:{backgroundColor:v,borderRadius:u(B),transform:(l=Boolean(_)===(x===exports.Variant.Fill)?"0%":"100%","translateX("+(s=_?exports.Direction.Left:exports.Direction.Right,p===s?"-":"")+l+")"),transition:_?"transform "+C+"s linear 0s":void 0}})]})})}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material"),o=require("tss-react/mui"),s=require("@emotion/react");function a(e,t){return t||(t=e.slice(0)),e.raw=t,e}(e=exports.Direction||(exports.Direction={})).Left="left",e.Right="right",(t=exports.Variant||(exports.Variant={})).Fill="fill",t.Empty="empty";var l,u=function(e){var t=e.duration,n=e.onTick,i=void 0===n?function(){}:n,o=e.onFinish,s=void 0===o?function(){}:o,a=r.useState(t),l=a[0],u=a[1],c=r.useState(),d=c[0],f=c[1],m=Boolean(d&&l),p=r.useRef();r.useEffect((function(){p.current={onTick:i,onFinish:s}}),[i,s]);var h=function(){u(t);var e=setInterval((function(){var t;null==(t=p.current)||null==t.onTick||t.onTick(),u((function(t){var n,r=t-1;return r||(clearInterval(e),null==(n=p.current)||null==n.onFinish||n.onFinish()),r}))}),1e3);f(e)},x=function(){clearInterval(d),f(void 0)};return r.useEffect((function(){l||h()}),[d]),r.useEffect((function(){return function(){return clearInterval(d)}}),[]),{time:l,timer:d,isRunning:m,start:h,stop:x,restart:function(){u(0),x()}}},c=o.makeStyles()({root:{width:"100%"},progressContainer:{flex:1,position:"relative",overflowX:"hidden",borderRadius:4},progress:{zIndex:1,inset:0,position:"absolute",transformOrigin:"left center"},textContainer:{boxSizing:"border-box",position:"relative",height:"4em",zIndex:2,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",gap:4,margin:8,overflowY:"hidden",fontWeight:500},label:{lineHeight:"normal",letterSpacing:"0.0285em",fontWeight:"inherit",fontSize:"0.9em",transition:"transform 300ms cubic-bezier(0, 0, 0.2, 1) 0ms"},time:{fontWeight:"inherit",fontSize:"2em",lineHeight:1},finished:{animation:s.keyframes(l||(l=a(["\n      0% {\n        opacity: 0.8;\n        background-color: orangered;\n      }\n      "])))+" 1s 5"}}),d=function(e){return(""+e).padStart(2,"0")},f=function(e){return e?4:0};exports.default=r.forwardRef((function(e,t){var o,s,a,l,m=e.direction,p=void 0===m?exports.Direction.Right:m,h=e.variant,x=void 0===h?exports.Variant.Fill:h,v=e.color,g=void 0===v?"rgb(255, 165, 0)":v,b=e.fontColor,y=void 0===b?"#212121":b,R=e.duration,C=void 0===R?60:R,S=e.label,j=void 0===S?"":S,k=e.buttonText,F=void 0===k?"":k,z=e.classes,E=void 0===z?{}:z,I=e.fontSize,T=e.showDuration,D=void 0!==T&&T,w=e.rootRounded,N=void 0===w||w,V=e.barRounded,q=void 0!==V&&V,B=e.started,O=e.onFinish,H=void 0===O?function(){}:O,W=c(),L=W.classes,M=W.cx,X=u({duration:C,onFinish:function(){return H(j||F)}}),_=X.time,P=X.timer,Y=X.isRunning,A=X.start,G=X.stop,J=X.restart;return r.useImperativeHandle(t,(function(){return{start:A,stop:G,restart:J}})),r.useEffect((function(){null!=B&&(B?P?J():A():G())}),[B]),n.jsx(i.ButtonBase,{className:M(L.root,E.root),style:{borderRadius:f(N)},onClick:P?G:A,"aria-label":j,children:n.jsxs("div",{className:M(L.progressContainer,E.progressContainer,(o={},o[M(L.finished,E.finished)]=!_&&x===exports.Variant.Empty,o)),style:{borderRadius:f(N),backgroundColor:i.alpha(g,.4)},children:[n.jsxs(i.Box,{className:M(L.textContainer,E.textContainer),fontSize:I,color:y,children:[(j||F&&!P||!_)&&n.jsx(i.Typography,{className:M(L.label,E.label),sx:{transform:Y||D?void 0:"scale(1.86)"},children:!Y&&F?F:j}),n.jsx(i.Slide,{direction:"up",timeout:{enter:100,exit:70},in:D||Y,mountOnEnter:!0,unmountOnExit:!0,children:n.jsx(i.Typography,{className:M(L.time,E.time),children:d(Math.floor(_/60))+":"+d(_%60)})})]}),n.jsx("span",{className:M(L.progress,E.progress,(s={},s[M(L.finished,E.finished)]=!_&&x===exports.Variant.Fill,s)),style:{backgroundColor:g,borderRadius:f(q),transform:(l=Boolean(P)===(x===exports.Variant.Fill)?"0%":"100%","translateX("+(a=P?exports.Direction.Left:exports.Direction.Right,p===a?"-":"")+l+")"),transition:P?"transform "+C+"s linear 0s":void 0}})]})})})),exports.useTimer=u;
 //# sourceMappingURL=react-progress-bar-timer.cjs.production.min.js.map

dist/react-progress-bar-timer.esm.js

 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useImperativeHandle, useEffect } from 'react';
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { ButtonBase, alpha, Box, Typography, Slide } from '@mui/material';
@@ -30,2 +30,107 @@ import { makeStyles } from 'tss-react/mui';
 
+var useTimer = function useTimer(_ref) {
+  var duration = _ref.duration,
+      _ref$onTick = _ref.onTick,
+      onTick = _ref$onTick === void 0 ? function () {} : _ref$onTick,
+      _ref$onFinish = _ref.onFinish,
+      onFinish = _ref$onFinish === void 0 ? function () {} : _ref$onFinish;
+
+  var _useState = useState(duration),
+      time = _useState[0],
+      setTime = _useState[1];
+
+  var _useState2 = useState(),
+      timer = _useState2[0],
+      setTimer = _useState2[1];
+
+  var isRunning = Boolean(timer && time);
+  var callbackRef = useRef();
+  /**
+   * Update callback ref on changes to callback props
+   * to allow changes to reflect within setInterval's callback.
+   */
+
+  useEffect(function () {
+    callbackRef.current = {
+      onTick: onTick,
+      onFinish: onFinish
+    };
+  }, [onTick, onFinish]);
+  /**
+   * Starts a stopped timer.
+   */
+
+  var start = function start() {
+    setTime(duration);
+    var timer = setInterval(function () {
+      var _callbackRef$current;
+
+      (_callbackRef$current = callbackRef.current) == null ? void 0 : _callbackRef$current.onTick == null ? void 0 : _callbackRef$current.onTick();
+      setTime(function (prevTime) {
+        var updatedTime = prevTime - 1;
+
+        if (!updatedTime) {
+          var _callbackRef$current2;
+
+          clearInterval(timer);
+          (_callbackRef$current2 = callbackRef.current) == null ? void 0 : _callbackRef$current2.onFinish == null ? void 0 : _callbackRef$current2.onFinish();
+        }
+
+        return updatedTime;
+      });
+    }, 1000);
+    setTimer(timer);
+  };
+  /**
+   * Stops a running timer.
+   */
+
+
+  var stop = function stop() {
+    clearInterval(timer);
+    setTimer(undefined);
+  };
+  /**
+   * Restarts a running or finished timer.
+   */
+
+
+  var restart = function restart() {
+    setTime(0);
+    stop();
+  };
+  /**
+   * Restarts the timer if time is 0.
+   * This allows UI to reset visually prior to restarting.
+   */
+
+
+  var handleRestart = function handleRestart() {
+    if (time) {
+      return;
+    }
+
+    start();
+  };
+
+  useEffect(handleRestart, [timer]);
+  /**
+   * Cleanup by clearing interval on unmount.
+   */
+
+  useEffect(function () {
+    return function () {
+      return clearInterval(timer);
+    };
+  }, []);
+  return {
+    time: time,
+    timer: timer,
+    isRunning: isRunning,
+    start: start,
+    stop: stop,
+    restart: restart
+  };
+};
+
 var _templateObject;
@@ -113,3 +218,5 @@ var useStyles = /*#__PURE__*/makeStyles()({
       barRounded = _ref$barRounded === void 0 ? false : _ref$barRounded,
-      started = _ref.started;
+      started = _ref.started,
+      _ref$onFinish = _ref.onFinish,
+      _onFinish = _ref$onFinish === void 0 ? function () {} : _ref$onFinish;
 
@@ -120,49 +227,15 @@ var _useStyles = useStyles(),
 
-  var _useState = useState(duration),
-      time = _useState[0],
-      setTime = _useState[1];
-
-  var _useState2 = useState(),
-      timer = _useState2[0],
-      setTimer = _useState2[1];
-
-  var isRunning = Boolean(timer && time);
+  var _useTimer = useTimer({
+    duration: duration,
+    onFinish: function onFinish() {
+      return _onFinish(label || buttonText);
+    }
+  }),
+      time = _useTimer.time,
+      timer = _useTimer.timer,
+      isRunning = _useTimer.isRunning,
+      start = _useTimer.start,
+      stop = _useTimer.stop,
+      restart = _useTimer.restart;
   /**
-   * Starts a stopped timer.
-   */
-
-  var startTimer = function startTimer() {
-    setTime(duration);
-    var timer = setInterval(function () {
-      setTime(function (prevTime) {
-        var updatedTime = --prevTime;
-
-        if (!updatedTime) {
-          clearInterval(timer);
-        }
-
-        return updatedTime;
-      });
-    }, 1000);
-    setTimer(timer);
-  };
-  /**
-   * Stops a running timer.
-   */
-
-
-  var stopTimer = function stopTimer() {
-    clearInterval(timer);
-    setTimer(undefined);
-  };
-  /**
-   * Restarts a running or finished timer.
-   */
-
-
-  var restartTimer = function restartTimer() {
-    setTime(0);
-    stopTimer();
-  };
-  /**
    * Controls timer via functions instead of "started" prop.
@@ -174,5 +247,5 @@ */
     return {
-      start: startTimer,
-      stop: stopTimer,
-      restart: restartTimer
+      start: start,
+      stop: stop,
+      restart: restart
     };
@@ -214,15 +287,2 @@ });
   /**
-   * Restarts the timer if time is 0.
-   * This allows the bar to reset visually prior to restarting.
-   */
-
-
-  var handleRestart = function handleRestart() {
-    if (time) {
-      return;
-    }
-
-    startTimer();
-  };
-  /**
    * Controls timer via "started" prop.
@@ -239,12 +299,11 @@ */
       if (timer) {
-        restartTimer();
+        restart();
       } else {
-        startTimer();
+        start();
       }
     } else {
-      stopTimer();
+      stop();
     }
   };
 
-  useEffect(handleRestart, [timer]);
   useEffect(handleStartedChange, [started]);
@@ -256,3 +315,4 @@ return jsx(ButtonBase, {
     },
-    onClick: timer ? stopTimer : startTimer,
+    onClick: timer ? stop : start,
+    "aria-label": label,
     children: jsxs("div", {
@@ -302,3 +362,3 @@ className: cx(styles.progressContainer, classes.progressContainer, (_cx = {}, _cx[cx(styles.finished, classes.finished)] = !time && variant === Variant.Empty, _cx)),
 export default ProgressTimer;
-export { Direction, Variant };
+export { Direction, Variant, useTimer };
 //# sourceMappingURL=react-progress-bar-timer.esm.js.map

package.json

 {
-  "version": "0.2.0",
+  "version": "0.3.0",
   "name": "react-progress-bar-timer",
@@ -8,5 +8,3 @@ "author": "wasaab",
   "typings": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "engines": {
@@ -26,5 +24,2 @@ "node": ">=14"
   },
-  "peerDependencies": {
-    "react": ">=16"
-  },
   "husky": {
@@ -46,2 +41,13 @@ "hooks": {
   ],
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.8.1",
+    "@mui/styles": "^5.8.0",
+    "tss-react": "^3.7.0"
+  },
+  "peerDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
   "devDependencies": {
@@ -67,9 +73,2 @@ "@babel/core": "^7.18.2",
   },
-  "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.8.1",
-    "@mui/styles": "^5.8.0",
-    "tss-react": "^3.7.0"
-  },
   "resolutions": {
@@ -76,0 +75,0 @@ "**/typescript": "^4.7.2",

No alert changes

Improved metrics

Total package byte prevSize

88263

14%

Number of package files

18

28.57%

Lines of code

761

21.76%

Worsened metrics

Dependency count

7

16.67%

No dependency changes