@tnf-dev/react 1.0.1-6 → 1.0.1-8
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/dist/cjs/components/icons/archive-box-icon.cjs +1 -50
- package/dist/cjs/components/icons/bell-icon.cjs +1 -50
- package/dist/cjs/components/icons/check-circle-icon.cjs +1 -50
- package/dist/cjs/components/icons/index.cjs +1 -112
- package/dist/cjs/components/inbox/bell.cjs +12 -4714
- package/dist/cjs/components/inbox/button.cjs +12 -4654
- package/dist/cjs/components/inbox/empty.cjs +12 -4635
- package/dist/cjs/components/inbox/inbox.cjs +12 -5291
- package/dist/cjs/components/inbox/index.cjs +12 -5309
- package/dist/cjs/components/inbox/loader.cjs +12 -4629
- package/dist/cjs/components/inbox/notification-header.cjs +12 -4649
- package/dist/cjs/components/inbox/notification-item/actions.cjs +12 -4738
- package/dist/cjs/components/inbox/notification-item/index.cjs +12 -4865
- package/dist/cjs/components/inbox/popover.cjs +12 -4711
- package/dist/cjs/components/index.cjs +12 -5309
- package/dist/cjs/contexts/StyleProvider.cjs +12 -4645
- package/dist/cjs/contexts/TeknifyProvider.cjs +12 -4674
- package/dist/cjs/contexts/index.cjs +12 -4677
- package/dist/cjs/dto/index.cjs +1 -19
- package/dist/cjs/dto/notifications/index.cjs +1 -19
- package/dist/cjs/dto/notifications/notification.interface.cjs +1 -19
- package/dist/cjs/hooks/index.cjs +1 -145
- package/dist/cjs/hooks/useNotifications.cjs +1 -143
- package/dist/cjs/index.cjs +12 -5362
- package/dist/cjs/utils/const.cjs +1 -31
- package/dist/cjs/utils/index.cjs +1 -33
- package/dist/esm/components/icons/archive-box-icon.js +1 -8
- package/dist/esm/components/icons/bell-icon.js +1 -8
- package/dist/esm/components/icons/check-circle-icon.js +1 -8
- package/dist/esm/components/icons/index.js +1 -17
- package/dist/esm/components/inbox/bell.js +29 -15
- package/dist/esm/components/inbox/button.js +29 -11
- package/dist/esm/components/inbox/empty.js +29 -11
- package/dist/esm/components/inbox/inbox.js +29 -28
- package/dist/esm/components/inbox/index.js +29 -50
- package/dist/esm/components/inbox/loader.js +29 -9
- package/dist/esm/components/inbox/notification-header.js +29 -11
- package/dist/esm/components/inbox/notification-item/actions.js +29 -16
- package/dist/esm/components/inbox/notification-item/index.js +29 -17
- package/dist/esm/components/inbox/popover.js +29 -11
- package/dist/esm/components/index.js +29 -51
- package/dist/esm/contexts/StyleProvider.js +29 -9
- package/dist/esm/contexts/TeknifyProvider.js +29 -12
- package/dist/esm/contexts/index.js +29 -13
- package/dist/esm/dto/index.js +0 -4
- package/dist/esm/dto/notifications/index.js +0 -3
- package/dist/esm/dto/notifications/notification.interface.js +0 -2
- package/dist/esm/hooks/index.js +1 -13
- package/dist/esm/hooks/useNotifications.js +1 -12
- package/dist/esm/index.js +29 -62
- package/dist/esm/utils/const.js +1 -8
- package/dist/esm/utils/index.js +1 -9
- package/package.json +2 -3
- package/dist/cjs/components/icons/archive-box-icon.cjs.map +0 -1
- package/dist/cjs/components/icons/bell-icon.cjs.map +0 -1
- package/dist/cjs/components/icons/check-circle-icon.cjs.map +0 -1
- package/dist/cjs/components/icons/index.cjs.map +0 -1
- package/dist/cjs/components/inbox/bell.cjs.map +0 -1
- package/dist/cjs/components/inbox/button.cjs.map +0 -1
- package/dist/cjs/components/inbox/empty.cjs.map +0 -1
- package/dist/cjs/components/inbox/inbox.cjs.map +0 -1
- package/dist/cjs/components/inbox/index.cjs.map +0 -1
- package/dist/cjs/components/inbox/loader.cjs.map +0 -1
- package/dist/cjs/components/inbox/notification-header.cjs.map +0 -1
- package/dist/cjs/components/inbox/notification-item/actions.cjs.map +0 -1
- package/dist/cjs/components/inbox/notification-item/index.cjs.map +0 -1
- package/dist/cjs/components/inbox/popover.cjs.map +0 -1
- package/dist/cjs/components/index.cjs.map +0 -1
- package/dist/cjs/contexts/StyleProvider.cjs.map +0 -1
- package/dist/cjs/contexts/TeknifyProvider.cjs.map +0 -1
- package/dist/cjs/contexts/index.cjs.map +0 -1
- package/dist/cjs/dto/index.cjs.map +0 -1
- package/dist/cjs/dto/notifications/index.cjs.map +0 -1
- package/dist/cjs/dto/notifications/notification.interface.cjs.map +0 -1
- package/dist/cjs/hooks/index.cjs.map +0 -1
- package/dist/cjs/hooks/useNotifications.cjs.map +0 -1
- package/dist/cjs/index.cjs.map +0 -1
- package/dist/cjs/utils/const.cjs.map +0 -1
- package/dist/cjs/utils/index.cjs.map +0 -1
- package/dist/esm/chunk-57PGXW3M.js +0 -2
- package/dist/esm/chunk-57PGXW3M.js.map +0 -1
- package/dist/esm/chunk-5ZHARJ3G.js +0 -4446
- package/dist/esm/chunk-5ZHARJ3G.js.map +0 -1
- package/dist/esm/chunk-6FGP2HJW.js +0 -9
- package/dist/esm/chunk-6FGP2HJW.js.map +0 -1
- package/dist/esm/chunk-ATNNGNAM.js +0 -2
- package/dist/esm/chunk-ATNNGNAM.js.map +0 -1
- package/dist/esm/chunk-B5I3IFK2.js +0 -113
- package/dist/esm/chunk-B5I3IFK2.js.map +0 -1
- package/dist/esm/chunk-DC2MKTMP.js +0 -2
- package/dist/esm/chunk-DC2MKTMP.js.map +0 -1
- package/dist/esm/chunk-EBHNXTGY.js +0 -2
- package/dist/esm/chunk-EBHNXTGY.js.map +0 -1
- package/dist/esm/chunk-ET4RPLX7.js +0 -32
- package/dist/esm/chunk-ET4RPLX7.js.map +0 -1
- package/dist/esm/chunk-H3IWAKC5.js +0 -34
- package/dist/esm/chunk-H3IWAKC5.js.map +0 -1
- package/dist/esm/chunk-H3RCKWE3.js +0 -2
- package/dist/esm/chunk-H3RCKWE3.js.map +0 -1
- package/dist/esm/chunk-HDKTD2IK.js +0 -49
- package/dist/esm/chunk-HDKTD2IK.js.map +0 -1
- package/dist/esm/chunk-IXQPSHNR.js +0 -32
- package/dist/esm/chunk-IXQPSHNR.js.map +0 -1
- package/dist/esm/chunk-MNBHQJKW.js +0 -2
- package/dist/esm/chunk-MNBHQJKW.js.map +0 -1
- package/dist/esm/chunk-NDUFFQA7.js +0 -24
- package/dist/esm/chunk-NDUFFQA7.js.map +0 -1
- package/dist/esm/chunk-NQ3CC7OA.js +0 -84
- package/dist/esm/chunk-NQ3CC7OA.js.map +0 -1
- package/dist/esm/chunk-QILM4R2Q.js +0 -54
- package/dist/esm/chunk-QILM4R2Q.js.map +0 -1
- package/dist/esm/chunk-RCHW4I55.js +0 -2
- package/dist/esm/chunk-RCHW4I55.js.map +0 -1
- package/dist/esm/chunk-RLFVKZHT.js +0 -30
- package/dist/esm/chunk-RLFVKZHT.js.map +0 -1
- package/dist/esm/chunk-S6WUE45S.js +0 -32
- package/dist/esm/chunk-S6WUE45S.js.map +0 -1
- package/dist/esm/chunk-SSLZWOID.js +0 -97
- package/dist/esm/chunk-SSLZWOID.js.map +0 -1
- package/dist/esm/chunk-VWQT7XSQ.js +0 -2
- package/dist/esm/chunk-VWQT7XSQ.js.map +0 -1
- package/dist/esm/chunk-WN4NSHNE.js +0 -32
- package/dist/esm/chunk-WN4NSHNE.js.map +0 -1
- package/dist/esm/chunk-XVCHU66N.js +0 -40
- package/dist/esm/chunk-XVCHU66N.js.map +0 -1
- package/dist/esm/chunk-YKV4YNJ4.js +0 -44
- package/dist/esm/chunk-YKV4YNJ4.js.map +0 -1
- package/dist/esm/chunk-YY3MZBYQ.js +0 -2
- package/dist/esm/chunk-YY3MZBYQ.js.map +0 -1
- package/dist/esm/chunk-Z4Q2SGNX.js +0 -144
- package/dist/esm/chunk-Z4Q2SGNX.js.map +0 -1
- package/dist/esm/chunk-ZBV5DZZB.js +0 -104
- package/dist/esm/chunk-ZBV5DZZB.js.map +0 -1
- package/dist/esm/components/icons/archive-box-icon.js.map +0 -1
- package/dist/esm/components/icons/bell-icon.js.map +0 -1
- package/dist/esm/components/icons/check-circle-icon.js.map +0 -1
- package/dist/esm/components/icons/index.js.map +0 -1
- package/dist/esm/components/inbox/bell.js.map +0 -1
- package/dist/esm/components/inbox/button.js.map +0 -1
- package/dist/esm/components/inbox/empty.js.map +0 -1
- package/dist/esm/components/inbox/inbox.js.map +0 -1
- package/dist/esm/components/inbox/index.js.map +0 -1
- package/dist/esm/components/inbox/loader.js.map +0 -1
- package/dist/esm/components/inbox/notification-header.js.map +0 -1
- package/dist/esm/components/inbox/notification-item/actions.js.map +0 -1
- package/dist/esm/components/inbox/notification-item/index.js.map +0 -1
- package/dist/esm/components/inbox/popover.js.map +0 -1
- package/dist/esm/components/index.js.map +0 -1
- package/dist/esm/contexts/StyleProvider.js.map +0 -1
- package/dist/esm/contexts/TeknifyProvider.js.map +0 -1
- package/dist/esm/contexts/index.js.map +0 -1
- package/dist/esm/dto/index.js.map +0 -1
- package/dist/esm/dto/notifications/index.js.map +0 -1
- package/dist/esm/dto/notifications/notification.interface.js.map +0 -1
- package/dist/esm/hooks/index.js.map +0 -1
- package/dist/esm/hooks/useNotifications.js.map +0 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/utils/const.js.map +0 -1
- package/dist/esm/utils/index.js.map +0 -1
@@ -1,97 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
notification_item_default
|
4
|
-
} from "./chunk-Z4Q2SGNX.js";
|
5
|
-
import {
|
6
|
-
empty_default
|
7
|
-
} from "./chunk-RLFVKZHT.js";
|
8
|
-
import {
|
9
|
-
loader_default
|
10
|
-
} from "./chunk-NDUFFQA7.js";
|
11
|
-
import {
|
12
|
-
notification_header_default
|
13
|
-
} from "./chunk-YKV4YNJ4.js";
|
14
|
-
import {
|
15
|
-
popover_default
|
16
|
-
} from "./chunk-ZBV5DZZB.js";
|
17
|
-
import {
|
18
|
-
bell_default
|
19
|
-
} from "./chunk-NQ3CC7OA.js";
|
20
|
-
import {
|
21
|
-
button_default
|
22
|
-
} from "./chunk-HDKTD2IK.js";
|
23
|
-
import {
|
24
|
-
COMPONENT_PREFIX
|
25
|
-
} from "./chunk-6FGP2HJW.js";
|
26
|
-
import {
|
27
|
-
useNotifications
|
28
|
-
} from "./chunk-B5I3IFK2.js";
|
29
|
-
import {
|
30
|
-
clsx_default,
|
31
|
-
createUseStyles
|
32
|
-
} from "./chunk-5ZHARJ3G.js";
|
33
|
-
|
34
|
-
// src/components/inbox/inbox.tsx
|
35
|
-
import { useCallback, useState } from "react";
|
36
|
-
import InfiniteScroll from "react-infinite-scroller";
|
37
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
38
|
-
var useStyles = createUseStyles(
|
39
|
-
{
|
40
|
-
inboxContent: {
|
41
|
-
height: "100%",
|
42
|
-
display: "flex",
|
43
|
-
flexDirection: "column"
|
44
|
-
},
|
45
|
-
inboxContentList: {
|
46
|
-
flex: 1,
|
47
|
-
overflowY: "auto"
|
48
|
-
}
|
49
|
-
},
|
50
|
-
{ name: COMPONENT_PREFIX }
|
51
|
-
);
|
52
|
-
var DEFAULT_COMPONENTS = {
|
53
|
-
Bell: bell_default,
|
54
|
-
Button: button_default,
|
55
|
-
NotificationHeader: notification_header_default,
|
56
|
-
Empty: empty_default,
|
57
|
-
Loader: loader_default,
|
58
|
-
NotificationItem: notification_item_default,
|
59
|
-
NotificationPopover: popover_default
|
60
|
-
};
|
61
|
-
var Inbox = ({ components }) => {
|
62
|
-
const [anchorElement, setAnchorElement] = useState(null);
|
63
|
-
const [isOpen, setIsOpen] = useState(false);
|
64
|
-
const { Bell, Empty, Loader, NotificationHeader, NotificationItem, NotificationPopover } = {
|
65
|
-
...DEFAULT_COMPONENTS,
|
66
|
-
...components
|
67
|
-
};
|
68
|
-
const toggleOpen = useCallback(() => {
|
69
|
-
setIsOpen((prev) => !prev);
|
70
|
-
}, []);
|
71
|
-
const { notifications, unread, isFirstLoad, hasMore, fetchMore, isError, error } = useNotifications();
|
72
|
-
const styles = useStyles();
|
73
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
74
|
-
/* @__PURE__ */ jsx(
|
75
|
-
Bell,
|
76
|
-
{
|
77
|
-
onClick: (event) => {
|
78
|
-
event.stopPropagation();
|
79
|
-
toggleOpen();
|
80
|
-
},
|
81
|
-
ref: setAnchorElement,
|
82
|
-
active: isOpen,
|
83
|
-
counts: unread
|
84
|
-
}
|
85
|
-
),
|
86
|
-
/* @__PURE__ */ jsx(NotificationPopover, { open: isOpen, anchorElement, onClose: toggleOpen, children: /* @__PURE__ */ jsxs("div", { className: clsx_default(styles.inboxContent), children: [
|
87
|
-
/* @__PURE__ */ jsx(NotificationHeader, {}),
|
88
|
-
/* @__PURE__ */ jsx("div", { className: clsx_default(styles.inboxContentList), children: /* @__PURE__ */ jsx(InfiniteScroll, { loadMore: fetchMore, hasMore, loader: /* @__PURE__ */ jsx(Loader, {}, 0), useWindow: false, children: isFirstLoad ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx(Fragment, { children: notifications.length ? /* @__PURE__ */ jsx(Fragment, { children: notifications.map((notification) => /* @__PURE__ */ jsx(NotificationItem, { notification }, notification._id)) }) : /* @__PURE__ */ jsx(Empty, {}) }) }) })
|
89
|
-
] }) })
|
90
|
-
] });
|
91
|
-
};
|
92
|
-
var inbox_default = Inbox;
|
93
|
-
|
94
|
-
export {
|
95
|
-
inbox_default
|
96
|
-
};
|
97
|
-
//# sourceMappingURL=chunk-SSLZWOID.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/components/inbox/inbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC, useCallback, useState } from 'react';\nimport InfiniteScroll from 'react-infinite-scroller';\nimport { createUseStyles } from 'react-jss';\nimport { useNotifications } from '../../hooks';\nimport { COMPONENT_PREFIX } from '../../utils';\nimport Bell, { BellProps } from './bell';\nimport Button, { ButtonProps } from './button';\nimport Empty, { EmptyProps } from './empty';\nimport Loader, { LoaderProps } from './loader';\nimport NotificationHeader, { NotificationHeaderProps } from './notification-header';\nimport NotificationItem, { NotificationItemProps } from './notification-item';\nimport NotificationPopover, { NotificationPopoverProps } from './popover';\n\nconst useStyles = createUseStyles(\n {\n inboxContent: {\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n },\n inboxContentList: {\n flex: 1,\n overflowY: 'auto',\n },\n },\n { name: COMPONENT_PREFIX },\n);\n\nexport interface Components {\n Bell: React.ComponentType<BellProps>;\n Button: React.ComponentType<ButtonProps>;\n NotificationHeader: React.ComponentType<NotificationHeaderProps>;\n NotificationItem: React.ComponentType<NotificationItemProps>;\n NotificationPopover: React.ComponentType<NotificationPopoverProps>;\n Loader: React.ComponentType<LoaderProps>;\n Empty: React.ComponentType<EmptyProps>;\n}\n\nconst DEFAULT_COMPONENTS: Components = {\n Bell,\n Button,\n NotificationHeader,\n Empty,\n Loader,\n NotificationItem,\n NotificationPopover,\n};\n\nexport interface InboxProps {\n components?: Partial<Components>;\n}\n\nconst Inbox: FC<InboxProps> = ({ components }) => {\n const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n const [isOpen, setIsOpen] = useState(false);\n const { Bell, Empty, Loader, NotificationHeader, NotificationItem, NotificationPopover } = {\n ...DEFAULT_COMPONENTS,\n ...components,\n };\n\n const toggleOpen = useCallback(() => {\n setIsOpen((prev) => !prev);\n }, []);\n\n const { notifications, unread, isFirstLoad, hasMore, fetchMore, isError, error } = useNotifications();\n\n const styles = useStyles();\n\n return (\n <>\n <Bell\n onClick={(event) => {\n event.stopPropagation();\n toggleOpen();\n }}\n ref={setAnchorElement as any}\n active={isOpen}\n counts={unread}\n />\n <NotificationPopover open={isOpen} anchorElement={anchorElement!} onClose={toggleOpen}>\n <div className={clsx(styles.inboxContent)}>\n <NotificationHeader />\n <div className={clsx(styles.inboxContentList)}>\n <InfiniteScroll loadMore={fetchMore} hasMore={hasMore} loader={<Loader key={0} />} useWindow={false}>\n {isFirstLoad ? (\n <></>\n ) : (\n <>\n {notifications.length ? (\n <>\n {notifications.map((notification) => (\n <NotificationItem key={notification._id} notification={notification} />\n ))}\n </>\n ) : (\n <Empty />\n )}\n </>\n )}\n </InfiniteScroll>\n </div>\n </div>\n </NotificationPopover>\n </>\n );\n};\n\nexport default Inbox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAa,aAAa,gBAAgB;AAC1C,OAAO,oBAAoB;AAqErB,SAeU,UAfV,KAUE,YAVF;AAzDN,IAAM,YAAY;AAAA,EAChB;AAAA,IACE,cAAc;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,EAAE,MAAM,iBAAiB;AAC3B;AAYA,IAAM,qBAAiC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAMA,IAAM,QAAwB,CAAC,EAAE,WAAW,MAAM;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA6B,IAAI;AAC3E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,MAAM,OAAO,QAAQ,oBAAoB,kBAAkB,oBAAoB,IAAI;AAAA,IACzF,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAEA,QAAM,aAAa,YAAY,MAAM;AACnC,cAAU,CAAC,SAAS,CAAC,IAAI;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,eAAe,QAAQ,aAAa,SAAS,WAAW,SAAS,MAAM,IAAI,iBAAiB;AAEpG,QAAM,SAAS,UAAU;AAEzB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,CAAC,UAAU;AAClB,gBAAM,gBAAgB;AACtB,qBAAW;AAAA,QACb;AAAA,QACA,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA;AAAA,IACV;AAAA,IACA,oBAAC,uBAAoB,MAAM,QAAQ,eAA+B,SAAS,YACzE,+BAAC,SAAI,WAAW,aAAK,OAAO,YAAY,GACtC;AAAA,0BAAC,sBAAmB;AAAA,MACpB,oBAAC,SAAI,WAAW,aAAK,OAAO,gBAAgB,GAC1C,8BAAC,kBAAe,UAAU,WAAW,SAAkB,QAAQ,oBAAC,YAAY,CAAG,GAAI,WAAW,OAC3F,wBACC,gCAAE,IAEF,gCACG,wBAAc,SACb,gCACG,wBAAc,IAAI,CAAC,iBAClB,oBAAC,oBAAwC,gBAAlB,aAAa,GAAiC,CACtE,GACH,IAEA,oBAAC,SAAM,GAEX,GAEJ,GACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1,32 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
var __create = Object.create;
|
3
|
-
var __defProp = Object.defineProperty;
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
-
var __commonJS = (cb, mod) => function __require() {
|
9
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
10
|
-
};
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
13
|
-
for (let key of __getOwnPropNames(from))
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
16
|
-
}
|
17
|
-
return to;
|
18
|
-
};
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
25
|
-
mod
|
26
|
-
));
|
27
|
-
|
28
|
-
export {
|
29
|
-
__commonJS,
|
30
|
-
__toESM
|
31
|
-
};
|
32
|
-
//# sourceMappingURL=chunk-WN4NSHNE.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1,40 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
clsx_default,
|
4
|
-
createUseStyles
|
5
|
-
} from "./chunk-5ZHARJ3G.js";
|
6
|
-
|
7
|
-
// src/contexts/StyleProvider.tsx
|
8
|
-
import { jsx } from "react/jsx-runtime";
|
9
|
-
var useStyles = createUseStyles({
|
10
|
-
styleProvider: {
|
11
|
-
fontFamily: "inherit, sans-serif",
|
12
|
-
fontSize: 13,
|
13
|
-
"--background-color": "#f1f1f1",
|
14
|
-
"--card-background-color": "#fff",
|
15
|
-
"--primary-color": "#000088",
|
16
|
-
"--secondary-color": "#00C16E",
|
17
|
-
"--tertiary-color": "#f6f6f6",
|
18
|
-
"--primary-color-darker": "#000066",
|
19
|
-
"--secondary-color-darker": "#009955",
|
20
|
-
"--border-radius": "12px",
|
21
|
-
"& *::-webkit-scrollbar": {
|
22
|
-
width: 8,
|
23
|
-
height: 8
|
24
|
-
},
|
25
|
-
"& *::-webkit-scrollbar-thumb": {
|
26
|
-
borderRadius: 10,
|
27
|
-
background: "#0003"
|
28
|
-
}
|
29
|
-
}
|
30
|
-
});
|
31
|
-
var StyleProvider = ({ children }) => {
|
32
|
-
const styles = useStyles();
|
33
|
-
return /* @__PURE__ */ jsx("div", { className: clsx_default(styles.styleProvider), children });
|
34
|
-
};
|
35
|
-
var StyleProvider_default = StyleProvider;
|
36
|
-
|
37
|
-
export {
|
38
|
-
StyleProvider_default
|
39
|
-
};
|
40
|
-
//# sourceMappingURL=chunk-XVCHU66N.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/contexts/StyleProvider.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC, PropsWithChildren } from 'react';\nimport { createUseStyles } from 'react-jss';\n\nconst useStyles = createUseStyles({\n styleProvider: {\n fontFamily: 'inherit, sans-serif',\n fontSize: 13,\n\n '--background-color': '#f1f1f1',\n '--card-background-color': '#fff',\n\n '--primary-color': '#000088',\n '--secondary-color': '#00C16E',\n '--tertiary-color': '#f6f6f6',\n\n '--primary-color-darker': '#000066',\n '--secondary-color-darker': '#009955',\n\n '--border-radius': '12px',\n\n '& *::-webkit-scrollbar': {\n width: 8,\n height: 8,\n },\n '& *::-webkit-scrollbar-thumb': {\n borderRadius: 10,\n background: '#0003',\n },\n },\n});\n\ninterface StyleProviderProps extends PropsWithChildren {}\n\nconst StyleProvider: FC<StyleProviderProps> = ({ children }) => {\n const styles = useStyles();\n\n return <div className={clsx(styles.styleProvider)}>{children}</div>;\n};\n\nexport default StyleProvider;\n"],"mappings":";;;;;;;AAqCS;AAjCT,IAAM,YAAY,gBAAgB;AAAA,EAChC,eAAe;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,sBAAsB;AAAA,IACtB,2BAA2B;AAAA,IAE3B,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IAEpB,0BAA0B;AAAA,IAC1B,4BAA4B;AAAA,IAE5B,mBAAmB;AAAA,IAEnB,0BAA0B;AAAA,MACxB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,gCAAgC;AAAA,MAC9B,cAAc;AAAA,MACd,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;AAID,IAAM,gBAAwC,CAAC,EAAE,SAAS,MAAM;AAC9D,QAAM,SAAS,UAAU;AAEzB,SAAO,oBAAC,SAAI,WAAW,aAAK,OAAO,aAAa,GAAI,UAAS;AAC/D;AAEA,IAAO,wBAAQ;","names":[]}
|
@@ -1,44 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
COMPONENT_PREFIX
|
4
|
-
} from "./chunk-6FGP2HJW.js";
|
5
|
-
import {
|
6
|
-
clsx_default,
|
7
|
-
createUseStyles
|
8
|
-
} from "./chunk-5ZHARJ3G.js";
|
9
|
-
|
10
|
-
// src/components/inbox/notification-header.tsx
|
11
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
12
|
-
var useStyles = createUseStyles(
|
13
|
-
{
|
14
|
-
notificationHeader: {
|
15
|
-
padding: "10px 15px",
|
16
|
-
borderBottom: "1px solid #0001",
|
17
|
-
display: "flex",
|
18
|
-
justifyContent: "space-between",
|
19
|
-
background: "var(--card-background-color)",
|
20
|
-
borderRadius: "5px 5px 0 0",
|
21
|
-
height: 36,
|
22
|
-
alignItems: "center"
|
23
|
-
},
|
24
|
-
notificationHeaderTitle: {
|
25
|
-
fontSize: 15,
|
26
|
-
fontWeight: 600,
|
27
|
-
flex: 1
|
28
|
-
}
|
29
|
-
},
|
30
|
-
{ name: COMPONENT_PREFIX }
|
31
|
-
);
|
32
|
-
var NotificationHeader = () => {
|
33
|
-
const styles = useStyles();
|
34
|
-
return /* @__PURE__ */ jsxs("div", { className: clsx_default(styles.notificationHeader), children: [
|
35
|
-
/* @__PURE__ */ jsx("h2", { className: clsx_default(styles.notificationHeaderTitle), children: "Notifications" }),
|
36
|
-
/* @__PURE__ */ jsx("div", {})
|
37
|
-
] });
|
38
|
-
};
|
39
|
-
var notification_header_default = NotificationHeader;
|
40
|
-
|
41
|
-
export {
|
42
|
-
notification_header_default
|
43
|
-
};
|
44
|
-
//# sourceMappingURL=chunk-YKV4YNJ4.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/components/inbox/notification-header.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport { COMPONENT_PREFIX } from '../../utils';\n\nconst useStyles = createUseStyles(\n {\n notificationHeader: {\n padding: '10px 15px',\n borderBottom: '1px solid #0001',\n display: 'flex',\n justifyContent: 'space-between',\n background: 'var(--card-background-color)',\n borderRadius: '5px 5px 0 0',\n height: 36,\n alignItems: 'center',\n },\n notificationHeaderTitle: {\n fontSize: 15,\n fontWeight: 600,\n flex: 1,\n },\n },\n { name: COMPONENT_PREFIX },\n);\n\nexport interface NotificationHeaderProps {}\n\nconst NotificationHeader: FC<NotificationHeaderProps> = () => {\n const styles = useStyles();\n\n return (\n <div className={clsx(styles.notificationHeader)}>\n <h2 className={clsx(styles.notificationHeaderTitle)}>Notifications</h2>\n <div></div>\n </div>\n );\n};\n\nexport default NotificationHeader;\n"],"mappings":";;;;;;;;;;AAgCI,SACE,KADF;AA3BJ,IAAM,YAAY;AAAA,EAChB;AAAA,IACE,oBAAoB;AAAA,MAClB,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,YAAY;AAAA,IACd;AAAA,IACA,yBAAyB;AAAA,MACvB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,EAAE,MAAM,iBAAiB;AAC3B;AAIA,IAAM,qBAAkD,MAAM;AAC5D,QAAM,SAAS,UAAU;AAEzB,SACE,qBAAC,SAAI,WAAW,aAAK,OAAO,kBAAkB,GAC5C;AAAA,wBAAC,QAAG,WAAW,aAAK,OAAO,uBAAuB,GAAG,2BAAa;AAAA,IAClE,oBAAC,SAAI;AAAA,KACP;AAEJ;AAEA,IAAO,8BAAQ;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1,144 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
actions_default
|
4
|
-
} from "./chunk-QILM4R2Q.js";
|
5
|
-
import {
|
6
|
-
button_default
|
7
|
-
} from "./chunk-HDKTD2IK.js";
|
8
|
-
import {
|
9
|
-
COMPONENT_PREFIX
|
10
|
-
} from "./chunk-6FGP2HJW.js";
|
11
|
-
import {
|
12
|
-
clsx_default,
|
13
|
-
createUseStyles
|
14
|
-
} from "./chunk-5ZHARJ3G.js";
|
15
|
-
|
16
|
-
// src/components/inbox/notification-item/index.tsx
|
17
|
-
import sanitize from "sanitize-html";
|
18
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
19
|
-
var useStyles = createUseStyles(
|
20
|
-
{
|
21
|
-
notificationItem: {
|
22
|
-
padding: "10px 15px",
|
23
|
-
display: "flex",
|
24
|
-
flexWrap: "wrap",
|
25
|
-
columnGap: 10,
|
26
|
-
flexDirection: "column",
|
27
|
-
margin: 10,
|
28
|
-
background: "var(--card-background-color)",
|
29
|
-
borderRadius: 10,
|
30
|
-
border: "1px solid #ddd",
|
31
|
-
position: "relative",
|
32
|
-
[`& .${COMPONENT_PREFIX}-actions`]: {
|
33
|
-
visibility: "hidden",
|
34
|
-
opacity: 0,
|
35
|
-
transition: "0.3s ease-in-out"
|
36
|
-
},
|
37
|
-
[`&:hover .${COMPONENT_PREFIX}-actions`]: {
|
38
|
-
visibility: "visible",
|
39
|
-
opacity: 1
|
40
|
-
}
|
41
|
-
},
|
42
|
-
notificationItemImage: {
|
43
|
-
width: 24,
|
44
|
-
height: 24,
|
45
|
-
objectFit: "cover"
|
46
|
-
},
|
47
|
-
notificationItemTitle: {
|
48
|
-
fontSize: 14,
|
49
|
-
fontWeight: 600,
|
50
|
-
paddingBottom: 5,
|
51
|
-
whiteSpace: "nowrap",
|
52
|
-
overflow: "hidden",
|
53
|
-
textOverflow: "ellipsis"
|
54
|
-
},
|
55
|
-
notificationItemBody: {
|
56
|
-
fontSize: 14,
|
57
|
-
lineClamp: 2,
|
58
|
-
overflow: "hidden",
|
59
|
-
textOverflow: "ellipsis"
|
60
|
-
},
|
61
|
-
notificationItemActions: {
|
62
|
-
display: "flex",
|
63
|
-
gap: 8,
|
64
|
-
marginTop: 10,
|
65
|
-
alignItems: "center",
|
66
|
-
justifyContent: "flex-end",
|
67
|
-
width: "100%"
|
68
|
-
},
|
69
|
-
unreadDot: {
|
70
|
-
width: 7,
|
71
|
-
height: 7,
|
72
|
-
borderRadius: 100,
|
73
|
-
background: "var(--primary-color)",
|
74
|
-
position: "relative",
|
75
|
-
"&::before": {
|
76
|
-
content: '""',
|
77
|
-
position: "absolute",
|
78
|
-
top: -3,
|
79
|
-
left: -3,
|
80
|
-
width: "calc(100% + 6px)",
|
81
|
-
height: "calc(100% + 6px)",
|
82
|
-
borderRadius: 100,
|
83
|
-
background: "var(--primary-color)",
|
84
|
-
opacity: 0.2
|
85
|
-
}
|
86
|
-
}
|
87
|
-
},
|
88
|
-
{ name: COMPONENT_PREFIX }
|
89
|
-
);
|
90
|
-
var NotificationItem = ({ notification }) => {
|
91
|
-
const styles = useStyles();
|
92
|
-
return /* @__PURE__ */ jsxs("div", { className: clsx_default(styles.notificationItem), children: [
|
93
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, width: "100%" }, children: [
|
94
|
-
/* @__PURE__ */ jsx("div", { children: notification.icon && /* @__PURE__ */ jsx(
|
95
|
-
"img",
|
96
|
-
{
|
97
|
-
src: notification.icon,
|
98
|
-
alt: notification.title,
|
99
|
-
width: 32,
|
100
|
-
height: 32,
|
101
|
-
className: clsx_default(styles.notificationItemImage)
|
102
|
-
}
|
103
|
-
) }),
|
104
|
-
/* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "hidden" }, children: [
|
105
|
-
/* @__PURE__ */ jsx("h3", { className: clsx_default(styles.notificationItemTitle), children: notification.title }),
|
106
|
-
/* @__PURE__ */ jsx(
|
107
|
-
"div",
|
108
|
-
{
|
109
|
-
dangerouslySetInnerHTML: { __html: sanitize(notification.message) },
|
110
|
-
className: clsx_default(styles.notificationItemBody)
|
111
|
-
}
|
112
|
-
)
|
113
|
-
] }),
|
114
|
-
!notification.isRead && /* @__PURE__ */ jsx("div", { className: clsx_default(styles.unreadDot) })
|
115
|
-
] }),
|
116
|
-
/* @__PURE__ */ jsxs("div", { className: clsx_default(styles.notificationItemActions), children: [
|
117
|
-
notification.secondary_action && /* @__PURE__ */ jsx(
|
118
|
-
"a",
|
119
|
-
{
|
120
|
-
href: notification.secondary_action.href,
|
121
|
-
target: notification.secondary_action.target,
|
122
|
-
rel: notification.secondary_action.rel,
|
123
|
-
children: /* @__PURE__ */ jsx(button_default, { variant: "secondary", children: notification.secondary_action.label })
|
124
|
-
}
|
125
|
-
),
|
126
|
-
notification.primary_action && /* @__PURE__ */ jsx(
|
127
|
-
"a",
|
128
|
-
{
|
129
|
-
href: notification.primary_action.href,
|
130
|
-
target: notification.primary_action.target,
|
131
|
-
rel: notification.primary_action.rel,
|
132
|
-
children: /* @__PURE__ */ jsx(button_default, { variant: "primary", children: notification.primary_action.label })
|
133
|
-
}
|
134
|
-
)
|
135
|
-
] }),
|
136
|
-
/* @__PURE__ */ jsx(actions_default, { notification })
|
137
|
-
] });
|
138
|
-
};
|
139
|
-
var notification_item_default = NotificationItem;
|
140
|
-
|
141
|
-
export {
|
142
|
-
notification_item_default
|
143
|
-
};
|
144
|
-
//# sourceMappingURL=chunk-Z4Q2SGNX.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/components/inbox/notification-item/index.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport sanitize from 'sanitize-html';\nimport { Notification } from '../../../dto';\nimport { COMPONENT_PREFIX } from '../../../utils';\nimport Button from '../button';\nimport NotificationItemActions from './actions';\n\nexport interface NotificationItemProps {\n notification: Notification;\n}\n\nconst useStyles = createUseStyles(\n {\n notificationItem: {\n padding: '10px 15px',\n display: 'flex',\n flexWrap: 'wrap',\n columnGap: 10,\n flexDirection: 'column',\n margin: 10,\n background: 'var(--card-background-color)',\n borderRadius: 10,\n border: '1px solid #ddd',\n position: 'relative',\n\n [`& .${COMPONENT_PREFIX}-actions`]: {\n visibility: 'hidden',\n opacity: 0,\n transition: '0.3s ease-in-out',\n },\n\n [`&:hover .${COMPONENT_PREFIX}-actions`]: {\n visibility: 'visible',\n opacity: 1,\n },\n },\n notificationItemImage: {\n width: 24,\n height: 24,\n objectFit: 'cover',\n },\n notificationItemTitle: {\n fontSize: 14,\n fontWeight: 600,\n paddingBottom: 5,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n notificationItemBody: {\n fontSize: 14,\n lineClamp: 2,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n notificationItemActions: {\n display: 'flex',\n gap: 8,\n marginTop: 10,\n alignItems: 'center',\n justifyContent: 'flex-end',\n width: '100%',\n },\n unreadDot: {\n width: 7,\n height: 7,\n borderRadius: 100,\n background: 'var(--primary-color)',\n position: 'relative',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: -3,\n left: -3,\n width: 'calc(100% + 6px)',\n height: 'calc(100% + 6px)',\n borderRadius: 100,\n background: 'var(--primary-color)',\n opacity: 0.2,\n },\n },\n },\n { name: COMPONENT_PREFIX },\n);\n\nconst NotificationItem: FC<NotificationItemProps> = ({ notification }) => {\n const styles = useStyles();\n\n return (\n <div className={clsx(styles.notificationItem)}>\n <div style={{ display: 'flex', gap: 10, width: '100%' }}>\n <div>\n {notification.icon && (\n <img\n src={notification.icon}\n alt={notification.title}\n width={32}\n height={32}\n className={clsx(styles.notificationItemImage)}\n />\n )}\n </div>\n\n <div style={{ flex: 1, overflow: 'hidden' }}>\n <h3 className={clsx(styles.notificationItemTitle)}>{notification.title}</h3>\n <div\n dangerouslySetInnerHTML={{ __html: sanitize(notification.message) }}\n className={clsx(styles.notificationItemBody)}\n />\n </div>\n\n {!notification.isRead && <div className={clsx(styles.unreadDot)} />}\n </div>\n\n <div className={clsx(styles.notificationItemActions)}>\n {notification.secondary_action && (\n <a\n href={notification.secondary_action.href}\n target={notification.secondary_action.target}\n rel={notification.secondary_action.rel}\n >\n <Button variant='secondary'>{notification.secondary_action.label}</Button>\n </a>\n )}\n\n {notification.primary_action && (\n <a\n href={notification.primary_action.href}\n target={notification.primary_action.target}\n rel={notification.primary_action.rel}\n >\n <Button variant='primary'>{notification.primary_action.label}</Button>\n </a>\n )}\n </div>\n\n <NotificationItemActions notification={notification} />\n </div>\n );\n};\n\nexport default NotificationItem;\n"],"mappings":"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","names":[]}
|
@@ -1,104 +0,0 @@
|
|
1
|
-
"use client"
|
2
|
-
import {
|
3
|
-
COMPONENT_PREFIX
|
4
|
-
} from "./chunk-6FGP2HJW.js";
|
5
|
-
import {
|
6
|
-
clsx_default,
|
7
|
-
createUseStyles
|
8
|
-
} from "./chunk-5ZHARJ3G.js";
|
9
|
-
|
10
|
-
// src/components/inbox/popover.tsx
|
11
|
-
import { useEffect, useMemo, useState } from "react";
|
12
|
-
import { jsx } from "react/jsx-runtime";
|
13
|
-
var useStyles = createUseStyles(
|
14
|
-
{
|
15
|
-
popover: {
|
16
|
-
width: "100%",
|
17
|
-
height: "100%",
|
18
|
-
maxWidth: 400,
|
19
|
-
maxHeight: 500,
|
20
|
-
boxShadow: "0 10px 40px #0001",
|
21
|
-
position: "fixed",
|
22
|
-
background: "#fff",
|
23
|
-
borderRadius: 10,
|
24
|
-
visibility: "hidden",
|
25
|
-
opacity: 0,
|
26
|
-
scale: 0.8,
|
27
|
-
transition: "all 0.3s",
|
28
|
-
backgroundColor: "var(--background-color)",
|
29
|
-
border: "1px solid var(--card-background-color)"
|
30
|
-
},
|
31
|
-
popoverOpen: {
|
32
|
-
top: 0,
|
33
|
-
left: 0,
|
34
|
-
visibility: "visible",
|
35
|
-
opacity: 1,
|
36
|
-
scale: 1
|
37
|
-
}
|
38
|
-
},
|
39
|
-
{ name: COMPONENT_PREFIX }
|
40
|
-
);
|
41
|
-
var NotificationPopover = ({ open, anchorElement, onClose, children }) => {
|
42
|
-
const styles = useStyles();
|
43
|
-
const [popoverElement, setPopoverElement] = useState(null);
|
44
|
-
const [windowWidth, setWindowWidth] = useState(typeof window === "undefined" ? 0 : window.innerWidth);
|
45
|
-
const top = useMemo(() => {
|
46
|
-
if (!anchorElement) return 0;
|
47
|
-
const bound = anchorElement.getBoundingClientRect();
|
48
|
-
return bound.top + bound.height + 20;
|
49
|
-
}, [anchorElement, windowWidth]);
|
50
|
-
const left = useMemo(() => {
|
51
|
-
if (!anchorElement) return 0;
|
52
|
-
const bound = anchorElement.getBoundingClientRect();
|
53
|
-
return bound.left + 10;
|
54
|
-
}, [anchorElement, windowWidth]);
|
55
|
-
const isOutside = useMemo(() => {
|
56
|
-
if (!popoverElement || !anchorElement) return true;
|
57
|
-
const anchorBound = anchorElement.getBoundingClientRect();
|
58
|
-
const popoverBound = popoverElement.getBoundingClientRect();
|
59
|
-
return anchorBound.left + popoverBound.width > windowWidth;
|
60
|
-
}, [popoverElement, anchorElement, windowWidth]);
|
61
|
-
useEffect(() => {
|
62
|
-
const handler = () => {
|
63
|
-
if (!open) return;
|
64
|
-
onClose?.();
|
65
|
-
};
|
66
|
-
window.addEventListener("click", handler);
|
67
|
-
return () => {
|
68
|
-
window.removeEventListener("click", handler);
|
69
|
-
};
|
70
|
-
}, [open]);
|
71
|
-
useEffect(() => {
|
72
|
-
const handleResize = () => {
|
73
|
-
setWindowWidth(window.innerWidth);
|
74
|
-
};
|
75
|
-
window.addEventListener("resize", handleResize);
|
76
|
-
return () => {
|
77
|
-
window.removeEventListener("resize", handleResize);
|
78
|
-
};
|
79
|
-
}, []);
|
80
|
-
return /* @__PURE__ */ jsx(
|
81
|
-
"div",
|
82
|
-
{
|
83
|
-
className: clsx_default(styles.popover, open && styles.popoverOpen),
|
84
|
-
style: {
|
85
|
-
top,
|
86
|
-
left,
|
87
|
-
...isOutside ? {
|
88
|
-
transform: "translateX(calc(-100% + 20px))"
|
89
|
-
} : {}
|
90
|
-
},
|
91
|
-
ref: setPopoverElement,
|
92
|
-
onClick: (event) => {
|
93
|
-
event.stopPropagation();
|
94
|
-
},
|
95
|
-
children
|
96
|
-
}
|
97
|
-
);
|
98
|
-
};
|
99
|
-
var popover_default = NotificationPopover;
|
100
|
-
|
101
|
-
export {
|
102
|
-
popover_default
|
103
|
-
};
|
104
|
-
//# sourceMappingURL=chunk-ZBV5DZZB.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/components/inbox/popover.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { FC, PropsWithChildren, useEffect, useMemo, useState } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport { COMPONENT_PREFIX } from '../../utils';\n\nconst useStyles = createUseStyles(\n {\n popover: {\n width: '100%',\n height: '100%',\n maxWidth: 400,\n maxHeight: 500,\n boxShadow: '0 10px 40px #0001',\n position: 'fixed',\n background: '#fff',\n borderRadius: 10,\n visibility: 'hidden',\n opacity: 0,\n scale: 0.8,\n transition: 'all 0.3s',\n backgroundColor: 'var(--background-color)',\n border: '1px solid var(--card-background-color)',\n },\n popoverOpen: {\n top: 0,\n left: 0,\n visibility: 'visible',\n opacity: 1,\n scale: 1,\n },\n },\n { name: COMPONENT_PREFIX },\n);\n\nexport interface NotificationPopoverProps extends PropsWithChildren {\n open?: boolean;\n anchorElement?: HTMLElement;\n onClose?: () => void;\n}\n\nconst NotificationPopover: FC<NotificationPopoverProps> = ({ open, anchorElement, onClose, children }) => {\n const styles = useStyles();\n const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(null);\n const [windowWidth, setWindowWidth] = useState(typeof window === 'undefined' ? 0 : window.innerWidth);\n\n const top = useMemo(() => {\n if (!anchorElement) return 0;\n const bound = anchorElement.getBoundingClientRect();\n return bound.top + bound.height + 20;\n }, [anchorElement, windowWidth]);\n\n const left = useMemo(() => {\n if (!anchorElement) return 0;\n const bound = anchorElement.getBoundingClientRect();\n return bound.left + 10;\n }, [anchorElement, windowWidth]);\n\n const isOutside = useMemo(() => {\n if (!popoverElement || !anchorElement) return true;\n const anchorBound = anchorElement.getBoundingClientRect();\n const popoverBound = popoverElement.getBoundingClientRect();\n\n return anchorBound.left + popoverBound.width > windowWidth;\n }, [popoverElement, anchorElement, windowWidth]);\n\n useEffect(() => {\n const handler = () => {\n if (!open) return;\n onClose?.();\n };\n\n window.addEventListener('click', handler);\n\n return () => {\n window.removeEventListener('click', handler);\n };\n }, [open]);\n\n useEffect(() => {\n const handleResize = () => {\n setWindowWidth(window.innerWidth);\n };\n window.addEventListener('resize', handleResize);\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, []);\n\n return (\n <div\n className={clsx(styles.popover, open && styles.popoverOpen)}\n style={{\n top,\n left,\n ...(isOutside\n ? {\n transform: 'translateX(calc(-100% + 20px))',\n }\n : {}),\n }}\n ref={setPopoverElement as any}\n onClick={(event) => {\n event.stopPropagation();\n }}\n >\n {children}\n </div>\n );\n};\n\nexport default NotificationPopover;\n"],"mappings":";;;;;;;;;;AACA,SAAgC,WAAW,SAAS,gBAAgB;AAwFhE;AApFJ,IAAM,YAAY;AAAA,EAChB;AAAA,IACE,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,WAAW;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,QAAQ;AAAA,IACV;AAAA,IACA,aAAa;AAAA,MACX,KAAK;AAAA,MACL,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,EAAE,MAAM,iBAAiB;AAC3B;AAQA,IAAM,sBAAoD,CAAC,EAAE,MAAM,eAAe,SAAS,SAAS,MAAM;AACxG,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA6B,IAAI;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,OAAO,WAAW,cAAc,IAAI,OAAO,UAAU;AAEpG,QAAM,MAAM,QAAQ,MAAM;AACxB,QAAI,CAAC,cAAe,QAAO;AAC3B,UAAM,QAAQ,cAAc,sBAAsB;AAClD,WAAO,MAAM,MAAM,MAAM,SAAS;AAAA,EACpC,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,CAAC,cAAe,QAAO;AAC3B,UAAM,QAAQ,cAAc,sBAAsB;AAClD,WAAO,MAAM,OAAO;AAAA,EACtB,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,CAAC,kBAAkB,CAAC,cAAe,QAAO;AAC9C,UAAM,cAAc,cAAc,sBAAsB;AACxD,UAAM,eAAe,eAAe,sBAAsB;AAE1D,WAAO,YAAY,OAAO,aAAa,QAAQ;AAAA,EACjD,GAAG,CAAC,gBAAgB,eAAe,WAAW,CAAC;AAE/C,YAAU,MAAM;AACd,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,KAAM;AACX,gBAAU;AAAA,IACZ;AAEA,WAAO,iBAAiB,SAAS,OAAO;AAExC,WAAO,MAAM;AACX,aAAO,oBAAoB,SAAS,OAAO;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,UAAM,eAAe,MAAM;AACzB,qBAAe,OAAO,UAAU;AAAA,IAClC;AACA,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAK,OAAO,SAAS,QAAQ,OAAO,WAAW;AAAA,MAC1D,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,GAAI,YACA;AAAA,UACE,WAAW;AAAA,QACb,IACA,CAAC;AAAA,MACP;AAAA,MACA,KAAK;AAAA,MACL,SAAS,CAAC,UAAU;AAClB,cAAM,gBAAgB;AAAA,MACxB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/esm/index.js.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|