@knocklabs/react 0.2.26 → 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 +17 -0
- package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/Dropdown.js.map +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js +1 -1
- package/dist/cjs/modules/feed/components/NotificationFeed/NotificationFeed.js.map +1 -1
- 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/feed/components/NotificationFeed/Dropdown.mjs +3 -3
- package/dist/esm/modules/feed/components/NotificationFeed/Dropdown.mjs.map +1 -1
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs +26 -26
- package/dist/esm/modules/feed/components/NotificationFeed/NotificationFeed.mjs.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/feed/components/NotificationFeed/Dropdown.d.ts.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 +9 -9
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,22 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
+
## 0.2.28
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- 47a88da: feature: allow passing additional OAuth scope to SlackAuthButton
|
8
|
+
- Updated dependencies [47a88da]
|
9
|
+
- @knocklabs/react-core@0.2.25
|
10
|
+
|
11
|
+
## 0.2.27
|
12
|
+
|
13
|
+
### Patch Changes
|
14
|
+
|
15
|
+
- 9b91c18: fix: add label to notification filter select
|
16
|
+
- Updated dependencies [1d440f7]
|
17
|
+
- @knocklabs/client@0.10.13
|
18
|
+
- @knocklabs/react-core@0.2.24
|
19
|
+
|
3
20
|
## 0.2.26
|
4
21
|
|
5
22
|
### Patch Changes
|
@@ -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 a=require("@knocklabs/react-core"),c=require("react"),l=require("../../../core/components/Icons/ChevronDown.js");;/* empty css */const d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(c),u=({children:e,value:o,onChange:r})=>{const{colorMode:n}=a.useKnockFeed();return t.default.createElement("div",{className:`rnf-dropdown rnf-dropdown--${n}`},t.default.createElement("select",{"aria-label":"Select notification filter",value:o,onChange:r},e),t.default.createElement(l.ChevronDown,null))};exports.Dropdown=u;
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select value={value}
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select\n aria-label=\"Select notification filter\"\n value={value}\n onChange={onChange}\n >\n {children}\n </select>\n <ChevronDown />\n </div>\n );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","React","ChevronDown"],"mappings":"uSAYaA,EAAuDA,CAAC,CACnEC,SAAAA,EACAC,MAAAA,EACAC,SAAAA,CACF,IAAM,CACE,KAAA,CAAEC,UAAAA,GAAcC,EAAa,aAAA,EAEnC,+BACG,MAAI,CAAA,UAAW,8BAA8BD,CAAS,IACpDE,EAAAA,QAAA,cAAA,SAAA,CACC,aAAW,6BACX,MAAAJ,EACA,SAAAC,GAECF,CACH,EACAK,EAAAA,QAAA,cAACC,kBAAW,CACd,CAEJ"}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@knocklabs/client"),c=require("@knocklabs/react-core"),n=require("react"),
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@knocklabs/client"),c=require("@knocklabs/react-core"),n=require("react"),v=require("../../../core/components/Spinner/Spinner.js"),R=require("../../../core/hooks/useOnBottomScroll.js"),I=require("../EmptyFeed/EmptyFeed.js"),B=require("../NotificationCell/NotificationCell.js");;/* empty css */const H=require("./NotificationFeedHeader.js");;/* empty css */const K=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=K(n),M=e=>t.default.createElement(B.NotificationCell,{key:e.item.id,...e}),P=e=>t.default.createElement(H.NotificationFeedHeader,{...e}),g=({colorMode:e})=>t.default.createElement("div",{className:"rnf-notification-feed__spinner-container"},t.default.createElement(v.Spinner,{thickness:3,size:"16px",color:e==="dark"?"rgba(255, 255, 255, 0.65)":void 0})),j="https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed",x=({EmptyComponent:e=t.default.createElement(I.EmptyFeed,null),renderItem:E=M,onNotificationClick:_,onNotificationButtonClick:N,onMarkAllAsReadClick:S,initialFilterStatus:i=c.FilterStatus.All,header:b,renderHeader:q=P})=>{const[l,u]=n.useState(i),{feedClient:o,useFeedStore:F,colorMode:s}=c.useKnockFeed(),{settings:f}=c.useFeedSettings(o),{t:y}=c.useTranslations(),{pageInfo:m,items:k,networkStatus:a}=F(),p=n.useRef(null);n.useEffect(()=>{u(i)},[i]),n.useEffect(()=>{o.fetch({status:l})},[o,l]);const h=k.length===0,d=r.isRequestInFlight(a),C=n.useCallback(()=>{!d&&m.after&&o.fetchNextPage()},[d,m,o]);return R({ref:p,callback:C,offset:70}),t.default.createElement("div",{className:`rnf-notification-feed rnf-notification-feed--${s}`},b||q({setFilterStatus:u,filterStatus:l,onMarkAllAsReadClick:S}),t.default.createElement("div",{className:"rnf-notification-feed__container",ref:p},a===r.NetworkStatus.loading&&t.default.createElement(g,{colorMode:s}),t.default.createElement("div",{className:"rnf-notification-feed__feed-items-container"},a!==r.NetworkStatus.loading&&k.map(w=>E({item:w,onItemClick:_,onButtonClick:N}))),a===r.NetworkStatus.fetchMore&&t.default.createElement(g,{colorMode:s}),!d&&h&&e),(f==null?void 0:f.features.branding_required)&&t.default.createElement("div",{className:"rnf-notification-feed__knock-branding"},t.default.createElement("a",{href:j,target:"_blank"},y("poweredBy")||"Powered by Knock")))};exports.NotificationFeed=x;
|
2
2
|
//# sourceMappingURL=NotificationFeed.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /**\n * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactNode;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\")}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAkDMA,EAAqBC,GACxBC,UAAA,cAAAC,EAAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,UAAA,cAAAK,EAAAA,uBAAA,CAA2BN,GAAAA,CAC7B,CAAA,EAEKO,EAAiBA,CAAC,CAAEC,UAAAA,CAAoC,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,oEACZQ,UACC,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,MAAU,CAAA,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,CACjB,IAAM,CACJ,KAAM,CAACmB,EAAQC,CAAS,EAAIC,WAASP,CAAmB,EAClD,CAAEQ,WAAAA,EAAYC,aAAAA,EAAcpB,UAAAA,GAAcqB,EAAa,aAAA,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,EAAgB,gBAAA,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUN,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBoB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAW,gDAAgD5C,CAAS,IAEnEc,GACCC,EAAa,CACX8B,gBAAiB5B,EACjB6B,aAAc9B,EACdN,qBAAAA,CAAAA,CACD,EAEHjB,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKoC,CACpDD,EAAAA,IAAkBmB,EAAcC,cAAAA,SAC9BvD,EAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEDP,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,6CACZmC,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKtD,GACTY,EAAW,CACTZ,KAAAA,EACAuD,YAAa1C,EACb2C,cAAe1C,CAAAA,CAChB,CACH,CACJ,EAECmB,IAAkBmB,EAAAA,cAAcK,WAC9B3D,
|
1
|
+
{"version":3,"file":"NotificationFeed.js","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /**\n * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactNode;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\") || \"Powered by Knock\"}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"kjBAkDMA,EAAqBC,GACxBC,UAAA,cAAAC,EAAAA,iBAAA,CAAiB,IAAKF,EAAMG,KAAKC,GAAI,GAAIJ,CAC3C,CAAA,EAEKK,EAAuBL,GAC1BC,UAAA,cAAAK,EAAAA,uBAAA,CAA2BN,GAAAA,CAC7B,CAAA,EAEKO,EAAiBA,CAAC,CAAEC,UAAAA,CAAoC,IAC3DP,EAAA,QAAA,cAAA,MAAA,CAAI,UAAU,oEACZQ,UACC,CAAA,UAAW,EACX,KAAK,OACL,MAAOD,IAAc,OAAS,4BAA8BE,MAAU,CAAA,CAE1E,EAGIC,EACJ,qGAEWC,EAAoDA,CAAC,CAChEC,eAAAA,0BAAkBC,EAAAA,UAAY,IAAA,EAC9BC,WAAAA,EAAahB,EACbiB,oBAAAA,EACAC,0BAAAA,EACAC,qBAAAA,EACAC,oBAAAA,EAAsBC,EAAaC,aAAAA,IACnCC,OAAAA,EACAC,aAAAA,EAAelB,CACjB,IAAM,CACJ,KAAM,CAACmB,EAAQC,CAAS,EAAIC,WAASP,CAAmB,EAClD,CAAEQ,WAAAA,EAAYC,aAAAA,EAAcpB,UAAAA,GAAcqB,EAAa,aAAA,EACvD,CAAEC,SAAAA,CAAAA,EAAaC,EAAAA,gBAAgBJ,CAAU,EACzC,CAAEK,EAAAA,GAAMC,EAAgB,gBAAA,EAExB,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,cAAAA,GAAkBR,EAAa,EAClDS,EAAeC,SAAuB,IAAI,EAEhDC,EAAAA,UAAU,IAAM,CACdd,EAAUN,CAAmB,CAAA,EAC5B,CAACA,CAAmB,CAAC,EAExBoB,EAAAA,UAAU,IAAM,CAEdZ,EAAWa,MAAM,CAAEhB,OAAAA,CAAAA,CAAQ,CAAA,EAC1B,CAACG,EAAYH,CAAM,CAAC,EAEjBiB,MAAAA,EAAUN,EAAMO,SAAW,EAC3BC,EAAkBC,oBAAkBR,CAAa,EAGjDS,EAAmBC,EAAAA,YAAY,IAAM,CACrC,CAACH,GAAmBT,EAASa,OAC/BpB,EAAWqB,cAAc,CAE1B,EAAA,CAACL,EAAiBT,EAAUP,CAAU,CAAC,EAIxB,OAAAsB,EAAA,CAChBC,IAAKb,EACLc,SAAUN,EACVO,OAAQ,EAAA,CACT,0BAGE,MACC,CAAA,UAAW,gDAAgD5C,CAAS,IAEnEc,GACCC,EAAa,CACX8B,gBAAiB5B,EACjB6B,aAAc9B,EACdN,qBAAAA,CAAAA,CACD,EAEHjB,EAAA,QAAA,cAAC,MAAI,CAAA,UAAU,mCAAmC,IAAKoC,CACpDD,EAAAA,IAAkBmB,EAAcC,cAAAA,SAC9BvD,EAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,CACjB,CAAA,EAEDP,EAAAA,QAAA,cAAC,MAAI,CAAA,UAAU,6CACZmC,EAAAA,IAAkBmB,EAAAA,cAAcC,SAC/BrB,EAAMsB,IAAKtD,GACTY,EAAW,CACTZ,KAAAA,EACAuD,YAAa1C,EACb2C,cAAe1C,CAAAA,CAChB,CACH,CACJ,EAECmB,IAAkBmB,EAAAA,cAAcK,WAC9B3D,EAAA,QAAA,cAAAM,EAAA,CAAe,UAAAC,EACjB,EAEA,CAACmC,GAAmBF,GAAW5B,CAClC,GAECiB,GAAAA,YAAAA,EAAU+B,SAASC,oBACjB7D,EAAAA,QAAA,cAAA,MAAA,CAAI,UAAU,uCAAA,0BACZ,IAAE,CAAA,KAAMU,EAAmB,OAAO,UAChCqB,EAAE,WAAW,GAAK,kBACrB,CACF,CAEJ,CAEJ"}
|
@@ -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,4 +1,4 @@
|
|
1
|
-
import { useKnockFeed as
|
1
|
+
import { useKnockFeed as l } from "@knocklabs/react-core";
|
2
2
|
import e from "react";
|
3
3
|
import { ChevronDown as c } from "../../../core/components/Icons/ChevronDown.mjs";
|
4
4
|
/* empty css */
|
@@ -9,8 +9,8 @@ const f = ({
|
|
9
9
|
}) => {
|
10
10
|
const {
|
11
11
|
colorMode: n
|
12
|
-
} =
|
13
|
-
return /* @__PURE__ */ e.createElement("div", { className: `rnf-dropdown rnf-dropdown--${n}` }, /* @__PURE__ */ e.createElement("select", { value: r, onChange: t }, o), /* @__PURE__ */ e.createElement(c, null));
|
12
|
+
} = l();
|
13
|
+
return /* @__PURE__ */ e.createElement("div", { className: `rnf-dropdown rnf-dropdown--${n}` }, /* @__PURE__ */ e.createElement("select", { "aria-label": "Select notification filter", value: r, onChange: t }, o), /* @__PURE__ */ e.createElement(c, null));
|
14
14
|
};
|
15
15
|
export {
|
16
16
|
f as Dropdown
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select value={value}
|
1
|
+
{"version":3,"file":"Dropdown.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"sourcesContent":["import { useKnockFeed } from \"@knocklabs/react-core\";\nimport React, { PropsWithChildren } from \"react\";\n\nimport { ChevronDown } from \"../../../core/components/Icons\";\n\nimport \"./styles.css\";\n\nexport type DropdownProps = {\n value: string;\n onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n};\n\nexport const Dropdown: React.FC<PropsWithChildren<DropdownProps>> = ({\n children,\n value,\n onChange,\n}) => {\n const { colorMode } = useKnockFeed();\n\n return (\n <div className={`rnf-dropdown rnf-dropdown--${colorMode}`}>\n <select\n aria-label=\"Select notification filter\"\n value={value}\n onChange={onChange}\n >\n {children}\n </select>\n <ChevronDown />\n </div>\n );\n};\n"],"names":["Dropdown","children","value","onChange","colorMode","useKnockFeed","React","ChevronDown"],"mappings":";;;;AAYO,MAAMA,IAAuDA,CAAC;AAAA,EACnEC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AACF,MAAM;AACE,QAAA;AAAA,IAAEC,WAAAA;AAAAA,MAAcC,EAAa;AAEnC,yCACG,OAAI,EAAA,WAAW,8BAA8BD,CAAS,MACpDE,gBAAAA,EAAA,cAAA,UAAA,EACC,cAAW,8BACX,OAAAJ,GACA,UAAAC,KAECF,CACH,GACAK,gBAAAA,EAAA,cAACC,OAAW,CACd;AAEJ;"}
|
@@ -1,38 +1,38 @@
|
|
1
|
-
import { isRequestInFlight as
|
2
|
-
import { useKnockFeed as
|
3
|
-
import e, { useState as x, useRef as
|
1
|
+
import { isRequestInFlight as C, NetworkStatus as f } from "@knocklabs/client";
|
2
|
+
import { useKnockFeed as I, useFeedSettings as R, useTranslations as B, FilterStatus as q } from "@knocklabs/react-core";
|
3
|
+
import e, { useState as x, useRef as K, useEffect as p, useCallback as H } from "react";
|
4
4
|
import { Spinner as M } from "../../../core/components/Spinner/Spinner.mjs";
|
5
|
-
import
|
6
|
-
import { EmptyFeed as
|
7
|
-
import { NotificationCell as
|
5
|
+
import P from "../../../core/hooks/useOnBottomScroll.mjs";
|
6
|
+
import { EmptyFeed as z } from "../EmptyFeed/EmptyFeed.mjs";
|
7
|
+
import { NotificationCell as A } from "../NotificationCell/NotificationCell.mjs";
|
8
8
|
/* empty css */
|
9
|
-
import { NotificationFeedHeader as
|
9
|
+
import { NotificationFeedHeader as L } from "./NotificationFeedHeader.mjs";
|
10
10
|
/* empty css */
|
11
|
-
const
|
11
|
+
const O = (t) => /* @__PURE__ */ e.createElement(A, { key: t.item.id, ...t }), T = (t) => /* @__PURE__ */ e.createElement(L, { ...t }), k = ({
|
12
12
|
colorMode: t
|
13
13
|
}) => /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__spinner-container" }, /* @__PURE__ */ e.createElement(M, { thickness: 3, size: "16px", color: t === "dark" ? "rgba(255, 255, 255, 0.65)" : void 0 })), U = "https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed", Z = ({
|
14
|
-
EmptyComponent: t = /* @__PURE__ */ e.createElement(
|
15
|
-
renderItem: _ =
|
14
|
+
EmptyComponent: t = /* @__PURE__ */ e.createElement(z, null),
|
15
|
+
renderItem: _ = O,
|
16
16
|
onNotificationClick: g,
|
17
17
|
onNotificationButtonClick: E,
|
18
|
-
onMarkAllAsReadClick:
|
18
|
+
onMarkAllAsReadClick: b,
|
19
19
|
initialFilterStatus: r = q.All,
|
20
|
-
header:
|
21
|
-
renderHeader:
|
20
|
+
header: N,
|
21
|
+
renderHeader: S = T
|
22
22
|
}) => {
|
23
23
|
const [a, m] = x(r), {
|
24
24
|
feedClient: n,
|
25
25
|
useFeedStore: h,
|
26
|
-
colorMode:
|
27
|
-
} =
|
28
|
-
settings:
|
29
|
-
} =
|
26
|
+
colorMode: c
|
27
|
+
} = I(), {
|
28
|
+
settings: i
|
29
|
+
} = R(n), {
|
30
30
|
t: F
|
31
31
|
} = B(), {
|
32
32
|
pageInfo: l,
|
33
33
|
items: d,
|
34
34
|
networkStatus: o
|
35
|
-
} = h(), u =
|
35
|
+
} = h(), u = K(null);
|
36
36
|
p(() => {
|
37
37
|
m(r);
|
38
38
|
}, [r]), p(() => {
|
@@ -40,22 +40,22 @@ const P = (t) => /* @__PURE__ */ e.createElement(L, { key: t.item.id, ...t }), T
|
|
40
40
|
status: a
|
41
41
|
});
|
42
42
|
}, [n, a]);
|
43
|
-
const v = d.length === 0, s =
|
43
|
+
const v = d.length === 0, s = C(o), w = H(() => {
|
44
44
|
!s && l.after && n.fetchNextPage();
|
45
45
|
}, [s, l, n]);
|
46
|
-
return
|
46
|
+
return P({
|
47
47
|
ref: u,
|
48
|
-
callback:
|
48
|
+
callback: w,
|
49
49
|
offset: 70
|
50
|
-
}), /* @__PURE__ */ e.createElement("div", { className: `rnf-notification-feed rnf-notification-feed--${
|
50
|
+
}), /* @__PURE__ */ e.createElement("div", { className: `rnf-notification-feed rnf-notification-feed--${c}` }, N || S({
|
51
51
|
setFilterStatus: m,
|
52
52
|
filterStatus: a,
|
53
|
-
onMarkAllAsReadClick:
|
54
|
-
}), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__container", ref: u }, o === f.loading && /* @__PURE__ */ e.createElement(k, { colorMode:
|
55
|
-
item:
|
53
|
+
onMarkAllAsReadClick: b
|
54
|
+
}), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__container", ref: u }, o === f.loading && /* @__PURE__ */ e.createElement(k, { colorMode: c }), /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__feed-items-container" }, o !== f.loading && d.map((y) => _({
|
55
|
+
item: y,
|
56
56
|
onItemClick: g,
|
57
57
|
onButtonClick: E
|
58
|
-
}))), o === f.fetchMore && /* @__PURE__ */ e.createElement(k, { colorMode:
|
58
|
+
}))), o === f.fetchMore && /* @__PURE__ */ e.createElement(k, { colorMode: c }), !s && v && t), (i == null ? void 0 : i.features.branding_required) && /* @__PURE__ */ e.createElement("div", { className: "rnf-notification-feed__knock-branding" }, /* @__PURE__ */ e.createElement("a", { href: U, target: "_blank" }, F("poweredBy") || "Powered by Knock")));
|
59
59
|
};
|
60
60
|
export {
|
61
61
|
Z as NotificationFeed
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /**\n * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactNode;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\")}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":";;;;;;;;;;AAkDA,MAAMA,IAAoBA,CAACC,MACxBC,gBAAAA,EAAA,cAAAC,GAAA,EAAiB,KAAKF,EAAMG,KAAKC,IAAI,GAAIJ,EAC3C,CAAA,GAEKK,IAAsBA,CAACL,MAC1BC,gBAAAA,EAAA,cAAAK,GAAA,EAA2BN,GAAAA,EAC7B,CAAA,GAEKO,IAAiBA,CAAC;AAAA,EAAEC,WAAAA;AAAoC,MAC3DP,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,8EACZQ,GACC,EAAA,WAAW,GACX,MAAK,QACL,OAAOD,MAAc,SAAS,8BAA8BE,OAAU,CAAA,CAE1E,GAGIC,IACJ,sGAEWC,IAAoDA,CAAC;AAAA,EAChEC,gBAAAA,oCAAkBC,GAAY,IAAA;AAAA,EAC9BC,YAAAA,IAAahB;AAAAA,EACbiB,qBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,sBAAAA;AAAAA,EACAC,qBAAAA,IAAsBC,EAAaC;AAAAA,EACnCC,QAAAA;AAAAA,EACAC,cAAAA,IAAelB;AACjB,MAAM;AACJ,QAAM,CAACmB,GAAQC,CAAS,IAAIC,EAASP,CAAmB,GAClD;AAAA,IAAEQ,YAAAA;AAAAA,IAAYC,cAAAA;AAAAA,IAAcpB,WAAAA;AAAAA,MAAcqB,EAAa,GACvD;AAAA,IAAEC,UAAAA;AAAAA,EAAAA,IAAaC,EAAgBJ,CAAU,GACzC;AAAA,IAAEK,GAAAA;AAAAA,MAAMC,EAAgB,GAExB;AAAA,IAAEC,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,IAAOC,eAAAA;AAAAA,MAAkBR,EAAa,GAClDS,IAAeC,EAAuB,IAAI;AAEhDC,EAAAA,EAAU,MAAM;AACdd,IAAAA,EAAUN,CAAmB;AAAA,EAAA,GAC5B,CAACA,CAAmB,CAAC,GAExBoB,EAAU,MAAM;AAEdZ,IAAAA,EAAWa,MAAM;AAAA,MAAEhB,QAAAA;AAAAA,IAAAA,CAAQ;AAAA,EAAA,GAC1B,CAACG,GAAYH,CAAM,CAAC;AAEjBiB,QAAAA,IAAUN,EAAMO,WAAW,GAC3BC,IAAkBC,EAAkBR,CAAa,GAGjDS,IAAmBC,EAAY,MAAM;AACrC,IAAA,CAACH,KAAmBT,EAASa,SAC/BpB,EAAWqB,cAAc;AAAA,EAE1B,GAAA,CAACL,GAAiBT,GAAUP,CAAU,CAAC;AAIxB,SAAAsB,EAAA;AAAA,IAChBC,KAAKb;AAAAA,IACLc,UAAUN;AAAAA,IACVO,QAAQ;AAAA,EAAA,CACT,mCAGE,OACC,EAAA,WAAW,gDAAgD5C,CAAS,MAEnEc,KACCC,EAAa;AAAA,IACX8B,iBAAiB5B;AAAAA,IACjB6B,cAAc9B;AAAAA,IACdN,sBAAAA;AAAAA,EAAAA,CACD,GAEHjB,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,oCAAmC,KAAKoC,EACpDD,GAAAA,MAAkBmB,EAAcC,WAC9BvD,gBAAAA,EAAA,cAAAM,GAAA,EAAe,WAAAC,EACjB,CAAA,GAEDP,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,8CACZmC,GAAAA,MAAkBmB,EAAcC,WAC/BrB,EAAMsB,IAAI,CAACtD,MACTY,EAAW;AAAA,IACTZ,MAAAA;AAAAA,IACAuD,aAAa1C;AAAAA,IACb2C,eAAe1C;AAAAA,EAAAA,CAChB,CACH,CACJ,GAECmB,MAAkBmB,EAAcK,aAC9B3D,gBAAAA,EAAA,cAAAM,GAAA,EAAe,WAAAC,
|
1
|
+
{"version":3,"file":"NotificationFeed.mjs","sources":["../../../../../../src/modules/feed/components/NotificationFeed/NotificationFeed.tsx"],"sourcesContent":["import { FeedItem, NetworkStatus, isRequestInFlight } from \"@knocklabs/client\";\nimport {\n ColorMode,\n FilterStatus,\n useFeedSettings,\n useKnockFeed,\n useTranslations,\n} from \"@knocklabs/react-core\";\nimport { GenericData } from \"@knocklabs/types\";\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport { Spinner } from \"../../../core/components/Spinner\";\nimport useOnBottomScroll from \"../../../core/hooks/useOnBottomScroll\";\nimport { EmptyFeed } from \"../EmptyFeed\";\nimport { NotificationCell, NotificationCellProps } from \"../NotificationCell\";\n\nimport {\n NotificationFeedHeader,\n NotificationFeedHeaderProps,\n} from \"./NotificationFeedHeader\";\nimport \"./styles.css\";\n\nexport type RenderItemProps<T = GenericData> = {\n item: FeedItem<T>;\n onItemClick?: NotificationCellProps[\"onItemClick\"];\n onButtonClick?: NotificationCellProps[\"onButtonClick\"];\n};\n\nexport type RenderItem = (props: RenderItemProps) => ReactNode;\n\nexport interface NotificationFeedProps {\n EmptyComponent?: ReactNode;\n /**\n * @deprecated Use `renderHeader` instead to accept `NotificationFeedHeaderProps`\n */\n header?: ReactNode;\n renderItem?: RenderItem;\n renderHeader?: (props: NotificationFeedHeaderProps) => ReactNode;\n onNotificationClick?: NotificationCellProps[\"onItemClick\"];\n onNotificationButtonClick?: NotificationCellProps[\"onButtonClick\"];\n onMarkAllAsReadClick?: (e: React.MouseEvent, unreadItems: FeedItem[]) => void;\n initialFilterStatus?: FilterStatus;\n}\n\nconst defaultRenderItem = (props: RenderItemProps) => (\n <NotificationCell key={props.item.id} {...props} />\n);\n\nconst defaultRenderHeader = (props: NotificationFeedHeaderProps) => (\n <NotificationFeedHeader {...props} />\n);\n\nconst LoadingSpinner = ({ colorMode }: { colorMode: ColorMode }) => (\n <div className=\"rnf-notification-feed__spinner-container\">\n <Spinner\n thickness={3}\n size=\"16px\"\n color={colorMode === \"dark\" ? \"rgba(255, 255, 255, 0.65)\" : undefined}\n />\n </div>\n);\n\nconst poweredByKnockUrl =\n \"https://knock.app?utm_source=powered-by-knock&utm_medium=referral&utm_campaign=knock-branding-feed\";\n\nexport const NotificationFeed: React.FC<NotificationFeedProps> = ({\n EmptyComponent = <EmptyFeed />,\n renderItem = defaultRenderItem,\n onNotificationClick,\n onNotificationButtonClick,\n onMarkAllAsReadClick,\n initialFilterStatus = FilterStatus.All,\n header,\n renderHeader = defaultRenderHeader,\n}) => {\n const [status, setStatus] = useState(initialFilterStatus);\n const { feedClient, useFeedStore, colorMode } = useKnockFeed();\n const { settings } = useFeedSettings(feedClient);\n const { t } = useTranslations();\n\n const { pageInfo, items, networkStatus } = useFeedStore();\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n setStatus(initialFilterStatus);\n }, [initialFilterStatus]);\n\n useEffect(() => {\n // When the feed client changes, or the status changes issue a re-fetch\n feedClient.fetch({ status });\n }, [feedClient, status]);\n\n const noItems = items.length === 0;\n const requestInFlight = isRequestInFlight(networkStatus);\n\n // Handle fetching more once we reach the bottom of the list\n const onBottomCallback = useCallback(() => {\n if (!requestInFlight && pageInfo.after) {\n feedClient.fetchNextPage();\n }\n }, [requestInFlight, pageInfo, feedClient]);\n\n // Once we scroll to the bottom of the view we want to automatically fetch\n // more items for the feed and bring them into the list\n useOnBottomScroll({\n ref: containerRef,\n callback: onBottomCallback,\n offset: 70,\n });\n\n return (\n <div\n className={`rnf-notification-feed rnf-notification-feed--${colorMode}`}\n >\n {header ||\n renderHeader({\n setFilterStatus: setStatus,\n filterStatus: status,\n onMarkAllAsReadClick,\n })}\n\n <div className=\"rnf-notification-feed__container\" ref={containerRef}>\n {networkStatus === NetworkStatus.loading && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n <div className=\"rnf-notification-feed__feed-items-container\">\n {networkStatus !== NetworkStatus.loading &&\n items.map((item: FeedItem) =>\n renderItem({\n item,\n onItemClick: onNotificationClick,\n onButtonClick: onNotificationButtonClick,\n }),\n )}\n </div>\n\n {networkStatus === NetworkStatus.fetchMore && (\n <LoadingSpinner colorMode={colorMode} />\n )}\n\n {!requestInFlight && noItems && EmptyComponent}\n </div>\n\n {settings?.features.branding_required && (\n <div className=\"rnf-notification-feed__knock-branding\">\n <a href={poweredByKnockUrl} target=\"_blank\">\n {t(\"poweredBy\") || \"Powered by Knock\"}\n </a>\n </div>\n )}\n </div>\n );\n};\n"],"names":["defaultRenderItem","props","React","NotificationCell","item","id","defaultRenderHeader","NotificationFeedHeader","LoadingSpinner","colorMode","Spinner","undefined","poweredByKnockUrl","NotificationFeed","EmptyComponent","EmptyFeed","renderItem","onNotificationClick","onNotificationButtonClick","onMarkAllAsReadClick","initialFilterStatus","FilterStatus","All","header","renderHeader","status","setStatus","useState","feedClient","useFeedStore","useKnockFeed","settings","useFeedSettings","t","useTranslations","pageInfo","items","networkStatus","containerRef","useRef","useEffect","fetch","noItems","length","requestInFlight","isRequestInFlight","onBottomCallback","useCallback","after","fetchNextPage","useOnBottomScroll","ref","callback","offset","setFilterStatus","filterStatus","NetworkStatus","loading","map","onItemClick","onButtonClick","fetchMore","features","branding_required"],"mappings":"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"}
|
@@ -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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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIjD,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../src/modules/feed/components/NotificationFeed/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIjD,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAmB/D,CAAC"}
|
@@ -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",
|
@@ -51,8 +51,8 @@
|
|
51
51
|
"react-dom": "^16.11.0 || ^17.0.0 || ^18.0.0"
|
52
52
|
},
|
53
53
|
"dependencies": {
|
54
|
-
"@knocklabs/client": "^0.10.
|
55
|
-
"@knocklabs/react-core": "^0.2.
|
54
|
+
"@knocklabs/client": "^0.10.13",
|
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,12 +63,12 @@
|
|
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
|
71
|
-
"babel-plugin-react-require": "^4.0.
|
69
|
+
"@typescript-eslint/parser": "^8.8.0",
|
70
|
+
"@vitejs/plugin-react": "^4.3.2",
|
71
|
+
"babel-plugin-react-require": "^4.0.3",
|
72
72
|
"eslint": "^8.56.0",
|
73
73
|
"eslint-plugin-react-hooks": "^4.6.0",
|
74
74
|
"eslint-plugin-react-refresh": "^0.4.4",
|
@@ -77,10 +77,10 @@
|
|
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
|
-
"vite-plugin-no-bundle": "^
|
83
|
+
"vite-plugin-no-bundle": "^4.0.0",
|
84
84
|
"vitest": "^2.0.5"
|
85
85
|
}
|
86
86
|
}
|