UNPKG

@gfazioli/mantine-clock

Version:

React Clock components and hooks for Mantine with timezone support, countdown timers, customization options, and real-time updates.

157 lines (153 loc) 3.75 kB
'use client'; 'use strict'; var dayjs = require('dayjs'); var isLeapYear = require('dayjs/plugin/isLeapYear'); var timezonePlugin = require('dayjs/plugin/timezone'); var utc = require('dayjs/plugin/utc'); var weekOfYear = require('dayjs/plugin/weekOfYear'); var React = require('react'); var hooks = require('@mantine/hooks'); dayjs.extend(utc); dayjs.extend(timezonePlugin); dayjs.extend(weekOfYear); dayjs.extend(isLeapYear); function useClock({ enabled = true, timezone = "UTC", updateFrequency = 1e3, use24Hours = true, padSeconds = false, padMinutes = false, padHours = false }) { const mounted = hooks.useMounted(); const [time, setTime] = React.useState(null); const [isRunning, setIsRunning] = React.useState(false); const intervalRef = React.useRef(null); const initialEnabledRef = React.useRef(enabled); React.useEffect(() => { if (!mounted) { return; } setTime(dayjs().tz(timezone)); if (enabled) { setIsRunning(true); } else { setIsRunning(false); } }, [mounted, enabled, timezone]); React.useEffect(() => { if (!mounted || !isRunning) { if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } return; } const updateClock = () => { setTime(dayjs().tz(timezone)); }; updateClock(); intervalRef.current = setInterval(updateClock, updateFrequency); return () => { if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } }; }, [mounted, isRunning, timezone, updateFrequency]); const start = React.useCallback(() => { if (!mounted) { return; } setTime(dayjs().tz(timezone)); setIsRunning(true); }, [mounted, timezone]); const pause = React.useCallback(() => { setIsRunning(false); }, []); const resume = React.useCallback(() => { if (!mounted) { return; } setTime(dayjs().tz(timezone)); setIsRunning(true); }, [mounted, timezone]); const reset = React.useCallback(() => { setIsRunning(false); if (initialEnabledRef.current) { setTime(dayjs().tz(timezone)); setIsRunning(true); } else { setTime(dayjs().tz(timezone)); } }, [timezone]); if (!mounted || !time) { const staticHours = padHours ? "00" : 0; const staticMinutes = padMinutes ? "00" : 0; const staticSeconds = padSeconds ? "00" : 0; return { year: 2024, month: 1, day: 1, week: 1, isLeap: false, hours: staticHours, minutes: staticMinutes, seconds: staticSeconds, milliseconds: 0, amPm: use24Hours ? void 0 : "AM", isRunning: false, start: () => { }, pause: () => { }, resume: () => { }, reset: () => { } }; } const year = time.year(); const month = time.month() + 1; const day = time.date(); const week = time.week(); const isLeap = time.isLeapYear(); let hours = time.hour(); let minutes = time.minute(); let seconds = time.second(); const milliseconds = time.millisecond(); let amPm; if (!use24Hours) { amPm = Number(hours) >= 12 ? "PM" : "AM"; hours = Number(hours) % 12 || 12; } if (padHours) { hours = hours.toString().padStart(2, "0"); } if (padMinutes) { minutes = minutes.toString().padStart(2, "0"); } if (padSeconds) { seconds = seconds.toString().padStart(2, "0"); } return { year, month, day, week, isLeap, hours, minutes, seconds, milliseconds, amPm, isRunning, start, pause, resume, reset }; } exports.useClock = useClock; //# sourceMappingURL=use-clock.cjs.map