flash-notifications 0.0.12 → 0.0.14

package/build/container/index.d.ts

@@ -1,3 +1,4 @@
-declare const _default: import("react").MemoExoticComponent<any>;
+declare const _default: React.MemoExoticComponent<any>;
 export default _default;
+import React from "react";
 //# sourceMappingURL=index.d.ts.map

package/build/container/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/container/index.jsx"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/container/index.jsx"],"names":[],"mappings":";;kBAA0B,OAAO"}

package/build/container/index.js

@@ -1,41 +1,47 @@
-import { memo } from "react";
+import React, { memo } from "react";
+import { shapeComponent, ShapeComponent } from "set-state-compare/src/shape-component.js";
+import { StyleSheet, View } from "react-native";
 import { digg } from "diggerize";
 import Notification from "./notification";
-import { shapeComponent, ShapeComponent } from "set-state-compare/src/shape-component.js";
 import useEventListener from "@kaspernj/api-maker/src/use-event-listener";
-import { View } from "react-native";
+const dataSets = {
+    view: { class: "flash-notifications-container" }
+};
+const styles = StyleSheet.create({
+    view: {
+        position: "fixed",
+        zIndex: 99999,
+        top: 20,
+        right: 20
+    }
+});
 export default memo(shapeComponent(class FlashNotificationsContainer extends ShapeComponent {
     setup() {
         this.useStates({
             count: 0,
             notifications: []
         });
-        useEventListener(window, "pushNotification", this.onPushNotification);
+        useEventListener(globalThis, "pushNotification", this.tt.onPushNotification);
     }
     render() {
-        return (React.createElement(View, { dataSet: { class: "flash-notifications-container" }, style: {
-                position: "fixed",
-                zIndex: 99999,
-                top: 20,
-                right: 20
-            } }, this.state.notifications.map((notification) => React.createElement(Notification, { key: `notification-${notification.count}`, message: notification.message, notification: notification, onRemovedClicked: this.onRemovedClicked, title: notification.title, type: notification.type }))));
+        return (React.createElement(View, { dataSet: dataSets.view, style: styles.view }, this.s.notifications.map((notification) => React.createElement(Notification, { key: `notification-${notification.count}`, message: notification.message, notification: notification, onRemovedClicked: this.tt.onRemovedClicked, title: notification.title, type: notification.type }))));
     }
     onPushNotification = (event) => {
         const detail = digg(event, "detail");
-        const count = this.state.count + 1;
-        setTimeout(() => this.removeNotification(count), 4000);
+        const count = this.s.count + 1;
+        // setTimeout(() => this.removeNotification(count), 4000)
         const notification = {
             count,
             message: digg(detail, "message"),
             title: digg(detail, "title"),
             type: digg(detail, "type")
         };
-        this.setState({ count, notifications: this.state.notifications.concat([notification]) });
+        this.setState({ count, notifications: this.s.notifications.concat([notification]) });
     };
     onRemovedClicked = (notification) => this.removeNotification(digg(notification, "count"));
     removeNotification = (count) => {
         this.setState({
-            notifications: this.state.notifications.filter((notification) => notification.count != count)
+            notifications: this.s.notifications.filter((notification) => notification.count != count)
         });
     };
 }));

