react-clockify
Version:
A sleek, customizable, and mobile-friendly React time picker clock UI component
754 lines (751 loc) • 25.8 kB
JavaScript
import ke, { useState as re } from "react";
import Y from "prop-types";
import Ce from "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 pr() {
if (Oe) return L;
Oe = 1;
var F = ke, w = Symbol.for("react.element"), M = Symbol.for("react.fragment"), v = Object.prototype.hasOwnProperty, P = F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, _ = { key: !0, ref: !0, __self: !0, __source: !0 };
function C(x, h, O) {
var m, T = {}, j = null, k = null;
O !== void 0 && (j = "" + O), 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: P.current };
}
return L.Fragment = M, L.jsx = C, L.jsxs = C, 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 Se;
function hr() {
return Se || (Se = 1, process.env.NODE_ENV !== "production" && function() {
var F = ke, w = Symbol.for("react.element"), M = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), P = Symbol.for("react.strict_mode"), _ = Symbol.for("react.profiler"), C = Symbol.for("react.provider"), x = Symbol.for("react.context"), h = Symbol.for("react.forward_ref"), O = 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];
De("error", e, t);
}
}
function De(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 Fe = !1, Me = !1, $e = !1, Ne = !1, Ie = !1, ne;
ne = Symbol.for("react.module.reference");
function We(e) {
return !!(typeof e == "string" || typeof e == "function" || e === v || e === _ || Ie || e === P || e === O || e === m || Ne || e === k || Fe || Me || $e || typeof e == "object" && e !== null && (e.$$typeof === j || e.$$typeof === T || e.$$typeof === C || e.$$typeof === x || e.$$typeof === h || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === ne || e.getModuleId !== void 0));
}
function Ye(e, r, t) {
var n = e.displayName;
if (n)
return n;
var s = r.displayName || r.name || "";
return s !== "" ? t + "(" + s + ")" : t;
}
function ae(e) {
return e.displayName || "Context";
}
function S(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 P:
return "StrictMode";
case O:
return "Suspense";
case m:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case x:
var r = e;
return ae(r) + ".Consumer";
case C:
var t = e;
return ae(t._context) + ".Provider";
case h:
return Ye(e, e.render, "ForwardRef");
case T:
var n = e.displayName || null;
return n !== null ? n : S(e.type) || "Memo";
case j: {
var s = e, u = s._payload, i = s._init;
try {
return S(i(u));
} catch {
return null;
}
}
}
return null;
}
var A = Object.assign, I = 0, oe, ie, se, ue, le, ce, fe;
function de() {
}
de.__reactDisabledLog = !0;
function Le() {
{
if (I === 0) {
oe = console.log, ie = console.info, se = console.warn, ue = console.error, le = console.group, ce = console.groupCollapsed, fe = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: de,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
I++;
}
}
function Ve() {
{
if (I--, I === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: A({}, e, {
value: oe
}),
info: A({}, e, {
value: ie
}),
warn: A({}, e, {
value: se
}),
error: A({}, e, {
value: ue
}),
group: A({}, e, {
value: le
}),
groupCollapsed: A({}, e, {
value: ce
}),
groupEnd: A({}, e, {
value: fe
})
});
}
I < 0 && f("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var K = E.ReactCurrentDispatcher, H;
function U(e, r, t) {
{
if (H === void 0)
try {
throw Error();
} catch (s) {
var n = s.stack.trim().match(/\n( *(at )?)/);
H = n && n[1] || "";
}
return `
` + H + e;
}
}
var z = !1, q;
{
var Ue = typeof WeakMap == "function" ? WeakMap : Map;
q = new Ue();
}
function ve(e, r) {
if (!e || z)
return "";
{
var t = q.get(e);
if (t !== void 0)
return t;
}
var n;
z = !0;
var s = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var u;
u = K.current, K.current = null, Le();
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" && q.set(e, R), R;
}
while (c >= 1 && d >= 0);
break;
}
}
} finally {
z = !1, K.current = u, Ve(), Error.prepareStackTrace = s;
}
var N = e ? e.displayName || e.name : "", D = N ? U(N) : "";
return typeof e == "function" && q.set(e, D), D;
}
function qe(e, r, t) {
return ve(e, !1);
}
function Be(e) {
var r = e.prototype;
return !!(r && r.isReactComponent);
}
function B(e, r, t) {
if (e == null)
return "";
if (typeof e == "function")
return ve(e, Be(e));
if (typeof e == "string")
return U(e);
switch (e) {
case O:
return U("Suspense");
case m:
return U("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case h:
return qe(e.render);
case T:
return B(e.type, r, t);
case j: {
var n = e, s = n._payload, u = n._init;
try {
return B(u(s), r, t);
} catch {
}
}
}
return "";
}
var W = Object.prototype.hasOwnProperty, pe = {}, he = E.ReactDebugCurrentFrame;
function J(e) {
if (e) {
var r = e._owner, t = B(e.type, e._source, r ? r.type : null);
he.setExtraStackFrame(t);
} else
he.setExtraStackFrame(null);
}
function Je(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) && (J(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), J(null)), o instanceof Error && !(o.message in pe) && (pe[o.message] = !0, J(s), f("Failed %s type: %s", t, o.message), J(null));
}
}
}
var Ke = Array.isArray;
function G(e) {
return Ke(e);
}
function He(e) {
{
var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t;
}
}
function ze(e) {
try {
return me(e), !1;
} catch {
return !0;
}
}
function me(e) {
return "" + e;
}
function ge(e) {
if (ze(e))
return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", He(e)), me(e);
}
var ye = E.ReactCurrentOwner, Ge = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, be, _e;
function Xe(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 Ze(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 Qe(e, r) {
typeof e.ref == "string" && ye.current;
}
function er(e, r) {
{
var t = function() {
be || (be = !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 rr(e, r) {
{
var t = function() {
_e || (_e = !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 tr = function(e, r, t, n, s, u, i) {
var o = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: w,
// Built-in properties that belong on the element
type: e,
key: r,
ref: t,
props: i,
// Record the component responsible for creating this element.
_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 nr(e, r, t, n, s) {
{
var u, i = {}, o = null, g = null;
t !== void 0 && (ge(t), o = "" + t), Ze(r) && (ge(r.key), o = "" + r.key), Xe(r) && (g = r.ref, Qe(r, s));
for (u in r)
W.call(r, u) && !Ge.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 && er(i, d), g && rr(i, d);
}
return tr(e, o, g, s, n, ye.current, i);
}
}
var X = E.ReactCurrentOwner, Ee = E.ReactDebugCurrentFrame;
function $(e) {
if (e) {
var r = e._owner, t = B(e.type, e._source, r ? r.type : null);
Ee.setExtraStackFrame(t);
} else
Ee.setExtraStackFrame(null);
}
var Z;
Z = !1;
function Q(e) {
return typeof e == "object" && e !== null && e.$$typeof === w;
}
function Re() {
{
if (X.current) {
var e = S(X.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function ar(e) {
return "";
}
var xe = {};
function or(e) {
{
var r = Re();
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 Te(e, r) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var t = or(r);
if (xe[t])
return;
xe[t] = !0;
var n = "";
e && e._owner && e._owner !== X.current && (n = " It was passed a child from " + S(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 we(e, r) {
{
if (typeof e != "object")
return;
if (G(e))
for (var t = 0; t < e.length; t++) {
var n = e[t];
Q(n) && Te(n, r);
}
else if (Q(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; )
Q(i.value) && Te(i.value, r);
}
}
}
function ir(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 || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
r.$$typeof === T))
t = r.propTypes;
else
return;
if (t) {
var n = S(r);
Je(t, e.props, "prop", n, e);
} else if (r.PropTypes !== void 0 && !Z) {
Z = !0;
var s = S(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 sr(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 je = {};
function Pe(e, r, t, n, s, u) {
{
var i = We(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 = ar();
g ? o += g : o += Re();
var c;
e === null ? c = "null" : G(e) ? c = "array" : e !== void 0 && e.$$typeof === w ? (c = "<" + (S(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 = nr(e, r, t, s, u);
if (d == null)
return d;
if (i) {
var R = r.children;
if (R !== void 0)
if (n)
if (G(R)) {
for (var N = 0; N < R.length; N++)
we(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
we(R, e);
}
if (W.call(r, "key")) {
var D = S(e), y = Object.keys(r).filter(function(vr) {
return vr !== "key";
}), ee = y.length > 0 ? "{key: someKey, " + y.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!je[D + ee]) {
var dr = 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} />`, ee, D, dr, D), je[D + ee] = !0;
}
}
return e === v ? sr(d) : ir(d), d;
}
}
function ur(e, r, t) {
return Pe(e, r, t, !0);
}
function lr(e, r, t) {
return Pe(e, r, t, !1);
}
var cr = lr, fr = ur;
V.Fragment = v, V.jsx = cr, V.jsxs = fr;
}()), V;
}
process.env.NODE_ENV === "production" ? te.exports = pr() : te.exports = hr();
var p = te.exports;
const Ae = ({ initialTime: F, onTimeChange: w, onClose: M }) => {
const [v, P] = re(
F ? Ce(F) : Ce()
), [_, C] = re("hour"), [x, h] = re(v.format("A")), O = (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);
P(b), C("minute"), w(b.toDate());
}, T = (a) => {
const l = v.minute(a);
P(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);
P(E), w(E.toDate());
}, k = (a) => {
C(a);
};
return /* @__PURE__ */ p.jsx("div", { className: "time-picker-container flex items-center justify-center", children: /* @__PURE__ */ p.jsxs("div", { className: "bg-white rounded-2xl shadow-xl w-80 relative", children: [
/* @__PURE__ */ p.jsxs("div", { className: "bg-orange-500 text-white px-4 py-3 flex justify-between items-center rounded-t-2xl", children: [
/* @__PURE__ */ p.jsxs("div", { className: "text-3xl font-mono", children: [
/* @__PURE__ */ p.jsx(
"span",
{
className: `cursor-pointer ${_ === "hour" ? "opacity-100" : "opacity-60"}`,
onClick: () => k("hour"),
children: v.format("h")
}
),
":",
/* @__PURE__ */ p.jsx(
"span",
{
className: `cursor-pointer ${_ === "minute" ? "opacity-100" : "opacity-60"}`,
onClick: () => k("minute"),
children: v.format("mm")
}
)
] }),
/* @__PURE__ */ p.jsx("div", { className: "flex gap-1", children: ["AM", "PM"].map((a) => /* @__PURE__ */ 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
)) })
] }),
/* @__PURE__ */ p.jsx("div", { className: "relative h-72", children: /* @__PURE__ */ p.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ p.jsxs("div", { className: "relative w-[220px] h-[220px]", children: [
/* @__PURE__ */ 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 /* @__PURE__ */ 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: /* @__PURE__ */ 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 } = O(l + 1, 12, 100), f = _ === "hour" ? v.hour() % 12 === a % 12 : Math.abs(v.minute() - a) < 3;
return /* @__PURE__ */ 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
);
})
] }) }) }),
/* @__PURE__ */ p.jsxs("div", { className: "flex justify-between px-4 py-3 border-t", children: [
/* @__PURE__ */ p.jsx(
"button",
{
onClick: M,
className: "uppercase text-gray-500 hover:text-gray-800",
children: "Cancel"
}
),
/* @__PURE__ */ p.jsx(
"button",
{
onClick: () => {
w(v.toDate()), M();
},
className: "uppercase text-orange-500 font-medium",
children: "OK"
}
)
] })
] }) });
};
Ae.propTypes = {
initialTime: Y.oneOfType([
Y.string,
Y.instanceOf(Date)
]),
onTimeChange: Y.func.isRequired,
onClose: Y.func.isRequired
};
Ae.defaultProps = {
initialTime: null
};
export {
Ae as ReactClockify
};
//# sourceMappingURL=index.es.js.map