@telia-ace/knowledge-widget-components-notification-row 1.0.16 → 1.0.19
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/index.js
CHANGED
|
@@ -1,102 +1,70 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
import { createReactComponent } from "@telia-ace/knowledge-widget-ui";
|
|
23
|
-
const NotificationRowComponent = (container) => {
|
|
24
|
-
const { events } = container.get("$widget");
|
|
25
|
-
const [subscribe, unsubscribe] = createEventSubscriber(events);
|
|
26
|
-
return createReactComponent(container, "notification-row", import("./notification-row.js"), (component) => {
|
|
27
|
-
const fetch = (params) => {
|
|
28
|
-
component.writeProperties(__spreadProps(__spreadValues({}, component.properties()), {
|
|
29
|
-
loading: true,
|
|
1
|
+
var m = Object.defineProperty, b = Object.defineProperties;
|
|
2
|
+
var y = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var g = Object.getOwnPropertySymbols;
|
|
4
|
+
var C = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var p = (t, e, i) => e in t ? m(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, h = (t, e) => {
|
|
6
|
+
for (var i in e || (e = {}))
|
|
7
|
+
C.call(e, i) && p(t, i, e[i]);
|
|
8
|
+
if (g)
|
|
9
|
+
for (var i of g(e))
|
|
10
|
+
v.call(e, i) && p(t, i, e[i]);
|
|
11
|
+
return t;
|
|
12
|
+
}, d = (t, e) => b(t, y(e));
|
|
13
|
+
import { createEventSubscriber as x, extendComponent as R } from "@telia-ace/knowledge-widget-core";
|
|
14
|
+
import { DataType as D } from "@telia-ace/knowledge-widget-types-grid";
|
|
15
|
+
import { createReactComponent as O } from "@telia-ace/knowledge-widget-ui";
|
|
16
|
+
const S = (t) => {
|
|
17
|
+
const { events: e } = t.get("$widget"), [i, u] = x(e);
|
|
18
|
+
return O(t, "notification-row", import("./notification-row.41523207.js"), (r) => {
|
|
19
|
+
const c = (a) => {
|
|
20
|
+
r.writeProperties(d(h({}, r.properties()), {
|
|
21
|
+
loading: !0,
|
|
30
22
|
error: void 0,
|
|
31
23
|
notifications: []
|
|
32
|
-
}));
|
|
33
|
-
component.actions.dispatch("fetch", { params });
|
|
24
|
+
})), r.actions.dispatch("fetch", { params: a });
|
|
34
25
|
};
|
|
35
|
-
|
|
36
|
-
error,
|
|
37
|
-
topNotifications,
|
|
38
|
-
bottomNotifications,
|
|
39
|
-
middleNotifications
|
|
26
|
+
return r.actions.create("fetch", ({
|
|
27
|
+
error: a,
|
|
28
|
+
topNotifications: o,
|
|
29
|
+
bottomNotifications: f,
|
|
30
|
+
middleNotifications: l
|
|
40
31
|
}) => {
|
|
41
|
-
if (
|
|
42
|
-
return
|
|
43
|
-
error,
|
|
44
|
-
loading:
|
|
32
|
+
if (a)
|
|
33
|
+
return r.actions.dispatch("fetched", {
|
|
34
|
+
error: a,
|
|
35
|
+
loading: !0,
|
|
45
36
|
notifications: []
|
|
46
37
|
});
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
newNotifications = newNotifications.concat(topNotifications);
|
|
53
|
-
}
|
|
54
|
-
if (types.indexOf("middle") > -1) {
|
|
55
|
-
newNotifications = newNotifications.concat(middleNotifications);
|
|
56
|
-
}
|
|
57
|
-
if (types.indexOf("bottom") > -1) {
|
|
58
|
-
newNotifications = newNotifications.concat(bottomNotifications);
|
|
59
|
-
}
|
|
60
|
-
} else {
|
|
61
|
-
newNotifications = topNotifications;
|
|
62
|
-
}
|
|
63
|
-
return component.actions.dispatch("fetched", {
|
|
64
|
-
notifications: newNotifications.length ? newNotifications : notifications,
|
|
65
|
-
loading: false
|
|
38
|
+
let s = [];
|
|
39
|
+
const { notifications: w, types: n = [] } = r.properties();
|
|
40
|
+
return n.length ? (n.indexOf("top") > -1 && (s = s.concat(o)), n.indexOf("middle") > -1 && (s = s.concat(l)), n.indexOf("bottom") > -1 && (s = s.concat(f))) : s = o, r.actions.dispatch("fetched", {
|
|
41
|
+
notifications: s.length ? s : w,
|
|
42
|
+
loading: !1
|
|
66
43
|
});
|
|
67
|
-
})
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
})
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
});
|
|
75
|
-
subscribe("router:changed", (event, { current }) => {
|
|
76
|
-
fetch(current.routeData.params);
|
|
77
|
-
});
|
|
78
|
-
return () => {
|
|
79
|
-
unsubscribe();
|
|
44
|
+
}), r.actions.create("fetched", (a) => r.writeProperties(d(h({}, a), { loading: !1 }))), t.getAsync("router").then((a) => {
|
|
45
|
+
const { params: o } = a.getRouteData();
|
|
46
|
+
c(o);
|
|
47
|
+
}), i("router:changed", (a, { current: o }) => {
|
|
48
|
+
c(o.routeData.params);
|
|
49
|
+
}), () => {
|
|
50
|
+
u();
|
|
80
51
|
};
|
|
81
|
-
}).then(() => {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
});
|
|
95
|
-
});
|
|
96
|
-
});
|
|
97
|
-
}).then(() => {
|
|
98
|
-
unsubscribe();
|
|
52
|
+
}).then(() => R(t, "notification-row", (r) => {
|
|
53
|
+
r.actions.watch("notification-row.fetch", (c, a) => t.getAsync("dataClient").then((o) => o.fetch(D.RowNotifications, {
|
|
54
|
+
categories: [
|
|
55
|
+
c.params.guideCategory,
|
|
56
|
+
c.params.contactCategory
|
|
57
|
+
].filter((f) => !!f),
|
|
58
|
+
searchPhrase: c.params.phrase
|
|
59
|
+
})).then(a).catch((o) => {
|
|
60
|
+
if (o)
|
|
61
|
+
return a(o);
|
|
62
|
+
}));
|
|
63
|
+
})).then(() => {
|
|
64
|
+
u();
|
|
99
65
|
});
|
|
100
66
|
};
|
|
101
|
-
export {
|
|
67
|
+
export {
|
|
68
|
+
S as default
|
|
69
|
+
};
|
|
102
70
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\r\n createEventSubscriber,\r\n extendComponent,\r\n Notification,\r\n} from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container, Widget } from '@webprovisions/platform';\r\n\r\ntype NotificationType = 'top' | 'middle' | 'bottom';\r\nexport type NotificationRowComponentProps = {\r\n types: NotificationType[];\r\n allowPaging?: boolean;\r\n notifications?: Notification[]; // internal\r\n expandable?: boolean;\r\n pageNextAriaLabel?: string;\r\n pagePreviousAriaLabel?: string;\r\n closeAriaLabel?: string;\r\n expandAriaLabel?: string;\r\n};\r\n\r\ntype FetchResults = NotificationResults & { error: any };\r\n\r\nexport const NotificationRowComponent = (container: Container) => {\r\n const { events }: Widget = container.get('$widget');\r\n const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n return createReactComponent(\r\n container,\r\n 'notification-row',\r\n import('./notification-row'),\r\n (component) => {\r\n const fetch = (params: { [key: string]: any }) => {\r\n component.writeProperties({\r\n ...component.properties<NotificationRowComponentProps>(),\r\n loading: true,\r\n error: undefined,\r\n notifications: [],\r\n });\r\n component.actions.dispatch('fetch', { params });\r\n };\r\n\r\n component.actions.create(\r\n 'fetch',\r\n ({\r\n error,\r\n topNotifications,\r\n bottomNotifications,\r\n middleNotifications,\r\n }: FetchResults) => {\r\n if (error) {\r\n return component.actions.dispatch('fetched', {\r\n error,\r\n loading: true,\r\n notifications: [],\r\n });\r\n }\r\n\r\n let newNotifications: Notification[] = [];\r\n const { notifications, types = [] } =\r\n component.properties<NotificationRowComponentProps>();\r\n if (types.length) {\r\n if (types.indexOf('top') > -1) {\r\n newNotifications = newNotifications.concat(topNotifications);\r\n }\r\n if (types.indexOf('middle') > -1) {\r\n newNotifications = newNotifications.concat(middleNotifications);\r\n }\r\n if (types.indexOf('bottom') > -1) {\r\n newNotifications = newNotifications.concat(bottomNotifications);\r\n }\r\n } else {\r\n newNotifications = topNotifications;\r\n }\r\n\r\n return component.actions.dispatch('fetched', {\r\n notifications: newNotifications.length ? newNotifications : notifications,\r\n loading: false,\r\n });\r\n }\r\n );\r\n\r\n component.actions.create('fetched', (input) => {\r\n return component.writeProperties({ ...input, loading: false });\r\n });\r\n\r\n container.getAsync('router').then((router) => {\r\n const { params } = router.getRouteData();\r\n fetch(params);\r\n });\r\n\r\n subscribe('router:changed', (event: any, { current }: any) => {\r\n fetch(current.routeData.params);\r\n });\r\n\r\n return () => {\r\n unsubscribe();\r\n };\r\n }\r\n )\r\n .then(() => {\r\n return extendComponent(container, 'notification-row', (component) => {\r\n component.actions.watch('notification-row.fetch', (input, next) => {\r\n return container\r\n .getAsync('dataClient')\r\n .then((dataClient: DataClient) =>\r\n dataClient.fetch(DataType.RowNotifications, {\r\n categories: [\r\n input.params.guideCategory,\r\n input.params.contactCategory,\r\n ].filter((c) => !!c),\r\n searchPhrase: input.params.phrase,\r\n })\r\n )\r\n .then(next)\r\n .catch((error) => {\r\n if (error) {\r\n return next(error);\r\n }\r\n });\r\n });\r\n });\r\n })\r\n .then(() => {\r\n unsubscribe();\r\n });\r\n};\r\n\r\nexport default NotificationRowComponent;\r\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\r\n createEventSubscriber,\r\n extendComponent,\r\n Notification,\r\n} from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container, Widget } from '@webprovisions/platform';\r\n\r\ntype NotificationType = 'top' | 'middle' | 'bottom';\r\nexport type NotificationRowComponentProps = {\r\n types: NotificationType[];\r\n allowPaging?: boolean;\r\n notifications?: Notification[]; // internal\r\n expandable?: boolean;\r\n pageNextAriaLabel?: string;\r\n pagePreviousAriaLabel?: string;\r\n closeAriaLabel?: string;\r\n expandAriaLabel?: string;\r\n};\r\n\r\ntype FetchResults = NotificationResults & { error: any };\r\n\r\nexport const NotificationRowComponent = (container: Container) => {\r\n const { events }: Widget = container.get('$widget');\r\n const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n return createReactComponent(\r\n container,\r\n 'notification-row',\r\n import('./notification-row'),\r\n (component) => {\r\n const fetch = (params: { [key: string]: any }) => {\r\n component.writeProperties({\r\n ...component.properties<NotificationRowComponentProps>(),\r\n loading: true,\r\n error: undefined,\r\n notifications: [],\r\n });\r\n component.actions.dispatch('fetch', { params });\r\n };\r\n\r\n component.actions.create(\r\n 'fetch',\r\n ({\r\n error,\r\n topNotifications,\r\n bottomNotifications,\r\n middleNotifications,\r\n }: FetchResults) => {\r\n if (error) {\r\n return component.actions.dispatch('fetched', {\r\n error,\r\n loading: true,\r\n notifications: [],\r\n });\r\n }\r\n\r\n let newNotifications: Notification[] = [];\r\n const { notifications, types = [] } =\r\n component.properties<NotificationRowComponentProps>();\r\n if (types.length) {\r\n if (types.indexOf('top') > -1) {\r\n newNotifications = newNotifications.concat(topNotifications);\r\n }\r\n if (types.indexOf('middle') > -1) {\r\n newNotifications = newNotifications.concat(middleNotifications);\r\n }\r\n if (types.indexOf('bottom') > -1) {\r\n newNotifications = newNotifications.concat(bottomNotifications);\r\n }\r\n } else {\r\n newNotifications = topNotifications;\r\n }\r\n\r\n return component.actions.dispatch('fetched', {\r\n notifications: newNotifications.length ? newNotifications : notifications,\r\n loading: false,\r\n });\r\n }\r\n );\r\n\r\n component.actions.create('fetched', (input) => {\r\n return component.writeProperties({ ...input, loading: false });\r\n });\r\n\r\n container.getAsync('router').then((router) => {\r\n const { params } = router.getRouteData();\r\n fetch(params);\r\n });\r\n\r\n subscribe('router:changed', (event: any, { current }: any) => {\r\n fetch(current.routeData.params);\r\n });\r\n\r\n return () => {\r\n unsubscribe();\r\n };\r\n }\r\n )\r\n .then(() => {\r\n return extendComponent(container, 'notification-row', (component) => {\r\n component.actions.watch('notification-row.fetch', (input, next) => {\r\n return container\r\n .getAsync('dataClient')\r\n .then((dataClient: DataClient) =>\r\n dataClient.fetch(DataType.RowNotifications, {\r\n categories: [\r\n input.params.guideCategory,\r\n input.params.contactCategory,\r\n ].filter((c) => !!c),\r\n searchPhrase: input.params.phrase,\r\n })\r\n )\r\n .then(next)\r\n .catch((error) => {\r\n if (error) {\r\n return next(error);\r\n }\r\n });\r\n });\r\n });\r\n })\r\n .then(() => {\r\n unsubscribe();\r\n });\r\n};\r\n\r\nexport default NotificationRowComponent;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBa,MAAA,IAA2B,CAAC,MAAyB;AAC9D,QAAM,EAAE,cAAmB,EAAU,IAAI,SAAS,GAC5C,CAAC,GAAW,KAAe,EAAsB,CAAM;AAE7D,SAAO,EACH,GACA,oBACA,OAAO,mCACP,CAAC,MAAc;AACL,UAAA,IAAQ,CAAC,MAAmC;AAC9C,QAAU,gBAAgB,QACnB,EAAU,WAA0C,IADjC;AAAA,QAEtB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,eAAe,CAAC;AAAA,MAAA,EACnB,GACD,EAAU,QAAQ,SAAS,SAAS,EAAE,UAAQ,CAAA;AAAA,IAAA;AAGxC,aAAA,QAAQ,OACd,SACA,CAAC;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,UACgB;AAChB,UAAI;AACO,eAAA,EAAU,QAAQ,SAAS,WAAW;AAAA,UACzC;AAAA,UACA,SAAS;AAAA,UACT,eAAe,CAAC;AAAA,QAAA,CACnB;AAGL,UAAI,IAAmC,CAAA;AACvC,YAAM,EAAE,kBAAe,WAAQ,CAAC,MAC5B,EAAU;AACd,aAAI,EAAM,SACF,GAAM,QAAQ,KAAK,IAAI,MACJ,KAAA,EAAiB,OAAO,CAAgB,IAE3D,EAAM,QAAQ,QAAQ,IAAI,MACP,KAAA,EAAiB,OAAO,CAAmB,IAE9D,EAAM,QAAQ,QAAQ,IAAI,MACP,KAAA,EAAiB,OAAO,CAAmB,MAG/C,IAAA,GAGhB,EAAU,QAAQ,SAAS,WAAW;AAAA,QACzC,eAAe,EAAiB,SAAS,IAAmB;AAAA,QAC5D,SAAS;AAAA,MAAA,CACZ;AAAA,IAAA,CAET,GAEA,EAAU,QAAQ,OAAO,WAAW,CAAC,MAC1B,EAAU,gBAAgB,QAAK,IAAL,EAAY,SAAS,KAAO,CAChE,GAED,EAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,MAAW;AACpC,YAAA,EAAE,cAAW,EAAO,aAAa;AACvC,QAAM,CAAM;AAAA,IAAA,CACf,GAED,EAAU,kBAAkB,CAAC,GAAY,EAAE,iBAAmB;AACpD,QAAA,EAAQ,UAAU,MAAM;AAAA,IAAA,CACjC,GAEM,MAAM;AACG;IAAA;AAAA,EAChB,CAER,EACK,KAAK,MACK,EAAgB,GAAW,oBAAoB,CAAC,MAAc;AACjE,MAAU,QAAQ,MAAM,0BAA0B,CAAC,GAAO,MAC/C,EACF,SAAS,YAAY,EACrB,KAAK,CAAC,MACH,EAAW,MAAM,EAAS,kBAAkB;AAAA,MACxC,YAAY;AAAA,QACR,EAAM,OAAO;AAAA,QACb,EAAM,OAAO;AAAA,QACf,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,MACnB,cAAc,EAAM,OAAO;AAAA,IAAA,CAC9B,CACL,EACC,KAAK,CAAI,EACT,MAAM,CAAC,MAAU;AACd,UAAI;AACA,eAAO,EAAK,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;"}
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
var V = Object.defineProperty, X = Object.defineProperties;
|
|
2
|
+
var Z = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var y = Object.getOwnPropertySymbols;
|
|
4
|
+
var I = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var H = (e, t, a) => t in e ? V(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, f = (e, t) => {
|
|
6
|
+
for (var a in t || (t = {}))
|
|
7
|
+
I.call(t, a) && H(e, a, t[a]);
|
|
8
|
+
if (y)
|
|
9
|
+
for (var a of y(t))
|
|
10
|
+
L.call(t, a) && H(e, a, t[a]);
|
|
11
|
+
return e;
|
|
12
|
+
}, g = (e, t) => X(e, Z(t));
|
|
13
|
+
var k = (e, t) => {
|
|
14
|
+
var a = {};
|
|
15
|
+
for (var n in e)
|
|
16
|
+
I.call(e, n) && t.indexOf(n) < 0 && (a[n] = e[n]);
|
|
17
|
+
if (e != null && y)
|
|
18
|
+
for (var n of y(e))
|
|
19
|
+
t.indexOf(n) < 0 && L.call(e, n) && (a[n] = e[n]);
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
import { useProperties as ee, useContainer as te, createEmptyComponent as N, SymbolBadge as F, genericHtml as ae, linkTabStyle as ne, borderTabStyle as G, Html as ie, Button as oe } from "@telia-ace/knowledge-widget-ui";
|
|
23
|
+
import { readStorage as R, StorageMedium as W, createStorageWriter as le, StorageCategory as re } from "@telia-ace/widget-services";
|
|
24
|
+
import { appendClassNames as w } from "@telia-ace/widget-utilities";
|
|
25
|
+
import o, { useState as $, useEffect as K } from "react";
|
|
26
|
+
import c, { css as u } from "styled-components";
|
|
27
|
+
const z = "closed-notifications", se = {
|
|
28
|
+
transform: {
|
|
29
|
+
a: (a) => {
|
|
30
|
+
var n = a, { children: e } = n, t = k(n, ["children"]);
|
|
31
|
+
return /* @__PURE__ */ o.createElement("a", g(f({}, t), {
|
|
32
|
+
tabIndex: -1
|
|
33
|
+
}), e);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}, ue = (a) => {
|
|
37
|
+
var n = a, { className: e } = n, t = k(n, ["className"]);
|
|
38
|
+
const {
|
|
39
|
+
types: O = [],
|
|
40
|
+
allowPaging: T = !0,
|
|
41
|
+
notifications: M = [],
|
|
42
|
+
expandable: m = !1,
|
|
43
|
+
closeAriaLabel: Y = "",
|
|
44
|
+
pageNextAriaLabel: _ = "",
|
|
45
|
+
pagePreviousAriaLabel: q = "",
|
|
46
|
+
expandAriaLabel: J = ""
|
|
47
|
+
} = ee(), [b, Q] = $(!1), [x, A] = $([]), [l, E] = $(0), r = te(), [v, U] = $();
|
|
48
|
+
K(() => {
|
|
49
|
+
r && (R(r, z, W.Session).then((i = []) => A(i)), le(r, z, re.Functional).then((i) => U(() => i)));
|
|
50
|
+
}, [r]), K(() => {
|
|
51
|
+
r && R(r, z, W.Session).then((i = []) => {
|
|
52
|
+
x.forEach((s) => i.indexOf(s) === -1 && i.push(s)), v && v(i);
|
|
53
|
+
});
|
|
54
|
+
}, [x, r, v]);
|
|
55
|
+
const d = M.filter(({ id: i }) => x.indexOf(i) === -1), { length: p } = d;
|
|
56
|
+
if (!d.length)
|
|
57
|
+
return N(r, g(f({}, t), {
|
|
58
|
+
className: w(e, "humany-notification-row")
|
|
59
|
+
}));
|
|
60
|
+
if (T) {
|
|
61
|
+
const i = d[l] || d[l + 1] || d[l - 1];
|
|
62
|
+
if (!i)
|
|
63
|
+
return N(r, g(f({}, t), {
|
|
64
|
+
className: w(e, "humany-notification-row")
|
|
65
|
+
}));
|
|
66
|
+
const { id: s, body: S } = i || {}, B = () => Q(!b);
|
|
67
|
+
return /* @__PURE__ */ o.createElement(j, g(f({}, t), {
|
|
68
|
+
"aria-expanded": m ? b : !0,
|
|
69
|
+
"aria-label": J,
|
|
70
|
+
tabIndex: m ? 0 : -1,
|
|
71
|
+
className: w(e, "humany-notification-row"),
|
|
72
|
+
"data-pageable": p > 1,
|
|
73
|
+
"data-types": O,
|
|
74
|
+
"data-allow-paging": T,
|
|
75
|
+
"data-expandable": m,
|
|
76
|
+
onKeyDown: (h) => {
|
|
77
|
+
h.key === "Enter" && B();
|
|
78
|
+
},
|
|
79
|
+
onClick: B
|
|
80
|
+
}), /* @__PURE__ */ o.createElement(ce, {
|
|
81
|
+
"aria-label": Y,
|
|
82
|
+
onClick: () => {
|
|
83
|
+
E(d.indexOf(i)), A([...x, s]);
|
|
84
|
+
}
|
|
85
|
+
}, /* @__PURE__ */ o.createElement(F, {
|
|
86
|
+
symbol: { type: "Svg", content: "close" }
|
|
87
|
+
})), /* @__PURE__ */ o.createElement(C, {
|
|
88
|
+
htmlParseInstruction: !m || b ? void 0 : se,
|
|
89
|
+
"data-pageable": p > 1,
|
|
90
|
+
"data-notification": s,
|
|
91
|
+
"data-expandable": m,
|
|
92
|
+
"data-expanded": b,
|
|
93
|
+
html: S
|
|
94
|
+
}), p > 1 && /* @__PURE__ */ o.createElement(de, null, /* @__PURE__ */ o.createElement(P, {
|
|
95
|
+
"aria-label": q,
|
|
96
|
+
"data-disabled": l === 0,
|
|
97
|
+
onClick: (h) => {
|
|
98
|
+
h.stopPropagation(), l > 0 && E(l - 1);
|
|
99
|
+
}
|
|
100
|
+
}, /* @__PURE__ */ o.createElement(D, {
|
|
101
|
+
size: 10,
|
|
102
|
+
symbol: { type: "Svg", content: "caret-left" }
|
|
103
|
+
})), /* @__PURE__ */ o.createElement("span", null, l + 1, "/", p), /* @__PURE__ */ o.createElement(P, {
|
|
104
|
+
"aria-label": _,
|
|
105
|
+
"data-disabled": l + 1 >= p,
|
|
106
|
+
onClick: (h) => {
|
|
107
|
+
h.stopPropagation(), l < p - 1 && E(l + 1);
|
|
108
|
+
}
|
|
109
|
+
}, /* @__PURE__ */ o.createElement(D, {
|
|
110
|
+
size: 10,
|
|
111
|
+
symbol: { type: "Svg", content: "caret-right" }
|
|
112
|
+
}))));
|
|
113
|
+
}
|
|
114
|
+
return /* @__PURE__ */ o.createElement(j, g(f({}, t), {
|
|
115
|
+
className: w(e, "humany-notification-row"),
|
|
116
|
+
"data-pageable": !1,
|
|
117
|
+
"data-types": O,
|
|
118
|
+
"data-allow-paging": !1
|
|
119
|
+
}), d.map((i) => {
|
|
120
|
+
if (!i)
|
|
121
|
+
return null;
|
|
122
|
+
const { id: s, body: S } = i;
|
|
123
|
+
return /* @__PURE__ */ o.createElement(C, {
|
|
124
|
+
key: s,
|
|
125
|
+
"data-pageable": !1,
|
|
126
|
+
"data-expandable": m,
|
|
127
|
+
"data-expanded": b,
|
|
128
|
+
"data-notification": s,
|
|
129
|
+
html: S
|
|
130
|
+
});
|
|
131
|
+
}));
|
|
132
|
+
}, j = c.div`
|
|
133
|
+
${ae}
|
|
134
|
+
padding: ${(e) => e.theme.sizes.normal} ${(e) => {
|
|
135
|
+
var t;
|
|
136
|
+
return ((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 12;
|
|
137
|
+
}}px;
|
|
138
|
+
background-color: ${(e) => {
|
|
139
|
+
var t, a, n;
|
|
140
|
+
return e["data-types"].length ? e["data-types"].indexOf("top") > -1 ? (t = e.theme.colors) == null ? void 0 : t.warning : e["data-types"].indexOf("bottom") > -1 ? "transparent" : (a = e.theme.colors) == null ? void 0 : a.primary : (n = e.theme.colors) == null ? void 0 : n.warning;
|
|
141
|
+
}};
|
|
142
|
+
color: ${(e) => {
|
|
143
|
+
var t;
|
|
144
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
145
|
+
}};
|
|
146
|
+
border-radius: ${(e) => e.theme.borderRadius};
|
|
147
|
+
text-align: center;
|
|
148
|
+
display: flex;
|
|
149
|
+
flex-direction: column;
|
|
150
|
+
position: relative;
|
|
151
|
+
cursor: ${(e) => e["data-expandable"] ? "pointer" : "default"};
|
|
152
|
+
overflow: hidden;
|
|
153
|
+
|
|
154
|
+
i {
|
|
155
|
+
color: ${(e) => {
|
|
156
|
+
var t;
|
|
157
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
158
|
+
}};
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
a {
|
|
162
|
+
color: ${(e) => {
|
|
163
|
+
var t;
|
|
164
|
+
return (t = e.theme.colors) == null ? void 0 : t.link;
|
|
165
|
+
}};
|
|
166
|
+
&:focus {
|
|
167
|
+
${(e) => {
|
|
168
|
+
var t;
|
|
169
|
+
return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && ne;
|
|
170
|
+
}}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
${(e) => {
|
|
175
|
+
var t;
|
|
176
|
+
return !e["data-allow-paging"] && u`
|
|
177
|
+
flex-wrap: wrap;
|
|
178
|
+
|
|
179
|
+
> div {
|
|
180
|
+
min-width: 100%;
|
|
181
|
+
margin: ${((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 2}px;
|
|
182
|
+
}
|
|
183
|
+
`;
|
|
184
|
+
}};
|
|
185
|
+
|
|
186
|
+
${(e) => {
|
|
187
|
+
var t;
|
|
188
|
+
return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && u`
|
|
189
|
+
&:focus {
|
|
190
|
+
${C} {
|
|
191
|
+
${G}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
`;
|
|
195
|
+
}}
|
|
196
|
+
`, C = c(ie)`
|
|
197
|
+
flex: 1;
|
|
198
|
+
font-size: ${(e) => {
|
|
199
|
+
var t;
|
|
200
|
+
return (t = e.theme.fonts) == null ? void 0 : t.normal;
|
|
201
|
+
}};
|
|
202
|
+
line-height: 1.6em;
|
|
203
|
+
font-weight: 300;
|
|
204
|
+
|
|
205
|
+
${(e) => e["data-expandable"] && !e["data-expanded"] && u`
|
|
206
|
+
max-width: 100%;
|
|
207
|
+
|
|
208
|
+
p {
|
|
209
|
+
display: none;
|
|
210
|
+
&:first-child {
|
|
211
|
+
display: block;
|
|
212
|
+
margin-bottom: 0;
|
|
213
|
+
white-space: nowrap;
|
|
214
|
+
overflow: hidden;
|
|
215
|
+
text-overflow: ellipsis;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
`}
|
|
219
|
+
`, de = c.div`
|
|
220
|
+
text-align: center;
|
|
221
|
+
width: 100%;
|
|
222
|
+
span {
|
|
223
|
+
font-size: ${(e) => {
|
|
224
|
+
var t;
|
|
225
|
+
return (t = e.theme.fonts) == null ? void 0 : t.small;
|
|
226
|
+
}};
|
|
227
|
+
display: inline-block;
|
|
228
|
+
width: 30px;
|
|
229
|
+
text-align: center;
|
|
230
|
+
}
|
|
231
|
+
`, P = c(oe)`
|
|
232
|
+
background-color: transparent;
|
|
233
|
+
border: none;
|
|
234
|
+
cursor: pointer;
|
|
235
|
+
transition: opacity 200ms ease-out;
|
|
236
|
+
justify-self: flex-end;
|
|
237
|
+
align-self: flex-start;
|
|
238
|
+
padding: ${(e) => {
|
|
239
|
+
var t;
|
|
240
|
+
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
241
|
+
}} svg {
|
|
242
|
+
display: block;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
&:focus {
|
|
246
|
+
${(e) => {
|
|
247
|
+
var t;
|
|
248
|
+
return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && G;
|
|
249
|
+
}}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
${(e) => e["data-disabled"] ? u`
|
|
253
|
+
opacity: 0.8;
|
|
254
|
+
` : u`
|
|
255
|
+
@media (hover) {
|
|
256
|
+
&:hover {
|
|
257
|
+
opacity: 0.5;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
`}
|
|
261
|
+
`, ce = c(P)`
|
|
262
|
+
position: absolute;
|
|
263
|
+
top: 7.5px;
|
|
264
|
+
right: 7.5px;
|
|
265
|
+
width: 25px;
|
|
266
|
+
height: auto;
|
|
267
|
+
padding: ${(e) => {
|
|
268
|
+
var t, a;
|
|
269
|
+
return `calc(${(t = e.theme.sizes) == null ? void 0 : t.small}/2) ${(a = e.theme.sizes) == null ? void 0 : a.small}`;
|
|
270
|
+
}} svg {
|
|
271
|
+
vertical-align: middle;
|
|
272
|
+
line,
|
|
273
|
+
path {
|
|
274
|
+
stroke: ${(e) => {
|
|
275
|
+
var t;
|
|
276
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
277
|
+
}};
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
`, D = c(F)`
|
|
281
|
+
line {
|
|
282
|
+
stroke: #ffffff;
|
|
283
|
+
}
|
|
284
|
+
`;
|
|
285
|
+
c.div`
|
|
286
|
+
display: none;
|
|
287
|
+
`;
|
|
288
|
+
export {
|
|
289
|
+
ue as default
|
|
290
|
+
};
|
|
291
|
+
//# sourceMappingURL=notification-row.41523207.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notification-row.41523207.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n Button,\r\n createEmptyComponent,\r\n genericHtml,\r\n Html,\r\n linkTabStyle,\r\n SymbolBadge,\r\n useContainer,\r\n useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport {\r\n createStorageWriter,\r\n readStorage,\r\n StorageCategory,\r\n StorageMedium,\r\n StorageWriter,\r\n} from '@telia-ace/widget-services';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { NotificationRowComponentProps } from './notification-row-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst STORAGE_KEY = 'closed-notifications';\r\n\r\nconst infocusableHtml = {\r\n transform: {\r\n a: ({ children, ...props }: React.ComponentProps<'a'>) => (\r\n <a {...props} tabIndex={-1}>\r\n {children}\r\n </a>\r\n ),\r\n },\r\n};\r\n\r\nconst NotificationRow: React.SFC<Props> = ({ className, ...other }) => {\r\n const {\r\n types = [],\r\n allowPaging = true,\r\n notifications = [],\r\n expandable = false,\r\n closeAriaLabel = '',\r\n pageNextAriaLabel = '',\r\n pagePreviousAriaLabel = '',\r\n expandAriaLabel = '',\r\n } = useProperties<NotificationRowComponentProps>();\r\n const [expanded, setExpanded] = useState(false);\r\n const [closed, setClosed] = useState<string[]>([]);\r\n const [index, setIndex] = useState(0);\r\n\r\n const container = useContainer();\r\n const [write, setWriter] = useState<StorageWriter | undefined>();\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (closed = []) => setClosed(closed)\r\n );\r\n\r\n createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\r\n setWriter(() => writer)\r\n );\r\n }\r\n }, [container]);\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (storedClosed = []) => {\r\n closed.forEach(\r\n (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\r\n );\r\n if (write) {\r\n write(storedClosed);\r\n }\r\n }\r\n );\r\n }\r\n }, [closed, container, write]);\r\n\r\n const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\r\n\r\n const { length } = filtered;\r\n\r\n if (!filtered.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n if (allowPaging) {\r\n const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\r\n\r\n if (!notification) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n const { id, body } = notification || {};\r\n const toggleExpand = () => setExpanded(!expanded);\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n aria-expanded={expandable ? expanded : true}\r\n aria-label={expandAriaLabel}\r\n tabIndex={expandable ? 0 : -1}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={length > 1}\r\n data-types={types}\r\n data-allow-paging={allowPaging}\r\n data-expandable={expandable}\r\n onKeyDown={(e: React.KeyboardEvent) => {\r\n if (e.key === 'Enter') {\r\n toggleExpand();\r\n }\r\n }}\r\n onClick={toggleExpand}\r\n >\r\n <CloseButton\r\n aria-label={closeAriaLabel}\r\n onClick={() => {\r\n setIndex(filtered.indexOf(notification));\r\n setClosed([...closed, id]);\r\n }}\r\n >\r\n <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\r\n </CloseButton>\r\n <StyledHtml\r\n htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\r\n data-pageable={length > 1}\r\n data-notification={id}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n html={body}\r\n />\r\n {length > 1 && (\r\n <Pager>\r\n <StyledButton\r\n aria-label={pagePreviousAriaLabel}\r\n data-disabled={index === 0}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index > 0) {\r\n setIndex(index - 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-left' }}\r\n />\r\n </StyledButton>\r\n <span>\r\n {index + 1}/{length}\r\n </span>\r\n <StyledButton\r\n aria-label={pageNextAriaLabel}\r\n data-disabled={index + 1 >= length}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index < length - 1) {\r\n setIndex(index + 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-right' }}\r\n />\r\n </StyledButton>\r\n </Pager>\r\n )}\r\n </Wrapper>\r\n );\r\n }\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={false}\r\n data-types={types}\r\n data-allow-paging={false}\r\n >\r\n {filtered.map((notification) => {\r\n if (!notification) {\r\n return null;\r\n }\r\n\r\n const { id, body } = notification;\r\n\r\n return (\r\n <StyledHtml\r\n key={id}\r\n data-pageable={false}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n data-notification={id}\r\n html={body}\r\n />\r\n );\r\n })}\r\n </Wrapper>\r\n );\r\n};\r\n\r\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\r\n ${genericHtml}\r\n padding: ${(p) => p.theme.sizes.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\r\n background-color: ${(p) => {\r\n if (p['data-types'].length) {\r\n if (p['data-types'].indexOf('top') > -1) {\r\n return p.theme.colors?.warning;\r\n }\r\n if (p['data-types'].indexOf('bottom') > -1) {\r\n return 'transparent';\r\n }\r\n\r\n return p.theme.colors?.primary;\r\n }\r\n return p.theme.colors?.warning;\r\n }};\r\n color: ${(p) => p.theme.colors?.text};\r\n border-radius: ${(p) => p.theme.borderRadius};\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\r\n overflow: hidden;\r\n\r\n i {\r\n color: ${(p) => p.theme.colors?.text};\r\n }\r\n\r\n a {\r\n color: ${(p) => p.theme.colors?.link};\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle}\r\n }\r\n }\r\n\r\n ${(p) =>\r\n !p['data-allow-paging'] &&\r\n css`\r\n flex-wrap: wrap;\r\n\r\n > div {\r\n min-width: 100%;\r\n margin: ${p.theme.sizes?.cardinal * 2}px;\r\n }\r\n `};\r\n\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n &:focus {\r\n ${StyledHtml} {\r\n ${borderTabStyle}\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst StyledHtml = styled(Html)<{\r\n 'data-pageable': boolean;\r\n 'data-expandable': boolean;\r\n 'data-expanded': boolean;\r\n}>`\r\n flex: 1;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n line-height: 1.6em;\r\n font-weight: 300;\r\n\r\n ${(p) =>\r\n p['data-expandable'] &&\r\n !p['data-expanded'] &&\r\n css`\r\n max-width: 100%;\r\n\r\n p {\r\n display: none;\r\n &:first-child {\r\n display: block;\r\n margin-bottom: 0;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst Pager = styled.div`\r\n text-align: center;\r\n width: 100%;\r\n span {\r\n font-size: ${(p) => p.theme.fonts?.small};\r\n display: inline-block;\r\n width: 30px;\r\n text-align: center;\r\n }\r\n`;\r\n\r\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n transition: opacity 200ms ease-out;\r\n justify-self: flex-end;\r\n align-self: flex-start;\r\n padding: ${(p) => p.theme.sizes?.small} svg {\r\n display: block;\r\n }\r\n\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle}\r\n }\r\n\r\n ${(p) =>\r\n p['data-disabled']\r\n ? css`\r\n opacity: 0.8;\r\n `\r\n : css`\r\n @media (hover) {\r\n &:hover {\r\n opacity: 0.5;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst CloseButton = styled(StyledButton)`\r\n position: absolute;\r\n top: 7.5px;\r\n right: 7.5px;\r\n width: 25px;\r\n height: auto;\r\n padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`} svg {\r\n vertical-align: middle;\r\n line,\r\n path {\r\n stroke: ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)`\r\n line {\r\n stroke: #ffffff;\r\n }\r\n`;\r\n\r\nconst Empty = styled.div`\r\n display: none;\r\n`;\r\n\r\nexport default NotificationRow;\r\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-notification-row",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"description": "Notification row component for ACE Knowledge Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"telia"
|
|
9
9
|
],
|
|
10
|
-
"
|
|
11
|
-
"
|
|
10
|
+
"main": "dist/index.js",
|
|
11
|
+
"type": "module",
|
|
12
12
|
"types": "dist/index.d.ts",
|
|
13
13
|
"files": [
|
|
14
14
|
"LICENSE.txt",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
},
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@telia-ace/knowledge-widget-core": "^1.0.
|
|
29
|
-
"@telia-ace/knowledge-widget-types-grid": "^1.0.
|
|
30
|
-
"@telia-ace/knowledge-widget-ui": "^1.0.
|
|
31
|
-
"@telia-ace/widget-services": "^1.0.
|
|
28
|
+
"@telia-ace/knowledge-widget-core": "^1.0.17",
|
|
29
|
+
"@telia-ace/knowledge-widget-types-grid": "^1.0.26",
|
|
30
|
+
"@telia-ace/knowledge-widget-ui": "^1.0.23",
|
|
31
|
+
"@telia-ace/widget-services": "^1.0.13",
|
|
32
32
|
"@telia-ace/widget-utilities": "^1.0.2",
|
|
33
33
|
"@webprovisions/platform": "^1.1.2"
|
|
34
34
|
},
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"@types/react-dom": "^16.8.0",
|
|
43
43
|
"@types/styled-components": "^5.1.7"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "44efbdca7f57d6997132792020922c89b013c44d"
|
|
46
46
|
}
|
package/dist/notification-row.js
DELETED
|
@@ -1,348 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
|
-
import { useProperties, useContainer, createEmptyComponent, SymbolBadge, genericHtml, linkTabStyle, borderTabStyle, Html, Button } from "@telia-ace/knowledge-widget-ui";
|
|
33
|
-
import { readStorage, StorageMedium, createStorageWriter, StorageCategory } from "@telia-ace/widget-services";
|
|
34
|
-
import { appendClassNames } from "@telia-ace/widget-utilities";
|
|
35
|
-
import React, { useState, useEffect } from "react";
|
|
36
|
-
import styled, { css } from "styled-components";
|
|
37
|
-
const STORAGE_KEY = "closed-notifications";
|
|
38
|
-
const infocusableHtml = {
|
|
39
|
-
transform: {
|
|
40
|
-
a: (_a) => {
|
|
41
|
-
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
42
|
-
return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({}, props), {
|
|
43
|
-
tabIndex: -1
|
|
44
|
-
}), children);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
const NotificationRow = (_c) => {
|
|
49
|
-
var _d = _c, { className } = _d, other = __objRest(_d, ["className"]);
|
|
50
|
-
const {
|
|
51
|
-
types = [],
|
|
52
|
-
allowPaging = true,
|
|
53
|
-
notifications = [],
|
|
54
|
-
expandable = false,
|
|
55
|
-
closeAriaLabel = "",
|
|
56
|
-
pageNextAriaLabel = "",
|
|
57
|
-
pagePreviousAriaLabel = "",
|
|
58
|
-
expandAriaLabel = ""
|
|
59
|
-
} = useProperties();
|
|
60
|
-
const [expanded, setExpanded] = useState(false);
|
|
61
|
-
const [closed, setClosed] = useState([]);
|
|
62
|
-
const [index, setIndex] = useState(0);
|
|
63
|
-
const container = useContainer();
|
|
64
|
-
const [write, setWriter] = useState();
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
if (container) {
|
|
67
|
-
readStorage(container, STORAGE_KEY, StorageMedium.Session).then((closed2 = []) => setClosed(closed2));
|
|
68
|
-
createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) => setWriter(() => writer));
|
|
69
|
-
}
|
|
70
|
-
}, [container]);
|
|
71
|
-
useEffect(() => {
|
|
72
|
-
if (container) {
|
|
73
|
-
readStorage(container, STORAGE_KEY, StorageMedium.Session).then((storedClosed = []) => {
|
|
74
|
-
closed.forEach((id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id));
|
|
75
|
-
if (write) {
|
|
76
|
-
write(storedClosed);
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
}, [closed, container, write]);
|
|
81
|
-
const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);
|
|
82
|
-
const { length } = filtered;
|
|
83
|
-
if (!filtered.length) {
|
|
84
|
-
return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
|
|
85
|
-
className: appendClassNames(className, "humany-notification-row")
|
|
86
|
-
}));
|
|
87
|
-
}
|
|
88
|
-
if (allowPaging) {
|
|
89
|
-
const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];
|
|
90
|
-
if (!notification) {
|
|
91
|
-
return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
|
|
92
|
-
className: appendClassNames(className, "humany-notification-row")
|
|
93
|
-
}));
|
|
94
|
-
}
|
|
95
|
-
const { id, body } = notification || {};
|
|
96
|
-
const toggleExpand = () => setExpanded(!expanded);
|
|
97
|
-
return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({}, other), {
|
|
98
|
-
"aria-expanded": expandable ? expanded : true,
|
|
99
|
-
"aria-label": expandAriaLabel,
|
|
100
|
-
tabIndex: expandable ? 0 : -1,
|
|
101
|
-
className: appendClassNames(className, "humany-notification-row"),
|
|
102
|
-
"data-pageable": length > 1,
|
|
103
|
-
"data-types": types,
|
|
104
|
-
"data-allow-paging": allowPaging,
|
|
105
|
-
"data-expandable": expandable,
|
|
106
|
-
onKeyDown: (e) => {
|
|
107
|
-
if (e.key === "Enter") {
|
|
108
|
-
toggleExpand();
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
onClick: toggleExpand
|
|
112
|
-
}), /* @__PURE__ */ React.createElement(CloseButton, {
|
|
113
|
-
"aria-label": closeAriaLabel,
|
|
114
|
-
onClick: () => {
|
|
115
|
-
setIndex(filtered.indexOf(notification));
|
|
116
|
-
setClosed([...closed, id]);
|
|
117
|
-
}
|
|
118
|
-
}, /* @__PURE__ */ React.createElement(SymbolBadge, {
|
|
119
|
-
symbol: { type: "Svg", content: "close" }
|
|
120
|
-
})), /* @__PURE__ */ React.createElement(StyledHtml, {
|
|
121
|
-
htmlParseInstruction: !expandable || expanded ? void 0 : infocusableHtml,
|
|
122
|
-
"data-pageable": length > 1,
|
|
123
|
-
"data-notification": id,
|
|
124
|
-
"data-expandable": expandable,
|
|
125
|
-
"data-expanded": expanded,
|
|
126
|
-
html: body
|
|
127
|
-
}), length > 1 && /* @__PURE__ */ React.createElement(Pager, null, /* @__PURE__ */ React.createElement(StyledButton, {
|
|
128
|
-
"aria-label": pagePreviousAriaLabel,
|
|
129
|
-
"data-disabled": index === 0,
|
|
130
|
-
onClick: (e) => {
|
|
131
|
-
e.stopPropagation();
|
|
132
|
-
if (index > 0) {
|
|
133
|
-
setIndex(index - 1);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
|
|
137
|
-
size: 10,
|
|
138
|
-
symbol: { type: "Svg", content: "caret-left" }
|
|
139
|
-
})), /* @__PURE__ */ React.createElement("span", null, index + 1, "/", length), /* @__PURE__ */ React.createElement(StyledButton, {
|
|
140
|
-
"aria-label": pageNextAriaLabel,
|
|
141
|
-
"data-disabled": index + 1 >= length,
|
|
142
|
-
onClick: (e) => {
|
|
143
|
-
e.stopPropagation();
|
|
144
|
-
if (index < length - 1) {
|
|
145
|
-
setIndex(index + 1);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
|
|
149
|
-
size: 10,
|
|
150
|
-
symbol: { type: "Svg", content: "caret-right" }
|
|
151
|
-
}))));
|
|
152
|
-
}
|
|
153
|
-
return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({}, other), {
|
|
154
|
-
className: appendClassNames(className, "humany-notification-row"),
|
|
155
|
-
"data-pageable": false,
|
|
156
|
-
"data-types": types,
|
|
157
|
-
"data-allow-paging": false
|
|
158
|
-
}), filtered.map((notification) => {
|
|
159
|
-
if (!notification) {
|
|
160
|
-
return null;
|
|
161
|
-
}
|
|
162
|
-
const { id, body } = notification;
|
|
163
|
-
return /* @__PURE__ */ React.createElement(StyledHtml, {
|
|
164
|
-
key: id,
|
|
165
|
-
"data-pageable": false,
|
|
166
|
-
"data-expandable": expandable,
|
|
167
|
-
"data-expanded": expanded,
|
|
168
|
-
"data-notification": id,
|
|
169
|
-
html: body
|
|
170
|
-
});
|
|
171
|
-
}));
|
|
172
|
-
};
|
|
173
|
-
const Wrapper = styled.div`
|
|
174
|
-
${genericHtml}
|
|
175
|
-
padding: ${(p) => {
|
|
176
|
-
var _a;
|
|
177
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
|
|
178
|
-
}} ${(p) => {
|
|
179
|
-
var _a;
|
|
180
|
-
return ((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) * 12;
|
|
181
|
-
}}px;
|
|
182
|
-
background-color: ${(p) => {
|
|
183
|
-
var _a, _b, _c;
|
|
184
|
-
if (p["data-types"].length) {
|
|
185
|
-
if (p["data-types"].indexOf("top") > -1) {
|
|
186
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.warning;
|
|
187
|
-
}
|
|
188
|
-
if (p["data-types"].indexOf("bottom") > -1) {
|
|
189
|
-
return "transparent";
|
|
190
|
-
}
|
|
191
|
-
return (_b = p.theme.colors) == null ? void 0 : _b.primary;
|
|
192
|
-
}
|
|
193
|
-
return (_c = p.theme.colors) == null ? void 0 : _c.warning;
|
|
194
|
-
}};
|
|
195
|
-
color: ${(p) => {
|
|
196
|
-
var _a;
|
|
197
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.text;
|
|
198
|
-
}};
|
|
199
|
-
border-radius: ${(p) => p.theme.borderRadius};
|
|
200
|
-
text-align: center;
|
|
201
|
-
display: flex;
|
|
202
|
-
flex-direction: column;
|
|
203
|
-
position: relative;
|
|
204
|
-
cursor: ${(p) => p["data-expandable"] ? "pointer" : "default"};
|
|
205
|
-
overflow: hidden;
|
|
206
|
-
|
|
207
|
-
i {
|
|
208
|
-
color: ${(p) => {
|
|
209
|
-
var _a;
|
|
210
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.text;
|
|
211
|
-
}};
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
a {
|
|
215
|
-
color: ${(p) => {
|
|
216
|
-
var _a;
|
|
217
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.link;
|
|
218
|
-
}};
|
|
219
|
-
&:focus {
|
|
220
|
-
${(p) => {
|
|
221
|
-
var _a;
|
|
222
|
-
return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && linkTabStyle;
|
|
223
|
-
}}
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
${(p) => {
|
|
228
|
-
var _a;
|
|
229
|
-
return !p["data-allow-paging"] && css`
|
|
230
|
-
flex-wrap: wrap;
|
|
231
|
-
|
|
232
|
-
> div {
|
|
233
|
-
min-width: 100%;
|
|
234
|
-
margin: ${((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) * 2}px;
|
|
235
|
-
}
|
|
236
|
-
`;
|
|
237
|
-
}};
|
|
238
|
-
|
|
239
|
-
${(p) => {
|
|
240
|
-
var _a;
|
|
241
|
-
return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
|
|
242
|
-
&:focus {
|
|
243
|
-
${StyledHtml} {
|
|
244
|
-
${borderTabStyle}
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
`;
|
|
248
|
-
}}
|
|
249
|
-
`;
|
|
250
|
-
const StyledHtml = styled(Html)`
|
|
251
|
-
flex: 1;
|
|
252
|
-
font-size: ${(p) => {
|
|
253
|
-
var _a;
|
|
254
|
-
return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
|
|
255
|
-
}};
|
|
256
|
-
line-height: 1.6em;
|
|
257
|
-
font-weight: 300;
|
|
258
|
-
|
|
259
|
-
${(p) => p["data-expandable"] && !p["data-expanded"] && css`
|
|
260
|
-
max-width: 100%;
|
|
261
|
-
|
|
262
|
-
p {
|
|
263
|
-
display: none;
|
|
264
|
-
&:first-child {
|
|
265
|
-
display: block;
|
|
266
|
-
margin-bottom: 0;
|
|
267
|
-
white-space: nowrap;
|
|
268
|
-
overflow: hidden;
|
|
269
|
-
text-overflow: ellipsis;
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
`}
|
|
273
|
-
`;
|
|
274
|
-
const Pager = styled.div`
|
|
275
|
-
text-align: center;
|
|
276
|
-
width: 100%;
|
|
277
|
-
span {
|
|
278
|
-
font-size: ${(p) => {
|
|
279
|
-
var _a;
|
|
280
|
-
return (_a = p.theme.fonts) == null ? void 0 : _a.small;
|
|
281
|
-
}};
|
|
282
|
-
display: inline-block;
|
|
283
|
-
width: 30px;
|
|
284
|
-
text-align: center;
|
|
285
|
-
}
|
|
286
|
-
`;
|
|
287
|
-
const StyledButton = styled(Button)`
|
|
288
|
-
background-color: transparent;
|
|
289
|
-
border: none;
|
|
290
|
-
cursor: pointer;
|
|
291
|
-
transition: opacity 200ms ease-out;
|
|
292
|
-
justify-self: flex-end;
|
|
293
|
-
align-self: flex-start;
|
|
294
|
-
padding: ${(p) => {
|
|
295
|
-
var _a;
|
|
296
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.small;
|
|
297
|
-
}} svg {
|
|
298
|
-
display: block;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
&:focus {
|
|
302
|
-
${(p) => {
|
|
303
|
-
var _a;
|
|
304
|
-
return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
|
|
305
|
-
}}
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
${(p) => p["data-disabled"] ? css`
|
|
309
|
-
opacity: 0.8;
|
|
310
|
-
` : css`
|
|
311
|
-
@media (hover) {
|
|
312
|
-
&:hover {
|
|
313
|
-
opacity: 0.5;
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
`}
|
|
317
|
-
`;
|
|
318
|
-
const CloseButton = styled(StyledButton)`
|
|
319
|
-
position: absolute;
|
|
320
|
-
top: 7.5px;
|
|
321
|
-
right: 7.5px;
|
|
322
|
-
width: 25px;
|
|
323
|
-
height: auto;
|
|
324
|
-
padding: ${(p) => {
|
|
325
|
-
var _a, _b;
|
|
326
|
-
return `calc(${(_a = p.theme.sizes) == null ? void 0 : _a.small}/2) ${(_b = p.theme.sizes) == null ? void 0 : _b.small}`;
|
|
327
|
-
}};
|
|
328
|
-
svg {
|
|
329
|
-
vertical-align: middle;
|
|
330
|
-
line,
|
|
331
|
-
path {
|
|
332
|
-
stroke: ${(p) => {
|
|
333
|
-
var _a;
|
|
334
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.text;
|
|
335
|
-
}};
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
`;
|
|
339
|
-
const StyledSymbolBadge = styled(SymbolBadge)`
|
|
340
|
-
line {
|
|
341
|
-
stroke: #ffffff;
|
|
342
|
-
}
|
|
343
|
-
`;
|
|
344
|
-
styled.div`
|
|
345
|
-
display: none;
|
|
346
|
-
`;
|
|
347
|
-
export { NotificationRow as default };
|
|
348
|
-
//# sourceMappingURL=notification-row.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"notification-row.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n Button,\r\n createEmptyComponent,\r\n genericHtml,\r\n Html,\r\n linkTabStyle,\r\n SymbolBadge,\r\n useContainer,\r\n useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport {\r\n createStorageWriter,\r\n readStorage,\r\n StorageCategory,\r\n StorageMedium,\r\n StorageWriter,\r\n} from '@telia-ace/widget-services';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { NotificationRowComponentProps } from './notification-row-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst STORAGE_KEY = 'closed-notifications';\r\n\r\nconst infocusableHtml = {\r\n transform: {\r\n a: ({ children, ...props }: React.ComponentProps<'a'>) => (\r\n <a {...props} tabIndex={-1}>\r\n {children}\r\n </a>\r\n ),\r\n },\r\n};\r\n\r\nconst NotificationRow: React.SFC<Props> = ({ className, ...other }) => {\r\n const {\r\n types = [],\r\n allowPaging = true,\r\n notifications = [],\r\n expandable = false,\r\n closeAriaLabel = '',\r\n pageNextAriaLabel = '',\r\n pagePreviousAriaLabel = '',\r\n expandAriaLabel = '',\r\n } = useProperties<NotificationRowComponentProps>();\r\n const [expanded, setExpanded] = useState(false);\r\n const [closed, setClosed] = useState<string[]>([]);\r\n const [index, setIndex] = useState(0);\r\n\r\n const container = useContainer();\r\n const [write, setWriter] = useState<StorageWriter | undefined>();\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (closed = []) => setClosed(closed)\r\n );\r\n\r\n createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\r\n setWriter(() => writer)\r\n );\r\n }\r\n }, [container]);\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (storedClosed = []) => {\r\n closed.forEach(\r\n (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\r\n );\r\n if (write) {\r\n write(storedClosed);\r\n }\r\n }\r\n );\r\n }\r\n }, [closed, container, write]);\r\n\r\n const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\r\n\r\n const { length } = filtered;\r\n\r\n if (!filtered.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n if (allowPaging) {\r\n const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\r\n\r\n if (!notification) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n const { id, body } = notification || {};\r\n const toggleExpand = () => setExpanded(!expanded);\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n aria-expanded={expandable ? expanded : true}\r\n aria-label={expandAriaLabel}\r\n tabIndex={expandable ? 0 : -1}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={length > 1}\r\n data-types={types}\r\n data-allow-paging={allowPaging}\r\n data-expandable={expandable}\r\n onKeyDown={(e: React.KeyboardEvent) => {\r\n if (e.key === 'Enter') {\r\n toggleExpand();\r\n }\r\n }}\r\n onClick={toggleExpand}\r\n >\r\n <CloseButton\r\n aria-label={closeAriaLabel}\r\n onClick={() => {\r\n setIndex(filtered.indexOf(notification));\r\n setClosed([...closed, id]);\r\n }}\r\n >\r\n <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\r\n </CloseButton>\r\n <StyledHtml\r\n htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\r\n data-pageable={length > 1}\r\n data-notification={id}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n html={body}\r\n />\r\n {length > 1 && (\r\n <Pager>\r\n <StyledButton\r\n aria-label={pagePreviousAriaLabel}\r\n data-disabled={index === 0}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index > 0) {\r\n setIndex(index - 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-left' }}\r\n />\r\n </StyledButton>\r\n <span>\r\n {index + 1}/{length}\r\n </span>\r\n <StyledButton\r\n aria-label={pageNextAriaLabel}\r\n data-disabled={index + 1 >= length}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index < length - 1) {\r\n setIndex(index + 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-right' }}\r\n />\r\n </StyledButton>\r\n </Pager>\r\n )}\r\n </Wrapper>\r\n );\r\n }\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={false}\r\n data-types={types}\r\n data-allow-paging={false}\r\n >\r\n {filtered.map((notification) => {\r\n if (!notification) {\r\n return null;\r\n }\r\n\r\n const { id, body } = notification;\r\n\r\n return (\r\n <StyledHtml\r\n key={id}\r\n data-pageable={false}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n data-notification={id}\r\n html={body}\r\n />\r\n );\r\n })}\r\n </Wrapper>\r\n );\r\n};\r\n\r\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\r\n ${genericHtml}\r\n padding: ${(p) => p.theme.sizes?.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\r\n background-color: ${(p) => {\r\n if (p['data-types'].length) {\r\n if (p['data-types'].indexOf('top') > -1) {\r\n return p.theme.colors?.warning;\r\n }\r\n if (p['data-types'].indexOf('bottom') > -1) {\r\n return 'transparent';\r\n }\r\n\r\n return p.theme.colors?.primary;\r\n }\r\n return p.theme.colors?.warning;\r\n }};\r\n color: ${(p) => p.theme.colors?.text};\r\n border-radius: ${(p) => p.theme.borderRadius};\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\r\n overflow: hidden;\r\n\r\n i {\r\n color: ${(p) => p.theme.colors?.text};\r\n }\r\n\r\n a {\r\n color: ${(p) => p.theme.colors?.link};\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle}\r\n }\r\n }\r\n\r\n ${(p) =>\r\n !p['data-allow-paging'] &&\r\n css`\r\n flex-wrap: wrap;\r\n\r\n > div {\r\n min-width: 100%;\r\n margin: ${p.theme.sizes?.cardinal * 2}px;\r\n }\r\n `};\r\n\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n &:focus {\r\n ${StyledHtml} {\r\n ${borderTabStyle}\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst StyledHtml = styled(Html)<{\r\n 'data-pageable': boolean;\r\n 'data-expandable': boolean;\r\n 'data-expanded': boolean;\r\n}>`\r\n flex: 1;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n line-height: 1.6em;\r\n font-weight: 300;\r\n\r\n ${(p) =>\r\n p['data-expandable'] &&\r\n !p['data-expanded'] &&\r\n css`\r\n max-width: 100%;\r\n\r\n p {\r\n display: none;\r\n &:first-child {\r\n display: block;\r\n margin-bottom: 0;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst Pager = styled.div`\r\n text-align: center;\r\n width: 100%;\r\n span {\r\n font-size: ${(p) => p.theme.fonts?.small};\r\n display: inline-block;\r\n width: 30px;\r\n text-align: center;\r\n }\r\n`;\r\n\r\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n transition: opacity 200ms ease-out;\r\n justify-self: flex-end;\r\n align-self: flex-start;\r\n padding: ${(p) => p.theme.sizes?.small} svg {\r\n display: block;\r\n }\r\n\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle}\r\n }\r\n\r\n ${(p) =>\r\n p['data-disabled']\r\n ? css`\r\n opacity: 0.8;\r\n `\r\n : css`\r\n @media (hover) {\r\n &:hover {\r\n opacity: 0.5;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst CloseButton = styled(StyledButton)`\r\n position: absolute;\r\n top: 7.5px;\r\n right: 7.5px;\r\n width: 25px;\r\n height: auto;\r\n padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`};\r\n svg {\r\n vertical-align: middle;\r\n line,\r\n path {\r\n stroke: ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)`\r\n line {\r\n stroke: #ffffff;\r\n }\r\n`;\r\n\r\nconst Empty = styled.div`\r\n display: none;\r\n`;\r\n\r\nexport default NotificationRow;\r\n"],"names":[],"mappings":"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"}
|