@telia-ace/knowledge-widget-components-notification-list 1.0.10 → 1.0.13
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.
|
@@ -29,184 +29,28 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
}
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
|
-
import { useContainer, useProperties, createEmptyComponent,
|
|
32
|
+
import { useContainer, useProperties, createEmptyComponent, NotificationList as NotificationList$1 } from "@telia-ace/knowledge-widget-ui";
|
|
33
33
|
import { appendClassNames } from "@telia-ace/widget-utilities";
|
|
34
|
-
import React
|
|
35
|
-
import styled, { css } from "styled-components";
|
|
34
|
+
import React from "react";
|
|
36
35
|
const NotificationList = (_a) => {
|
|
37
36
|
var _b = _a, { className } = _b, other = __objRest(_b, ["className"]);
|
|
38
|
-
const [expanded, setExpanded] = useState(null);
|
|
39
37
|
const container = useContainer();
|
|
40
38
|
const {
|
|
41
39
|
showHeader,
|
|
42
40
|
notificationList,
|
|
43
41
|
loading = false
|
|
44
42
|
} = useProperties();
|
|
45
|
-
|
|
46
|
-
id,
|
|
47
|
-
title,
|
|
48
|
-
symbol,
|
|
49
|
-
notifications = [],
|
|
50
|
-
defaultHeaderOptions = { visible: true }
|
|
51
|
-
} = notificationList || {};
|
|
52
|
-
if (!notifications.length && !loading) {
|
|
43
|
+
if (!(notificationList == null ? void 0 : notificationList.notifications.length) && !loading) {
|
|
53
44
|
return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
|
|
54
45
|
className: appendClassNames(className, "humany-notification-list")
|
|
55
46
|
}));
|
|
56
47
|
}
|
|
57
|
-
return /* @__PURE__ */ React.createElement(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
header: title,
|
|
63
|
-
symbol,
|
|
64
|
-
items: notifications,
|
|
65
|
-
renderItem: ({ id: id2, title: title2, body, modified, expandable }) => /* @__PURE__ */ React.createElement(StyledItem, {
|
|
66
|
-
key: id2,
|
|
67
|
-
"data-notification": id2,
|
|
68
|
-
"data-expanded": expandable ? expanded === id2 : true
|
|
69
|
-
}, expandable ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledButton, {
|
|
70
|
-
title: title2,
|
|
71
|
-
"aria-label": title2,
|
|
72
|
-
"aria-expanded": expanded === id2,
|
|
73
|
-
onClick: () => setExpanded(expanded === id2 ? null : id2)
|
|
74
|
-
}, /* @__PURE__ */ React.createElement("span", null, title2), /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
|
|
75
|
-
size: 11,
|
|
76
|
-
symbol: {
|
|
77
|
-
type: "Svg",
|
|
78
|
-
content: `caret-${expanded === id2 ? "up" : "down"}`
|
|
79
|
-
}
|
|
80
|
-
})), /* @__PURE__ */ React.createElement(StyledParagraph, {
|
|
81
|
-
html: body
|
|
82
|
-
}), modified && /* @__PURE__ */ React.createElement(StyledTimestamp, {
|
|
83
|
-
format: DateFormats.YYYY_MM_DD,
|
|
84
|
-
timestamp: modified
|
|
85
|
-
})) : /* @__PURE__ */ React.createElement(StyledParagraph, {
|
|
86
|
-
html: body
|
|
87
|
-
}))
|
|
88
|
-
}), /* @__PURE__ */ React.createElement(Loader, {
|
|
89
|
-
loading
|
|
48
|
+
return /* @__PURE__ */ React.createElement(NotificationList$1, __spreadProps(__spreadValues({}, other), {
|
|
49
|
+
className,
|
|
50
|
+
notificationList,
|
|
51
|
+
loading,
|
|
52
|
+
showHeader
|
|
90
53
|
}));
|
|
91
54
|
};
|
|
92
|
-
const StyledButton = styled(Button)`
|
|
93
|
-
display: flex;
|
|
94
|
-
justify-content: space-between;
|
|
95
|
-
align-items: center;
|
|
96
|
-
width: 100%;
|
|
97
|
-
text-align: left;
|
|
98
|
-
svg,
|
|
99
|
-
i {
|
|
100
|
-
color: ${(p) => {
|
|
101
|
-
var _a;
|
|
102
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.primary;
|
|
103
|
-
}};
|
|
104
|
-
}
|
|
105
|
-
span {
|
|
106
|
-
color: ${(p) => {
|
|
107
|
-
var _a;
|
|
108
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.text;
|
|
109
|
-
}};
|
|
110
|
-
font-size: ${(p) => {
|
|
111
|
-
var _a;
|
|
112
|
-
return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
|
|
113
|
-
}};
|
|
114
|
-
overflow: hidden;
|
|
115
|
-
text-overflow: ellipsis;
|
|
116
|
-
flex: 1;
|
|
117
|
-
white-space: nowrap;
|
|
118
|
-
}
|
|
119
|
-
&:focus {
|
|
120
|
-
${(p) => {
|
|
121
|
-
var _a, _b;
|
|
122
|
-
return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
|
|
123
|
-
${borderTabStyle}
|
|
124
|
-
span {
|
|
125
|
-
color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
|
|
126
|
-
text-decoration: underline;
|
|
127
|
-
}
|
|
128
|
-
`;
|
|
129
|
-
}};
|
|
130
|
-
}
|
|
131
|
-
`;
|
|
132
|
-
const StyledItemList = styled(ItemList)`
|
|
133
|
-
${loadingOpacity}
|
|
134
|
-
${contentBox}
|
|
135
|
-
${itemList}
|
|
136
|
-
overflow: hidden;
|
|
137
|
-
justify-content: flex-start;
|
|
138
|
-
padding: ${(p) => {
|
|
139
|
-
var _a;
|
|
140
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.large;
|
|
141
|
-
}};
|
|
142
|
-
${(p) => !p["data-show-header"] && css`
|
|
143
|
-
> div {
|
|
144
|
-
${headingElement("h1", css`
|
|
145
|
-
display: none;
|
|
146
|
-
`)}
|
|
147
|
-
}
|
|
148
|
-
`}
|
|
149
|
-
|
|
150
|
-
@media (hover: hover) {
|
|
151
|
-
button:hover {
|
|
152
|
-
text-decoration: underline;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
`;
|
|
156
|
-
const StyledParagraph = styled(Paragraph)`
|
|
157
|
-
${genericHtml}
|
|
158
|
-
font-weight: 300;
|
|
159
|
-
|
|
160
|
-
p {
|
|
161
|
-
white-space: normal;
|
|
162
|
-
}
|
|
163
|
-
`;
|
|
164
|
-
const StyledItem = styled.li`
|
|
165
|
-
${StyledParagraph} {
|
|
166
|
-
display: none;
|
|
167
|
-
&:not(:only-child) {
|
|
168
|
-
${(p) => {
|
|
169
|
-
var _a, _b, _c;
|
|
170
|
-
return ((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) && ((_b = p.theme.sizes) == null ? void 0 : _b.normal) && css`
|
|
171
|
-
margin: ${(_c = p.theme.sizes) == null ? void 0 : _c.normal} 0;
|
|
172
|
-
`;
|
|
173
|
-
}}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
${(p) => p["data-expanded"] && css`
|
|
178
|
-
${StyledParagraph} {
|
|
179
|
-
display: block;
|
|
180
|
-
}
|
|
181
|
-
`}
|
|
182
|
-
|
|
183
|
-
> span {
|
|
184
|
-
display: block;
|
|
185
|
-
font-weight: 300;
|
|
186
|
-
color: ${(p) => {
|
|
187
|
-
var _a;
|
|
188
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.accent;
|
|
189
|
-
}};
|
|
190
|
-
}
|
|
191
|
-
`;
|
|
192
|
-
const StyledSymbolBadge = styled(SymbolBadge)`
|
|
193
|
-
margin: 0 0 0 ${(p) => {
|
|
194
|
-
var _a;
|
|
195
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.small;
|
|
196
|
-
}};
|
|
197
|
-
line {
|
|
198
|
-
stroke: ${(p) => {
|
|
199
|
-
var _a;
|
|
200
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.primary;
|
|
201
|
-
}};
|
|
202
|
-
}
|
|
203
|
-
`;
|
|
204
|
-
const StyledTimestamp = styled(Timestamp)`
|
|
205
|
-
font-size: ${(p) => {
|
|
206
|
-
var _a;
|
|
207
|
-
return (_a = p.theme.fonts) == null ? void 0 : _a.small;
|
|
208
|
-
}};
|
|
209
|
-
font-weight: 300;
|
|
210
|
-
`;
|
|
211
55
|
export { NotificationList as default };
|
|
212
56
|
//# sourceMappingURL=notification-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification-list.js","sources":["../src/notification-list.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"notification-list.js","sources":["../src/notification-list.tsx"],"sourcesContent":["import {\r\n createEmptyComponent,\r\n NotificationList as NotificationListUi,\r\n useContainer,\r\n useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport { NotificationListComponentProps } from './notification-list-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst NotificationList: React.FC<Props> = ({ className, ...other }) => {\r\n const container = useContainer();\r\n const {\r\n showHeader,\r\n notificationList,\r\n loading = false,\r\n } = useProperties<NotificationListComponentProps>();\r\n\r\n if (!notificationList?.notifications.length && !loading) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-list'),\r\n });\r\n }\r\n\r\n return (\r\n <NotificationListUi\r\n {...other}\r\n className={className}\r\n notificationList={notificationList}\r\n loading={loading}\r\n showHeader={showHeader}\r\n />\r\n );\r\n};\r\n\r\nexport default NotificationList;\r\n"],"names":["NotificationListUi"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,mBAAoC,CAAC,OAA4B;AAA5B,eAAE,gBAAF,IAAgB,kBAAhB,IAAgB,CAAd;AACzC,QAAM,YAAY;AACZ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA,UAAU;AAAA,MACV,cAA8C;AAElD,MAAI,CAAC,sDAAkB,cAAc,WAAU,CAAC,SAAS;AACrD,WAAO,qBAAqB,WAAW,iCAChC,QADgC;AAAA,MAEnC,WAAW,iBAAiB,WAAW,0BAA0B;AAAA,IAAA,EACpE;AAAA,EACL;AAEA,SACK,sBAAA,cAAAA,oBAAA,iCACO,QADP;AAAA,IAEG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACJ;AAER;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-notification-list",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13",
|
|
4
4
|
"description": "Notification list component for ACE Knowledge Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
},
|
|
25
25
|
"sideEffects": false,
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@telia-ace/knowledge-widget-core": "^1.0.
|
|
28
|
-
"@telia-ace/knowledge-widget-types-grid": "^1.0.
|
|
29
|
-
"@telia-ace/knowledge-widget-ui": "^1.0.
|
|
27
|
+
"@telia-ace/knowledge-widget-core": "^1.0.12",
|
|
28
|
+
"@telia-ace/knowledge-widget-types-grid": "^1.0.19",
|
|
29
|
+
"@telia-ace/knowledge-widget-ui": "^1.0.16",
|
|
30
30
|
"@telia-ace/widget-utilities": "^1.0.2",
|
|
31
31
|
"@webprovisions/platform": "^1.1.2"
|
|
32
32
|
},
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"@types/react-dom": "^16.8.0",
|
|
41
41
|
"@types/styled-components": "^5.1.7"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "966e7d54038c70191b71e10a898a3738425048fa"
|
|
44
44
|
}
|