@telia-ace/knowledge-widget-components-notification-list 1.0.12 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -29,184 +29,32 @@ 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, contentBox } from "@telia-ace/knowledge-widget-ui";
|
|
33
33
|
import { appendClassNames } from "@telia-ace/widget-utilities";
|
|
34
|
-
import React
|
|
35
|
-
import styled
|
|
34
|
+
import React from "react";
|
|
35
|
+
import styled from "styled-components";
|
|
36
36
|
const NotificationList = (_a) => {
|
|
37
37
|
var _b = _a, { className } = _b, other = __objRest(_b, ["className"]);
|
|
38
|
-
const [expanded, setExpanded] = useState(null);
|
|
39
38
|
const container = useContainer();
|
|
40
39
|
const {
|
|
41
40
|
showHeader,
|
|
42
41
|
notificationList,
|
|
43
42
|
loading = false
|
|
44
43
|
} = useProperties();
|
|
45
|
-
|
|
46
|
-
id,
|
|
47
|
-
title,
|
|
48
|
-
symbol,
|
|
49
|
-
notifications = [],
|
|
50
|
-
defaultHeaderOptions = { visible: true }
|
|
51
|
-
} = notificationList || {};
|
|
52
|
-
if (!notifications.length && !loading) {
|
|
44
|
+
if (!(notificationList == null ? void 0 : notificationList.notifications.length) && !loading) {
|
|
53
45
|
return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
|
|
54
46
|
className: appendClassNames(className, "humany-notification-list")
|
|
55
47
|
}));
|
|
56
48
|
}
|
|
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
|
|
49
|
+
return /* @__PURE__ */ React.createElement(StyledNotificationList, __spreadProps(__spreadValues({}, other), {
|
|
50
|
+
className,
|
|
51
|
+
notificationList,
|
|
52
|
+
loading,
|
|
53
|
+
showHeader
|
|
90
54
|
}));
|
|
91
55
|
};
|
|
92
|
-
const
|
|
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}
|
|
56
|
+
const StyledNotificationList = styled(NotificationList$1)`
|
|
134
57
|
${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
58
|
`;
|
|
211
59
|
export { NotificationList as default };
|
|
212
60
|
//# 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 contentBox,\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 styled from 'styled-components';\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 <StyledNotificationList\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\nconst StyledNotificationList = styled(NotificationListUi)`\r\n ${contentBox}\r\n`;\r\n\r\nexport default NotificationList;\r\n"],"names":["NotificationListUi"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,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,cAAA,wBAAA,iCACO,QADP;AAAA,IAEG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACJ;AAER;AAEA,MAAM,yBAAyB,OAAOA,kBAAkB;AAAA,MAClD;AAAA;;"}
|
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.15",
|
|
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.21",
|
|
29
|
+
"@telia-ace/knowledge-widget-ui": "^1.0.18",
|
|
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": "92437eea9b29ae367ef7794b1b214e42072fb0d1"
|
|
44
44
|
}
|