package/build/container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/container/index.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,OAAO,CAAA;AAC1B,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,0CAA0C,CAAA;AACvF,OAAO,gBAAgB,MAAM,4CAA4C,CAAA;AACzE,OAAO,EAAC,IAAI,EAAC,MAAM,cAAc,CAAA;AAEjC,eAAe,IAAI,CAAC,cAAc,CAAC,MAAM,2BAA4B,SAAQ,cAAc;IACzF,KAAK;QACH,IAAI,CAAC,SAAS,CAAC;YACb,KAAK,EAAE,CAAC;YACR,aAAa,EAAE,EAAE;SAClB,CAAC,CAAA;QAEF,gBAAgB,CAAC,MAAM,EAAE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACvE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,oBAAC,IAAI,IACH,OAAO,EAAE,EAAC,KAAK,EAAE,+BAA+B,EAAC,EACjD,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,MAAM,EAAE,KAAK;gBACb,GAAG,EAAE,EAAE;gBACP,KAAK,EAAE,EAAE;aACV,IAEA,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAC7C,oBAAC,YAAY,IACX,GAAG,EAAE,gBAAgB,YAAY,CAAC,KAAK,EAAE,EACzC,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,IAAI,EAAE,YAAY,CAAC,IAAI,GACvB,CACH,CACI,CACR,CAAA;IACH,CAAC;IAED,kBAAkB,GAAG,CAAC,KAAK,EAAE,EAAE;QAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;QACpC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAA;QAElC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;QAEtD,MAAM,YAAY,GAAG;YACnB,KAAK;YACL,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;YAChC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;YAC5B,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;SAC3B,CAAA;QAED,IAAI,CAAC,QAAQ,CAAC,EAAC,KAAK,EAAE,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,EAAC,CAAC,CAAA;IACxF,CAAC,CAAA;IAED,gBAAgB,GAAG,CAAC,YAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAEzF,kBAAkB,GAAG,CAAC,KAAK,EAAE,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC;YACZ,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,IAAI,KAAK,CAAC;SAC9F,CAAC,CAAA;IACJ,CAAC,CAAA;CACF,CAAC,CAAC,CAAA","sourcesContent":["import {memo} from \"react\"\nimport {digg} from \"diggerize\"\nimport Notification from \"./notification\"\nimport {shapeComponent, ShapeComponent} from \"set-state-compare/src/shape-component.js\"\nimport useEventListener from \"@kaspernj/api-maker/src/use-event-listener\"\nimport {View} from \"react-native\"\n\nexport default memo(shapeComponent(class FlashNotificationsContainer extends ShapeComponent {\n  setup() {\n    this.useStates({\n      count: 0,\n      notifications: []\n    })\n\n    useEventListener(window, \"pushNotification\", this.onPushNotification)\n  }\n\n  render() {\n    return (\n      <View\n        dataSet={{class: \"flash-notifications-container\"}}\n        style={{\n          position: \"fixed\",\n          zIndex: 99999,\n          top: 20,\n          right: 20\n        }}\n      >\n        {this.state.notifications.map((notification) =>\n          <Notification\n            key={`notification-${notification.count}`}\n            message={notification.message}\n            notification={notification}\n            onRemovedClicked={this.onRemovedClicked}\n            title={notification.title}\n            type={notification.type}\n          />\n        )}\n      </View>\n    )\n  }\n\n  onPushNotification = (event) => {\n    const detail = digg(event, \"detail\")\n    const count = this.state.count + 1\n\n    setTimeout(() => this.removeNotification(count), 4000)\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.state.notifications.concat([notification])})\n  }\n\n  onRemovedClicked = (notification) => this.removeNotification(digg(notification, \"count\"))\n\n  removeNotification = (count) => {\n    this.setState({\n      notifications: this.state.notifications.filter((notification) => notification.count != count)\n    })\n  }\n}))\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/container/index.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,IAAI,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,0CAA0C,CAAA;AACvF,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,gBAAgB,MAAM,4CAA4C,CAAA;AAEzE,MAAM,QAAQ,GAAG;IACf,IAAI,EAAE,EAAC,KAAK,EAAE,+BAA+B,EAAC;CAC/C,CAAA;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,KAAK;QACb,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,EAAE;KACV;CACF,CAAC,CAAA;AAEF,eAAe,IAAI,CAAC,cAAc,CAAC,MAAM,2BAA4B,SAAQ,cAAc;IACzF,KAAK;QACH,IAAI,CAAC,SAAS,CAAC;YACb,KAAK,EAAE,CAAC;YACR,aAAa,EAAE,EAAE;SAClB,CAAC,CAAA;QAEF,gBAAgB,CAAC,UAAU,EAAE,kBAAkB,EAAE,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAA;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,oBAAC,IAAI,IACH,OAAO,EAAE,QAAQ,CAAC,IAAI,EACtB,KAAK,EAAE,MAAM,CAAC,IAAI,IAEjB,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CACzC,oBAAC,YAAY,IACX,GAAG,EAAE,gBAAgB,YAAY,CAAC,KAAK,EAAE,EACzC,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAC1C,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,IAAI,EAAE,YAAY,CAAC,IAAI,GACvB,CACH,CACI,CACR,CAAA;IACH,CAAC;IAED,kBAAkB,GAAG,CAAC,KAAK,EAAE,EAAE;QAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;QACpC,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAA;QAE9B,yDAAyD;QAEzD,MAAM,YAAY,GAAG;YACnB,KAAK;YACL,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;YAChC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;YAC5B,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;SAC3B,CAAA;QAED,IAAI,CAAC,QAAQ,CAAC,EAAC,KAAK,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,EAAC,CAAC,CAAA;IACpF,CAAC,CAAA;IAED,gBAAgB,GAAG,CAAC,YAAY,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAEzF,kBAAkB,GAAG,CAAC,KAAK,EAAE,EAAE;QAC7B,IAAI,CAAC,QAAQ,CAAC;YACZ,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,IAAI,KAAK,CAAC;SAC1F,CAAC,CAAA;IACJ,CAAC,CAAA;CACF,CAAC,CAAC,CAAA","sourcesContent":["import React, {memo} from \"react\"\nimport {shapeComponent, ShapeComponent} from \"set-state-compare/src/shape-component.js\"\nimport {StyleSheet, View} from \"react-native\"\nimport {digg} from \"diggerize\"\nimport Notification from \"./notification\"\nimport useEventListener from \"@kaspernj/api-maker/src/use-event-listener\"\n\nconst dataSets = {\n  view: {class: \"flash-notifications-container\"}\n}\n\nconst styles = StyleSheet.create({\n  view: {\n    position: \"fixed\",\n    zIndex: 99999,\n    top: 20,\n    right: 20\n  }\n})\n\nexport default memo(shapeComponent(class FlashNotificationsContainer extends ShapeComponent {\n  setup() {\n    this.useStates({\n      count: 0,\n      notifications: []\n    })\n\n    useEventListener(globalThis, \"pushNotification\", this.tt.onPushNotification)\n  }\n\n  render() {\n    return (\n      <View\n        dataSet={dataSets.view}\n        style={styles.view}\n      >\n        {this.s.notifications.map((notification) =>\n          <Notification\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 = (event) => {\n    const detail = digg(event, \"detail\")\n    const count = this.s.count + 1\n\n    // setTimeout(() => this.removeNotification(count), 4000)\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"]}

