flash-notifications 0.0.17 → 0.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/build/container/index.d.ts.map +1 -1
- package/build/container/index.js +22 -5
- package/build/container/index.js.map +1 -1
- package/build/container/notification.js +14 -13
- package/build/container/notification.js.map +1 -1
- package/build/listener.d.ts +8 -0
- package/build/listener.d.ts.map +1 -0
- package/build/listener.js +45 -0
- package/build/listener.js.map +1 -0
- package/jest.setup.js +3 -0
- package/package.json +10 -5
- package/src/container/index.jsx +23 -5
- package/src/container/notification.jsx +14 -15
- package/src/listener.js +56 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/container/index.jsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/container/index.jsx"],"names":[],"mappings":";;kBAE8C,OAAO"}
|
package/build/container/index.js
CHANGED
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
import useEventEmitter from "@kaspernj/api-maker/build/use-event-emitter";
|
|
2
2
|
import { digg } from "diggerize";
|
|
3
|
-
import React, { memo, useEffect } from "react";
|
|
3
|
+
import React, { memo, useEffect, useMemo } from "react";
|
|
4
4
|
import { StyleSheet, View } from "react-native";
|
|
5
5
|
import { shapeComponent, ShapeComponent } from "set-state-compare/src/shape-component";
|
|
6
|
+
import useEnvironment from "@kaspernj/api-maker/build/use-environment.js";
|
|
7
|
+
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
8
|
+
import useStyles from "@kaspernj/api-maker/build/use-styles.js";
|
|
6
9
|
import events from "../events";
|
|
7
10
|
import Notification from "./notification";
|
|
8
11
|
const styles = StyleSheet.create({
|
|
9
12
|
view: {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
+
zIndex: 99999
|
|
14
|
+
},
|
|
15
|
+
viewSmDown: {
|
|
16
|
+
right: 20,
|
|
17
|
+
left: 20
|
|
18
|
+
},
|
|
19
|
+
viewMdUp: {
|
|
13
20
|
right: 20
|
|
14
21
|
}
|
|
15
22
|
});
|
|
@@ -30,7 +37,17 @@ export default memo(shapeComponent(class FlashNotificationsContainer extends Sha
|
|
|
30
37
|
}, []);
|
|
31
38
|
}
|
|
32
39
|
render() {
|
|
33
|
-
|
|
40
|
+
const { isNative } = useEnvironment();
|
|
41
|
+
const insets = useSafeAreaInsets();
|
|
42
|
+
const viewStyleFromStyles = useStyles(styles, "view");
|
|
43
|
+
const viewStyle = useMemo(() => [
|
|
44
|
+
viewStyleFromStyles,
|
|
45
|
+
{
|
|
46
|
+
position: isNative ? "absolute" : "fixed",
|
|
47
|
+
top: insets.top + 20
|
|
48
|
+
}
|
|
49
|
+
], [insets.top]);
|
|
50
|
+
return (React.createElement(View, { dataSet: this.rootViewDataSet ||= { component: "flash-notifications-container" }, style: viewStyle, testID: "flash-notificaitons/container" }, this.s.notifications.map((notification) => React.createElement(Notification, { count: notification.count, key: `notification-${notification.count}`, message: notification.message, notification: notification, onRemovedClicked: this.tt.onRemovedClicked, title: notification.title, type: notification.type }))));
|
|
34
51
|
}
|
|
35
52
|
onPushNotification = (detail) => {
|
|
36
53
|
const count = this.s.count + 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/container/index.jsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,6CAA6C,CAAA;AACzE,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,KAAK,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/container/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import useEventEmitter from \"@kaspernj/api-maker/build/use-event-emitter\"\nimport {digg} from \"diggerize\"\nimport React, {memo, useEffect, useMemo} from \"react\"\nimport {StyleSheet, View} from \"react-native\"\nimport {shapeComponent, ShapeComponent} from \"set-state-compare/src/shape-component\"\nimport useEnvironment from \"@kaspernj/api-maker/build/use-environment.js\"\nimport {useSafeAreaInsets} from \"react-native-safe-area-context\"\nimport useStyles from \"@kaspernj/api-maker/build/use-styles.js\"\n\nimport events from \"../events\"\nimport Notification from \"./notification\"\n\nconst styles = StyleSheet.create({\n view: {\n zIndex: 99999\n },\n viewSmDown: {\n right: 20,\n left: 20\n },\n viewMdUp: {\n right: 20\n }\n})\n\nexport default memo(shapeComponent(class FlashNotificationsContainer extends ShapeComponent {\n timeouts = []\n\n setup() {\n this.useStates({\n count: 0,\n notifications: []\n })\n\n useEventEmitter(events, \"pushNotification\", this.tt.onPushNotification)\n useEffect(() => {\n return () => {\n for (const timeout of this.tt.timeouts) {\n clearTimeout(timeout)\n }\n }\n }, [])\n }\n\n render() {\n const {isNative} = useEnvironment()\n const insets = useSafeAreaInsets()\n const viewStyleFromStyles = useStyles(styles, \"view\")\n const viewStyle = useMemo(() => [\n viewStyleFromStyles,\n {\n position: isNative ? \"absolute\" : \"fixed\",\n top: insets.top + 20\n }\n ], [insets.top])\n\n return (\n <View\n dataSet={this.rootViewDataSet ||= {component: \"flash-notifications-container\"}}\n style={viewStyle}\n testID=\"flash-notificaitons/container\"\n >\n {this.s.notifications.map((notification) =>\n <Notification\n count={notification.count}\n key={`notification-${notification.count}`}\n message={notification.message}\n notification={notification}\n onRemovedClicked={this.tt.onRemovedClicked}\n title={notification.title}\n type={notification.type}\n />\n )}\n </View>\n )\n }\n\n onPushNotification = (detail) => {\n const count = this.s.count + 1\n const timeout = setTimeout(() => this.removeNotification(count), 4000)\n\n this.tt.timeouts.push(timeout)\n\n const notification = {\n count,\n message: digg(detail, \"message\"),\n title: digg(detail, \"title\"),\n type: digg(detail, \"type\")\n }\n\n this.setState({count, notifications: this.s.notifications.concat([notification])})\n }\n\n onRemovedClicked = (notification) => this.removeNotification(digg(notification, \"count\"))\n\n removeNotification = (count) => {\n this.setState({\n notifications: this.s.notifications.filter((notification) => notification.count != count)\n })\n }\n}))\n"]}
|
|
@@ -4,15 +4,21 @@ import PropTypesExact from "prop-types-exact";
|
|
|
4
4
|
import React, { memo, useMemo } from "react";
|
|
5
5
|
import { Pressable, StyleSheet, Text, View } from "react-native";
|
|
6
6
|
import { shapeComponent, ShapeComponent } from "set-state-compare/src/shape-component";
|
|
7
|
+
import useStyles from "@kaspernj/api-maker/build/use-styles.js";
|
|
7
8
|
const styles = StyleSheet.create({
|
|
8
9
|
view: {
|
|
9
|
-
width: 300,
|
|
10
|
-
maxWidth: "100%",
|
|
11
10
|
marginBottom: 15,
|
|
12
11
|
padding: 15,
|
|
13
12
|
borderRadius: 11,
|
|
14
13
|
cursor: "pointer"
|
|
15
14
|
},
|
|
15
|
+
viewSmDown: {
|
|
16
|
+
width: "100%"
|
|
17
|
+
},
|
|
18
|
+
viewMdUp: {
|
|
19
|
+
width: 300,
|
|
20
|
+
maxWidth: "100%"
|
|
21
|
+
},
|
|
16
22
|
viewError: {
|
|
17
23
|
border: "1px solid rgba(161, 34, 32, 0.95)",
|
|
18
24
|
backgroundColor: "rgba(161, 34, 32, 0.87)"
|
|
@@ -38,7 +44,7 @@ const styles = StyleSheet.create({
|
|
|
38
44
|
});
|
|
39
45
|
const titleViewDataSet = { class: "notification-title" };
|
|
40
46
|
const messageViewDataSet = { class: "notification-message" };
|
|
41
|
-
export default memo(shapeComponent(class
|
|
47
|
+
export default memo(shapeComponent(class FlashNotificationsNotification extends ShapeComponent {
|
|
42
48
|
static propTypes = PropTypesExact({
|
|
43
49
|
className: PropTypes.string,
|
|
44
50
|
count: PropTypes.number.isRequired,
|
|
@@ -51,16 +57,11 @@ export default memo(shapeComponent(class NotificationsNotification extends Shape
|
|
|
51
57
|
render() {
|
|
52
58
|
const { count, message, title, type } = this.p;
|
|
53
59
|
const { className } = this.props;
|
|
54
|
-
const viewStyles =
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
viewStyles.push(styles.viewSuccess);
|
|
60
|
-
if (type == "alert")
|
|
61
|
-
viewStyles.push(styles.viewAlert);
|
|
62
|
-
return viewStyles;
|
|
63
|
-
}, [type]);
|
|
60
|
+
const viewStyles = useStyles(styles, ["view", {
|
|
61
|
+
viewError: type == "error",
|
|
62
|
+
viewSuccess: type == "success",
|
|
63
|
+
viewAlert: type == "alert"
|
|
64
|
+
}]);
|
|
64
65
|
const pressableDataSet = useMemo(() => ({
|
|
65
66
|
class: classNames("flash-notifications-notification", className),
|
|
66
67
|
type
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../src/container/notification.jsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,KAAK,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAC,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,uCAAuC,CAAA;
|
|
1
|
+
{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../src/container/notification.jsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from \"classnames\"\nimport PropTypes from \"prop-types\"\nimport PropTypesExact from \"prop-types-exact\"\nimport React, {memo, useMemo} from \"react\"\nimport {Pressable, StyleSheet, Text, View} from \"react-native\"\nimport {shapeComponent, ShapeComponent} from \"set-state-compare/src/shape-component\"\nimport useStyles from \"@kaspernj/api-maker/build/use-styles.js\"\n\nconst styles = StyleSheet.create({\n view: {\n marginBottom: 15,\n padding: 15,\n borderRadius: 11,\n cursor: \"pointer\"\n },\n viewSmDown: {\n width: \"100%\"\n },\n viewMdUp: {\n width: 300,\n maxWidth: \"100%\"\n },\n viewError: {\n border: \"1px solid rgba(161, 34, 32, 0.95)\",\n backgroundColor: \"rgba(161, 34, 32, 0.87)\"\n },\n viewSuccess: {\n border: \"1px solid rgba(0, 0, 0, 0.95)\",\n backgroundColor: \"rgba(0, 0, 0, 0.87)\"\n },\n viewAlert: {\n border: \"1px solid rgba(204, 51, 0, 0.95)\",\n backgroundColor: \"rgba(204, 51, 0, 0.87)\"\n },\n titleview: {\n marginBottom: 5\n },\n titleText: {\n color: \"#fff\",\n fontWeight: \"bold\"\n },\n messageText: {\n color: \"#fff\"\n }\n})\n\nconst titleViewDataSet = {class: \"notification-title\"}\nconst messageViewDataSet = {class: \"notification-message\"}\n\nexport default memo(shapeComponent(class FlashNotificationsNotification extends ShapeComponent {\n static propTypes = PropTypesExact({\n className: PropTypes.string,\n count: PropTypes.number.isRequired,\n message: PropTypes.string.isRequired,\n notification: PropTypes.object.isRequired,\n onRemovedClicked: PropTypes.func.isRequired,\n title: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired\n })\n\n render() {\n const {count, message, title, type} = this.p\n const {className} = this.props\n\n const viewStyles = useStyles(styles, [\"view\", {\n viewError: type == \"error\",\n viewSuccess: type == \"success\",\n viewAlert: type == \"alert\"\n }])\n\n const pressableDataSet = useMemo(\n () => ({\n class: classNames(\"flash-notifications-notification\", className),\n type\n }),\n [className, type]\n )\n\n return (\n <Pressable dataSet={pressableDataSet} onPress={this.tt.onRemovedClicked}>\n <View style={viewStyles}>\n <View dataSet={titleViewDataSet} style={styles.titleview}>\n <Text style={styles.titleText} testID={`flash-notifications/notification-${count}/title`}>\n {title}\n </Text>\n </View>\n <View dataSet={messageViewDataSet}>\n <Text style={styles.messageText} testID={`flash-notifications/notification-${count}/message`}>\n {message}\n </Text>\n </View>\n </View>\n </Pressable>\n )\n }\n\n onRemovedClicked = () => this.p.onRemovedClicked(this.p.notification)\n}))\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../src/listener.js"],"names":[],"mappings":"AAEA;IAGE,sBAQC;IAVD,qBAAkB;IAYlB,2BAEC;IAED,+BA+BC;IAED,gDAEC;CACF"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import events from "./events.js";
|
|
2
|
+
export default class FlashNotificationsListener {
|
|
3
|
+
notifications = [];
|
|
4
|
+
static current() {
|
|
5
|
+
if (!globalThis.flashNotificationsListener) {
|
|
6
|
+
globalThis.flashNotificationsListener = new FlashNotificationsListener();
|
|
7
|
+
globalThis.flashNotificationsListener.connect(events);
|
|
8
|
+
}
|
|
9
|
+
return globalThis.flashNotificationsListener;
|
|
10
|
+
}
|
|
11
|
+
connect(events) {
|
|
12
|
+
events.addListener("pushNotification", this.onPushNotification);
|
|
13
|
+
}
|
|
14
|
+
findAndPop(argument) {
|
|
15
|
+
for (const notificationIndex in this.notifications) {
|
|
16
|
+
const notification = this.notifications[notificationIndex];
|
|
17
|
+
let result;
|
|
18
|
+
if (typeof argument == "function") {
|
|
19
|
+
result = argument(notification);
|
|
20
|
+
}
|
|
21
|
+
else if (typeof argument == "object") {
|
|
22
|
+
let allEqual = true;
|
|
23
|
+
for (const key in argument) {
|
|
24
|
+
const value = argument[key];
|
|
25
|
+
if (value !== notification[key]) {
|
|
26
|
+
allEqual = false;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
result = allEqual;
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
throw new Error(`Unknown type of argument: ${typeof argument}`);
|
|
33
|
+
}
|
|
34
|
+
if (result) {
|
|
35
|
+
delete this.notifications[notificationIndex];
|
|
36
|
+
return notification;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
throw new Error(`Couldn't find the expected notification in: ${JSON.stringify(this.notifications)}`);
|
|
40
|
+
}
|
|
41
|
+
onPushNotification = (notification) => {
|
|
42
|
+
this.notifications.push(notification);
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=listener.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"listener.js","sourceRoot":"","sources":["../src/listener.js"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,MAAM,CAAC,OAAO,OAAO,0BAA0B;IAC7C,aAAa,GAAG,EAAE,CAAA;IAElB,MAAM,CAAC,OAAO;QACZ,IAAI,CAAC,UAAU,CAAC,0BAA0B,EAAE,CAAC;YAC3C,UAAU,CAAC,0BAA0B,GAAG,IAAI,0BAA0B,EAAE,CAAA;YAExE,UAAU,CAAC,0BAA0B,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;QACvD,CAAC;QAED,OAAO,UAAU,CAAC,0BAA0B,CAAA;IAC9C,CAAC;IAED,OAAO,CAAC,MAAM;QACZ,MAAM,CAAC,WAAW,CAAC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACjE,CAAC;IAED,UAAU,CAAC,QAAQ;QACjB,KAAK,MAAM,iBAAiB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACnD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAA;YAC1D,IAAI,MAAM,CAAA;YAEV,IAAI,OAAO,QAAQ,IAAI,UAAU,EAAE,CAAC;gBAClC,MAAM,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;YACjC,CAAC;iBAAM,IAAI,OAAO,QAAQ,IAAI,QAAQ,EAAE,CAAC;gBACvC,IAAI,QAAQ,GAAG,IAAI,CAAA;gBAEnB,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;oBAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAA;oBAE3B,IAAI,KAAK,KAAK,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;wBAChC,QAAQ,GAAG,KAAK,CAAA;oBAClB,CAAC;gBACH,CAAC;gBAED,MAAM,GAAG,QAAQ,CAAA;YACnB,CAAC;iBAAM,CAAC;gBACN,MAAM,IAAI,KAAK,CAAC,6BAA6B,OAAO,QAAQ,EAAE,CAAC,CAAA;YACjE,CAAC;YAED,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAA;gBAE5C,OAAO,YAAY,CAAA;YACrB,CAAC;QACH,CAAC;QAED,MAAM,IAAI,KAAK,CAAC,+CAA+C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAA;IACtG,CAAC;IAED,kBAAkB,GAAG,CAAC,YAAY,EAAE,EAAE;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACvC,CAAC,CAAA;CACF","sourcesContent":["import events from \"./events.js\"\n\nexport default class FlashNotificationsListener {\n notifications = []\n\n static current() {\n if (!globalThis.flashNotificationsListener) {\n globalThis.flashNotificationsListener = new FlashNotificationsListener()\n\n globalThis.flashNotificationsListener.connect(events)\n }\n\n return globalThis.flashNotificationsListener\n }\n\n connect(events) {\n events.addListener(\"pushNotification\", this.onPushNotification)\n }\n\n findAndPop(argument) {\n for (const notificationIndex in this.notifications) {\n const notification = this.notifications[notificationIndex]\n let result\n\n if (typeof argument == \"function\") {\n result = argument(notification)\n } else if (typeof argument == \"object\") {\n let allEqual = true\n\n for (const key in argument) {\n const value = argument[key]\n\n if (value !== notification[key]) {\n allEqual = false\n }\n }\n\n result = allEqual\n } else {\n throw new Error(`Unknown type of argument: ${typeof argument}`)\n }\n\n if (result) {\n delete this.notifications[notificationIndex]\n\n return notification\n }\n }\n\n throw new Error(`Couldn't find the expected notification in: ${JSON.stringify(this.notifications)}`)\n }\n\n onPushNotification = (notification) => {\n this.notifications.push(notification)\n }\n}\n"]}
|
package/jest.setup.js
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flash-notifications",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19",
|
|
4
4
|
"description": "My new module",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -31,6 +31,9 @@
|
|
|
31
31
|
"homepage": "https://github.com/kaspernj/flash-notifications#readme",
|
|
32
32
|
"jest": {
|
|
33
33
|
"preset": "jest-expo",
|
|
34
|
+
"setupFiles": [
|
|
35
|
+
"./jest.setup.js"
|
|
36
|
+
],
|
|
34
37
|
"transformIgnorePatterns": [
|
|
35
38
|
"node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|diggerize|fetching-object|set-state-compare|@kaspernj/api-maker)"
|
|
36
39
|
]
|
|
@@ -43,16 +46,18 @@
|
|
|
43
46
|
"set-state-compare": "^1.0.57"
|
|
44
47
|
},
|
|
45
48
|
"devDependencies": {
|
|
46
|
-
"@testing-library/react-native": "~13.0
|
|
49
|
+
"@testing-library/react-native": "~13.2.0",
|
|
47
50
|
"@types/react": "~18.3.12",
|
|
48
51
|
"expo": "~53.0.9",
|
|
49
52
|
"expo-module-scripts": "^4.0.2",
|
|
50
53
|
"react-native": "~0.76.9"
|
|
51
54
|
},
|
|
52
55
|
"peerDependencies": {
|
|
53
|
-
"@kaspernj/api-maker": "
|
|
56
|
+
"@kaspernj/api-maker": ">= 1.0.2043",
|
|
54
57
|
"expo": "*",
|
|
55
58
|
"react": "*",
|
|
56
|
-
"react-native": "*"
|
|
57
|
-
|
|
59
|
+
"react-native": "*",
|
|
60
|
+
"react-native-safe-area-context": "*"
|
|
61
|
+
},
|
|
62
|
+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
|
58
63
|
}
|
package/src/container/index.jsx
CHANGED
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import useEventEmitter from "@kaspernj/api-maker/build/use-event-emitter"
|
|
2
2
|
import {digg} from "diggerize"
|
|
3
|
-
import React, {memo, useEffect} from "react"
|
|
3
|
+
import React, {memo, useEffect, useMemo} from "react"
|
|
4
4
|
import {StyleSheet, View} from "react-native"
|
|
5
5
|
import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
|
|
6
|
+
import useEnvironment from "@kaspernj/api-maker/build/use-environment.js"
|
|
7
|
+
import {useSafeAreaInsets} from "react-native-safe-area-context"
|
|
8
|
+
import useStyles from "@kaspernj/api-maker/build/use-styles.js"
|
|
6
9
|
|
|
7
10
|
import events from "../events"
|
|
8
11
|
import Notification from "./notification"
|
|
9
12
|
|
|
10
13
|
const styles = StyleSheet.create({
|
|
11
14
|
view: {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
zIndex: 99999
|
|
16
|
+
},
|
|
17
|
+
viewSmDown: {
|
|
18
|
+
right: 20,
|
|
19
|
+
left: 20
|
|
20
|
+
},
|
|
21
|
+
viewMdUp: {
|
|
15
22
|
right: 20
|
|
16
23
|
}
|
|
17
24
|
})
|
|
@@ -36,10 +43,21 @@ export default memo(shapeComponent(class FlashNotificationsContainer extends Sha
|
|
|
36
43
|
}
|
|
37
44
|
|
|
38
45
|
render() {
|
|
46
|
+
const {isNative} = useEnvironment()
|
|
47
|
+
const insets = useSafeAreaInsets()
|
|
48
|
+
const viewStyleFromStyles = useStyles(styles, "view")
|
|
49
|
+
const viewStyle = useMemo(() => [
|
|
50
|
+
viewStyleFromStyles,
|
|
51
|
+
{
|
|
52
|
+
position: isNative ? "absolute" : "fixed",
|
|
53
|
+
top: insets.top + 20
|
|
54
|
+
}
|
|
55
|
+
], [insets.top])
|
|
56
|
+
|
|
39
57
|
return (
|
|
40
58
|
<View
|
|
41
59
|
dataSet={this.rootViewDataSet ||= {component: "flash-notifications-container"}}
|
|
42
|
-
style={
|
|
60
|
+
style={viewStyle}
|
|
43
61
|
testID="flash-notificaitons/container"
|
|
44
62
|
>
|
|
45
63
|
{this.s.notifications.map((notification) =>
|
|
@@ -4,16 +4,22 @@ import PropTypesExact from "prop-types-exact"
|
|
|
4
4
|
import React, {memo, useMemo} from "react"
|
|
5
5
|
import {Pressable, StyleSheet, Text, View} from "react-native"
|
|
6
6
|
import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
|
|
7
|
+
import useStyles from "@kaspernj/api-maker/build/use-styles.js"
|
|
7
8
|
|
|
8
9
|
const styles = StyleSheet.create({
|
|
9
10
|
view: {
|
|
10
|
-
width: 300,
|
|
11
|
-
maxWidth: "100%",
|
|
12
11
|
marginBottom: 15,
|
|
13
12
|
padding: 15,
|
|
14
13
|
borderRadius: 11,
|
|
15
14
|
cursor: "pointer"
|
|
16
15
|
},
|
|
16
|
+
viewSmDown: {
|
|
17
|
+
width: "100%"
|
|
18
|
+
},
|
|
19
|
+
viewMdUp: {
|
|
20
|
+
width: 300,
|
|
21
|
+
maxWidth: "100%"
|
|
22
|
+
},
|
|
17
23
|
viewError: {
|
|
18
24
|
border: "1px solid rgba(161, 34, 32, 0.95)",
|
|
19
25
|
backgroundColor: "rgba(161, 34, 32, 0.87)"
|
|
@@ -41,7 +47,7 @@ const styles = StyleSheet.create({
|
|
|
41
47
|
const titleViewDataSet = {class: "notification-title"}
|
|
42
48
|
const messageViewDataSet = {class: "notification-message"}
|
|
43
49
|
|
|
44
|
-
export default memo(shapeComponent(class
|
|
50
|
+
export default memo(shapeComponent(class FlashNotificationsNotification extends ShapeComponent {
|
|
45
51
|
static propTypes = PropTypesExact({
|
|
46
52
|
className: PropTypes.string,
|
|
47
53
|
count: PropTypes.number.isRequired,
|
|
@@ -56,18 +62,11 @@ export default memo(shapeComponent(class NotificationsNotification extends Shape
|
|
|
56
62
|
const {count, message, title, type} = this.p
|
|
57
63
|
const {className} = this.props
|
|
58
64
|
|
|
59
|
-
const viewStyles =
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
if (type == "success") viewStyles.push(styles.viewSuccess)
|
|
65
|
-
if (type == "alert") viewStyles.push(styles.viewAlert)
|
|
66
|
-
|
|
67
|
-
return viewStyles
|
|
68
|
-
},
|
|
69
|
-
[type]
|
|
70
|
-
)
|
|
65
|
+
const viewStyles = useStyles(styles, ["view", {
|
|
66
|
+
viewError: type == "error",
|
|
67
|
+
viewSuccess: type == "success",
|
|
68
|
+
viewAlert: type == "alert"
|
|
69
|
+
}])
|
|
71
70
|
|
|
72
71
|
const pressableDataSet = useMemo(
|
|
73
72
|
() => ({
|
package/src/listener.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import events from "./events.js"
|
|
2
|
+
|
|
3
|
+
export default class FlashNotificationsListener {
|
|
4
|
+
notifications = []
|
|
5
|
+
|
|
6
|
+
static current() {
|
|
7
|
+
if (!globalThis.flashNotificationsListener) {
|
|
8
|
+
globalThis.flashNotificationsListener = new FlashNotificationsListener()
|
|
9
|
+
|
|
10
|
+
globalThis.flashNotificationsListener.connect(events)
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return globalThis.flashNotificationsListener
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
connect(events) {
|
|
17
|
+
events.addListener("pushNotification", this.onPushNotification)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
findAndPop(argument) {
|
|
21
|
+
for (const notificationIndex in this.notifications) {
|
|
22
|
+
const notification = this.notifications[notificationIndex]
|
|
23
|
+
let result
|
|
24
|
+
|
|
25
|
+
if (typeof argument == "function") {
|
|
26
|
+
result = argument(notification)
|
|
27
|
+
} else if (typeof argument == "object") {
|
|
28
|
+
let allEqual = true
|
|
29
|
+
|
|
30
|
+
for (const key in argument) {
|
|
31
|
+
const value = argument[key]
|
|
32
|
+
|
|
33
|
+
if (value !== notification[key]) {
|
|
34
|
+
allEqual = false
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
result = allEqual
|
|
39
|
+
} else {
|
|
40
|
+
throw new Error(`Unknown type of argument: ${typeof argument}`)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if (result) {
|
|
44
|
+
delete this.notifications[notificationIndex]
|
|
45
|
+
|
|
46
|
+
return notification
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
throw new Error(`Couldn't find the expected notification in: ${JSON.stringify(this.notifications)}`)
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
onPushNotification = (notification) => {
|
|
54
|
+
this.notifications.push(notification)
|
|
55
|
+
}
|
|
56
|
+
}
|