@talkjs/react
Version:
Official TalkJS SDK for React
329 lines (328 loc) • 9.27 kB
JavaScript
"use client";
var $ = Object.defineProperty, z = Object.defineProperties;
var J = Object.getOwnPropertyDescriptors;
var C = Object.getOwnPropertySymbols;
var q = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
var D = (e, t, n) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, k = (e, t) => {
for (var n in t || (t = {}))
q.call(t, n) && D(e, n, t[n]);
if (C)
for (var n of C(t))
x.call(t, n) && D(e, n, t[n]);
return e;
}, U = (e, t) => z(e, J(t));
var A = (e, t) => {
var n = {};
for (var r in e)
q.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
if (e != null && C)
for (var r of C(e))
t.indexOf(r) < 0 && x.call(e, r) && (n[r] = e[r]);
return n;
};
import { jsx as c, jsxs as G, Fragment as H } from "react/jsx-runtime";
import { createContext as Q, useContext as V, useState as E, useEffect as h, useMemo as X, useRef as K } from "react";
import P from "talkjs";
const L = Q(
void 0
);
function M() {
const e = V(L);
return e != null && e.isAlive ? e : void 0;
}
function le() {
const e = M(), [t, n] = E();
return h(() => {
if (!e || !e.isAlive) {
n(void 0);
return;
}
const r = e.unreads.onChange((o) => {
n(o);
});
return () => r.unsubscribe();
}, [e]), t;
}
function S({ target: e, handlers: t }) {
return e != null && e.isAlive ? Object.keys(t).filter((r) => r.startsWith("on")).filter((r) => typeof t[r] == "function").map((r) => /* @__PURE__ */ c(
Y,
{
name: r,
handler: t[r],
target: e
},
r
)) : null;
}
function Y(e) {
const { handler: t } = e;
return h(() => {
var s, i;
if (!((s = e.target) != null && s.isAlive))
return;
const { name: n, target: r } = e.name === "onUnreadsChange" ? { name: "onChange", target: e.target.unreads } : { name: e.name, target: e.target };
if (typeof r[n] != "function") {
console.warn(
`[@talkjs/react] Trying to handle event ${n} which does not exist on ${(i = r == null ? void 0 : r.constructor) == null ? void 0 : i.name}. Did you make a typo?`
);
return;
}
const o = r[n](t);
return () => {
o.unsubscribe();
};
}, [e.target, e.name, t]), null;
}
function Z(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
var b = function e(t, n) {
if (t === n)
return !0;
if (t && n && typeof t == "object" && typeof n == "object") {
if (t.constructor !== n.constructor)
return !1;
var r, o, s;
if (Array.isArray(t)) {
if (r = t.length, r != n.length)
return !1;
for (o = r; o-- !== 0; )
if (!e(t[o], n[o]))
return !1;
return !0;
}
if (t.constructor === RegExp)
return t.source === n.source && t.flags === n.flags;
if (t.valueOf !== Object.prototype.valueOf)
return t.valueOf() === n.valueOf();
if (t.toString !== Object.prototype.toString)
return t.toString() === n.toString();
if (s = Object.keys(t), r = s.length, r !== Object.keys(n).length)
return !1;
for (o = r; o-- !== 0; )
if (!Object.prototype.hasOwnProperty.call(n, s[o]))
return !1;
for (o = r; o-- !== 0; ) {
var i = s[o];
if (!e(t[i], n[i]))
return !1;
}
return !0;
}
return t !== t && n !== n;
};
const ee = /* @__PURE__ */ Z(b);
function I(e) {
const t = K();
return (!t.current || !ee(e, t.current.val)) && (t.current = { val: e }), t.current.val;
}
function a(e, t, n) {
t = I(t), h(() => {
t !== void 0 && (e != null && e.isAlive) && e[n](t);
}, [n, e, t]);
}
function te(e, t, n) {
t = I(t), h(() => {
t !== void 0 && (e != null && e.isAlive) && e[n](...t);
}, [n, e, t]);
}
function N(e, t, n, r, o) {
const s = X(() => typeof n == "function" ? e != null && e.isAlive ? n(e) : void 0 : n != null ? n : r, [e, n, r]);
te(t, s !== void 0 ? [s, { asGuest: o }] : void 0, "select");
}
function W(e, t, n, r) {
const [o, s] = E();
return n = I(n), h(() => {
if (e != null && e.isAlive) {
const i = e[t](n);
return s(i), r && (r.current = i), () => {
i.destroy(), s(void 0);
};
} else
s(void 0), r && (r.current = void 0);
}, [e, t, n]), o;
}
function T(e, t) {
const [n, r] = E(!1);
return h(() => {
e != null && e.isAlive && e.mount(t).then(() => r(!0));
}, [e]), n;
}
function fe(e) {
const [t, n] = E(!1), [r, o] = E(), {
userId: s,
syncUser: i,
appId: d,
token: g,
tokenFetcher: y,
signature: m,
sessionRef: f,
desktopNotificationEnabled: p
} = e;
return h(() => {
P.ready.then(() => n(!0));
}, []), h(() => {
if (t) {
const O = typeof i == "function" ? i() : i != null ? i : new P.User(s), u = new P.Session({ appId: d, me: O, token: g, tokenFetcher: y, signature: m });
return o(u), f && (f.current = u), () => {
u.destroy(), o(void 0), f && (f.current = void 0);
};
}
}, [t, m, d, s, i, f]), a(
r,
p,
"setDesktopNotificationEnabled"
), /* @__PURE__ */ G(H, { children: [
/* @__PURE__ */ c(L.Provider, { value: r, children: e.children }),
/* @__PURE__ */ c(S, { target: r, handlers: e })
] });
}
const w = (() => {
const e = /* @__PURE__ */ new WeakMap();
let t = 0;
return function(r) {
return e.has(r) || e.set(r, ++t), e.get(r);
};
})();
function R(e, t) {
const n = {}, r = {};
for (const [o, s] of Object.entries(e))
o.startsWith(t) ? n[o] = s : r[o] = s;
return [n, r];
}
function _(e) {
const { box: t, loadingComponent: n, className: r, handlers: o } = e, s = K(null), i = T(t, s.current), d = i ? e.style : U(k({}, e.style), { display: "none" });
return /* @__PURE__ */ G(H, { children: [
!i && /* @__PURE__ */ c("div", { style: e.style, className: r, children: n }),
/* @__PURE__ */ c("div", { ref: s, style: d, className: r }),
/* @__PURE__ */ c(S, { target: t, handlers: o })
] });
}
function ae(e) {
const t = M();
if (t) {
const n = w(t);
return /* @__PURE__ */ c(ne, k({ session: t }, e), n);
} else
return /* @__PURE__ */ c("div", { style: e.style, className: e.className, children: e.loadingComponent });
}
function ne(e) {
const l = e, {
session: t,
conversationId: n,
syncConversation: r,
asGuest: o,
chatboxRef: s,
style: i,
className: d,
loadingComponent: g
} = l, y = A(l, [
"session",
"conversationId",
"syncConversation",
"asGuest",
"chatboxRef",
"style",
"className",
"loadingComponent"
]), [m, f] = R(y, "on"), F = f, { messageFilter: p, presence: O, highlightedWords: u } = F, j = A(F, ["messageFilter", "presence", "highlightedWords"]), v = W(t, "createChatbox", j, s);
return a(v, p, "setMessageFilter"), a(v, O, "setPresence"), a(v, u, "setHighlightedWords"), N(t, v, r, n, o), /* @__PURE__ */ c(
_,
{
box: v,
session: t,
className: d,
style: i,
loadingComponent: g,
handlers: m
}
);
}
function de(e) {
const t = M();
if (t) {
const n = w(t);
return /* @__PURE__ */ c(re, k({ session: t }, e), n);
} else
return /* @__PURE__ */ c("div", { style: e.style, className: e.className, children: e.loadingComponent });
}
function re(e) {
const F = e, {
session: t,
conversationId: n,
syncConversation: r,
asGuest: o,
inboxRef: s,
style: i,
className: d,
loadingComponent: g
} = F, y = A(F, [
"session",
"conversationId",
"syncConversation",
"asGuest",
"inboxRef",
"style",
"className",
"loadingComponent"
]), [m, f] = R(y, "on"), B = f, {
messageFilter: p,
feedFilter: O,
presence: u,
highlightedWords: j
} = B, v = A(B, [
"messageFilter",
"feedFilter",
"presence",
"highlightedWords"
]), l = W(t, "createInbox", v, s);
return a(l, p, "setMessageFilter"), a(l, O, "setFeedFilter"), a(l, u, "setPresence"), a(l, j, "setHighlightedWords"), N(t, l, r, n, o), /* @__PURE__ */ c(
_,
{
box: l,
session: t,
className: d,
style: i,
loadingComponent: g,
handlers: m
}
);
}
function ve(e) {
const t = M();
if (t) {
const n = w(t);
return /* @__PURE__ */ c(se, k({ session: t }, e), n);
}
return null;
}
function se(e) {
const v = e, {
session: t,
conversationId: n,
syncConversation: r,
asGuest: o,
show: s,
popupRef: i
} = v, d = A(v, [
"session",
"conversationId",
"syncConversation",
"asGuest",
"show",
"popupRef"
]), [g, y] = R(d, "on"), l = y, { messageFilter: m, presence: f, highlightedWords: p } = l, O = A(l, ["messageFilter", "presence", "highlightedWords"]), u = W(t, "createPopup", O, i);
a(u, m, "setMessageFilter"), a(u, f, "setPresence"), a(u, p, "setHighlightedWords"), N(t, u, r, n, o);
const j = T(u, { show: s != null ? s : !0 });
return h(() => {
s === void 0 || !j || (s ? u == null || u.show() : u == null || u.hide());
}, [s, j, u]), /* @__PURE__ */ c(S, { target: u, handlers: g });
}
export {
ae as Chatbox,
de as Inbox,
ve as Popup,
fe as Session,
M as useSession,
le as useUnreads
};