package/build/container/notification.d.ts

@@ -1,3 +1,4 @@
-declare const _default: import("react").MemoExoticComponent<any>;
+declare const _default: React.MemoExoticComponent<any>;
 export default _default;
+import React from "react";
 //# sourceMappingURL=notification.d.ts.map

package/build/container/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/container/notification.jsx"],"names":[],"mappings":""}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/container/notification.jsx"],"names":[],"mappings":";;kBAEmC,OAAO"}

package/build/container/notification.js

@@ -1,8 +1,43 @@
-import { Pressable, Text, View } from "react-native";
-import { memo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { shapeComponent, ShapeComponent } from "set-state-compare/src/shape-component.js";
+import React, { memo, useMemo } from "react";
+import classNames from "classnames";
 import PropTypes from "prop-types";
 import PropTypesExact from "prop-types-exact";
-import { shapeComponent, ShapeComponent } from "set-state-compare/src/shape-component.js";
+const styles = StyleSheet.create({
+    view: {
+        width: 300,
+        maxWidth: "100%",
+        marginBottom: 15,
+        padding: 15,
+        borderRadius: 11,
+        cursor: "pointer"
+    },
+    viewError: {
+        border: "1px solid rgba(161, 34, 32, 0.95)",
+        backgroundColor: "rgba(161, 34, 32, 0.87)"
+    },
+    viewSuccess: {
+        border: "1px solid rgba(0, 0, 0, 0.95)",
+        backgroundColor: "rgba(0, 0, 0, 0.87)"
+    },
+    viewAlert: {
+        border: "1px solid rgba(204, 51, 0, 0.95)",
+        backgroundColor: "rgba(204, 51, 0, 0.87)"
+    },
+    titleview: {
+        marginBottom: 5
+    },
+    titleText: {
+        color: "#fff",
+        fontWeight: "bold"
+    },
+    messageText: {
+        color: "#fff"
+    }
+});
+const titleViewDataSet = { class: "notification-title" };
+const messageViewDataSet = { class: "notification-message" };
 export default memo(shapeComponent(class NotificationsNotification extends ShapeComponent {
     static propTypes = PropTypesExact({
         className: PropTypes.string,
@@ -14,35 +49,27 @@ export default memo(shapeComponent(class NotificationsNotification extends Shape
     });
     render() {
         const { className, message, title, type } = this.props;
-        const style = {
-            width: 300,
-            maxWidth: "100%",
-            marginBottom: 15,
-            padding: 15,
-            borderRadius: 11,
-            cursor: "pointer"
-        };
-        if (type == "error") {
-            style.border = "1px solid rgba(161 34 32 / 95%)";
-            style.background = "rgba(161 34 32 / 87%)";
-        }
-        if (type == "success") {
-            style.border = "1px solid rgba(0 0 0 / 95%)";
-            style.background = "rgba(0 0 0 / 87%)";
-        }
-        if (type == "alert") {
-            style.border = "1px solid rgba(204 51 0 / 95%)";
-            style.background = "rgba(204 51 0 / 87%)";
-        }
-        return (React.createElement(Pressable, { dataSet: { class: classNames("flash-notifications-notification", className), type }, onPress: this.onRemovedClicked },
-            React.createElement(View, { style: style },
-                React.createElement(View, { dataSet: { class: "notification-title" }, style: { marginBottom: 5 } },
-                    React.createElement(Text, { style: { color: "#fff", fontWeight: "bold" } }, title)),
-                React.createElement(View, { dataSet: { class: "notification-message" } },
-                    React.createElement(Text, { style: { color: "#fff" } }, message)))));
+        const viewStyles = useMemo(() => {
+            const viewStyles = [styles.view];
+            if (type == "error")
+                viewStyles.push(styles.viewError);
+            if (type == "success")
+                viewStyles.push(styles.viewSuccess);
+            if (type == "alert")
+                viewStyles.push(styles.viewAlert);
+            return viewStyles;
+        }, [type]);
+        const pressableDataSet = useMemo(() => ({
+            class: classNames("flash-notifications-notification", className),
+            type
+        }), [className, type]);
+        return (React.createElement(Pressable, { dataSet: pressableDataSet, onPress: this.tt.onRemovedClicked },
+            React.createElement(View, { style: viewStyles },
+                React.createElement(View, { dataSet: titleViewDataSet, style: styles.titleview },
+                    React.createElement(Text, { style: styles.titleText }, title)),
+                React.createElement(View, { dataSet: messageViewDataSet },
+                    React.createElement(Text, { style: styles.messageText }, message)))));
     }
-    onRemovedClicked = () => {
-        this.props.onRemovedClicked(this.props.notification);
-    };
+    onRemovedClicked = () => this.p.onRemovedClicked(this.p.notification);
 }));
 //# sourceMappingURL=notification.js.map

package/build/container/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../src/container/notification.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,cAAc,CAAA;AAClD,OAAO,EAAC,IAAI,EAAC,MAAM,OAAO,CAAA;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,0CAA0C,CAAA;AAEvF,eAAe,IAAI,CAAC,cAAc,CAAC,MAAM,yBAA0B,SAAQ,cAAc;IACvF,MAAM,CAAC,SAAS,GAAG,cAAc,CAAC;QAChC,SAAS,EAAE,SAAS,CAAC,MAAM;QAC3B,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;QACpC,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;QACzC,gBAAgB,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;QAC3C,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;QAClC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;KAClC,CAAC,CAAA;IAEF,MAAM;QACJ,MAAM,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,GAAG,IAAI,CAAC,KAAK,CAAA;QAEpD,MAAM,KAAK,GAAG;YACZ,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE,MAAM;YAChB,YAAY,EAAE,EAAE;YAChB,OAAO,EAAE,EAAE;YACX,YAAY,EAAE,EAAE;YAChB,MAAM,EAAE,SAAS;SAClB,CAAA;QAED,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YACpB,KAAK,CAAC,MAAM,GAAG,iCAAiC,CAAA;YAChD,KAAK,CAAC,UAAU,GAAG,uBAAuB,CAAA;QAC5C,CAAC;QAED,IAAI,IAAI,IAAI,SAAS,EAAE,CAAC;YACtB,KAAK,CAAC,MAAM,GAAG,6BAA6B,CAAA;YAC5C,KAAK,CAAC,UAAU,GAAG,mBAAmB,CAAA;QACxC,CAAC;QAGD,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YACpB,KAAK,CAAC,MAAM,GAAG,gCAAgC,CAAA;YAC/C,KAAK,CAAC,UAAU,GAAG,sBAAsB,CAAA;QAC3C,CAAC;QAED,OAAO,CACL,oBAAC,SAAS,IAAC,OAAO,EAAE,EAAC,KAAK,EAAE,UAAU,CAAC,kCAAkC,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB;YAC1H,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK;gBAChB,oBAAC,IAAI,IAAC,OAAO,EAAE,EAAC,KAAK,EAAE,oBAAoB,EAAC,EAAE,KAAK,EAAE,EAAC,YAAY,EAAE,CAAC,EAAC;oBACpE,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAC,IAC7C,KAAK,CACD,CACF;gBACP,oBAAC,IAAI,IAAC,OAAO,EAAE,EAAC,KAAK,EAAE,sBAAsB,EAAC;oBAC5C,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,IACzB,OAAO,CACH,CACF,CACF,CACG,CACb,CAAA;IACH,CAAC;IAED,gBAAgB,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;IACtD,CAAC,CAAA;CACF,CAAC,CAAC,CAAA","sourcesContent":["import {Pressable, Text, View} from \"react-native\"\nimport {memo} from \"react\"\nimport PropTypes from \"prop-types\"\nimport PropTypesExact from \"prop-types-exact\"\nimport {shapeComponent, ShapeComponent} from \"set-state-compare/src/shape-component.js\"\n\nexport default memo(shapeComponent(class NotificationsNotification extends ShapeComponent {\n  static propTypes = PropTypesExact({\n    className: PropTypes.string,\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 {className, message, title, type} = this.props\n\n    const style = {\n      width: 300,\n      maxWidth: \"100%\",\n      marginBottom: 15,\n      padding: 15,\n      borderRadius: 11,\n      cursor: \"pointer\"\n    }\n\n    if (type == \"error\") {\n      style.border = \"1px solid rgba(161 34 32 / 95%)\"\n      style.background = \"rgba(161 34 32 / 87%)\"\n    }\n\n    if (type == \"success\") {\n      style.border = \"1px solid rgba(0 0 0 / 95%)\"\n      style.background = \"rgba(0 0 0 / 87%)\"\n    }\n\n\n    if (type == \"alert\") {\n      style.border = \"1px solid rgba(204 51 0 / 95%)\"\n      style.background = \"rgba(204 51 0 / 87%)\"\n    }\n\n    return (\n      <Pressable dataSet={{class: classNames(\"flash-notifications-notification\", className), type}} onPress={this.onRemovedClicked}>\n        <View style={style}>\n          <View dataSet={{class: \"notification-title\"}} style={{marginBottom: 5}}>\n            <Text style={{color: \"#fff\", fontWeight: \"bold\"}}>\n              {title}\n            </Text>\n          </View>\n          <View dataSet={{class: \"notification-message\"}}>\n            <Text style={{color: \"#fff\"}}>\n              {message}\n            </Text>\n          </View>\n        </View>\n      </Pressable>\n    )\n  }\n\n  onRemovedClicked = () => {\n    this.props.onRemovedClicked(this.props.notification)\n  }\n}))\n"]}
+{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../src/container/notification.jsx"],"names":[],"mappings":"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","sourcesContent":["import {Pressable, StyleSheet, Text, View} from \"react-native\"\nimport {shapeComponent, ShapeComponent} from \"set-state-compare/src/shape-component.js\"\nimport React, {memo, useMemo} from \"react\"\nimport classNames from \"classnames\"\nimport PropTypes from \"prop-types\"\nimport PropTypesExact from \"prop-types-exact\"\n\nconst styles = StyleSheet.create({\n  view: {\n    width: 300,\n    maxWidth: \"100%\",\n    marginBottom: 15,\n    padding: 15,\n    borderRadius: 11,\n    cursor: \"pointer\"\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 NotificationsNotification extends ShapeComponent {\n  static propTypes = PropTypesExact({\n    className: PropTypes.string,\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 {className, message, title, type} = this.props\n\n    const viewStyles = useMemo(\n      () => {\n        const viewStyles = [styles.view]\n\n        if (type == \"error\") viewStyles.push(styles.viewError)\n        if (type == \"success\") viewStyles.push(styles.viewSuccess)\n        if (type == \"alert\") viewStyles.push(styles.viewAlert)\n\n        return viewStyles\n      },\n      [type]\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}>\n              {title}\n            </Text>\n          </View>\n          <View dataSet={messageViewDataSet}>\n            <Text style={styles.messageText}>\n              {message}\n            </Text>\n          </View>\n        </View>\n      </Pressable>\n    )\n  }\n\n  onRemovedClicked = () => this.p.onRemovedClicked(this.p.notification)\n}))\n"]}

