@pagamio/frontend-commons-lib 0.8.264 → 0.8.265

package/lib/components/ui/TimerBadge.d.ts

@@ -14,6 +14,8 @@ import * as React from 'react';
 export interface TimerBadgeProps {
     /** ISO date string or Date object marking when the timer started */
     startTime: string | Date;
+    /** ISO date string or Date object marking when the timer stopped. When set, the timer freezes at this time instead of counting up. */
+    stopTime?: string | Date | null;
     /** Minutes elapsed before turning amber (default: 15) */
     warningMinutes?: number;
     /** Minutes elapsed before turning red (default: 30) */

package/lib/components/ui/TimerBadge.js

@@ -16,9 +16,10 @@ import { cn } from '../../helpers/utils';
 // =============================================================================
 // HELPERS
 // =============================================================================
-function getElapsedSeconds(startTime) {
+function getElapsedSeconds(startTime, stopTime) {
     const start = typeof startTime === 'string' ? new Date(startTime) : startTime;
-    return Math.floor((Date.now() - start.getTime()) / 1000);
+    const end = stopTime ? (typeof stopTime === 'string' ? new Date(stopTime) : stopTime).getTime() : Date.now();
+    return Math.max(0, Math.floor((end - start.getTime()) / 1000));
 }
 function formatElapsed(totalSeconds) {
     const minutes = Math.floor(totalSeconds / 60);
@@ -28,14 +29,19 @@ function formatElapsed(totalSeconds) {
 // =============================================================================
 // COMPONENT
 // =============================================================================
-const TimerBadge = ({ startTime, warningMinutes = 15, dangerMinutes = 30, size = 'sm', className, }) => {
-    const [elapsed, setElapsed] = React.useState(() => getElapsedSeconds(startTime));
+const TimerBadge = ({ startTime, stopTime, warningMinutes = 15, dangerMinutes = 30, size = 'sm', className, }) => {
+    const isStopped = !!stopTime;
+    const [elapsed, setElapsed] = React.useState(() => getElapsedSeconds(startTime, stopTime));
     React.useEffect(() => {
+        if (isStopped) {
+            setElapsed(getElapsedSeconds(startTime, stopTime));
+            return;
+        }
         const interval = setInterval(() => {
             setElapsed(getElapsedSeconds(startTime));
         }, 1000);
         return () => clearInterval(interval);
-    }, [startTime]);
+    }, [startTime, stopTime, isStopped]);
     const minutes = elapsed / 60;
     const urgency = minutes >= dangerMinutes ? 'danger' : minutes >= warningMinutes ? 'warning' : 'safe';
     return (_jsxs("span", { className: cn('inline-flex items-center gap-1 rounded-full font-mono font-medium tabular-nums', size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm', urgency === 'safe' && 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400', urgency === 'warning' && 'bg-amber-500/15 text-amber-600 dark:text-amber-400', urgency === 'danger' && 'bg-red-500/15 text-red-600 dark:text-red-400', className), children: [_jsxs("svg", { className: cn('h-3 w-3 flex-shrink-0', size === 'md' && 'h-3.5 w-3.5'), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12 6 12 12 16 14" })] }), formatElapsed(elapsed)] }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.264",
+  "version": "0.8.265",
   "publishConfig": {
     "access": "public",
     "provenance": false