namirasoft-site-react 1.4.332 → 1.4.334
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/components/NSBarNotification.d.ts +1 -0
- package/dist/components/NSBarNotification.js +7 -0
- package/dist/components/NSBarNotification.js.map +1 -1
- package/dist/components/NSLayout.js +2 -0
- package/dist/components/NSLayout.js.map +1 -1
- package/dist/routing/NSNotifier.d.ts +4 -3
- package/dist/routing/NSNotifier.js +12 -15
- package/dist/routing/NSNotifier.js.map +1 -1
- package/package.json +1 -1
- package/src/components/NSBarNotification.tsx +11 -0
- package/src/components/NSLayout.tsx +11 -18
- package/src/routing/NSNotifier.ts +14 -17
|
@@ -8,6 +8,7 @@ export interface NSBarNotificationProps extends IBaseComponentProps {
|
|
|
8
8
|
}
|
|
9
9
|
export interface NSBarNotificationPropsInner extends NSBarNotificationProps {
|
|
10
10
|
onClose: () => void;
|
|
11
|
+
onChangeState: () => void;
|
|
11
12
|
}
|
|
12
13
|
export declare enum NSBarNotificationColor {
|
|
13
14
|
GRAY = "GRAY",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Styles from "./NSBarNotification.module.css";
|
|
3
|
+
import { useEffect } from "react";
|
|
3
4
|
export var NSBarNotificationColor;
|
|
4
5
|
(function (NSBarNotificationColor) {
|
|
5
6
|
NSBarNotificationColor["GRAY"] = "GRAY";
|
|
@@ -19,6 +20,12 @@ export function NSBarNotification(props) {
|
|
|
19
20
|
let className = Styles["ns_" + props.color.toString().toLowerCase()];
|
|
20
21
|
let type = props.type;
|
|
21
22
|
let src = "";
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
const interval = setInterval(() => {
|
|
25
|
+
props.onChangeState();
|
|
26
|
+
}, 500);
|
|
27
|
+
return () => clearInterval(interval);
|
|
28
|
+
}, []);
|
|
22
29
|
switch (type) {
|
|
23
30
|
case "Error":
|
|
24
31
|
src = "https://static.namirasoft.com/image/concept/close/error.svg";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSBarNotification.js","sourceRoot":"","sources":["../../src/components/NSBarNotification.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSBarNotification.js","sourceRoot":"","sources":["../../src/components/NSBarNotification.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBlC,MAAM,CAAN,IAAY,sBAOX;AAPD,WAAY,sBAAsB;IAE9B,uCAAa,CAAA;IACb,uCAAa,CAAA;IACb,yCAAe,CAAA;IACf,2CAAiB,CAAA;IACjB,qCAAW,CAAA;AACf,CAAC,EAPW,sBAAsB,KAAtB,sBAAsB,QAOjC;AAED,MAAM,CAAN,IAAY,gBAMX;AAND,WAAY,gBAAgB;IAExB,+CAA2B,CAAA;IAC3B,uCAAmB,CAAA;IACnB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;AACnB,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,QAM3B;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAkC;IAEhE,IAAI,SAAS,GAAG,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;IACrE,IAAI,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IACtB,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QAEX,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAE9B,KAAK,CAAC,aAAa,EAAE,CAAC;QAC1B,CAAC,EAAE,GAAG,CAAC,CAAC;QACR,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,QAAQ,IAAI,EACZ,CAAC;QACG,KAAK,OAAO;YACR,GAAG,GAAG,6DAA6D,CAAC;YACpE,MAAM;QACV,KAAK,SAAS;YACV,GAAG,GAAG,+DAA+D,CAAC;YACtE,MAAM;QACV,KAAK,SAAS;YACV,GAAG,GAAG,+DAA+D,CAAC;YACtE,MAAM;QACV,KAAK,aAAa;YACd,GAAG,GAAG,4DAA4D,CAAC;IAC3E,CAAC;IAED,OAAO,CACH,eAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EACb,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,SAAS,EAAE,EAChD,KAAK,EAAE,KAAK,CAAC,KAAK,aAElB,YAAG,SAAS,EAAE,wBAAwB,YAAG,KAAK,CAAC,IAAI,GAAK,EACxD,cACI,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,GAAG,EAAE,GAAG,EACR,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,GAAG,EAAE;;oBAEV,MAAA,KAAK,CAAC,OAAO,qDAAI,CAAC;gBACtB,CAAC,GACH,IACA,CACT,CAAA;AACL,CAAC;AAAA,CAAC"}
|
|
@@ -28,6 +28,8 @@ export function NSLayout(props) {
|
|
|
28
28
|
}, children: [_jsxs(NSHeader, { scope: props.scope, name: "Header", logo: props.logo, header: props.header, isLoggedIn: props.isLoggedIn, notifier: props.notifier, children: [props.notifications.length !== 0 &&
|
|
29
29
|
_jsx(_Fragment, { children: props.notifications.map((notification, index) => _jsx(Fragment, { children: _jsx(NSBarNotification, Object.assign({}, notification, { onClose: () => {
|
|
30
30
|
props.notifier.delNotification(notification.id);
|
|
31
|
+
}, onChangeState: () => {
|
|
32
|
+
props.notifier.onChangeState();
|
|
31
33
|
} })) }, `NSLayout_fragment_key_${index}`)) }), _jsxs("div", { className: 'd-none d-lg-block', children: [alerts.length !== 0 && alerts.map((alert, index) => _jsx(NSBarAlert, Object.assign({}, alert), `NSLayout_NSBarAlert_key_${index}`)), isValidAction(props.action) &&
|
|
32
34
|
_jsx(NSBarAction, Object.assign({}, props.action))] })] }), _jsxs("div", { className: 'd-block d-lg-none', children: [alerts.length !== 0 && alerts.map((alert, index) => _jsx(NSBarAlert, Object.assign({}, alert), `NSLayout_NSBarAlert_key_${index}`)), isValidAction(props.action) && _jsx(NSBarAction, Object.assign({}, props.action))] }), props.title &&
|
|
33
35
|
_jsxs(_Fragment, { children: [_jsx(NSSpace, { size: NSSpaceSizeType.MINI }), _jsx(NSBarTitle, Object.assign({}, props.title))] }), _jsx("main", { className: `d-flex flex-column text-white ${Styles.ns_layout_main}`, children: props.children }), _jsx(NSFooter, { scope: props.scope, name: "Footer", logo: props.logo, isLoggedIn: props.isLoggedIn })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSLayout.js","sourceRoot":"","sources":["../../src/components/NSLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAC;AAEhF,OAAO,EAAoB,WAAW,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAmB,UAAU,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,EAAmB,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAkBrD,MAAM,UAAU,QAAQ,CAAC,KAAoB;;IAE5C,IAAI,MAAM,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC;IAChC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"NSLayout.js","sourceRoot":"","sources":["../../src/components/NSLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAC;AAEhF,OAAO,EAAoB,WAAW,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAmB,UAAU,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,EAAmB,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAkBrD,MAAM,UAAU,QAAQ,CAAC,KAAoB;;IAE5C,IAAI,MAAM,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC;IAChC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC;IAE7C,OAAO,CACN,eAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAChB,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,MAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,mCAAI,EAAE,EAAE,EACvE,KAAK,EAAE;YACN,SAAS,EAAE,OAAO;YAClB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,CAAA,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK,EAAC,CAAC,CAAC,OAAO,MAAA,KAAK,CAAC,UAAU,0CAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5E,cAAc,EAAE,MAAA,MAAA,KAAK,CAAC,UAAU,0CAAE,IAAI,mCAAI,OAAO;YACjD,oBAAoB,EAAE,MAAA,MAAA,KAAK,CAAC,UAAU,0CAAE,UAAU,mCAAI,OAAO;SAC7D,EACD,OAAO,EAAE,CAAC,CAAC,EAAE;;YAEZ,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBACpB,MAAA,KAAK,CAAC,cAAc,qDAAI,CAAC;QAC3B,CAAC,aAED,MAAC,QAAQ,IACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,aAGvB,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC;wBAChC,4BAEE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,CAC/C,KAAC,QAAQ,cACR,KAAC,iBAAiB,oBACb,YAAY,IAChB,OAAO,EAAE,GAAG,EAAE;wCAEb,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;oCACjD,CAAC,EACD,aAAa,EAAE,GAAG,EAAE;wCAEnB,KAAK,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;oCAChC,CAAC,IACA,IAXY,yBAAyB,KAAK,EAAE,CAYpC,CACX,GAEA,EAGJ,eAAK,SAAS,EAAC,mBAAmB,aAEhC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,UAAU,oBAA8C,KAAK,GAA7C,2BAA2B,KAAK,EAAE,CAAe,CAAC,EAGvH,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC;gCAC3B,KAAC,WAAW,oBACP,KAAK,CAAC,MAAM,EACf,IAEE,IAEI,EACX,eAAK,SAAS,EAAC,mBAAmB,aAGhC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,UAAU,oBAA8C,KAAK,GAA7C,2BAA2B,KAAK,EAAE,CAAe,CAAC,EAGvH,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,KAAC,WAAW,oBAAK,KAAK,CAAC,MAAM,EAAI,IAE5D,EAGL,KAAK,CAAC,KAAK;gBACX,8BACC,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GACxB,EACX,KAAC,UAAU,oBAAK,KAAK,CAAC,KAAK,EAAiB,IAC1C,EAEJ,eAAM,SAAS,EAAE,iCAAiC,MAAM,CAAC,cAAc,EAAE,YACvE,KAAK,CAAC,QAAQ,GACT,EACP,KAAC,QAAQ,IACR,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,UAAU,EAAE,KAAK,CAAC,UAAU,GAC3B,IACI,CACP,CAAC;AACH,CAAC"}
|
|
@@ -4,11 +4,12 @@ export declare class NSNotifier {
|
|
|
4
4
|
private static mutex_mofify;
|
|
5
5
|
private static mutex_set;
|
|
6
6
|
private storage;
|
|
7
|
-
private
|
|
7
|
+
private changeState;
|
|
8
8
|
timeout: number;
|
|
9
|
-
constructor(storage: IStorage,
|
|
9
|
+
constructor(storage: IStorage, changeState: () => void);
|
|
10
|
+
onChangeState(): void;
|
|
10
11
|
getNotifications(): NSBarNotificationProps[];
|
|
11
|
-
setNotifications(notifications: NSBarNotificationProps[]): void;
|
|
12
|
+
setNotifications(notifications: NSBarNotificationProps[], timout?: number): void;
|
|
12
13
|
delNotification(id: string): void;
|
|
13
14
|
private notify;
|
|
14
15
|
onInformation(text: string): void;
|
|
@@ -3,10 +3,11 @@ import { NSBarNotificationColor, NotificationType } from "../components/NSBarNot
|
|
|
3
3
|
import { BaseUUID, TimeOperation } from "namirasoft-core";
|
|
4
4
|
import { Mutex } from 'async-mutex';
|
|
5
5
|
export class NSNotifier {
|
|
6
|
-
constructor(storage,
|
|
6
|
+
constructor(storage, changeState) {
|
|
7
7
|
this.timeout = 5000;
|
|
8
8
|
this.storage = storage;
|
|
9
|
-
this.
|
|
9
|
+
this.changeState = changeState;
|
|
10
|
+
this.onChangeState = this.onChangeState.bind(this);
|
|
10
11
|
this.getNotifications = this.getNotifications.bind(this);
|
|
11
12
|
this.setNotifications = this.setNotifications.bind(this);
|
|
12
13
|
this.delNotification = this.delNotification.bind(this);
|
|
@@ -16,12 +17,14 @@ export class NSNotifier {
|
|
|
16
17
|
this.onWarning = this.onWarning.bind(this);
|
|
17
18
|
this.onError = this.onError.bind(this);
|
|
18
19
|
}
|
|
20
|
+
onChangeState() {
|
|
21
|
+
this.changeState();
|
|
22
|
+
}
|
|
19
23
|
getNotifications() {
|
|
20
24
|
let ans = [];
|
|
21
25
|
let value = this.storage.get("ns-notifications", "");
|
|
22
26
|
if (value)
|
|
23
27
|
ans = JSON.parse(value);
|
|
24
|
-
console.log("getNotification-Before", ans);
|
|
25
28
|
let now = new Date();
|
|
26
29
|
ans = ans.filter(x => {
|
|
27
30
|
if (x.expired_at) {
|
|
@@ -30,40 +33,34 @@ export class NSNotifier {
|
|
|
30
33
|
}
|
|
31
34
|
return false;
|
|
32
35
|
});
|
|
33
|
-
console.log("getNotification-After", ans);
|
|
34
36
|
return ans;
|
|
35
37
|
}
|
|
36
|
-
setNotifications(notifications) {
|
|
38
|
+
setNotifications(notifications, timout) {
|
|
37
39
|
NSNotifier.mutex_set.runExclusive(() => {
|
|
38
40
|
notifications.forEach(n => {
|
|
39
41
|
if (!n.expired_at)
|
|
40
|
-
n.expired_at = TimeOperation.millisecondsLater(this.timeout, new Date());
|
|
42
|
+
n.expired_at = TimeOperation.millisecondsLater(timout !== null && timout !== void 0 ? timout : this.timeout, new Date());
|
|
41
43
|
});
|
|
42
|
-
this.
|
|
43
|
-
this.setState();
|
|
44
|
+
this.onChangeState();
|
|
44
45
|
});
|
|
45
46
|
}
|
|
46
47
|
delNotification(id) {
|
|
47
48
|
NSNotifier.mutex_mofify.runExclusive(() => {
|
|
48
|
-
console.log("delNotification-Before", id);
|
|
49
49
|
let notifications = this.getNotifications();
|
|
50
|
-
let tobedeleted = notifications.filter(x => x.id === id);
|
|
51
50
|
notifications = notifications.filter(x => x.id !== id);
|
|
52
51
|
this.setNotifications(notifications);
|
|
53
|
-
console.log("delNotification-After", tobedeleted);
|
|
54
52
|
});
|
|
55
53
|
}
|
|
56
|
-
notify(message) {
|
|
54
|
+
notify(message, timout) {
|
|
57
55
|
NSNotifier.mutex_mofify.runExclusive(() => {
|
|
58
56
|
let notifications = this.getNotifications();
|
|
59
57
|
notifications.push(message);
|
|
60
|
-
|
|
61
|
-
this.setNotifications(notifications);
|
|
58
|
+
this.setNotifications(notifications, timout !== null && timout !== void 0 ? timout : this.timeout);
|
|
62
59
|
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
|
63
60
|
});
|
|
64
61
|
setTimeout(() => {
|
|
65
62
|
this.delNotification(message.id);
|
|
66
|
-
}, this.timeout);
|
|
63
|
+
}, timout !== null && timout !== void 0 ? timout : this.timeout);
|
|
67
64
|
}
|
|
68
65
|
onInformation(text) {
|
|
69
66
|
let id = BaseUUID.uuid();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSNotifier.js","sourceRoot":"","sources":["../../src/routing/NSNotifier.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAA0B,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnH,OAAO,EAAE,QAAQ,EAAY,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,OAAO,UAAU;IAOnB,YAAY,OAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"NSNotifier.js","sourceRoot":"","sources":["../../src/routing/NSNotifier.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import Styles from "./NSBarNotification.module.css";
|
|
2
2
|
import { IBaseComponentProps } from "../props/IBaseComponentProps";
|
|
3
|
+
import { useEffect } from "react";
|
|
3
4
|
|
|
4
5
|
export interface NSBarNotificationProps extends IBaseComponentProps
|
|
5
6
|
{
|
|
@@ -13,6 +14,7 @@ export interface NSBarNotificationProps extends IBaseComponentProps
|
|
|
13
14
|
export interface NSBarNotificationPropsInner extends NSBarNotificationProps
|
|
14
15
|
{
|
|
15
16
|
onClose: () => void;
|
|
17
|
+
onChangeState: () => void;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
export enum NSBarNotificationColor
|
|
@@ -38,6 +40,15 @@ export function NSBarNotification(props: NSBarNotificationPropsInner)
|
|
|
38
40
|
let type = props.type;
|
|
39
41
|
let src = "";
|
|
40
42
|
|
|
43
|
+
useEffect(() =>
|
|
44
|
+
{
|
|
45
|
+
const interval = setInterval(() =>
|
|
46
|
+
{
|
|
47
|
+
props.onChangeState();
|
|
48
|
+
}, 500);
|
|
49
|
+
return () => clearInterval(interval);
|
|
50
|
+
}, []);
|
|
51
|
+
|
|
41
52
|
switch (type)
|
|
42
53
|
{
|
|
43
54
|
case "Error":
|
|
@@ -32,20 +32,6 @@ export function NSLayout(props: NSLayoutProps)
|
|
|
32
32
|
let alerts = props.alerts ?? [];
|
|
33
33
|
alerts = alerts.filter((a) => a.isVisible());
|
|
34
34
|
|
|
35
|
-
// useEffect(() =>
|
|
36
|
-
// {
|
|
37
|
-
// const handleKeyDown = (event: KeyboardEvent) =>
|
|
38
|
-
// {
|
|
39
|
-
// if (event.key === "Enter")
|
|
40
|
-
// props.onEnterPressed?.();
|
|
41
|
-
// };
|
|
42
|
-
// window.addEventListener("keyup", handleKeyDown);
|
|
43
|
-
// return () =>
|
|
44
|
-
// {
|
|
45
|
-
// window.removeEventListener("keyup", handleKeyDown);
|
|
46
|
-
// };
|
|
47
|
-
// }, []);
|
|
48
|
-
|
|
49
35
|
return (
|
|
50
36
|
<div id={props.id}
|
|
51
37
|
className={`${Styles.ns_container} ${props.classList?.join(" ") ?? ""}`}
|
|
@@ -79,10 +65,17 @@ export function NSLayout(props: NSLayoutProps)
|
|
|
79
65
|
{
|
|
80
66
|
props.notifications.map((notification, index) =>
|
|
81
67
|
<Fragment key={`NSLayout_fragment_key_${index}`}>
|
|
82
|
-
<NSBarNotification
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
68
|
+
<NSBarNotification
|
|
69
|
+
{...notification}
|
|
70
|
+
onClose={() =>
|
|
71
|
+
{
|
|
72
|
+
props.notifier.delNotification(notification.id);
|
|
73
|
+
}}
|
|
74
|
+
onChangeState={() =>
|
|
75
|
+
{
|
|
76
|
+
props.notifier.onChangeState();
|
|
77
|
+
}}
|
|
78
|
+
/>
|
|
86
79
|
</Fragment>
|
|
87
80
|
)
|
|
88
81
|
}
|
|
@@ -8,12 +8,13 @@ export class NSNotifier
|
|
|
8
8
|
private static mutex_mofify: Mutex = new Mutex();
|
|
9
9
|
private static mutex_set: Mutex = new Mutex();
|
|
10
10
|
private storage: IStorage;
|
|
11
|
-
private
|
|
11
|
+
private changeState: () => void;
|
|
12
12
|
public timeout: number = 5000;
|
|
13
|
-
constructor(storage: IStorage,
|
|
13
|
+
constructor(storage: IStorage, changeState: () => void)
|
|
14
14
|
{
|
|
15
15
|
this.storage = storage;
|
|
16
|
-
this.
|
|
16
|
+
this.changeState = changeState;
|
|
17
|
+
this.onChangeState = this.onChangeState.bind(this);
|
|
17
18
|
this.getNotifications = this.getNotifications.bind(this);
|
|
18
19
|
this.setNotifications = this.setNotifications.bind(this);
|
|
19
20
|
this.delNotification = this.delNotification.bind(this);
|
|
@@ -23,14 +24,16 @@ export class NSNotifier
|
|
|
23
24
|
this.onWarning = this.onWarning.bind(this);
|
|
24
25
|
this.onError = this.onError.bind(this);
|
|
25
26
|
}
|
|
27
|
+
onChangeState()
|
|
28
|
+
{
|
|
29
|
+
this.changeState();
|
|
30
|
+
}
|
|
26
31
|
getNotifications(): NSBarNotificationProps[]
|
|
27
32
|
{
|
|
28
33
|
let ans: NSBarNotificationProps[] = [];
|
|
29
34
|
let value = this.storage.get("ns-notifications", "");
|
|
30
35
|
if (value)
|
|
31
36
|
ans = JSON.parse(value);
|
|
32
|
-
|
|
33
|
-
console.log("getNotification-Before", ans);
|
|
34
37
|
let now = new Date();
|
|
35
38
|
ans = ans.filter(x =>
|
|
36
39
|
{
|
|
@@ -41,48 +44,42 @@ export class NSNotifier
|
|
|
41
44
|
}
|
|
42
45
|
return false;
|
|
43
46
|
})
|
|
44
|
-
console.log("getNotification-After", ans);
|
|
45
47
|
return ans;
|
|
46
48
|
}
|
|
47
|
-
setNotifications(notifications: NSBarNotificationProps[]): void
|
|
49
|
+
setNotifications(notifications: NSBarNotificationProps[], timout?: number): void
|
|
48
50
|
{
|
|
49
51
|
NSNotifier.mutex_set.runExclusive(() =>
|
|
50
52
|
{
|
|
51
53
|
notifications.forEach(n =>
|
|
52
54
|
{
|
|
53
55
|
if (!n.expired_at)
|
|
54
|
-
n.expired_at = TimeOperation.millisecondsLater(this.timeout, new Date());
|
|
56
|
+
n.expired_at = TimeOperation.millisecondsLater(timout ?? this.timeout, new Date());
|
|
55
57
|
});
|
|
56
|
-
this.
|
|
57
|
-
this.setState();
|
|
58
|
+
this.onChangeState();
|
|
58
59
|
});
|
|
59
60
|
}
|
|
60
61
|
delNotification(id: string): void
|
|
61
62
|
{
|
|
62
63
|
NSNotifier.mutex_mofify.runExclusive(() =>
|
|
63
64
|
{
|
|
64
|
-
console.log("delNotification-Before", id);
|
|
65
65
|
let notifications: NSBarNotificationProps[] = this.getNotifications();
|
|
66
|
-
let tobedeleted = notifications.filter(x => x.id === id);
|
|
67
66
|
notifications = notifications.filter(x => x.id !== id);
|
|
68
67
|
this.setNotifications(notifications);
|
|
69
|
-
console.log("delNotification-After", tobedeleted);
|
|
70
68
|
});
|
|
71
69
|
}
|
|
72
|
-
private notify(message: NSBarNotificationProps)
|
|
70
|
+
private notify(message: NSBarNotificationProps, timout?: number)
|
|
73
71
|
{
|
|
74
72
|
NSNotifier.mutex_mofify.runExclusive(() =>
|
|
75
73
|
{
|
|
76
74
|
let notifications: NSBarNotificationProps[] = this.getNotifications();
|
|
77
75
|
notifications.push(message);
|
|
78
|
-
|
|
79
|
-
this.setNotifications(notifications);
|
|
76
|
+
this.setNotifications(notifications, timout ?? this.timeout);
|
|
80
77
|
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
|
81
78
|
});
|
|
82
79
|
setTimeout(() =>
|
|
83
80
|
{
|
|
84
81
|
this.delNotification(message.id);
|
|
85
|
-
}, this.timeout);
|
|
82
|
+
}, timout ?? this.timeout);
|
|
86
83
|
}
|
|
87
84
|
onInformation(text: string)
|
|
88
85
|
{
|