package/build/flash-notifications.js

@@ -60,7 +60,7 @@ export default class FlashMessage {
                 type: args.type
             }
         });
-        window.dispatchEvent(event);
+        globalThis.dispatchEvent(event);
     }
 }
 //# sourceMappingURL=flash-notifications.js.map

package/build/flash-notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"flash-notifications.js","sourceRoot":"","sources":["../src/flash-notifications.js"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oCAAoC,CAAA;AAC1D,OAAO,eAAe,MAAM,0CAA0C,CAAA;AAEtE,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,MAAM,CAAC,KAAK,CAAC,OAAO;QAClB,YAAY,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC,CAAA;IACnD,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,KAAK;QAChB,IAAI,KAAK,YAAY,SAAS,EAAE,CAAC;YAC/B,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACtD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAA;gBACxD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBACzC,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;wBAC7B,OAAO,KAAK,CAAA;oBACd,CAAC;oBAED,OAAO,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;gBAC/B,CAAC,CAAC,CAAA;gBAEF,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC9C,CAAC;iBAAM,CAAC;gBACN,MAAM,KAAK,CAAA;YACb,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,YAAY,eAAe,EAAE,CAAC;YAC5C,IAAI,KAAK,CAAC,kBAAkB,EAAE,EAAE,CAAC;gBAC/B,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;YACnC,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,6DAA6D,CAAC,CAAC,CAAA;YAC3F,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAA;YAC7D,MAAM,KAAK,CAAA;QACb,CAAC;IACH,CAAC;IAED,MAAM,CAAC,aAAa,CAAC,KAAK;QACxB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAO;QACpB,YAAY,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC,CAAA;IACrD,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,IAAI;QACd,IAAI,KAAK,CAAA;QAET,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;YACzB,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;QACnC,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;YAChC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;QACnC,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;YAClC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAA;QACrC,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAA;QAC1C,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAChD,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,IAAI;gBAClB,KAAK;gBACL,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CAAA;QAEF,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC;CACF","sourcesContent":["import BaseError from \"@kaspernj/api-maker/src/base-error\"\nimport ValidationError from \"@kaspernj/api-maker/src/validation-error\"\n\nexport default class FlashMessage {\n  static alert(message) {\n    FlashMessage.show({type: \"alert\", text: message})\n  }\n\n  static error(error) {\n    if (error instanceof BaseError) {\n      if (error.args.response && error.args.response.errors) {\n        const errors = digg(error, \"args\", \"response\", \"errors\")\n        const errorMessages = errors.map((error) => {\n          if (typeof error == \"string\") {\n            return error\n          }\n\n          return digg(error, \"message\")\n        })\n\n        FlashMessage.alert(errorMessages.join(\". \"))\n      } else {\n        throw error\n      }\n    } else if (error instanceof ValidationError) {\n      if (error.hasUnhandledErrors()) {\n        FlashMessage.alert(error.message)\n      } else {\n        FlashMessage.alert(I18n.t(\"js.notification.couldnt_submit_because_of_validation_errors\"))\n      }\n    } else {\n      console.error(\"Didnt know what to do with that error\", error)\n      throw error\n    }\n  }\n\n  static errorResponse(error) {\n    this.error(error)\n  }\n\n  static success(message) {\n    FlashMessage.show({type: \"success\", text: message})\n  }\n\n  static show(args) {\n    let title\n\n    if (args.type == \"alert\") {\n      title = I18n.t(\"js.shared.alert\")\n    } else if (args.type == \"error\") {\n      title = I18n.t(\"js.shared.error\")\n    } else if (args.type == \"success\") {\n      title = I18n.t(\"js.shared.success\")\n    } else {\n      title = I18n.t(\"js.shared.notification\")\n    }\n\n    const event = new CustomEvent(\"pushNotification\", {\n      detail: {\n        message: args.text,\n        title,\n        type: args.type\n      }\n    })\n\n    window.dispatchEvent(event)\n  }\n}\n"]}
+{"version":3,"file":"flash-notifications.js","sourceRoot":"","sources":["../src/flash-notifications.js"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oCAAoC,CAAA;AAC1D,OAAO,eAAe,MAAM,0CAA0C,CAAA;AAEtE,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,MAAM,CAAC,KAAK,CAAC,OAAO;QAClB,YAAY,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC,CAAA;IACnD,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,KAAK;QAChB,IAAI,KAAK,YAAY,SAAS,EAAE,CAAC;YAC/B,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACtD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAA;gBACxD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBACzC,IAAI,OAAO,KAAK,IAAI,QAAQ,EAAE,CAAC;wBAC7B,OAAO,KAAK,CAAA;oBACd,CAAC;oBAED,OAAO,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;gBAC/B,CAAC,CAAC,CAAA;gBAEF,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC9C,CAAC;iBAAM,CAAC;gBACN,MAAM,KAAK,CAAA;YACb,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,YAAY,eAAe,EAAE,CAAC;YAC5C,IAAI,KAAK,CAAC,kBAAkB,EAAE,EAAE,CAAC;gBAC/B,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;YACnC,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,6DAA6D,CAAC,CAAC,CAAA;YAC3F,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAA;YAC7D,MAAM,KAAK,CAAA;QACb,CAAC;IACH,CAAC;IAED,MAAM,CAAC,aAAa,CAAC,KAAK;QACxB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAO;QACpB,YAAY,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC,CAAA;IACrD,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,IAAI;QACd,IAAI,KAAK,CAAA;QAET,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;YACzB,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;QACnC,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;YAChC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;QACnC,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;YAClC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAA;QACrC,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAA;QAC1C,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAChD,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,IAAI;gBAClB,KAAK;gBACL,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CAAA;QAEF,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC;CACF","sourcesContent":["import BaseError from \"@kaspernj/api-maker/src/base-error\"\nimport ValidationError from \"@kaspernj/api-maker/src/validation-error\"\n\nexport default class FlashMessage {\n  static alert(message) {\n    FlashMessage.show({type: \"alert\", text: message})\n  }\n\n  static error(error) {\n    if (error instanceof BaseError) {\n      if (error.args.response && error.args.response.errors) {\n        const errors = digg(error, \"args\", \"response\", \"errors\")\n        const errorMessages = errors.map((error) => {\n          if (typeof error == \"string\") {\n            return error\n          }\n\n          return digg(error, \"message\")\n        })\n\n        FlashMessage.alert(errorMessages.join(\". \"))\n      } else {\n        throw error\n      }\n    } else if (error instanceof ValidationError) {\n      if (error.hasUnhandledErrors()) {\n        FlashMessage.alert(error.message)\n      } else {\n        FlashMessage.alert(I18n.t(\"js.notification.couldnt_submit_because_of_validation_errors\"))\n      }\n    } else {\n      console.error(\"Didnt know what to do with that error\", error)\n      throw error\n    }\n  }\n\n  static errorResponse(error) {\n    this.error(error)\n  }\n\n  static success(message) {\n    FlashMessage.show({type: \"success\", text: message})\n  }\n\n  static show(args) {\n    let title\n\n    if (args.type == \"alert\") {\n      title = I18n.t(\"js.shared.alert\")\n    } else if (args.type == \"error\") {\n      title = I18n.t(\"js.shared.error\")\n    } else if (args.type == \"success\") {\n      title = I18n.t(\"js.shared.success\")\n    } else {\n      title = I18n.t(\"js.shared.notification\")\n    }\n\n    const event = new CustomEvent(\"pushNotification\", {\n      detail: {\n        message: args.text,\n        title,\n        type: args.type\n      }\n    })\n\n    globalThis.dispatchEvent(event)\n  }\n}\n"]}

