react-clockify
Version:
A sleek, customizable, and mobile-friendly React time picker clock UI component
33 lines (30 loc) • 16.7 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const U=require("react"),Y=require("prop-types"),Ce=require("dayjs");var te={exports:{}},L={};/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var Oe;function vr(){if(Oe)return L;Oe=1;var F=U,w=Symbol.for("react.element"),M=Symbol.for("react.fragment"),v=Object.prototype.hasOwnProperty,S=F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,_={key:!0,ref:!0,__self:!0,__source:!0};function P(x,h,C){var m,T={},j=null,k=null;C!==void 0&&(j=""+C),h.key!==void 0&&(j=""+h.key),h.ref!==void 0&&(k=h.ref);for(m in h)v.call(h,m)&&!_.hasOwnProperty(m)&&(T[m]=h[m]);if(x&&x.defaultProps)for(m in h=x.defaultProps,h)T[m]===void 0&&(T[m]=h[m]);return{$$typeof:w,type:x,key:j,ref:k,props:T,_owner:S.current}}return L.Fragment=M,L.jsx=P,L.jsxs=P,L}var V={};/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var ke;function pr(){return ke||(ke=1,process.env.NODE_ENV!=="production"&&function(){var F=U,w=Symbol.for("react.element"),M=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),S=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),P=Symbol.for("react.provider"),x=Symbol.for("react.context"),h=Symbol.for("react.forward_ref"),C=Symbol.for("react.suspense"),m=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),k=Symbol.for("react.offscreen"),a=Symbol.iterator,l="@@iterator";function b(e){if(e===null||typeof e!="object")return null;var r=a&&e[a]||e[l];return typeof r=="function"?r:null}var E=F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function f(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];Ae("error",e,t)}}function Ae(e,r,t){{var n=E.ReactDebugCurrentFrame,s=n.getStackAddendum();s!==""&&(r+="%s",t=t.concat([s]));var u=t.map(function(i){return String(i)});u.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,u)}}var De=!1,Fe=!1,Me=!1,$e=!1,Ne=!1,ae;ae=Symbol.for("react.module.reference");function Ie(e){return!!(typeof e=="string"||typeof e=="function"||e===v||e===_||Ne||e===S||e===C||e===m||$e||e===k||De||Fe||Me||typeof e=="object"&&e!==null&&(e.$$typeof===j||e.$$typeof===T||e.$$typeof===P||e.$$typeof===x||e.$$typeof===h||e.$$typeof===ae||e.getModuleId!==void 0))}function We(e,r,t){var n=e.displayName;if(n)return n;var s=r.displayName||r.name||"";return s!==""?t+"("+s+")":t}function oe(e){return e.displayName||"Context"}function O(e){if(e==null)return null;if(typeof e.tag=="number"&&f("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case v:return"Fragment";case M:return"Portal";case _:return"Profiler";case S:return"StrictMode";case C:return"Suspense";case m:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case x:var r=e;return oe(r)+".Consumer";case P:var t=e;return oe(t._context)+".Provider";case h:return We(e,e.render,"ForwardRef");case T:var n=e.displayName||null;return n!==null?n:O(e.type)||"Memo";case j:{var s=e,u=s._payload,i=s._init;try{return O(i(u))}catch{return null}}}return null}var A=Object.assign,I=0,ie,se,ue,le,ce,fe,de;function ve(){}ve.__reactDisabledLog=!0;function Ye(){{if(I===0){ie=console.log,se=console.info,ue=console.warn,le=console.error,ce=console.group,fe=console.groupCollapsed,de=console.groupEnd;var e={configurable:!0,enumerable:!0,value:ve,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}I++}}function Le(){{if(I--,I===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:A({},e,{value:ie}),info:A({},e,{value:se}),warn:A({},e,{value:ue}),error:A({},e,{value:le}),group:A({},e,{value:ce}),groupCollapsed:A({},e,{value:fe}),groupEnd:A({},e,{value:de})})}I<0&&f("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var H=E.ReactCurrentDispatcher,z;function q(e,r,t){{if(z===void 0)try{throw Error()}catch(s){var n=s.stack.trim().match(/\n( *(at )?)/);z=n&&n[1]||""}return`
`+z+e}}var G=!1,B;{var Ve=typeof WeakMap=="function"?WeakMap:Map;B=new Ve}function pe(e,r){if(!e||G)return"";{var t=B.get(e);if(t!==void 0)return t}var n;G=!0;var s=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var u;u=H.current,H.current=null,Ye();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(i,[])}catch(y){n=y}Reflect.construct(e,[],i)}else{try{i.call()}catch(y){n=y}e.call(i.prototype)}}else{try{throw Error()}catch(y){n=y}e()}}catch(y){if(y&&n&&typeof y.stack=="string"){for(var o=y.stack.split(`
`),g=n.stack.split(`
`),c=o.length-1,d=g.length-1;c>=1&&d>=0&&o[c]!==g[d];)d--;for(;c>=1&&d>=0;c--,d--)if(o[c]!==g[d]){if(c!==1||d!==1)do if(c--,d--,d<0||o[c]!==g[d]){var R=`
`+o[c].replace(" at new "," at ");return e.displayName&&R.includes("<anonymous>")&&(R=R.replace("<anonymous>",e.displayName)),typeof e=="function"&&B.set(e,R),R}while(c>=1&&d>=0);break}}}finally{G=!1,H.current=u,Le(),Error.prepareStackTrace=s}var N=e?e.displayName||e.name:"",D=N?q(N):"";return typeof e=="function"&&B.set(e,D),D}function Ue(e,r,t){return pe(e,!1)}function qe(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function J(e,r,t){if(e==null)return"";if(typeof e=="function")return pe(e,qe(e));if(typeof e=="string")return q(e);switch(e){case C:return q("Suspense");case m:return q("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case h:return Ue(e.render);case T:return J(e.type,r,t);case j:{var n=e,s=n._payload,u=n._init;try{return J(u(s),r,t)}catch{}}}return""}var W=Object.prototype.hasOwnProperty,he={},me=E.ReactDebugCurrentFrame;function K(e){if(e){var r=e._owner,t=J(e.type,e._source,r?r.type:null);me.setExtraStackFrame(t)}else me.setExtraStackFrame(null)}function Be(e,r,t,n,s){{var u=Function.call.bind(W);for(var i in e)if(u(e,i)){var o=void 0;try{if(typeof e[i]!="function"){var g=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw g.name="Invariant Violation",g}o=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(c){o=c}o&&!(o instanceof Error)&&(K(s),f("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof o),K(null)),o instanceof Error&&!(o.message in he)&&(he[o.message]=!0,K(s),f("Failed %s type: %s",t,o.message),K(null))}}}var Je=Array.isArray;function X(e){return Je(e)}function Ke(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function He(e){try{return ge(e),!1}catch{return!0}}function ge(e){return""+e}function ye(e){if(He(e))return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Ke(e)),ge(e)}var be=E.ReactCurrentOwner,ze={key:!0,ref:!0,__self:!0,__source:!0},_e,Ee;function Ge(e){if(W.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function Xe(e){if(W.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function Ze(e,r){typeof e.ref=="string"&&be.current}function Qe(e,r){{var t=function(){_e||(_e=!0,f("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function er(e,r){{var t=function(){Ee||(Ee=!0,f("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var rr=function(e,r,t,n,s,u,i){var o={$$typeof:w,type:e,key:r,ref:t,props:i,_owner:u};return o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(o,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(o,"_source",{configurable:!1,enumerable:!1,writable:!1,value:s}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o};function tr(e,r,t,n,s){{var u,i={},o=null,g=null;t!==void 0&&(ye(t),o=""+t),Xe(r)&&(ye(r.key),o=""+r.key),Ge(r)&&(g=r.ref,Ze(r,s));for(u in r)W.call(r,u)&&!ze.hasOwnProperty(u)&&(i[u]=r[u]);if(e&&e.defaultProps){var c=e.defaultProps;for(u in c)i[u]===void 0&&(i[u]=c[u])}if(o||g){var d=typeof e=="function"?e.displayName||e.name||"Unknown":e;o&&Qe(i,d),g&&er(i,d)}return rr(e,o,g,s,n,be.current,i)}}var Z=E.ReactCurrentOwner,Re=E.ReactDebugCurrentFrame;function $(e){if(e){var r=e._owner,t=J(e.type,e._source,r?r.type:null);Re.setExtraStackFrame(t)}else Re.setExtraStackFrame(null)}var Q;Q=!1;function ee(e){return typeof e=="object"&&e!==null&&e.$$typeof===w}function xe(){{if(Z.current){var e=O(Z.current.type);if(e)return`
Check the render method of \``+e+"`."}return""}}function nr(e){return""}var Te={};function ar(e){{var r=xe();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
Check the top-level render call using <`+t+">.")}return r}}function we(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=ar(r);if(Te[t])return;Te[t]=!0;var n="";e&&e._owner&&e._owner!==Z.current&&(n=" It was passed a child from "+O(e._owner.type)+"."),$(e),f('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),$(null)}}function je(e,r){{if(typeof e!="object")return;if(X(e))for(var t=0;t<e.length;t++){var n=e[t];ee(n)&&we(n,r)}else if(ee(e))e._store&&(e._store.validated=!0);else if(e){var s=b(e);if(typeof s=="function"&&s!==e.entries)for(var u=s.call(e),i;!(i=u.next()).done;)ee(i.value)&&we(i.value,r)}}}function or(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===h||r.$$typeof===T))t=r.propTypes;else return;if(t){var n=O(r);Be(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!Q){Q=!0;var s=O(r);f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",s||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&f("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function ir(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){$(e),f("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),$(null);break}}e.ref!==null&&($(e),f("Invalid attribute `ref` supplied to `React.Fragment`."),$(null))}}var Se={};function Pe(e,r,t,n,s,u){{var i=Ie(e);if(!i){var o="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(o+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var g=nr();g?o+=g:o+=xe();var c;e===null?c="null":X(e)?c="array":e!==void 0&&e.$$typeof===w?(c="<"+(O(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):c=typeof e,f("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",c,o)}var d=tr(e,r,t,s,u);if(d==null)return d;if(i){var R=r.children;if(R!==void 0)if(n)if(X(R)){for(var N=0;N<R.length;N++)je(R[N],e);Object.freeze&&Object.freeze(R)}else f("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else je(R,e)}if(W.call(r,"key")){var D=O(e),y=Object.keys(r).filter(function(dr){return dr!=="key"}),re=y.length>0?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}";if(!Se[D+re]){var fr=y.length>0?"{"+y.join(": ..., ")+": ...}":"{}";f(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,re,D,fr,D),Se[D+re]=!0}}return e===v?ir(d):or(d),d}}function sr(e,r,t){return Pe(e,r,t,!0)}function ur(e,r,t){return Pe(e,r,t,!1)}var lr=ur,cr=sr;V.Fragment=v,V.jsx=lr,V.jsxs=cr}()),V}process.env.NODE_ENV==="production"?te.exports=vr():te.exports=pr();var p=te.exports;const ne=({initialTime:F,onTimeChange:w,onClose:M})=>{const[v,S]=U.useState(F?Ce(F):Ce()),[_,P]=U.useState("hour"),[x,h]=U.useState(v.format("A")),C=(a,l,b)=>{const f=(a*(360/l)-90)*Math.PI/180;return{x:Math.cos(f)*b,y:Math.sin(f)*b}},m=a=>{const l=x==="PM"&&a<12?a+12:x==="AM"&&a===12?0:a,b=v.hour(l);S(b),P("minute"),w(b.toDate())},T=a=>{const l=v.minute(a);S(l),w(l.toDate())},j=a=>{h(a);const l=v.hour(),b=a==="AM"&&l>=12?l-12:a==="PM"&&l<12?l+12:l,E=v.hour(b);S(E),w(E.toDate())},k=a=>{P(a)};return p.jsx("div",{className:"time-picker-container flex items-center justify-center",children:p.jsxs("div",{className:"bg-white rounded-2xl shadow-xl w-80 relative",children:[p.jsxs("div",{className:"bg-orange-500 text-white px-4 py-3 flex justify-between items-center rounded-t-2xl",children:[p.jsxs("div",{className:"text-3xl font-mono",children:[p.jsx("span",{className:`cursor-pointer ${_==="hour"?"opacity-100":"opacity-60"}`,onClick:()=>k("hour"),children:v.format("h")}),":",p.jsx("span",{className:`cursor-pointer ${_==="minute"?"opacity-100":"opacity-60"}`,onClick:()=>k("minute"),children:v.format("mm")})]}),p.jsx("div",{className:"flex gap-1",children:["AM","PM"].map(a=>p.jsx("button",{className:`text-sm px-2 py-1 rounded ${x===a?"bg-white text-orange-500 font-semibold":"text-white border border-white"}`,onClick:()=>j(a),children:a},a))})]}),p.jsx("div",{className:"relative h-72",children:p.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:p.jsxs("div",{className:"relative w-[220px] h-[220px]",children:[p.jsx("div",{className:"absolute top-1/2 left-1/2 w-3 h-3 bg-orange-500 rounded-full -translate-x-1/2 -translate-y-1/2 z-20"}),["hour","minute"].map(a=>{const l=a==="hour",b=l?v.hour()%12*30:v.minute()*6;return p.jsx("div",{className:`absolute top-1/2 left-1/2 bg-orange-500 rounded-full origin-left z-10 transition-transform ${l?"w-20 h-1.5":"w-24 h-1"} ${_!==a?"opacity-40":""}`,style:{transform:`rotate(${b-90}deg)`},children:p.jsx("div",{className:"absolute right-0 -top-1.5 w-3 h-3 rounded-full bg-orange-500"})},a)}),(_==="hour"?[...Array(12)].map((a,l)=>l+1):[...Array(12)].map((a,l)=>l*5)).map((a,l)=>{const{x:b,y:E}=C(l+1,12,100),f=_==="hour"?v.hour()%12===a%12:Math.abs(v.minute()-a)<3;return p.jsx("div",{onClick:()=>_==="hour"?m(a):T(a),className:`absolute w-8 h-8 text-center leading-8 text-sm rounded-full cursor-pointer transition
${f?"bg-orange-500 text-white":"hover:text-orange-500"}`,style:{top:`calc(50% + ${E}px - 16px)`,left:`calc(50% + ${b}px - 16px)`},children:_==="minute"&&a===0?"00":a},a)})]})})}),p.jsxs("div",{className:"flex justify-between px-4 py-3 border-t",children:[p.jsx("button",{onClick:M,className:"uppercase text-gray-500 hover:text-gray-800",children:"Cancel"}),p.jsx("button",{onClick:()=>{w(v.toDate()),M()},className:"uppercase text-orange-500 font-medium",children:"OK"})]})]})})};ne.propTypes={initialTime:Y.oneOfType([Y.string,Y.instanceOf(Date)]),onTimeChange:Y.func.isRequired,onClose:Y.func.isRequired};ne.defaultProps={initialTime:null};exports.ReactClockify=ne;
//# sourceMappingURL=index.cjs.js.map