react-capture-events
Version:
A React library to capture and display events
332 lines (331 loc) • 13.6 kB
JavaScript
import { jsxs as l, Fragment as L, jsx as e } from "react/jsx-runtime";
import { forwardRef as T, createElement as f, lazy as _, useState as u, useRef as q, useCallback as M, useEffect as A, Suspense as X } from "react";
import J from "../Icon/index.js";
import '../../assets/index.css';/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const K = (n) => n.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), R = (...n) => n.filter((o, s, i) => !!o && i.indexOf(o) === s).join(" ");
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
var G = {
xmlns: "http://www.w3.org/2000/svg",
width: 24,
height: 24,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round"
};
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const H = T(
({
color: n = "currentColor",
size: o = 24,
strokeWidth: s = 2,
absoluteStrokeWidth: i,
className: d = "",
children: c,
iconNode: v,
...m
}, g) => f(
"svg",
{
ref: g,
...G,
width: o,
height: o,
stroke: n,
strokeWidth: i ? Number(s) * 24 / Number(o) : s,
className: R("lucide", d),
...m
},
[
...v.map(([k, r]) => f(k, r)),
...Array.isArray(c) ? c : [c]
]
)
);
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const h = (n, o) => {
const s = T(
({ className: i, ...d }, c) => f(H, {
ref: c,
iconNode: o,
className: R(`lucide-${K(n)}`, i),
...d
})
);
return s.displayName = `${n}`, s;
};
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const P = h("ChevronLeft", [
["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]
]);
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const U = h("ChevronRight", [
["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
]);
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Y = h("List", [
["line", { x1: "8", x2: "21", y1: "6", y2: "6", key: "7ey8pc" }],
["line", { x1: "8", x2: "21", y1: "12", y2: "12", key: "rjfblc" }],
["line", { x1: "8", x2: "21", y1: "18", y2: "18", key: "c3b1m8" }],
["line", { x1: "3", x2: "3.01", y1: "6", y2: "6", key: "1g7gq3" }],
["line", { x1: "3", x2: "3.01", y1: "12", y2: "12", key: "1pjlvk" }],
["line", { x1: "3", x2: "3.01", y1: "18", y2: "18", key: "28t2mc" }]
]);
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Z = h("RefreshCcw", [
["path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "14sxne" }],
["path", { d: "M3 3v5h5", key: "1xhq8a" }],
["path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16", key: "1hlbsb" }],
["path", { d: "M16 16h5v5", key: "ccwih5" }]
]);
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Q = h("Table", [
["path", { d: "M12 3v18", key: "108xh3" }],
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
["path", { d: "M3 9h18", key: "1pudct" }],
["path", { d: "M3 15h18", key: "5xshup" }]
]);
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const ee = h("Trash", [
["path", { d: "M3 6h18", key: "d0wm0j" }],
["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }]
]);
/**
* @license lucide-react v0.451.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const S = h("X", [
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
]), te = "data:image/svg+xml,%3csvg%20width='150'%20height='150'%20viewBox='0%200%20200%20200'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20class='react-capture-events-icon'%3e%3cstyle%3e%20/*%20Animação%20do%20círculo%20externo%20*/%20%3c!--%20.outer-circle%20{%20animation:%20rotate%2020s%20linear%20infinite;%20transform-origin:%20center;%20}%20--%3e%20@keyframes%20rotate%20{%20from%20{%20transform:%20rotate(0deg);%20}%20to%20{%20transform:%20rotate(360deg);%20}%20}%20/*%20Animação%20do%20átomo%20do%20React%20*/%20.react-atom%20{%20animation:%20pulse%204s%20ease-in-out%20infinite;%20}%20@keyframes%20pulse%20{%200%25,%20100%25%20{%20transform:%20translate(100px,%20100px)%20scale(1);%20}%2050%25%20{%20transform:%20translate(100px,%20100px)%20scale(1.02);%20}%20}%20/*%20Animação%20do%20alvo%20central%20*/%20.target-outer,%20.target-inner%20{%20transition:%20all%200.2s%20ease;%20}%20.react-capture-events-icon:hover%20.target-outer%20{%20r:%2035;%20}%20.react-capture-events-icon:hover%20.target-inner%20{%20r:%2015;%20}%20%3c/style%3e%3c!--%20Círculo%20externo%20(representando%20o%20evento)%20--%3e%3ccircle%20cx='100'%20cy='100'%20r='90'%20stroke='%2361DAFB'%20stroke-width='10'%20stroke-dasharray='15'%20class='outer-circle'/%3e%3c!--%20Átomo%20do%20React%20(versão%20simplificada)%20--%3e%3cg%20transform='translate(100%20100)'%20class='react-atom'%3e%3c!--%20Órbitas%20--%3e%3cellipse%20rx='45'%20ry='15'%20stroke='%2361DAFB'%20stroke-width='10'%20transform='rotate(0)'/%3e%3cellipse%20rx='45'%20ry='15'%20stroke='%2361DAFB'%20stroke-width='10'%20transform='rotate(60)'/%3e%3cellipse%20rx='45'%20ry='15'%20stroke='%2361DAFB'%20stroke-width='10'%20transform='rotate(120)'/%3e%3c!--%20Núcleo%20--%3e%3ccircle%20r='15'%20fill='%2361DAFB'/%3e%3c/g%3e%3c!--%20Alvo%20central%20(representando%20a%20captura)%20--%3e%3ccircle%20cx='100'%20cy='100'%20r='30'%20stroke='%23FF4154'%20stroke-width='10'%20fill='none'%20class='target-outer'/%3e%3ccircle%20cx='100'%20cy='100'%20r='10'%20fill='%23FF4154'%20class='target-inner'/%3e%3c/svg%3e", ae = _(async () => await import("../../main-OZZKbNmg.js").then((n) => n.m)), se = () => {
const [n, o] = u(!1), [s, i] = u({ x: 0, y: 0 }), [d, c] = u(!1), [v, m] = u(0), [g, k] = u("individual"), [r, p] = u([]), b = q(null), I = () => {
const t = {
eventName: "click",
eventData: {
target: "button"
},
timestamp: (/* @__PURE__ */ new Date()).toISOString()
};
p((a) => [...a, t]);
}, W = () => i({ x: 0, y: 0 }), x = () => {
o((t) => !t), W(), I();
}, D = (t) => {
t.target === b.current && c(!0);
}, w = (t) => {
d && i((a) => ({
x: a.x + t.movementX,
y: a.y - t.movementY
}));
}, E = () => {
c(!1);
}, F = async () => {
await C();
}, C = async () => {
navigator.serviceWorker && navigator.serviceWorker.controller && (navigator.serviceWorker.controller.postMessage({ type: "GET_EVENTS" }), navigator.serviceWorker.addEventListener("message", (t) => {
t.data && t.data.type === "EVENTS_LIST" && p(t.data.events);
}));
}, V = M(async () => {
if (navigator.serviceWorker && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage({ type: "CLEAR_EVENTS" }), navigator.serviceWorker.controller.postMessage({ type: "CLEAR_EVENTS" });
const t = (a) => {
a.data && a.data.type === "EVENTS_CLEARED" && (p([]), navigator.serviceWorker.removeEventListener("message", t));
};
navigator.serviceWorker.addEventListener("message", t);
}
}, [p]);
A(() => (document.addEventListener("mousemove", w), document.addEventListener("mouseup", E), () => {
document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", E);
}), [d]), A(() => {
C();
}, [r]);
const j = () => {
m((t) => (t + 1) % r.length);
}, $ = () => {
m(
(t) => (t - 1 + r.length) % r.length
);
}, z = () => {
k(
(t) => t === "individual" ? "table" : "individual"
);
}, B = M(
() => /* @__PURE__ */ l(L, { children: [
/* @__PURE__ */ l("div", { className: "control-panel", "data-testid": "individual-view", children: [
/* @__PURE__ */ e(
"button",
{
className: "icon-button",
onClick: $,
"data-testid": "prev-button",
children: /* @__PURE__ */ e(P, { size: 16 })
}
),
r.length > 0 ? /* @__PURE__ */ l("span", { "data-testid": "event-counter", children: [
"Item ",
v + 1,
" of ",
r.length
] }) : /* @__PURE__ */ e("span", { "data-testid": "no-events", children: "No events yet" }),
/* @__PURE__ */ e(
"button",
{
className: "icon-button",
onClick: j,
"data-testid": "next-button",
children: /* @__PURE__ */ e(U, { size: 16 })
}
)
] }),
/* @__PURE__ */ e(X, { fallback: /* @__PURE__ */ e("div", { children: "Loading..." }), children: /* @__PURE__ */ e(ae, { src: r[v], theme: "monokai" }) })
] }),
[r, v]
), O = () => {
const t = Array.from(
new Set(r.flatMap((a) => Object.keys(a)))
);
return /* @__PURE__ */ l("table", { className: "table", "data-testid": "table-view", children: [
/* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: t.map((a) => /* @__PURE__ */ e("th", { children: a }, a)) }) }),
/* @__PURE__ */ e("tbody", { children: r.map((a, N) => /* @__PURE__ */ e("tr", { "data-testid": "count-tr", children: t.map((y) => /* @__PURE__ */ e("td", { "data-testid": "count-td", children: typeof a[y] == "object" ? JSON.stringify(a[y]) : String(a[y] || "") }, `${N}-${y}`)) }, N)) })
] });
};
return /* @__PURE__ */ l(L, { children: [
/* @__PURE__ */ e(
"button",
{
"data-event": "click",
"data-action": "toggle-debug-window",
"data-component": "button",
"data-testid": "toggle-button",
className: "toggle-button",
onClick: x,
children: n ? /* @__PURE__ */ e(S, { size: 24 }) : /* @__PURE__ */ e(J, { src: te, alt: "Logo", width: 48, height: 48 })
}
),
n && /* @__PURE__ */ l(
"div",
{
"data-testid": "debug-window",
className: "debug-window",
style: {
bottom: `calc(20px + ${s.y}px)`,
right: `calc(16px - ${s.x}px)`,
cursor: d ? "grabbing" : "auto"
},
children: [
/* @__PURE__ */ l(
"div",
{
className: "debug-header",
ref: b,
onMouseDown: D,
"data-testid": "debug-header",
children: [
/* @__PURE__ */ e("span", { className: "header-title", "data-testid": "header-title", children: "React Capture Events" }),
/* @__PURE__ */ l("div", { className: "header-actions", children: [
/* @__PURE__ */ e(
"button",
{
className: "icon-button",
onClick: V,
"data-testid": "clear-button",
children: /* @__PURE__ */ e(ee, { size: 16 })
}
),
/* @__PURE__ */ e(
"button",
{
className: "icon-button",
onClick: F,
"data-testid": "refresh-button",
children: /* @__PURE__ */ e(Z, { size: 16 })
}
),
/* @__PURE__ */ e(
"button",
{
className: "icon-button",
onClick: z,
"data-testid": "toggle-view-button",
"data-event": "click",
"data-action": "toggle-view",
"data-component": "button",
children: g === "individual" ? /* @__PURE__ */ e(Q, { size: 16 }) : /* @__PURE__ */ e(Y, { size: 16 })
}
),
/* @__PURE__ */ e(
"button",
{
className: "icon-button",
onClick: x,
"data-testid": "close-button",
children: /* @__PURE__ */ e(S, { size: 16 })
}
)
] })
]
}
),
/* @__PURE__ */ e("div", { className: "debug-content", "data-testid": "debug-content", children: g === "individual" ? B() : O() })
]
}
)
] });
};
export {
se as CapturedEventsList
};