react-clock/dist/Clock.js

An analog clock for your React app.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { getHours, getMilliseconds, getMinutes, getSeconds } from '@wojtekmaj/date-utils';
import Hand from './Hand.js';
import Mark from './Mark.js';
import MarkNumber from './MarkNumber.js';
import { formatHour as defaultFormatHour } from './shared/hourFormatter.js';
import { safeMax } from './shared/utils.js';
/**
 * Displays a complete clock.
 */
export default function Clock(_a) {
    var className = _a.className, _b = _a.formatHour, formatHour = _b === void 0 ? defaultFormatHour : _b, _c = _a.hourHandLength, hourHandLength = _c === void 0 ? 50 : _c, hourHandOppositeLength = _a.hourHandOppositeLength, _d = _a.hourHandWidth, hourHandWidth = _d === void 0 ? 4 : _d, _e = _a.hourMarksLength, hourMarksLength = _e === void 0 ? 10 : _e, _f = _a.hourMarksWidth, hourMarksWidth = _f === void 0 ? 3 : _f, locale = _a.locale, _g = _a.minuteHandLength, minuteHandLength = _g === void 0 ? 70 : _g, minuteHandOppositeLength = _a.minuteHandOppositeLength, _h = _a.minuteHandWidth, minuteHandWidth = _h === void 0 ? 2 : _h, _j = _a.minuteMarksLength, minuteMarksLength = _j === void 0 ? 6 : _j, _k = _a.minuteMarksWidth, minuteMarksWidth = _k === void 0 ? 1 : _k, _l = _a.renderHourMarks, renderHourMarks = _l === void 0 ? true : _l, _m = _a.renderMinuteHand, renderMinuteHand = _m === void 0 ? true : _m, _o = _a.renderMinuteMarks, renderMinuteMarks = _o === void 0 ? true : _o, renderNumbers = _a.renderNumbers, _p = _a.renderSecondHand, renderSecondHand = _p === void 0 ? true : _p, _q = _a.secondHandLength, secondHandLength = _q === void 0 ? 90 : _q, secondHandOppositeLength = _a.secondHandOppositeLength, _r = _a.secondHandWidth, secondHandWidth = _r === void 0 ? 1 : _r, _s = _a.size, size = _s === void 0 ? 150 : _s, useMillisecondPrecision = _a.useMillisecondPrecision, value = _a.value;
    function renderMinuteMarksFn() {
        if (!renderMinuteMarks) {
            return null;
        }
        var minuteMarks = [];
        for (var i = 1; i <= 60; i += 1) {
            var isHourMark = renderHourMarks && !(i % 5);
            if (!isHourMark) {
                minuteMarks.push(_jsx(Mark, { angle: i * 6, length: minuteMarksLength, name: "minute", width: minuteMarksWidth }, "minute_".concat(i)));
            }
        }
        return minuteMarks;
    }
    function renderHourMarksFn() {
        if (!renderHourMarks) {
            return null;
        }
        var hourMarks = [];
        for (var i = 1; i <= 12; i += 1) {
            hourMarks.push(_jsx(Mark, { angle: i * 30, length: hourMarksLength, name: "hour", width: hourMarksWidth }, "hour_".concat(i)));
        }
        return hourMarks;
    }
    function renderNumbersFn() {
        if (!renderNumbers) {
            return null;
        }
        var numbers = [];
        for (var i = 1; i <= 12; i += 1) {
            numbers.push(_jsx(MarkNumber, { angle: i * 30, length: safeMax(renderHourMarks && hourMarksLength, renderMinuteMarks && minuteMarksLength, 0), name: "number", number: formatHour(locale, i) }, "number_".concat(i)));
        }
        return numbers;
    }
    function renderFace() {
        return (_jsxs("div", { className: "react-clock__face", children: [renderMinuteMarksFn(), renderHourMarksFn(), renderNumbersFn()] }));
    }
    function renderHourHandFn() {
        var angle = value
            ? getHours(value) * 30 +
                getMinutes(value) / 2 +
                getSeconds(value) / 120 +
                (useMillisecondPrecision ? getMilliseconds(value) / 120000 : 0)
            : 0;
        return (_jsx(Hand, { angle: angle, length: hourHandLength, name: "hour", oppositeLength: hourHandOppositeLength, width: hourHandWidth }));
    }
    function renderMinuteHandFn() {
        if (!renderMinuteHand) {
            return null;
        }
        var angle = value
            ? getHours(value) * 360 +
                getMinutes(value) * 6 +
                getSeconds(value) / 10 +
                (useMillisecondPrecision ? getMilliseconds(value) / 10000 : 0)
            : 0;
        return (_jsx(Hand, { angle: angle, length: minuteHandLength, name: "minute", oppositeLength: minuteHandOppositeLength, width: minuteHandWidth }));
    }
    function renderSecondHandFn() {
        if (!renderSecondHand) {
            return null;
        }
        var angle = value
            ? getMinutes(value) * 360 +
                getSeconds(value) * 6 +
                (useMillisecondPrecision ? getMilliseconds(value) * 0.006 : 0)
            : 0;
        return (_jsx(Hand, { angle: angle, length: secondHandLength, name: "second", oppositeLength: secondHandOppositeLength, width: secondHandWidth }));
    }
    return (_jsxs("time", { className: clsx('react-clock', className), dateTime: value instanceof Date
            ? // Returns a string in the format "HH:MM" or "HH:MM:SS"
                value.toLocaleTimeString('en', {
                    hourCycle: 'h23',
                    hour: '2-digit',
                    minute: renderMinuteHand ? '2-digit' : undefined,
                    second: renderSecondHand ? '2-digit' : undefined,
                })
            : value || undefined, style: {
            width: size,
            height: size,
        }, children: [renderFace(), renderHourHandFn(), renderMinuteHandFn(), renderSecondHandFn()] }));
}