@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
JavaScript
'use client';
;
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