@knocklabs/react 0.2.27 → 0.2.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js +1 -1
- package/dist/cjs/modules/slack/components/SlackAuthButton/SlackAuthButton.js.map +1 -1
- package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs +23 -22
- package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map +1 -1
- package/dist/types/modules/slack/components/SlackAuthButton/SlackAuthButton.d.ts +1 -0
- package/dist/types/modules/slack/components/SlackAuthButton/SlackAuthButton.d.ts.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),u=require("@knocklabs/react-core");;/* empty css */const d=require("../SlackIcon/SlackIcon.js");;/* empty css */const S=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=S(_),w=t=>{const h=window.screenLeft??window.screenX,n=window.screenTop??window.screenY,a=window.innerWidth??document.documentElement.clientWidth??screen.width,o=window.innerHeight??document.documentElement.clientHeight??screen.height,c=a/2-600/2+h,l=`width=600,height=800,top=${o/2-800/2+n},left=${c}`;window.open(t,"Slack OAuth",l)},L=({slackClientId:t,redirectUrl:k,onAuthenticationComplete:s,additionalScopes:h})=>{const{t:n}=u.useTranslations(),a=u.useKnockClient(),{setConnectionStatus:o,connectionStatus:c,setActionLabel:r,actionLabel:l,errorLabel:g}=u.useKnockSlackClient(),{buildSlackAuthUrl:f,disconnectFromSlack:p}=u.useSlackAuth(t,k,h);_.useEffect(()=>{const m=i=>{if(i.origin===a.host)try{i.data==="authComplete"&&o("connected"),i.data==="authFailed"&&o("error"),s&&s(i.data)}catch{o("error")}};return window.addEventListener("message",m,!1),()=>{window.removeEventListener("message",m)}},[a.host,s,o]);const b=n("slackDisconnect")||null,E=n("slackReconnect")||null;return c==="connecting"||c==="disconnecting"?e.default.createElement("div",{className:"rsk-connect__button rsk-connect__button--loading"},e.default.createElement(d.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n(c==="connecting"?"slackConnecting":"slackDisconnecting"))):c==="error"?e.default.createElement("button",{onClick:()=>w(f()),className:"rsk-connect__button rsk-connect__button--error",onMouseEnter:()=>r(E),onMouseLeave:()=>r(null)},e.default.createElement(d.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--error"},l||g||n("slackError"))):c==="disconnected"?e.default.createElement("button",{onClick:()=>w(f()),className:"rsk-connect__button rsk-connect__button--disconnected"},e.default.createElement(d.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n("slackConnect"))):e.default.createElement("button",{onClick:p,className:"rsk-connect__button rsk-connect__button--connected",onMouseEnter:()=>r(b),onMouseLeave:()=>r(null)},e.default.createElement(d.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--connected"},l||n("slackConnected")))};exports.SlackAuthButton=L;
|
|
2
2
|
//# sourceMappingURL=SlackAuthButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlackAuthButton.js","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\n slackClientId: string;\n redirectUrl?: string;\n onAuthenticationComplete?: (authenticationResp: string) => void;\n}\n\nconst openSlackOauthPopup = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n}) => {\n const { t } = useTranslations();\n const knock = useKnockClient();\n\n const {\n setConnectionStatus,\n connectionStatus,\n setActionLabel,\n actionLabel,\n errorLabel,\n } = useKnockSlackClient();\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n );\n\n useEffect(() => {\n const receiveMessage = (event: MessageEvent) => {\n if (event.origin !== knock.host) {\n return;\n }\n\n try {\n if (event.data === \"authComplete\") {\n setConnectionStatus(\"connected\");\n }\n\n if (event.data === \"authFailed\") {\n setConnectionStatus(\"error\");\n }\n\n if (onAuthenticationComplete) {\n onAuthenticationComplete(event.data);\n }\n } catch (error) {\n setConnectionStatus(\"error\");\n }\n };\n\n window.addEventListener(\"message\", receiveMessage, false);\n\n // Cleanup the event listener when the component unmounts\n return () => {\n window.removeEventListener(\"message\", receiveMessage);\n };\n }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n const disconnectLabel = t(\"slackDisconnect\") || null;\n const reconnectLabel = t(\"slackReconnect\") || null;\n\n // Loading states\n if (\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\"\n ) {\n return (\n <div className=\"rsk-connect__button rsk-connect__button--loading\">\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>\n {connectionStatus === \"connecting\"\n ? t(\"slackConnecting\")\n : t(\"slackDisconnecting\")}\n </span>\n </div>\n );\n }\n\n // Error state\n if (connectionStatus === \"error\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--error\"\n onMouseEnter={() => setActionLabel(reconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--error\">\n {actionLabel || errorLabel || t(\"slackError\")}\n </span>\n </button>\n );\n }\n\n // Disconnected state\n if (connectionStatus === \"disconnected\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--disconnected\"\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>{t(\"slackConnect\")}</span>\n </button>\n );\n }\n\n // Connected state\n return (\n <button\n onClick={disconnectFromSlack}\n className=\"rsk-connect__button rsk-connect__button--connected\"\n onMouseEnter={() => setActionLabel(disconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--connected\">\n {actionLabel || t(\"slackConnected\")}\n </span>\n </button>\n );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SlackAuthButton.js","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\n slackClientId: string;\n redirectUrl?: string;\n onAuthenticationComplete?: (authenticationResp: string) => void;\n additionalScopes?: string[];\n}\n\nconst openSlackOauthPopup = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n additionalScopes,\n}) => {\n const { t } = useTranslations();\n const knock = useKnockClient();\n\n const {\n setConnectionStatus,\n connectionStatus,\n setActionLabel,\n actionLabel,\n errorLabel,\n } = useKnockSlackClient();\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n additionalScopes,\n );\n\n useEffect(() => {\n const receiveMessage = (event: MessageEvent) => {\n if (event.origin !== knock.host) {\n return;\n }\n\n try {\n if (event.data === \"authComplete\") {\n setConnectionStatus(\"connected\");\n }\n\n if (event.data === \"authFailed\") {\n setConnectionStatus(\"error\");\n }\n\n if (onAuthenticationComplete) {\n onAuthenticationComplete(event.data);\n }\n } catch (error) {\n setConnectionStatus(\"error\");\n }\n };\n\n window.addEventListener(\"message\", receiveMessage, false);\n\n // Cleanup the event listener when the component unmounts\n return () => {\n window.removeEventListener(\"message\", receiveMessage);\n };\n }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n const disconnectLabel = t(\"slackDisconnect\") || null;\n const reconnectLabel = t(\"slackReconnect\") || null;\n\n // Loading states\n if (\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\"\n ) {\n return (\n <div className=\"rsk-connect__button rsk-connect__button--loading\">\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>\n {connectionStatus === \"connecting\"\n ? t(\"slackConnecting\")\n : t(\"slackDisconnecting\")}\n </span>\n </div>\n );\n }\n\n // Error state\n if (connectionStatus === \"error\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--error\"\n onMouseEnter={() => setActionLabel(reconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--error\">\n {actionLabel || errorLabel || t(\"slackError\")}\n </span>\n </button>\n );\n }\n\n // Disconnected state\n if (connectionStatus === \"disconnected\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--disconnected\"\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>{t(\"slackConnect\")}</span>\n </button>\n );\n }\n\n // Connected state\n return (\n <button\n onClick={disconnectFromSlack}\n className=\"rsk-connect__button rsk-connect__button--connected\"\n onMouseEnter={() => setActionLabel(disconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--connected\">\n {actionLabel || t(\"slackConnected\")}\n </span>\n </button>\n );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":"uTAqBMA,EAAuBC,GAAgB,CAIrCC,MAAAA,EAAaC,OAAOD,YAAcC,OAAOC,QACzCC,EAAYF,OAAOE,WAAaF,OAAOG,QAEvCC,EACJJ,OAAOI,YAAcC,SAASC,gBAAgBC,aAAeC,OAAOC,MAChEC,EACJV,OAAOU,aACPL,SAASC,gBAAgBK,cACzBH,OAAOI,OAEHC,EAAOT,EAAa,EAAIK,IAAQ,EAAIV,EAIpCe,EAAW,4BAHLJ,EAAc,EAAIE,IAAS,EAAIV,CAGgB,SAASW,CAAI,GAEjEE,OAAAA,KAAKjB,EAAK,cAAegB,CAAQ,CAC1C,EAEaE,EAA2DA,CAAC,CACvEC,cAAAA,EACAC,YAAAA,EACAC,yBAAAA,EACAC,iBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,EAAgB,gBAAA,EACxBC,EAAQC,EAAAA,iBAER,CACJC,oBAAAA,EACAC,iBAAAA,EACAC,eAAAA,EACAC,YAAAA,EACAC,WAAAA,GACEC,EAAoB,oBAAA,EAElB,CAAEC,kBAAAA,EAAmBC,oBAAAA,CAAwBC,EAAAA,eACjDhB,EACAC,EACAE,CACF,EAEAc,EAAAA,UAAU,IAAM,CACRC,MAAAA,EAAkBC,GAAwB,CAC1CA,GAAAA,EAAMC,SAAWd,EAAMe,KAIvB,GAAA,CACEF,EAAMG,OAAS,gBACjBd,EAAoB,WAAW,EAG7BW,EAAMG,OAAS,cACjBd,EAAoB,OAAO,EAGzBN,GACFA,EAAyBiB,EAAMG,IAAI,OAEvB,CACdd,EAAoB,OAAO,CAC7B,CAAA,EAGKe,cAAAA,iBAAiB,UAAWL,EAAgB,EAAK,EAGjD,IAAM,CACJM,OAAAA,oBAAoB,UAAWN,CAAc,CAAA,GAErD,CAACZ,EAAMe,KAAMnB,EAA0BM,CAAmB,CAAC,EAExDiB,MAAAA,EAAkBrB,EAAE,iBAAiB,GAAK,KAC1CsB,EAAiBtB,EAAE,gBAAgB,GAAK,KAI5CK,OAAAA,IAAqB,cACrBA,IAAqB,gBAGnBkB,EAAA,QAAA,cAAC,OAAI,UAAU,kDAAA,0BACZC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAAM,CAAA,EACpCD,EAAAA,QAAA,cAAA,OAAA,KAEKvB,EADHK,IAAqB,aAChB,kBACA,oBADiB,CAEzB,CACF,EAKAA,IAAqB,gCAEpB,SACC,CAAA,QAAS,IAAM7B,EAAoBkC,GAAmB,EACtD,UAAU,iDACV,aAAc,IAAMJ,EAAegB,CAAc,EACjD,aAAc,IAAMhB,EAAe,IAAI,CAAA,0BAEtCkB,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,oCACbhB,GAAeC,GAAcR,EAAE,YAAY,CAC9C,CACF,EAKAK,IAAqB,eAErBkB,EAAA,QAAA,cAAC,UACC,QAAS,IAAM/C,EAAoBkC,EAAkB,CAAC,EACtD,UAAU,uDAEV,EAAAa,EAAA,QAAA,cAACC,aAAU,OAAO,OAAO,MAAM,MAAM,CAAA,0BACpC,OAAMxB,KAAAA,EAAE,cAAc,CAAE,CAC3B,EAMDuB,EAAAA,QAAA,cAAA,SAAA,CACC,QAASZ,EACT,UAAU,qDACV,aAAc,IAAML,EAAee,CAAe,EAClD,aAAc,IAAMf,EAAe,IAAI,CAEvC,EAAAiB,EAAA,QAAA,cAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,OAAM,EACrCD,UAAA,cAAC,OAAK,CAAA,UAAU,sCACbhB,EAAAA,GAAeP,EAAE,gBAAgB,CACpC,CACF,CAEJ"}
|
|
@@ -1,33 +1,34 @@
|
|
|
1
|
-
import e, { useEffect as
|
|
2
|
-
import { useTranslations as
|
|
1
|
+
import e, { useEffect as b } from "react";
|
|
2
|
+
import { useTranslations as f, useKnockClient as x, useKnockSlackClient as L, useSlackAuth as S } from "@knocklabs/react-core";
|
|
3
3
|
/* empty css */
|
|
4
|
-
import { SlackIcon as
|
|
4
|
+
import { SlackIcon as l } from "../SlackIcon/SlackIcon.mjs";
|
|
5
5
|
/* empty css */
|
|
6
|
-
const w = (
|
|
7
|
-
const
|
|
8
|
-
window.open(
|
|
9
|
-
},
|
|
10
|
-
slackClientId:
|
|
6
|
+
const w = (u) => {
|
|
7
|
+
const d = window.screenLeft ?? window.screenX, t = window.screenTop ?? window.screenY, r = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width, c = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height, n = r / 2 - 600 / 2 + d, i = `width=600,height=800,top=${c / 2 - 800 / 2 + t},left=${n}`;
|
|
8
|
+
window.open(u, "Slack OAuth", i);
|
|
9
|
+
}, H = ({
|
|
10
|
+
slackClientId: u,
|
|
11
11
|
redirectUrl: h,
|
|
12
|
-
onAuthenticationComplete: s
|
|
12
|
+
onAuthenticationComplete: s,
|
|
13
|
+
additionalScopes: d
|
|
13
14
|
}) => {
|
|
14
15
|
const {
|
|
15
16
|
t
|
|
16
|
-
} =
|
|
17
|
+
} = f(), r = x(), {
|
|
17
18
|
setConnectionStatus: c,
|
|
18
19
|
connectionStatus: n,
|
|
19
20
|
setActionLabel: o,
|
|
20
|
-
actionLabel:
|
|
21
|
-
errorLabel:
|
|
22
|
-
} =
|
|
21
|
+
actionLabel: i,
|
|
22
|
+
errorLabel: p
|
|
23
|
+
} = L(), {
|
|
23
24
|
buildSlackAuthUrl: m,
|
|
24
|
-
disconnectFromSlack:
|
|
25
|
-
} =
|
|
26
|
-
|
|
27
|
-
const k = (
|
|
28
|
-
if (
|
|
25
|
+
disconnectFromSlack: _
|
|
26
|
+
} = S(u, h, d);
|
|
27
|
+
b(() => {
|
|
28
|
+
const k = (a) => {
|
|
29
|
+
if (a.origin === r.host)
|
|
29
30
|
try {
|
|
30
|
-
|
|
31
|
+
a.data === "authComplete" && c("connected"), a.data === "authFailed" && c("error"), s && s(a.data);
|
|
31
32
|
} catch {
|
|
32
33
|
c("error");
|
|
33
34
|
}
|
|
@@ -36,10 +37,10 @@ const w = (l) => {
|
|
|
36
37
|
window.removeEventListener("message", k);
|
|
37
38
|
};
|
|
38
39
|
}, [r.host, s, c]);
|
|
39
|
-
const
|
|
40
|
-
return n === "connecting" || n === "disconnecting" ? /* @__PURE__ */ e.createElement("div", { className: "rsk-connect__button rsk-connect__button--loading" }, /* @__PURE__ */ e.createElement(
|
|
40
|
+
const g = t("slackDisconnect") || null, E = t("slackReconnect") || null;
|
|
41
|
+
return n === "connecting" || n === "disconnecting" ? /* @__PURE__ */ e.createElement("div", { className: "rsk-connect__button rsk-connect__button--loading" }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t(n === "connecting" ? "slackConnecting" : "slackDisconnecting"))) : n === "error" ? /* @__PURE__ */ e.createElement("button", { onClick: () => w(m()), className: "rsk-connect__button rsk-connect__button--error", onMouseEnter: () => o(E), onMouseLeave: () => o(null) }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rsk-connect__button__text--error" }, i || p || t("slackError"))) : n === "disconnected" ? /* @__PURE__ */ e.createElement("button", { onClick: () => w(m()), className: "rsk-connect__button rsk-connect__button--disconnected" }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", null, t("slackConnect"))) : /* @__PURE__ */ e.createElement("button", { onClick: _, className: "rsk-connect__button rsk-connect__button--connected", onMouseEnter: () => o(g), onMouseLeave: () => o(null) }, /* @__PURE__ */ e.createElement(l, { height: "16px", width: "16px" }), /* @__PURE__ */ e.createElement("span", { className: "rsk-connect__button__text--connected" }, i || t("slackConnected")));
|
|
41
42
|
};
|
|
42
43
|
export {
|
|
43
|
-
|
|
44
|
+
H as SlackAuthButton
|
|
44
45
|
};
|
|
45
46
|
//# sourceMappingURL=SlackAuthButton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\n slackClientId: string;\n redirectUrl?: string;\n onAuthenticationComplete?: (authenticationResp: string) => void;\n}\n\nconst openSlackOauthPopup = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n}) => {\n const { t } = useTranslations();\n const knock = useKnockClient();\n\n const {\n setConnectionStatus,\n connectionStatus,\n setActionLabel,\n actionLabel,\n errorLabel,\n } = useKnockSlackClient();\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n );\n\n useEffect(() => {\n const receiveMessage = (event: MessageEvent) => {\n if (event.origin !== knock.host) {\n return;\n }\n\n try {\n if (event.data === \"authComplete\") {\n setConnectionStatus(\"connected\");\n }\n\n if (event.data === \"authFailed\") {\n setConnectionStatus(\"error\");\n }\n\n if (onAuthenticationComplete) {\n onAuthenticationComplete(event.data);\n }\n } catch (error) {\n setConnectionStatus(\"error\");\n }\n };\n\n window.addEventListener(\"message\", receiveMessage, false);\n\n // Cleanup the event listener when the component unmounts\n return () => {\n window.removeEventListener(\"message\", receiveMessage);\n };\n }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n const disconnectLabel = t(\"slackDisconnect\") || null;\n const reconnectLabel = t(\"slackReconnect\") || null;\n\n // Loading states\n if (\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\"\n ) {\n return (\n <div className=\"rsk-connect__button rsk-connect__button--loading\">\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>\n {connectionStatus === \"connecting\"\n ? t(\"slackConnecting\")\n : t(\"slackDisconnecting\")}\n </span>\n </div>\n );\n }\n\n // Error state\n if (connectionStatus === \"error\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--error\"\n onMouseEnter={() => setActionLabel(reconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--error\">\n {actionLabel || errorLabel || t(\"slackError\")}\n </span>\n </button>\n );\n }\n\n // Disconnected state\n if (connectionStatus === \"disconnected\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--disconnected\"\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>{t(\"slackConnect\")}</span>\n </button>\n );\n }\n\n // Connected state\n return (\n <button\n onClick={disconnectFromSlack}\n className=\"rsk-connect__button rsk-connect__button--connected\"\n onMouseEnter={() => setActionLabel(disconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--connected\">\n {actionLabel || t(\"slackConnected\")}\n </span>\n </button>\n );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent } from \"react\";\nimport { useEffect } from \"react\";\n\nimport \"../../theme.css\";\nimport { SlackIcon } from \"../SlackIcon\";\n\nimport \"./styles.css\";\n\nexport interface SlackAuthButtonProps {\n slackClientId: string;\n redirectUrl?: string;\n onAuthenticationComplete?: (authenticationResp: string) => void;\n additionalScopes?: string[];\n}\n\nconst openSlackOauthPopup = (url: string) => {\n const width = 600;\n const height = 800;\n // Calculate the position to center the window\n const screenLeft = window.screenLeft ?? window.screenX;\n const screenTop = window.screenTop ?? window.screenY;\n\n const innerWidth =\n window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;\n const innerHeight =\n window.innerHeight ??\n document.documentElement.clientHeight ??\n screen.height;\n\n const left = innerWidth / 2 - width / 2 + screenLeft;\n const top = innerHeight / 2 - height / 2 + screenTop;\n\n // Window features\n const features = `width=${width},height=${height},top=${top},left=${left}`;\n\n window.open(url, \"Slack OAuth\", features);\n};\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n additionalScopes,\n}) => {\n const { t } = useTranslations();\n const knock = useKnockClient();\n\n const {\n setConnectionStatus,\n connectionStatus,\n setActionLabel,\n actionLabel,\n errorLabel,\n } = useKnockSlackClient();\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n additionalScopes,\n );\n\n useEffect(() => {\n const receiveMessage = (event: MessageEvent) => {\n if (event.origin !== knock.host) {\n return;\n }\n\n try {\n if (event.data === \"authComplete\") {\n setConnectionStatus(\"connected\");\n }\n\n if (event.data === \"authFailed\") {\n setConnectionStatus(\"error\");\n }\n\n if (onAuthenticationComplete) {\n onAuthenticationComplete(event.data);\n }\n } catch (error) {\n setConnectionStatus(\"error\");\n }\n };\n\n window.addEventListener(\"message\", receiveMessage, false);\n\n // Cleanup the event listener when the component unmounts\n return () => {\n window.removeEventListener(\"message\", receiveMessage);\n };\n }, [knock.host, onAuthenticationComplete, setConnectionStatus]);\n\n const disconnectLabel = t(\"slackDisconnect\") || null;\n const reconnectLabel = t(\"slackReconnect\") || null;\n\n // Loading states\n if (\n connectionStatus === \"connecting\" ||\n connectionStatus === \"disconnecting\"\n ) {\n return (\n <div className=\"rsk-connect__button rsk-connect__button--loading\">\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>\n {connectionStatus === \"connecting\"\n ? t(\"slackConnecting\")\n : t(\"slackDisconnecting\")}\n </span>\n </div>\n );\n }\n\n // Error state\n if (connectionStatus === \"error\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--error\"\n onMouseEnter={() => setActionLabel(reconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--error\">\n {actionLabel || errorLabel || t(\"slackError\")}\n </span>\n </button>\n );\n }\n\n // Disconnected state\n if (connectionStatus === \"disconnected\") {\n return (\n <button\n onClick={() => openSlackOauthPopup(buildSlackAuthUrl())}\n className=\"rsk-connect__button rsk-connect__button--disconnected\"\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span>{t(\"slackConnect\")}</span>\n </button>\n );\n }\n\n // Connected state\n return (\n <button\n onClick={disconnectFromSlack}\n className=\"rsk-connect__button rsk-connect__button--connected\"\n onMouseEnter={() => setActionLabel(disconnectLabel)}\n onMouseLeave={() => setActionLabel(null)}\n >\n <SlackIcon height=\"16px\" width=\"16px\" />\n <span className=\"rsk-connect__button__text--connected\">\n {actionLabel || t(\"slackConnected\")}\n </span>\n </button>\n );\n};\n"],"names":["openSlackOauthPopup","url","screenLeft","window","screenX","screenTop","screenY","innerWidth","document","documentElement","clientWidth","screen","width","innerHeight","clientHeight","height","left","features","open","SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","useKnockSlackClient","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useEffect","receiveMessage","event","origin","host","data","addEventListener","removeEventListener","disconnectLabel","reconnectLabel","React","SlackIcon"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ export interface SlackAuthButtonProps {
|
|
|
4
4
|
slackClientId: string;
|
|
5
5
|
redirectUrl?: string;
|
|
6
6
|
onAuthenticationComplete?: (authenticationResp: string) => void;
|
|
7
|
+
additionalScopes?: string[];
|
|
7
8
|
}
|
|
8
9
|
export declare const SlackAuthButton: FunctionComponent<SlackAuthButtonProps>;
|
|
9
10
|
//# sourceMappingURL=SlackAuthButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlackAuthButton.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,iBAAiB,CAAC;AAGzB,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"SlackAuthButton.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,iBAAiB,CAAC;AAGzB,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAyBD,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAsHnE,CAAC"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@knocklabs/react",
|
|
3
3
|
"description": "A set of React components to build notification experiences powered by Knock",
|
|
4
4
|
"author": "@knocklabs",
|
|
5
|
-
"version": "0.2.
|
|
5
|
+
"version": "0.2.28",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/cjs/index.js",
|
|
8
8
|
"module": "dist/esm/index.mjs",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@knocklabs/client": "^0.10.13",
|
|
55
|
-
"@knocklabs/react-core": "^0.2.
|
|
55
|
+
"@knocklabs/react-core": "^0.2.25",
|
|
56
56
|
"@popperjs/core": "^2.11.8",
|
|
57
57
|
"@radix-ui/react-popover": "^1.0.7",
|
|
58
58
|
"@radix-ui/react-visually-hidden": "^1.0.3",
|
|
@@ -63,11 +63,11 @@
|
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@testing-library/react": "^14.2.0",
|
|
65
65
|
"@types/lodash.debounce": "^4.0.9",
|
|
66
|
-
"@types/react": "^18.
|
|
66
|
+
"@types/react": "^18.3.6",
|
|
67
67
|
"@types/react-dom": "^18.2.15",
|
|
68
68
|
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
|
69
|
-
"@typescript-eslint/parser": "^
|
|
70
|
-
"@vitejs/plugin-react": "^4.2
|
|
69
|
+
"@typescript-eslint/parser": "^8.8.0",
|
|
70
|
+
"@vitejs/plugin-react": "^4.3.2",
|
|
71
71
|
"babel-plugin-react-require": "^4.0.3",
|
|
72
72
|
"eslint": "^8.56.0",
|
|
73
73
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"react-dom": "^18.2.0",
|
|
78
78
|
"rimraf": "^6.0.1",
|
|
79
79
|
"rollup-plugin-execute": "^1.1.1",
|
|
80
|
-
"typescript": "^5.
|
|
80
|
+
"typescript": "^5.6.2",
|
|
81
81
|
"vite": "^5.0.0",
|
|
82
82
|
"vite-plugin-dts": "^3.6.3",
|
|
83
83
|
"vite-plugin-no-bundle": "^4.0.0",
|