@stack-spot/portal-components 1.3.2 → 1.3.3
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 +4 -2
- package/dist/components/Notifications/NotificationComponent.d.ts.map +1 -1
- package/dist/components/Notifications/NotificationComponent.js +1 -5
- package/dist/components/Notifications/NotificationComponent.js.map +1 -1
- package/dist/components/Notifications/NotificationItem.d.ts.map +1 -1
- package/dist/components/Notifications/NotificationItem.js +10 -10
- package/dist/components/Notifications/NotificationItem.js.map +1 -1
- package/package.json +6 -6
- package/src/components/Notifications/NotificationComponent.tsx +1 -6
- package/src/components/Notifications/NotificationItem.tsx +40 -35
package/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## [1.3.
|
|
3
|
+
## [1.3.3](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.3.2...portal-components@v1.3.3) (2024-06-25)
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
### Bug Fixes
|
|
7
7
|
|
|
8
|
-
*
|
|
8
|
+
* notifications ([97776bd](https://github.com/stack-spot/portal-commons/commit/97776bd9799fa7492091247dd31fcae1bf900f37))
|
|
9
|
+
|
|
10
|
+
## [1.3.2](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.3.0...portal-components@v1.3.1) (2024-06-20)
|
|
9
11
|
|
|
10
12
|
## [1.3.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.2.0...portal-components@v1.3.1) (2024-06-19)
|
|
11
13
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK1D,OAAO,EAAoB,uBAAuB,EAAE,qBAAqB,EAAc,MAAM,SAAS,CAAA;AAEtG,UAAU,KAAK;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;
|
|
1
|
+
{"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAA;AAG9C,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK1D,OAAO,EAAoB,uBAAuB,EAAE,qBAAqB,EAAc,MAAM,SAAS,CAAA;AAEtG,UAAU,KAAK;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAkID,UAAU,KAAK;IACb,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;IACnG,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC9D,oBAAoB,EAAE,YAAY,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,6NAK/B,KAAK,4CAuFP,CAAA"}
|
|
@@ -12,8 +12,6 @@ import { ScrollView } from '../ScrollView.js';
|
|
|
12
12
|
import { StatusCircle } from '../StatusCircle.js';
|
|
13
13
|
import { NotificationItem } from './NotificationItem.js';
|
|
14
14
|
import { NotificationType, UnreadType } from './types.js';
|
|
15
|
-
const ANIMATION_DURATION_MS = 300;
|
|
16
|
-
const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`;
|
|
17
15
|
const NotificationsComponent = styled(Flex) `
|
|
18
16
|
max-height: 0;
|
|
19
17
|
z-index: 2;
|
|
@@ -26,7 +24,6 @@ const NotificationsComponent = styled(Flex) `
|
|
|
26
24
|
&.visible {
|
|
27
25
|
min-height: 802px;
|
|
28
26
|
visibility: visible;
|
|
29
|
-
transition: ${MAX_HEIGHT_TRANSITION};
|
|
30
27
|
}
|
|
31
28
|
|
|
32
29
|
.content {
|
|
@@ -36,7 +33,6 @@ const NotificationsComponent = styled(Flex) `
|
|
|
36
33
|
background-color: ${theme.color.light[300]};
|
|
37
34
|
overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
|
|
38
35
|
overflow-x: hidden;
|
|
39
|
-
transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
|
|
40
36
|
}
|
|
41
37
|
|
|
42
38
|
&::after {
|
|
@@ -101,7 +97,7 @@ export const NotificationComponent = ({ hasUnreadNotification, onMarkAsReadUnrea
|
|
|
101
97
|
return (_jsxs(Flex, { sx: { position: 'relative' }, children: [_jsx(IconButton, { "aria-label": t.openNotifications, onClick: () => {
|
|
102
98
|
onClickViewNotifications();
|
|
103
99
|
setVisible(true);
|
|
104
|
-
}, sx: { border: 'none', bg: 'transparent' }, children: _jsx(IconBox, { size: "md", className: "notificationsTour", children: _jsx(Bell, {}) }) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, "aria-label": t.hasUnread, children: _jsx(StatusCircle, { status: 'danger' }) }), visible && _jsx(Overlay, {}), _jsx(NotificationsComponent, { className: listToClass(['selection-list', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { w: "100%", children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconButton, { onClick: () => setVisible(false), "aria-label": t.close, children: _jsx(IconBox, { size: "xs", children: _jsx(TimesMini, {}) }) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: '630px' }, children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", children: notifications?.map((item) => (_jsx(NotificationItem, { notification: item, isSummary: isSummary, onClickMarkReadUnread: (read, type) => onMarkAsReadUnread(item.id, read, type) }, item.id))) }) }) }) })
|
|
100
|
+
}, sx: { border: 'none', bg: 'transparent' }, children: _jsx(IconBox, { size: "md", className: "notificationsTour", children: _jsx(Bell, {}) }) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, "aria-label": t.hasUnread, children: _jsx(StatusCircle, { status: 'danger' }) }), visible && _jsx(Overlay, {}), _jsx(NotificationsComponent, { className: listToClass(['selection-list', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { w: "100%", children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconButton, { onClick: () => setVisible(false), "aria-label": t.close, children: _jsx(IconBox, { size: "xs", children: _jsx(TimesMini, {}) }) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, children: _jsx(ScrollView, { direction: "vertical", style: { maxHeight: '630px' }, children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", flexDirection: "column", children: notifications?.map((item) => (_jsx(NotificationItem, { notification: item, isSummary: isSummary, onClickMarkReadUnread: (read, type) => onMarkAsReadUnread(item.id, read, type) }, item.id))) }) }) }) })
|
|
105
101
|
:
|
|
106
102
|
_jsx(_Fragment, { children: placeholderComponent }) })] }), _jsx(Flex, { w: "100%", pt: 3, children: _jsx(Button, { size: "sm", sx: { width: '100%' }, colorScheme: "inverse", appearance: "text", onClick: () => {
|
|
107
103
|
setVisible(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,YAAY,EAAc,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,gBAAgB,EAAkD,UAAU,EAAE,MAAM,SAAS,CAAA;AAMtG,MAAM,
|
|
1
|
+
{"version":3,"file":"NotificationComponent.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationComponent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAe/C,UAAU,KAAK;IACb,YAAY,EAAE,qBAAqB,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CACpB;AAqGD,UAAU,qBAAsB,SAAQ,KAAK;IAC3C,qBAAqB,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;CAC/E;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,uDAAwD,qBAAqB,4CA8BzG,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { Button, Flex, IconBox, Text } from '@citric/core';
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Button, Flex, IconBox, Text } from '@citric/core';
|
|
3
3
|
import { Envelope, EnvelopeOpen } from '@citric/icons';
|
|
4
4
|
import { IconButton, Tooltip } from '@citric/ui';
|
|
5
5
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
@@ -30,12 +30,7 @@ const style = {
|
|
|
30
30
|
*
|
|
31
31
|
* @param props the component's props {@link NotificationItemProps}.
|
|
32
32
|
*/
|
|
33
|
-
const NotificationHeader = ({ notification, isSummary
|
|
34
|
-
const t = useTranslate(dictionary);
|
|
35
|
-
return (_jsxs(Flex, { justifyContent: "space-between", mb: 2, sx: { maxWidth: isSummary ? '330px' : '100%' }, flexWrap: "nowrap", children: [_jsx(Text, { appearance: isSummary ? 'body2' : 'body1', nowrapEllipsis: true, children: notification.title }), _jsx(Tooltip, { text: notification.committed ? t.markAsUnread : t.markAsRead, position: "left", id: `tooltip-${notification.title}`, role: "tooltip", sx: style.tooltip, children: _jsx(IconButton, { "aria-describedby": `tooltip-${notification.title}`, children: _jsx(IconBox, { size: "xs", onClick: () => {
|
|
36
|
-
onClickMarkReadUnread(!notification.committed, 'icon');
|
|
37
|
-
}, children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) }) }) })] }));
|
|
38
|
-
};
|
|
33
|
+
const NotificationHeader = ({ notification, isSummary }) => (_jsx(Flex, { justifyContent: "space-between", mb: 2, sx: { maxWidth: isSummary ? '330px' : '100%' }, flexWrap: "nowrap", children: _jsx(Text, { appearance: isSummary ? 'body2' : 'body1', nowrapEllipsis: true, children: notification.title }) }));
|
|
39
34
|
/**
|
|
40
35
|
* Get the number of days ago from the given date string.
|
|
41
36
|
*
|
|
@@ -56,7 +51,7 @@ const NotificationContent = ({ notification, isSummary }) => {
|
|
|
56
51
|
const { formatDate } = useDateFormatter();
|
|
57
52
|
const t = useTranslate(dictionary);
|
|
58
53
|
const daysAgo = getDaysAgo(notification.trigger_at);
|
|
59
|
-
return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, children: _jsx(LazyMarkdown, { children: notification.description }) }), _jsxs(Flex, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t[notification.context] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" }), !isSummary && _jsxs(_Fragment, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: formatDate(notification.
|
|
54
|
+
return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, children: _jsx(LazyMarkdown, { children: notification.description }) }), _jsxs(Flex, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t[notification.context] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" }), !isSummary && _jsxs(_Fragment, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: formatDate(notification.trigger_at) }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" })] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: daysAgo > 0 ? daysAgo + ' ' + t.daysAgo : t.today })] })] }));
|
|
60
55
|
};
|
|
61
56
|
/**
|
|
62
57
|
* NotificationFooter component that renders the footer of a notification.
|
|
@@ -73,7 +68,12 @@ const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }) => {
|
|
|
73
68
|
*
|
|
74
69
|
* @param props the component's props {@link NotificationItemProps}.
|
|
75
70
|
*/
|
|
76
|
-
export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }) =>
|
|
71
|
+
export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }) => {
|
|
72
|
+
const t = useTranslate(dictionary);
|
|
73
|
+
return (_jsxs(Box, { sx: { position: 'relative' }, children: [_jsxs(Flex, { bg: "light.400", p: "3 3 3 5", r: "xs", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], notification.committed), children: [_jsx(NotificationHeader, { notification: notification, isSummary: isSummary, onClickMarkReadUnread: onClickMarkReadUnread }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary }), notification.call_to_action && _jsx(NotificationFooter, { call_to_action: notification.call_to_action, onClickMarkReadUnread: (type) => onClickMarkReadUnread(notification.committed, type) })] }), _jsx(Box, { sx: { position: 'absolute', top: '8px', right: '8px' }, children: _jsx(Tooltip, { text: notification.committed ? t.markAsUnread : t.markAsRead, position: "left", id: `tooltip-${notification.title}`, role: "tooltip", sx: style.tooltip, children: _jsx(IconButton, { "aria-describedby": `tooltip-${notification.title}`, sx: { opacity: notification.committed ? 0.5 : 1 }, children: _jsx(IconBox, { size: "xs", onClick: () => {
|
|
74
|
+
onClickMarkReadUnread(notification.committed, 'icon');
|
|
75
|
+
}, children: notification.committed ? _jsx(Envelope, {}) : _jsx(EnvelopeOpen, {}) }) }) }) })] }));
|
|
76
|
+
};
|
|
77
77
|
const dictionary = {
|
|
78
78
|
en: {
|
|
79
79
|
takeMeThere: 'Take me there',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAiD,IAAI,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -18,6 +18,11 @@
|
|
|
18
18
|
"./svg": "./dist/svg/index.js",
|
|
19
19
|
"./anchor": "./dist/context/anchor.js"
|
|
20
20
|
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
|
|
23
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
24
|
+
"check-tree-shaking": "agadoo"
|
|
25
|
+
},
|
|
21
26
|
"peerDependencies": {
|
|
22
27
|
"@citric/core": "^6.0.0",
|
|
23
28
|
"@citric/icons": "^5.4.0 || ^6.0.0",
|
|
@@ -60,10 +65,5 @@
|
|
|
60
65
|
"reactour": "^1.19.3",
|
|
61
66
|
"rehype-raw": "^7.0.0",
|
|
62
67
|
"remark-gfm": "^4.0.0"
|
|
63
|
-
},
|
|
64
|
-
"scripts": {
|
|
65
|
-
"build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
|
|
66
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
67
|
-
"check-tree-shaking": "agadoo"
|
|
68
68
|
}
|
|
69
69
|
}
|
|
@@ -16,9 +16,6 @@ interface Props {
|
|
|
16
16
|
hasUnreadNotification?: boolean,
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
const ANIMATION_DURATION_MS = 300
|
|
20
|
-
const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
|
|
21
|
-
|
|
22
19
|
const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
|
|
23
20
|
max-height: 0;
|
|
24
21
|
z-index: 2;
|
|
@@ -31,7 +28,6 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
|
|
|
31
28
|
&.visible {
|
|
32
29
|
min-height: 802px;
|
|
33
30
|
visibility: visible;
|
|
34
|
-
transition: ${MAX_HEIGHT_TRANSITION};
|
|
35
31
|
}
|
|
36
32
|
|
|
37
33
|
.content {
|
|
@@ -41,7 +37,6 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
|
|
|
41
37
|
background-color: ${theme.color.light[300]};
|
|
42
38
|
overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
|
|
43
39
|
overflow-x: hidden;
|
|
44
|
-
transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
|
|
45
40
|
}
|
|
46
41
|
|
|
47
42
|
&::after {
|
|
@@ -228,7 +223,7 @@ export const NotificationComponent = ({
|
|
|
228
223
|
hasMore={hasNextPage}
|
|
229
224
|
>
|
|
230
225
|
<ScrollView direction="vertical" style={{ maxHeight: '630px' }}>
|
|
231
|
-
<Flex sx={{ gap: '4px' }} mr="3">
|
|
226
|
+
<Flex sx={{ gap: '4px' }} mr="3" flexDirection="column">
|
|
232
227
|
{notifications?.map((item) => (
|
|
233
228
|
<NotificationItem key={item.id} notification={item}
|
|
234
229
|
isSummary={isSummary} onClickMarkReadUnread={(read, type) => onMarkAsReadUnread(item.id, read, type)} />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Button, Flex, IconBox, OneOfColorSchemesWithVariants, Styles, SxProp, Text } from '@citric/core'
|
|
1
|
+
import { Box, Button, Flex, IconBox, OneOfColorSchemesWithVariants, Styles, SxProp, Text } from '@citric/core'
|
|
2
2
|
import { Envelope, EnvelopeOpen } from '@citric/icons'
|
|
3
3
|
import { IconButton, Tooltip } from '@citric/ui'
|
|
4
4
|
import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
|
|
@@ -39,30 +39,13 @@ const style: Styles = {
|
|
|
39
39
|
*
|
|
40
40
|
* @param props the component's props {@link NotificationItemProps}.
|
|
41
41
|
*/
|
|
42
|
-
const NotificationHeader = ({ notification, isSummary
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<Tooltip text={notification.committed ? t.markAsUnread : t.markAsRead} position="left"
|
|
50
|
-
id={`tooltip-${notification.title}`} role="tooltip"
|
|
51
|
-
sx={style.tooltip}>
|
|
52
|
-
<IconButton aria-describedby={`tooltip-${notification.title}`}>
|
|
53
|
-
<IconBox
|
|
54
|
-
size="xs"
|
|
55
|
-
onClick={() => {
|
|
56
|
-
onClickMarkReadUnread(!notification.committed, 'icon')
|
|
57
|
-
}}
|
|
58
|
-
>
|
|
59
|
-
{notification.committed ? <Envelope /> : <EnvelopeOpen />}
|
|
60
|
-
</IconBox>
|
|
61
|
-
</IconButton>
|
|
62
|
-
</Tooltip>
|
|
63
|
-
</Flex>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
42
|
+
const NotificationHeader = ({ notification, isSummary }: NotificationItemProps) => (
|
|
43
|
+
<Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '330px' : '100%' }} flexWrap="nowrap">
|
|
44
|
+
<Text appearance={isSummary ? 'body2' : 'body1'} nowrapEllipsis>
|
|
45
|
+
{notification.title}
|
|
46
|
+
</Text>
|
|
47
|
+
</Flex>
|
|
48
|
+
)
|
|
66
49
|
|
|
67
50
|
/**
|
|
68
51
|
* Get the number of days ago from the given date string.
|
|
@@ -101,7 +84,7 @@ const NotificationContent = ({ notification, isSummary }: Props) => {
|
|
|
101
84
|
</Text>
|
|
102
85
|
{!isSummary && <>
|
|
103
86
|
<Text appearance="microtext1" colorScheme="light.700">
|
|
104
|
-
{formatDate(notification.
|
|
87
|
+
{formatDate(notification.trigger_at)}
|
|
105
88
|
</Text>
|
|
106
89
|
<Text appearance="microtext1" colorScheme="light.700" mx="2">
|
|
107
90
|
•
|
|
@@ -151,15 +134,37 @@ interface NotificationItemProps extends Props {
|
|
|
151
134
|
*
|
|
152
135
|
* @param props the component's props {@link NotificationItemProps}.
|
|
153
136
|
*/
|
|
154
|
-
export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) =>
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
<
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
137
|
+
export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => {
|
|
138
|
+
const t = useTranslate(dictionary)
|
|
139
|
+
return (
|
|
140
|
+
<Box sx={{ position: 'relative' }}>
|
|
141
|
+
<Flex bg="light.400" p="3 3 3 5" r="xs"
|
|
142
|
+
flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
|
|
143
|
+
<NotificationHeader notification={notification} isSummary={isSummary} onClickMarkReadUnread={onClickMarkReadUnread}/>
|
|
144
|
+
<NotificationContent notification={notification} isSummary={isSummary} />
|
|
145
|
+
{notification.call_to_action && <NotificationFooter call_to_action={notification.call_to_action}
|
|
146
|
+
onClickMarkReadUnread={(type) => onClickMarkReadUnread(notification.committed, type)} />}
|
|
147
|
+
</Flex>
|
|
148
|
+
<Box sx={{ position: 'absolute', top: '8px', right: '8px' }}>
|
|
149
|
+
<Tooltip text={notification.committed ? t.markAsUnread : t.markAsRead} position="left"
|
|
150
|
+
id={`tooltip-${notification.title}`} role="tooltip"
|
|
151
|
+
sx={style.tooltip}>
|
|
152
|
+
<IconButton aria-describedby={`tooltip-${notification.title}`}
|
|
153
|
+
sx={{ opacity: notification.committed ? 0.5 : 1 }}>
|
|
154
|
+
<IconBox
|
|
155
|
+
size="xs"
|
|
156
|
+
onClick={() => {
|
|
157
|
+
onClickMarkReadUnread(notification.committed, 'icon')
|
|
158
|
+
}}
|
|
159
|
+
>
|
|
160
|
+
{notification.committed ? <Envelope /> : <EnvelopeOpen />}
|
|
161
|
+
</IconBox>
|
|
162
|
+
</IconButton>
|
|
163
|
+
</Tooltip>
|
|
164
|
+
</Box>
|
|
165
|
+
</Box>
|
|
166
|
+
)
|
|
167
|
+
}
|
|
163
168
|
|
|
164
169
|
const dictionary = {
|
|
165
170
|
en: {
|