@knocklabs/react 0.11.14 → 0.11.15
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 +45 -44
- package/dist/esm/modules/slack/components/SlackAuthButton/SlackAuthButton.mjs.map +1 -1
- package/dist/types/modules/slack/components/SlackAuthButton/SlackAuthButton.d.ts.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),c=require("@knocklabs/react-core"),g=require("../../../core/utils.js");;/* empty css */const r=require("../SlackIcon/SlackIcon.js");;/* empty css */const w=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=w(d),A=({slackClientId:t,redirectUrl:S,onAuthenticationComplete:p,scopes:_,additionalScopes:h})=>{const{t:n}=c.useTranslations(),a=c.useKnockClient(),{setConnectionStatus:l,connectionStatus:o,setActionLabel:s,actionLabel:b,errorLabel:C,tenantId:f,knockSlackChannelId:i,popupWindowRef:u}=c.useKnockSlackClient(),E=d.useMemo(()=>({scopes:_,additionalScopes:h}),[_,h]),{buildSlackAuthUrl:m,disconnectFromSlack:x}=c.useSlackAuth(t,S,E);c.useAuthPostMessageListener({knockHost:a.host,popupWindowRef:u,setConnectionStatus:l,onAuthenticationComplete:p,nonceStorageKey:c.getSlackNonceStorageKey(i,a.userId)}),c.useAuthPolling({popupWindowRef:u,setConnectionStatus:l,onAuthenticationComplete:p,authCheckFn:d.useCallback(async()=>a.slack.authCheck({tenant:f,knockChannelId:i}),[a.slack,f,i])});const I=n("slackDisconnect")||null,L=n("slackReconnect")||null;return o==="connecting"||o==="disconnecting"?e.default.createElement("div",{className:"rsk-connect__button rsk-connect__button--loading"},e.default.createElement(r.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n(o==="connecting"?"slackConnecting":"slackDisconnecting"))):o==="error"?e.default.createElement("button",{onClick:()=>{const k=g.openPopupWindow(m());u.current=k,l("connecting")},className:"rsk-connect__button rsk-connect__button--error",onMouseEnter:()=>s(L),onMouseLeave:()=>s(null)},e.default.createElement(r.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--error"},b||C||n("slackError"))):o==="disconnected"?e.default.createElement("button",{onClick:()=>{const k=g.openPopupWindow(m());u.current=k,l("connecting")},className:"rsk-connect__button rsk-connect__button--disconnected"},e.default.createElement(r.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",null,n("slackConnect"))):e.default.createElement("button",{onClick:x,className:"rsk-connect__button rsk-connect__button--connected",onMouseEnter:()=>s(I),onMouseLeave:()=>s(null)},e.default.createElement(r.SlackIcon,{height:"16px",width:"16px"}),e.default.createElement("span",{className:"rsk-connect__button__text--connected"},b||n("slackConnected")))};exports.SlackAuthButton=A;
|
|
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 useAuthPolling,\n useAuthPostMessageListener,\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent, useCallback, useMemo } from \"react\";\n\nimport { openPopupWindow } from \"../../../core/utils\";\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 // When provided, the default scopes will be overridden with the provided scopes\n scopes?: string[];\n // Additional scopes to add to the default scopes\n additionalScopes?: string[];\n}\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n scopes,\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 tenantId,\n knockSlackChannelId,\n popupWindowRef,\n } = useKnockSlackClient();\n\n const useSlackAuthOptions = useMemo(\n () => ({\n scopes,\n additionalScopes,\n }),\n [scopes, additionalScopes],\n );\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n useSlackAuthOptions,\n );\n\n useAuthPostMessageListener({\n knockHost: knock.host,\n popupWindowRef,\n setConnectionStatus,\n onAuthenticationComplete,\n });\n\n useAuthPolling({\n popupWindowRef,\n setConnectionStatus,\n onAuthenticationComplete,\n authCheckFn: useCallback(async () => {\n return knock.slack.authCheck({\n tenant: tenantId,\n knockChannelId: knockSlackChannelId,\n });\n }, [knock.slack, tenantId, knockSlackChannelId]),\n });\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={() => {\n const popup = openPopupWindow(buildSlackAuthUrl());\n popupWindowRef.current = popup;\n setConnectionStatus(\"connecting\");\n }}\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={() => {\n const popup = openPopupWindow(buildSlackAuthUrl());\n popupWindowRef.current = popup;\n setConnectionStatus(\"connecting\");\n }}\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":["SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","scopes","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","tenantId","knockSlackChannelId","popupWindowRef","useKnockSlackClient","useSlackAuthOptions","useMemo","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useAuthPostMessageListener","knockHost","host","useAuthPolling","authCheckFn","useCallback","slack","authCheck","tenant","knockChannelId","disconnectLabel","reconnectLabel","React","SlackIcon","popup","openPopupWindow","current"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SlackAuthButton.js","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n getSlackNonceStorageKey,\n useAuthPolling,\n useAuthPostMessageListener,\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent, useCallback, useMemo } from \"react\";\n\nimport { openPopupWindow } from \"../../../core/utils\";\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 // When provided, the default scopes will be overridden with the provided scopes\n scopes?: string[];\n // Additional scopes to add to the default scopes\n additionalScopes?: string[];\n}\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n scopes,\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 tenantId,\n knockSlackChannelId,\n popupWindowRef,\n } = useKnockSlackClient();\n\n const useSlackAuthOptions = useMemo(\n () => ({\n scopes,\n additionalScopes,\n }),\n [scopes, additionalScopes],\n );\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n useSlackAuthOptions,\n );\n\n useAuthPostMessageListener({\n knockHost: knock.host,\n popupWindowRef,\n setConnectionStatus,\n onAuthenticationComplete,\n nonceStorageKey: getSlackNonceStorageKey(\n knockSlackChannelId,\n knock.userId!,\n ),\n });\n\n useAuthPolling({\n popupWindowRef,\n setConnectionStatus,\n onAuthenticationComplete,\n authCheckFn: useCallback(async () => {\n return knock.slack.authCheck({\n tenant: tenantId,\n knockChannelId: knockSlackChannelId,\n });\n }, [knock.slack, tenantId, knockSlackChannelId]),\n });\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={() => {\n const popup = openPopupWindow(buildSlackAuthUrl());\n popupWindowRef.current = popup;\n setConnectionStatus(\"connecting\");\n }}\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={() => {\n const popup = openPopupWindow(buildSlackAuthUrl());\n popupWindowRef.current = popup;\n setConnectionStatus(\"connecting\");\n }}\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":["SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","scopes","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","tenantId","knockSlackChannelId","popupWindowRef","useKnockSlackClient","useSlackAuthOptions","useMemo","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useAuthPostMessageListener","knockHost","host","nonceStorageKey","getSlackNonceStorageKey","userId","useAuthPolling","authCheckFn","useCallback","slack","authCheck","tenant","knockChannelId","disconnectLabel","reconnectLabel","React","SlackIcon","popup","openPopupWindow","current"],"mappings":"2VA2BaA,EAA2DA,CAAC,CACvEC,cAAAA,EACAC,YAAAA,EACAC,yBAAAA,EACAC,OAAAA,EACAC,iBAAAA,CACF,IAAM,CACE,KAAA,CAAEC,EAAAA,GAAMC,kBAAgB,EACxBC,EAAQC,EAAAA,eAAe,EAEvB,CACJC,oBAAAA,EACAC,iBAAAA,EACAC,eAAAA,EACAC,YAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,oBAAAA,EACAC,eAAAA,GACEC,sBAAoB,EAElBC,EAAsBC,EAAAA,QAC1B,KAAO,CACLhB,OAAAA,EACAC,iBAAAA,CAAAA,GAEF,CAACD,EAAQC,CAAgB,CAC3B,EAEM,CAAEgB,kBAAAA,EAAmBC,oBAAAA,CAAwBC,EAAAA,eACjDtB,EACAC,EACAiB,CACF,EAE2BK,6BAAA,CACzBC,UAAWjB,EAAMkB,KACjBT,eAAAA,EACAP,oBAAAA,EACAP,yBAAAA,EACAwB,gBAAiBC,EAAAA,wBACfZ,EACAR,EAAMqB,MACR,CAAA,CACD,EAEcC,iBAAA,CACbb,eAAAA,EACAP,oBAAAA,EACAP,yBAAAA,EACA4B,YAAaC,cAAY,SAChBxB,EAAMyB,MAAMC,UAAU,CAC3BC,OAAQpB,EACRqB,eAAgBpB,CAAAA,CACjB,EACA,CAACR,EAAMyB,MAAOlB,EAAUC,CAAmB,CAAC,CAAA,CAChD,EAEKqB,MAAAA,EAAkB/B,EAAE,iBAAiB,GAAK,KAC1CgC,EAAiBhC,EAAE,gBAAgB,GAAK,KAI5CK,OAAAA,IAAqB,cACrBA,IAAqB,gBAGnB4B,EAAA,QAAA,cAAC,OAAI,UAAU,kDAAA,0BACZC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAAM,CAAA,EACpCD,EAAAA,QAAA,cAAA,OAAA,KAEKjC,EADHK,IAAqB,aAChB,kBACA,oBADiB,CAEzB,CACF,EAKAA,IAAqB,QAErB4B,EAAA,QAAA,cAAC,SACC,CAAA,QAAS,IAAM,CACPE,MAAAA,EAAQC,kBAAgBrB,GAAmB,EACjDJ,EAAe0B,QAAUF,EACzB/B,EAAoB,YAAY,CAAA,EAElC,UAAU,iDACV,aAAc,IAAME,EAAe0B,CAAc,EACjD,aAAc,IAAM1B,EAAe,IAAI,CAEvC,EAAA2B,EAAA,QAAA,cAACC,EAAU,UAAA,CAAA,OAAO,OAAO,MAAM,MAAM,CAAA,EACpCD,EAAAA,QAAA,cAAA,OAAA,CAAK,UAAU,kCAAA,EACb1B,GAAeC,GAAcR,EAAE,YAAY,CAC9C,CACF,EAKAK,IAAqB,eAErB4B,EAAA,QAAA,cAAC,SACC,CAAA,QAAS,IAAM,CACPE,MAAAA,EAAQC,kBAAgBrB,GAAmB,EACjDJ,EAAe0B,QAAUF,EACzB/B,EAAoB,YAAY,CAAA,EAElC,UAAU,uDAEV,EAAA6B,EAAA,QAAA,cAACC,aAAU,OAAO,OAAO,MAAM,OAAM,EACpCD,EAAA,QAAA,cAAA,OAAA,KAAMjC,EAAE,cAAc,CAAE,CAC3B,EAMDiC,EAAAA,QAAA,cAAA,SAAA,CACC,QAASjB,EACT,UAAU,qDACV,aAAc,IAAMV,EAAeyB,CAAe,EAClD,aAAc,IAAMzB,EAAe,IAAI,GAEvC2B,EAAAA,QAAA,cAACC,EAAAA,UAAU,CAAA,OAAO,OAAO,MAAM,MAAM,CAAA,EACrCD,EAAA,QAAA,cAAC,OAAK,CAAA,UAAU,sCACb1B,EAAAA,GAAeP,EAAE,gBAAgB,CACpC,CACF,CAEJ"}
|
|
@@ -1,58 +1,59 @@
|
|
|
1
|
-
import n, { useMemo as L, useCallback as
|
|
2
|
-
import { useTranslations as
|
|
1
|
+
import n, { useMemo as L, useCallback as N } from "react";
|
|
2
|
+
import { useTranslations as w, useKnockClient as A, useKnockSlackClient as M, useSlackAuth as I, useAuthPostMessageListener as K, getSlackNonceStorageKey as v, useAuthPolling as y } from "@knocklabs/react-core";
|
|
3
3
|
import { openPopupWindow as d } from "../../../core/utils.mjs";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import { SlackIcon as
|
|
5
|
+
import { SlackIcon as a } from "../SlackIcon/SlackIcon.mjs";
|
|
6
6
|
/* empty css */
|
|
7
|
-
const
|
|
7
|
+
const H = ({
|
|
8
8
|
slackClientId: b,
|
|
9
|
-
redirectUrl:
|
|
10
|
-
onAuthenticationComplete:
|
|
11
|
-
scopes:
|
|
12
|
-
additionalScopes:
|
|
9
|
+
redirectUrl: g,
|
|
10
|
+
onAuthenticationComplete: i,
|
|
11
|
+
scopes: k,
|
|
12
|
+
additionalScopes: m
|
|
13
13
|
}) => {
|
|
14
14
|
const {
|
|
15
15
|
t: e
|
|
16
|
-
} =
|
|
17
|
-
setConnectionStatus:
|
|
16
|
+
} = w(), c = A(), {
|
|
17
|
+
setConnectionStatus: o,
|
|
18
18
|
connectionStatus: t,
|
|
19
|
-
setActionLabel:
|
|
20
|
-
actionLabel:
|
|
21
|
-
errorLabel:
|
|
22
|
-
tenantId:
|
|
23
|
-
knockSlackChannelId:
|
|
24
|
-
popupWindowRef:
|
|
25
|
-
} =
|
|
26
|
-
scopes:
|
|
27
|
-
additionalScopes:
|
|
28
|
-
}), [
|
|
19
|
+
setActionLabel: s,
|
|
20
|
+
actionLabel: p,
|
|
21
|
+
errorLabel: E,
|
|
22
|
+
tenantId: _,
|
|
23
|
+
knockSlackChannelId: l,
|
|
24
|
+
popupWindowRef: r
|
|
25
|
+
} = M(), C = L(() => ({
|
|
26
|
+
scopes: k,
|
|
27
|
+
additionalScopes: m
|
|
28
|
+
}), [k, m]), {
|
|
29
29
|
buildSlackAuthUrl: h,
|
|
30
|
-
disconnectFromSlack:
|
|
31
|
-
} = I(b,
|
|
32
|
-
|
|
33
|
-
knockHost:
|
|
34
|
-
popupWindowRef:
|
|
35
|
-
setConnectionStatus:
|
|
36
|
-
onAuthenticationComplete:
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
30
|
+
disconnectFromSlack: S
|
|
31
|
+
} = I(b, g, C);
|
|
32
|
+
K({
|
|
33
|
+
knockHost: c.host,
|
|
34
|
+
popupWindowRef: r,
|
|
35
|
+
setConnectionStatus: o,
|
|
36
|
+
onAuthenticationComplete: i,
|
|
37
|
+
nonceStorageKey: v(l, c.userId)
|
|
38
|
+
}), y({
|
|
39
|
+
popupWindowRef: r,
|
|
40
|
+
setConnectionStatus: o,
|
|
41
|
+
onAuthenticationComplete: i,
|
|
42
|
+
authCheckFn: N(async () => c.slack.authCheck({
|
|
43
|
+
tenant: _,
|
|
44
|
+
knockChannelId: l
|
|
45
|
+
}), [c.slack, _, l])
|
|
45
46
|
});
|
|
46
|
-
const
|
|
47
|
-
return t === "connecting" || t === "disconnecting" ? /* @__PURE__ */ n.createElement("div", { className: "rsk-connect__button rsk-connect__button--loading" }, /* @__PURE__ */ n.createElement(
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
}, className: "rsk-connect__button rsk-connect__button--error", onMouseEnter: () =>
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
}, className: "rsk-connect__button rsk-connect__button--disconnected" }, /* @__PURE__ */ n.createElement(
|
|
47
|
+
const x = e("slackDisconnect") || null, f = e("slackReconnect") || null;
|
|
48
|
+
return t === "connecting" || t === "disconnecting" ? /* @__PURE__ */ n.createElement("div", { className: "rsk-connect__button rsk-connect__button--loading" }, /* @__PURE__ */ n.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ n.createElement("span", null, e(t === "connecting" ? "slackConnecting" : "slackDisconnecting"))) : t === "error" ? /* @__PURE__ */ n.createElement("button", { onClick: () => {
|
|
49
|
+
const u = d(h());
|
|
50
|
+
r.current = u, o("connecting");
|
|
51
|
+
}, className: "rsk-connect__button rsk-connect__button--error", onMouseEnter: () => s(f), onMouseLeave: () => s(null) }, /* @__PURE__ */ n.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ n.createElement("span", { className: "rsk-connect__button__text--error" }, p || E || e("slackError"))) : t === "disconnected" ? /* @__PURE__ */ n.createElement("button", { onClick: () => {
|
|
52
|
+
const u = d(h());
|
|
53
|
+
r.current = u, o("connecting");
|
|
54
|
+
}, className: "rsk-connect__button rsk-connect__button--disconnected" }, /* @__PURE__ */ n.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ n.createElement("span", null, e("slackConnect"))) : /* @__PURE__ */ n.createElement("button", { onClick: S, className: "rsk-connect__button rsk-connect__button--connected", onMouseEnter: () => s(x), onMouseLeave: () => s(null) }, /* @__PURE__ */ n.createElement(a, { height: "16px", width: "16px" }), /* @__PURE__ */ n.createElement("span", { className: "rsk-connect__button__text--connected" }, p || e("slackConnected")));
|
|
54
55
|
};
|
|
55
56
|
export {
|
|
56
|
-
|
|
57
|
+
H as SlackAuthButton
|
|
57
58
|
};
|
|
58
59
|
//# sourceMappingURL=SlackAuthButton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n useAuthPolling,\n useAuthPostMessageListener,\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent, useCallback, useMemo } from \"react\";\n\nimport { openPopupWindow } from \"../../../core/utils\";\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 // When provided, the default scopes will be overridden with the provided scopes\n scopes?: string[];\n // Additional scopes to add to the default scopes\n additionalScopes?: string[];\n}\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n scopes,\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 tenantId,\n knockSlackChannelId,\n popupWindowRef,\n } = useKnockSlackClient();\n\n const useSlackAuthOptions = useMemo(\n () => ({\n scopes,\n additionalScopes,\n }),\n [scopes, additionalScopes],\n );\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n useSlackAuthOptions,\n );\n\n useAuthPostMessageListener({\n knockHost: knock.host,\n popupWindowRef,\n setConnectionStatus,\n onAuthenticationComplete,\n });\n\n useAuthPolling({\n popupWindowRef,\n setConnectionStatus,\n onAuthenticationComplete,\n authCheckFn: useCallback(async () => {\n return knock.slack.authCheck({\n tenant: tenantId,\n knockChannelId: knockSlackChannelId,\n });\n }, [knock.slack, tenantId, knockSlackChannelId]),\n });\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={() => {\n const popup = openPopupWindow(buildSlackAuthUrl());\n popupWindowRef.current = popup;\n setConnectionStatus(\"connecting\");\n }}\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={() => {\n const popup = openPopupWindow(buildSlackAuthUrl());\n popupWindowRef.current = popup;\n setConnectionStatus(\"connecting\");\n }}\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":["SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","scopes","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","tenantId","knockSlackChannelId","popupWindowRef","useKnockSlackClient","useSlackAuthOptions","useMemo","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useAuthPostMessageListener","knockHost","host","useAuthPolling","authCheckFn","useCallback","slack","authCheck","tenant","knockChannelId","disconnectLabel","reconnectLabel","React","SlackIcon","popup","openPopupWindow","current"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"SlackAuthButton.mjs","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"sourcesContent":["import {\n getSlackNonceStorageKey,\n useAuthPolling,\n useAuthPostMessageListener,\n useKnockClient,\n useKnockSlackClient,\n useSlackAuth,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { FunctionComponent, useCallback, useMemo } from \"react\";\n\nimport { openPopupWindow } from \"../../../core/utils\";\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 // When provided, the default scopes will be overridden with the provided scopes\n scopes?: string[];\n // Additional scopes to add to the default scopes\n additionalScopes?: string[];\n}\n\nexport const SlackAuthButton: FunctionComponent<SlackAuthButtonProps> = ({\n slackClientId,\n redirectUrl,\n onAuthenticationComplete,\n scopes,\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 tenantId,\n knockSlackChannelId,\n popupWindowRef,\n } = useKnockSlackClient();\n\n const useSlackAuthOptions = useMemo(\n () => ({\n scopes,\n additionalScopes,\n }),\n [scopes, additionalScopes],\n );\n\n const { buildSlackAuthUrl, disconnectFromSlack } = useSlackAuth(\n slackClientId,\n redirectUrl,\n useSlackAuthOptions,\n );\n\n useAuthPostMessageListener({\n knockHost: knock.host,\n popupWindowRef,\n setConnectionStatus,\n onAuthenticationComplete,\n nonceStorageKey: getSlackNonceStorageKey(\n knockSlackChannelId,\n knock.userId!,\n ),\n });\n\n useAuthPolling({\n popupWindowRef,\n setConnectionStatus,\n onAuthenticationComplete,\n authCheckFn: useCallback(async () => {\n return knock.slack.authCheck({\n tenant: tenantId,\n knockChannelId: knockSlackChannelId,\n });\n }, [knock.slack, tenantId, knockSlackChannelId]),\n });\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={() => {\n const popup = openPopupWindow(buildSlackAuthUrl());\n popupWindowRef.current = popup;\n setConnectionStatus(\"connecting\");\n }}\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={() => {\n const popup = openPopupWindow(buildSlackAuthUrl());\n popupWindowRef.current = popup;\n setConnectionStatus(\"connecting\");\n }}\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":["SlackAuthButton","slackClientId","redirectUrl","onAuthenticationComplete","scopes","additionalScopes","t","useTranslations","knock","useKnockClient","setConnectionStatus","connectionStatus","setActionLabel","actionLabel","errorLabel","tenantId","knockSlackChannelId","popupWindowRef","useKnockSlackClient","useSlackAuthOptions","useMemo","buildSlackAuthUrl","disconnectFromSlack","useSlackAuth","useAuthPostMessageListener","knockHost","host","nonceStorageKey","getSlackNonceStorageKey","userId","useAuthPolling","authCheckFn","useCallback","slack","authCheck","tenant","knockChannelId","disconnectLabel","reconnectLabel","React","SlackIcon","popup","openPopupWindow","current"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlackAuthButton.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SlackAuthButton.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/slack/components/SlackAuthButton/SlackAuthButton.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAGhE,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;IAEhE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAkInE,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.11.
|
|
5
|
+
"version": "0.11.15",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/cjs/index.js",
|
|
8
8
|
"module": "dist/esm/index.mjs",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
75
|
"@knocklabs/client": "^0.21.8",
|
|
76
|
-
"@knocklabs/react-core": "^0.13.
|
|
76
|
+
"@knocklabs/react-core": "^0.13.9",
|
|
77
77
|
"@popperjs/core": "^2.11.8",
|
|
78
78
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
79
79
|
"@radix-ui/react-hover-card": "^1.1.15",
|