react-flip-clock-lib
Version:
A beautiful and customizable React flip clock component with TypeScript support
244 lines (226 loc) • 11 kB
JavaScript
;
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var useCheckMobile = function () {
var _a = react.useState({
isMobile: false,
isTablet: false,
isDesktop: false,
}), screenSize = _a[0], setScreenSize = _a[1];
// Check screen size on mount and resize
react.useEffect(function () {
var checkScreenSize = function () {
var width = window.innerWidth;
setScreenSize({
isMobile: width < 640, // sm breakpoint
isTablet: width >= 640 && width < 1024, // md breakpoint
isDesktop: width >= 1024, // lg breakpoint
});
};
checkScreenSize();
window.addEventListener("resize", checkScreenSize);
return function () { return window.removeEventListener("resize", checkScreenSize); };
}, []);
return screenSize;
};
var useFlipClockTime = function () {
var _a = react.useState(0), hours = _a[0], setHours = _a[1];
var _b = react.useState(0), minutes = _b[0], setMinutes = _b[1];
var _c = react.useState(0), seconds = _c[0], setSeconds = _c[1];
var updateTime = function () {
var time = new Date();
var newHours = time.getHours();
var newMinutes = time.getMinutes();
var newSeconds = time.getSeconds();
// on hour change, update hours
if (newHours !== hours) {
setHours(newHours);
}
// on minute change, update minutes
if (newMinutes !== minutes) {
setMinutes(newMinutes);
}
// on second change, update seconds
if (newSeconds !== seconds) {
setSeconds(newSeconds);
}
};
react.useEffect(function () {
var timerID = setInterval(updateTime, 50);
return function () {
clearInterval(timerID);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hours, minutes, seconds]);
return { hours: hours, minutes: minutes, seconds: seconds };
};
var useShuffleState = function (hours, minutes, seconds) {
var _a = react.useState(true), hoursShuffle = _a[0], setHoursShuffle = _a[1];
var _b = react.useState(true), minutesShuffle = _b[0], setMinutesShuffle = _b[1];
var _c = react.useState(true), secondsShuffle = _c[0], setSecondsShuffle = _c[1];
react.useEffect(function () {
setHoursShuffle(function (prev) { return !prev; });
}, [hours]);
react.useEffect(function () {
setMinutesShuffle(function (prev) { return !prev; });
}, [minutes]);
react.useEffect(function () {
setSecondsShuffle(function (prev) { return !prev; });
}, [seconds]);
return { hoursShuffle: hoursShuffle, minutesShuffle: minutesShuffle, secondsShuffle: secondsShuffle };
};
var WIDTH = "200px";
var HEIGHT = "60px";
var PADDING = "10px";
var BORDER_RADIUS = "8px";
var COLON_WIDTH = "20px";
var COLON_HEIGHT = "40px";
var COLON_FONT_SIZE = "24px";
var COLON_DOT_SIZE = "6px";
var UNIT_WIDTH = "40px";
var UNIT_HEIGHT = "50px";
var UNIT_BORDER_RADIUS = "12px";
var UNIT_MARGIN = "5px";
var DIGIT_FONT_SIZE = "32px";
var OPACITY = 0.9;
var FONT_FAMILY = "monospace";
// Color constants
var BACKGROUND_COLOR = "white";
var CARD_BACKGROUND_COLOR = "#1a1a1a";
var DIGIT_COLOR = "white";
var COLON_COLOR = "#333";
var BORDER_COLOR = "#333";
var SHADOW_COLOR = "rgba(0, 0, 0, 0.3)";
var defaultProps = {
width: WIDTH,
height: HEIGHT,
padding: PADDING,
borderRadius: BORDER_RADIUS,
colonWidth: COLON_WIDTH,
colonHeight: COLON_HEIGHT,
colonFontSize: COLON_FONT_SIZE,
colonDotSize: COLON_DOT_SIZE,
unitWidth: UNIT_WIDTH,
unitHeight: UNIT_HEIGHT,
unitBorderRadius: UNIT_BORDER_RADIUS,
unitMargin: UNIT_MARGIN,
digitFontSize: DIGIT_FONT_SIZE,
opacity: OPACITY,
fontFamily: FONT_FAMILY,
// Color props
backgroundColor: BACKGROUND_COLOR,
cardBackgroundColor: CARD_BACKGROUND_COLOR,
digitColor: DIGIT_COLOR,
colonColor: COLON_COLOR,
borderColor: BORDER_COLOR,
shadowColor: SHADOW_COLOR,
};
var AnimatedCard = function (_a) {
var animation = _a.animation, digit = _a.digit;
return (jsxRuntime.jsx("div", { className: "flipCard ".concat(animation), children: jsxRuntime.jsx("span", { children: digit }) }));
};
var StaticCard = function (_a) {
var position = _a.position, digit = _a.digit;
return (jsxRuntime.jsx("div", { className: position, children: jsxRuntime.jsx("span", { children: digit }) }));
};
var FlipUnitContainer = function (_a) {
var digit = _a.digit, shuffle = _a.shuffle, unit = _a.unit, _b = _a.className, className = _b === void 0 ? "" : _b;
// assign digit values
var currentDigit = digit;
var previousDigit = digit - 1;
// to prevent a negative value
if (unit !== "hours") {
previousDigit = previousDigit === -1 ? 59 : previousDigit;
}
else {
previousDigit = previousDigit === -1 ? 23 : previousDigit;
}
// add zero
if (currentDigit < 10) {
currentDigit = "0".concat(currentDigit);
}
if (previousDigit < 10) {
previousDigit = "0".concat(previousDigit);
}
// shuffle digits
var digit1 = shuffle ? previousDigit : currentDigit;
var digit2 = !shuffle ? previousDigit : currentDigit;
// shuffle animations
var animation1 = shuffle ? "fold" : "unfold";
var animation2 = !shuffle ? "fold" : "unfold";
return (jsxRuntime.jsxs("div", { className: "flipUnitContainer ".concat(className), children: [jsxRuntime.jsx(StaticCard, { position: "upperCard", digit: currentDigit }), jsxRuntime.jsx(StaticCard, { position: "lowerCard", digit: previousDigit }), jsxRuntime.jsx(AnimatedCard, { digit: digit1, animation: animation1 }), jsxRuntime.jsx(AnimatedCard, { digit: digit2, animation: animation2 })] }));
};
var AmPmSuffix = function (_a) {
var value = _a.value;
return (jsxRuntime.jsxs("div", { className: "flipUnitContainer am-pm-container", children: [jsxRuntime.jsx(StaticCard, { position: "upperCard", digit: value }), jsxRuntime.jsx(StaticCard, { position: "lowerCard", digit: value })] }));
};
var HOURS_IN_CIRCLE = 12;
var FlipClock = function (props) {
var _a = __assign(__assign({}, defaultProps), props), width = _a.width, height = _a.height, padding = _a.padding, borderRadius = _a.borderRadius, opacity = _a.opacity, colonWidth = _a.colonWidth, colonHeight = _a.colonHeight, colonFontSize = _a.colonFontSize, colonDotSize = _a.colonDotSize, unitWidth = _a.unitWidth, unitHeight = _a.unitHeight, unitBorderRadius = _a.unitBorderRadius, unitMargin = _a.unitMargin, digitFontSize = _a.digitFontSize, fontFamily = _a.fontFamily, backgroundColor = _a.backgroundColor, cardBackgroundColor = _a.cardBackgroundColor, digitColor = _a.digitColor, colonColor = _a.colonColor, borderColor = _a.borderColor, shadowColor = _a.shadowColor, _b = _a.showAmPm, showAmPm = _b === void 0 ? false : _b;
var _c = useFlipClockTime(), hours = _c.hours, minutes = _c.minutes, seconds = _c.seconds;
var _d = useShuffleState(hours, minutes, seconds), hoursShuffle = _d.hoursShuffle, minutesShuffle = _d.minutesShuffle, secondsShuffle = _d.secondsShuffle;
var isMobile = useCheckMobile().isMobile;
var amPm = hours >= HOURS_IN_CIRCLE ? 'PM' : 'AM';
var displayHours = showAmPm ? (hours % HOURS_IN_CIRCLE || HOURS_IN_CIRCLE) : hours;
var clockStyle = {
"--flip-clock-width": width,
"--flip-clock-height": height,
"--flip-clock-padding": padding,
"--flip-clock-border-radius": borderRadius,
"--flip-clock-colon-width": colonWidth,
"--flip-clock-colon-height": colonHeight,
"--flip-clock-colon-font-size": colonFontSize,
"--flip-clock-colon-dot-size": colonDotSize,
"--flip-clock-unit-width": unitWidth,
"--flip-clock-unit-height": unitHeight,
"--flip-clock-unit-border-radius": unitBorderRadius,
"--flip-clock-unit-margin": unitMargin,
"--flip-clock-digit-font-size": digitFontSize,
"--flip-clock-opacity": opacity,
"--flip-clock-font-family": fontFamily,
// Color CSS variables
"--flip-clock-background-color": backgroundColor,
"--flip-clock-card-background-color": cardBackgroundColor,
"--flip-clock-digit-color": digitColor,
"--flip-clock-colon-color": colonColor,
"--flip-clock-border-color": borderColor,
"--flip-clock-shadow-color": shadowColor,
};
return (jsxRuntime.jsx("div", { className: "flipClock", style: clockStyle, children: jsxRuntime.jsxs("div", { className: "time-units", children: [jsxRuntime.jsx(FlipUnitContainer, { unit: "hours", digit: displayHours, shuffle: hoursShuffle }), jsxRuntime.jsx("div", { className: "colon" }), jsxRuntime.jsx(FlipUnitContainer, { unit: "minutes", digit: minutes, shuffle: minutesShuffle }), !isMobile && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "colon" }), jsxRuntime.jsx(FlipUnitContainer, { unit: "seconds", digit: seconds, shuffle: secondsShuffle })] })), showAmPm && (jsxRuntime.jsx(AmPmSuffix, { value: amPm }))] }) }));
};
exports.AnimatedCard = AnimatedCard;
exports.FlipClock = FlipClock;
exports.FlipUnitContainer = FlipUnitContainer;
exports.StaticCard = StaticCard;
exports.defaultProps = defaultProps;
exports.useCheckMobile = useCheckMobile;
exports.useFlipClockTime = useFlipClockTime;
exports.useShuffleState = useShuffleState;
//# sourceMappingURL=index.js.map