flash-notifications 0.0.8 → 0.0.10

package/package.json

@@ -1,11 +1,12 @@
 {
   "main": "index.js",
   "name": "flash-notifications",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "private": false,
   "dependencies": {
     "diggerize": "^1.0.5",
-    "prop-types-exact": "^1.2.0"
+    "prop-types-exact": "^1.2.4",
+    "set-state-compare": "^1.0.45"
   },
   "devDependenciesOnlyForLocalDevelopment": {
     "@testing-library/jest-dom": "^5.11.4",

package/src/container/index.jsx

@@ -1,23 +1,50 @@
-import {memo, useCallback} from "react"
+import {memo} from "react"
 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 useShape from "set-state-compare/src/use-shape"
 import {View} from "react-native"
 
-const FlashNotificationsContainer = (props) => {
-  const s = useShape(props)
+export default memo(shapeComponent(class FlashNotificationsContainer extends ShapeComponent {
+  setup() {
+    this.useStates({
+      count: 0,
+      notifications: []
+    })
+
+    useEventListener(window, "pushNotification", this.onPushNotification)
+  }
 
-  s.useStates({
-    count: 0,
-    notifications: []
-  })
+  render() {
+    return (
+      <View
+        dataSet={{class: "flash-notifications-container"}}
+        style={{
+          position: "fixed",
+          zIndex: 99999,
+          top: 20,
+          right: 20
+        }}
+      >
+        {this.state.notifications.map((notification) =>
+          <Notification
+            key={`notification-${notification.count}`}
+            message={notification.message}
+            notification={notification}
+            onRemovedClicked={this.onRemovedClicked}
+            title={notification.title}
+            type={notification.type}
+          />
+        )}
+      </View>
+    )
+  }
 
-  const onPushNotification = useCallback((event) => {
+  onPushNotification = (event) => {
     const detail = digg(event, "detail")
-    const count = s.s.count + 1
+    const count = this.state.count + 1
 
-    setTimeout(() => removeNotification(count), 4000)
+    setTimeout(() => this.removeNotification(count), 4000)
 
     const notification = {
       count,
@@ -26,43 +53,14 @@ const FlashNotificationsContainer = (props) => {
       type: digg(detail, "type")
     }
 
-    s.set({count, notifications: s.s.notifications.concat([notification])})
-  }, [])
+    this.setState({count, notifications: this.state.notifications.concat([notification])})
+  }
 
-  const onRemovedClicked = useCallback((e, notification) => {
-    e.preventDefault()
-    removeNotification(digg(notification, "count"))
-  }, [])
+  onRemovedClicked = (notification) => this.removeNotification(digg(notification, "count"))
 
-  const removeNotification = useCallback((count) => {
-    s.set({
-      notifications: s.s.notifications.filter((notification) => notification.count != count)
+  removeNotification = (count) => {
+    this.setState({
+      notifications: this.state.notifications.filter((notification) => notification.count != count)
     })
-  }, [])
-
-  useEventListener(window, "pushNotification", onPushNotification)
-
-  return (
-    <View
-      dataSet={{class: "flash-notifications-container"}}
-      style={{
-        position: "fixed",
-        zIndex: 99999,
-        top: 20,
-        right: 20
-      }}
-    >
-      {s.s.notifications.map((notification) =>
-        <Notification
-          key={`notification-${notification.count}`}
-          message={notification.message}
-          onRemovedClicked={(e) => onRemovedClicked(e, notification)}
-          title={notification.title}
-          type={notification.type}
-        />
-      )}
-    </View>
-  )
-}
-
-export default memo(FlashNotificationsContainer)
+  }
+}))

package/src/container/notification.jsx

@@ -1,59 +1,66 @@
 import {Pressable, Text, View} from "react-native"
 import {memo} from "react"
+import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 
-const NotificationsNotification = (props) => {
-  const {className, message, onRemovedClicked, title, type} = props
+export default memo(shapeComponent(class NotificationsNotification extends ShapeComponent {
+  static propTypes = PropTypesExact({
+    className: PropTypes.string,
+    message: PropTypes.string.isRequired,
+    notification: PropTypes.object.isRequired,
+    onRemovedClicked: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired
+  })
 
-  const style = {
-    width: 300,
-    maxWidth: "100%",
-    marginBottom: 15,
-    padding: 15,
-    borderRadius: 11,
-    cursor: "pointer"
-  }
+  render() {
+    const {className, message, title, type} = this.props
 
-  if (type == "error") {
-    style.border = "1px solid rgba(161 34 32 / 95%)"
-    style.background = "rgba(161 34 32 / 87%)"
-  }
+    const style = {
+      width: 300,
+      maxWidth: "100%",
+      marginBottom: 15,
+      padding: 15,
+      borderRadius: 11,
+      cursor: "pointer"
+    }
 
-  if (type == "success") {
-    style.border = "1px solid rgba(0 0 0 / 95%)"
-    style.background = "rgba(0 0 0 / 87%)"
-  }
+    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 (
-    <Pressable dataSet={{class: classNames("flash-notifications-notification", className), type}} onPress={onRemovedClicked}>
-      <View style={style}>
-        <View dataSet={{class: "notification-title"}} style={{marginBottom: 5}}>
-          <Text style={{color: "#fff", fontWeight: "bold"}}>
-            {title}
-          </Text>
-        </View>
-        <View dataSet={{class: "notification-message"}}>
-          <Text style={{color: "#fff"}}>
-            {message}
-          </Text>
+    if (type == "alert") {
+      style.border = "1px solid rgba(204 51 0 / 95%)"
+      style.background = "rgba(204 51 0 / 87%)"
+    }
+
+    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"}}>
+              {title}
+            </Text>
+          </View>
+          <View dataSet={{class: "notification-message"}}>
+            <Text style={{color: "#fff"}}>
+              {message}
+            </Text>
+          </View>
         </View>
-      </View>
-    </Pressable>
-  )
-}
-
-NotificationsNotification.propTypes = PropTypesExact({
-  className: PropTypes.string,
-  message: PropTypes.string.isRequired,
-  onRemovedClicked: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired
-})
-
-export default memo(NotificationsNotification)
+      </Pressable>
+    )
+  }
+
+  onRemovedClicked = () => {
+    this.p.onRemovedClicked(this.p.notification)
+  }
+}))