@sinaasghari/react-analog-clock
Version:
A customizable analog clock component for React with timezone support and responsive scaling.
3 lines (2 loc) • 4.58 kB
JavaScript
"use strict";var r=require("react/jsx-runtime"),n=require("react"),e=function(){return e=Object.assign||function(r){for(var n,e=1,t=arguments.length;e<t;e++)for(var o in n=arguments[e])Object.prototype.hasOwnProperty.call(n,o)&&(r[o]=n[o]);return r},e.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;!function(r,n){void 0===n&&(n={});var e=n.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===e&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(document.createTextNode(r))}}(".clock {\r\n width: 300px;\r\n height: 300px;\r\n background: #ececec;\r\n border-radius: 50%;\r\n border: 14px solid #333;\r\n position: relative;\r\n margin: 0 auto;\r\n box-shadow: 0 2vw 4vw -1vw rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n.dot {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: #ccc;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n margin: auto;\r\n z-index: 10;\r\n box-shadow: 0 2px 4px -1px black;\r\n}\r\n\r\n.hour {\r\n position: absolute;\r\n font-weight: 700;\r\n font-size: 12px;\r\n}\r\n\r\n.twelve {\r\n top: 5%;\r\n left: 46%;\r\n}\r\n\r\n.one {\r\n top: 10%;\r\n right: 26%;\r\n}\r\n\r\n.eleven {\r\n top: 10%;\r\n left: 26%;\r\n}\r\n\r\n.two {\r\n top: 25%;\r\n right: 11%;\r\n}\r\n\r\n.three {\r\n right: 10px;\r\n top: 46%;\r\n}\r\n\r\n.four {\r\n top: 67%;\r\n right: 11%;\r\n}\r\n\r\n.five {\r\n right: 26%;\r\n top: 79%;\r\n}\r\n\r\n.six {\r\n bottom: 3%;\r\n left: 47.5%;\r\n}\r\n\r\n.seven {\r\n left: 26%;\r\n top: 79%;\r\n}\r\n\r\n.eight {\r\n top: 67%;\r\n left: 11%;\r\n}\r\n\r\n.nine {\r\n left: 10px;\r\n top: 46%;\r\n}\r\n\r\n.ten {\r\n top: 25%;\r\n left: 10%;\r\n}\r\n\r\n.hour-hand {\r\n position: absolute;\r\n z-index: 6;\r\n width: 2%;\r\n height: 30%;\r\n top: 22%;\r\n left: 50%;\r\n transform-origin: 50% 90%;\r\n margin-left: -1%;\r\n background-color: #333;\r\n border-top-left-radius: 50%;\r\n border-top-right-radius: 50%;\r\n}\r\n\r\n.minute-hand {\r\n position: absolute;\r\n z-index: 5;\r\n width: 1.5%;\r\n height: 45%;\r\n background-color: #666;\r\n top: 10.5%;\r\n left: 50%;\r\n transform-origin: 50% 90%;\r\n margin-left: -0.75%;\r\n border-top-left-radius: 50%;\r\n border-top-right-radius: 50%;\r\n}\r\n\r\n.second-hand {\r\n position: absolute;\r\n z-index: 7;\r\n width: 1%;\r\n height: 50%;\r\n background-color: red;\r\n top: 5%;\r\n left: 50%;\r\n transform-origin: 50% 90%;\r\n margin-left: -0.5%;\r\n border-top-left-radius: 50%;\r\n border-top-right-radius: 50%;\r\n}\r\n");module.exports=function(t){var o=t.size,i=void 0===o?300:o,s=t.showNumbers,a=void 0===s||s,d=t.centerDotColor,l=void 0===d?"#ccc":d,c=t.hourColor,h=void 0===c?"#333":c,u=t.minutesColor,p=void 0===u?"#666":u,f=t.secondColor,g=void 0===f?"red":f,m=t.style,v=void 0===m?{}:m,x=t.timezoneOffset,b=void 0===x?0:x,w=n.useState(new Date),j=w[0],N=w[1];return n.useEffect(function(){var r=setInterval(function(){var r=new Date,n=r.getTime()+6e4*r.getTimezoneOffset(),e=new Date(n+6e4*b);N(e)},1e3);return function(){return clearInterval(r)}},[b]),r.jsxs("div",{className:"clock",style:e({transform:"scale(".concat(i/200,")"),transformOrigin:"top left",width:"200px",height:"200px"},v),children:[r.jsx("div",{className:"dot",style:{backgroundColor:l}}),r.jsx("div",{className:"hour twelve",children:a?12:""}),r.jsx("div",{className:"hour one",children:a?1:""}),r.jsx("div",{className:"hour two",children:a?2:""}),r.jsx("div",{className:"hour three",children:a?3:""}),r.jsx("div",{className:"hour four",children:a?4:""}),r.jsx("div",{className:"hour five",children:a?5:""}),r.jsx("div",{className:"hour six",children:a?6:""}),r.jsx("div",{className:"hour seven",children:a?7:""}),r.jsx("div",{className:"hour eight",children:a?8:""}),r.jsx("div",{className:"hour nine",children:a?9:""}),r.jsx("div",{className:"hour ten",children:a?10:""}),r.jsx("div",{className:"hour eleven",children:a?11:""}),r.jsx("div",{className:"hour-hand",style:{transform:"rotateZ(".concat(j.getHours()%12*30+.5*j.getMinutes(),"deg)"),backgroundColor:h}}),r.jsx("div",{className:"minute-hand",style:{transform:"rotateZ(".concat(6*j.getMinutes()+.1*j.getSeconds(),"deg)"),backgroundColor:p}}),r.jsx("div",{className:"second-hand",style:{transform:"rotateZ(".concat(6*j.getSeconds(),"deg)"),backgroundColor:g}})]})};
//# sourceMappingURL=index.js.map