package/link.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+cd node_modules
+rm -rf react
+ln -s ../../gratisbyggetilbud_rails/node_modules/react

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flash-notifications",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "My new module",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/container/index.jsx

@@ -1,9 +1,22 @@
-import {memo} from "react"
+import React, {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {StyleSheet, View} from "react-native"
 import {digg} from "diggerize"
 import Notification from "./notification"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import useEventListener from "@kaspernj/api-maker/src/use-event-listener"
-import {View} from "react-native"
+
+const dataSets = {
+  view: {class: "flash-notifications-container"}
+}
+
+const styles = StyleSheet.create({
+  view: {
+    position: "fixed",
+    zIndex: 99999,
+    top: 20,
+    right: 20
+  }
+})
 
 export default memo(shapeComponent(class FlashNotificationsContainer extends ShapeComponent {
   setup() {
@@ -12,26 +25,21 @@ export default memo(shapeComponent(class FlashNotificationsContainer extends Sha
       notifications: []
     })
 
-    useEventListener(window, "pushNotification", this.onPushNotification)
+    useEventListener(globalThis, "pushNotification", this.tt.onPushNotification)
   }
 
   render() {
     return (
       <View
-        dataSet={{class: "flash-notifications-container"}}
-        style={{
-          position: "fixed",
-          zIndex: 99999,
-          top: 20,
-          right: 20
-        }}
+        dataSet={dataSets.view}
+        style={styles.view}
       >
-        {this.state.notifications.map((notification) =>
+        {this.s.notifications.map((notification) =>
           <Notification
             key={`notification-${notification.count}`}
             message={notification.message}
             notification={notification}
-            onRemovedClicked={this.onRemovedClicked}
+            onRemovedClicked={this.tt.onRemovedClicked}
             title={notification.title}
             type={notification.type}
           />
@@ -42,9 +50,9 @@ export default memo(shapeComponent(class FlashNotificationsContainer extends Sha
 
   onPushNotification = (event) => {
     const detail = digg(event, "detail")
-    const count = this.state.count + 1
+    const count = this.s.count + 1
 
-    setTimeout(() => this.removeNotification(count), 4000)
+    // setTimeout(() => this.removeNotification(count), 4000)
 
     const notification = {
       count,
@@ -53,14 +61,14 @@ export default memo(shapeComponent(class FlashNotificationsContainer extends Sha
       type: digg(detail, "type")
     }
 
-    this.setState({count, notifications: this.state.notifications.concat([notification])})
+    this.setState({count, notifications: this.s.notifications.concat([notification])})
   }
 
   onRemovedClicked = (notification) => this.removeNotification(digg(notification, "count"))
 
   removeNotification = (count) => {
     this.setState({
-      notifications: this.state.notifications.filter((notification) => notification.count != count)
+      notifications: this.s.notifications.filter((notification) => notification.count != count)
     })
   }
 }))

package/src/container/notification.jsx

@@ -1,8 +1,45 @@
-import {Pressable, Text, View} from "react-native"
-import {memo} from "react"
+import {Pressable, StyleSheet, Text, View} from "react-native"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import React, {memo, useMemo} from "react"
+import classNames from "classnames"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+
+const styles = StyleSheet.create({
+  view: {
+    width: 300,
+    maxWidth: "100%",
+    marginBottom: 15,
+    padding: 15,
+    borderRadius: 11,
+    cursor: "pointer"
+  },
+  viewError: {
+    border: "1px solid rgba(161, 34, 32, 0.95)",
+    backgroundColor: "rgba(161, 34, 32, 0.87)"
+  },
+  viewSuccess: {
+    border: "1px solid rgba(0, 0, 0, 0.95)",
+    backgroundColor: "rgba(0, 0, 0, 0.87)"
+  },
+  viewAlert: {
+    border: "1px solid rgba(204, 51, 0, 0.95)",
+    backgroundColor: "rgba(204, 51, 0, 0.87)"
+  },
+  titleview: {
+    marginBottom: 5
+  },
+  titleText: {
+    color: "#fff",
+    fontWeight: "bold"
+  },
+  messageText: {
+    color: "#fff"
+  }
+})
+
+const titleViewDataSet = {class: "notification-title"}
+const messageViewDataSet = {class: "notification-message"}
 
 export default memo(shapeComponent(class NotificationsNotification extends ShapeComponent {
   static propTypes = PropTypesExact({
@@ -17,41 +54,37 @@ export default memo(shapeComponent(class NotificationsNotification extends Shape
   render() {
     const {className, message, title, type} = this.props
 
-    const style = {
-      width: 300,
-      maxWidth: "100%",
-      marginBottom: 15,
-      padding: 15,
-      borderRadius: 11,
-      cursor: "pointer"
-    }
+    const viewStyles = useMemo(
+      () => {
+        const viewStyles = [styles.view]
 
-    if (type == "error") {
-      style.border = "1px solid rgba(161 34 32 / 95%)"
-      style.background = "rgba(161 34 32 / 87%)"
-    }
-
-    if (type == "success") {
-      style.border = "1px solid rgba(0 0 0 / 95%)"
-      style.background = "rgba(0 0 0 / 87%)"
-    }
+        if (type == "error") viewStyles.push(styles.viewError)
+        if (type == "success") viewStyles.push(styles.viewSuccess)
+        if (type == "alert") viewStyles.push(styles.viewAlert)
 
+        return viewStyles
+      },
+      [type]
+    )
 
-    if (type == "alert") {
-      style.border = "1px solid rgba(204 51 0 / 95%)"
-      style.background = "rgba(204 51 0 / 87%)"
-    }
+    const pressableDataSet = useMemo(
+      () => ({
+        class: classNames("flash-notifications-notification", className),
+        type
+      }),
+      [className, type]
+    )
 
     return (
-      <Pressable dataSet={{class: classNames("flash-notifications-notification", className), type}} onPress={this.onRemovedClicked}>
-        <View style={style}>
-          <View dataSet={{class: "notification-title"}} style={{marginBottom: 5}}>
-            <Text style={{color: "#fff", fontWeight: "bold"}}>
+      <Pressable dataSet={pressableDataSet} onPress={this.tt.onRemovedClicked}>
+        <View style={viewStyles}>
+          <View dataSet={titleViewDataSet} style={styles.titleview}>
+            <Text style={styles.titleText}>
               {title}
             </Text>
           </View>
-          <View dataSet={{class: "notification-message"}}>
-            <Text style={{color: "#fff"}}>
+          <View dataSet={messageViewDataSet}>
+            <Text style={styles.messageText}>
               {message}
             </Text>
           </View>
@@ -60,7 +93,5 @@ export default memo(shapeComponent(class NotificationsNotification extends Shape
     )
   }
 
-  onRemovedClicked = () => {
-    this.props.onRemovedClicked(this.props.notification)
-  }
+  onRemovedClicked = () => this.p.onRemovedClicked(this.p.notification)
 }))

package/src/flash-notifications.js

@@ -63,6 +63,6 @@ export default class FlashMessage {
       }
     })
 
-    window.dispatchEvent(event)
+    globalThis.dispatchEvent(event)
   }
 }