@kaspernj/api-maker 1.0.420 → 1.0.421

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.420",
+  "version": "1.0.421",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/super-admin/layout/header/index.jsx

@@ -17,7 +17,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
   })
 
   setup() {
-    const {breakpoint} = useBreakpoint()
+    const {name: breakpoint} = useBreakpoint()
 
     this.headerActionsRef = useRef()
     this.setInstance({breakpoint})

package/src/table/table.jsx

@@ -98,7 +98,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
   setup() {
     const {t} = useI18n({namespace: "js.api_maker.table"})
-    const {breakpoint} = useBreakpoint()
+    const {name: breakpoint} = useBreakpoint()
     const queryParams = useQueryParams()
 
     this.setInstance({

package/src/use-breakpoint.mjs

@@ -1,44 +1,52 @@
 import {useCallback, useLayoutEffect} from "react"
 import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
+import {Dimensions} from "react-native"
 import useShape from "set-state-compare/src/use-shape.js"
 
-const useBreakpoint = () => {
-  const s = useShape()
-
-  const calculateBreakPoint = useCallback(() => {
-    const windowWidth = window.innerWidth
+const calculateBreakPoint = (window) => {
+  const windowWidth = window.width
+  const result = {}
 
-    for (const breakpointData of apiMakerConfig.getBreakPoints()) {
-      const breakpoint = breakpointData[0]
-      const width = breakpointData[1]
+  for (const breakpointData of apiMakerConfig.getBreakPoints()) {
+    const breakpoint = breakpointData[0]
+    const width = breakpointData[1]
 
-      if (windowWidth >= width) return breakpoint
+    if (!result.name && windowWidth >= width) {
+      result.name = breakpoint
     }
 
-    throw new Error(`Couldn't not find breakpoint from window width: ${windowWidth}`)
-  }, [])
+    result[`${breakpoint}Down`] = !result.name
+    result[`${breakpoint}Up`] = Boolean(result.name)
+  }
+
+  if (result.name) {
+    return result
+  }
+
+  throw new Error(`Couldn't not find breakpoint from window width: ${windowWidth}`)
+}
 
-  const onCalled = useCallback(() => {
-    const breakpoint = calculateBreakPoint()
+const useBreakpoint = () => {
+  const s = useShape()
+  const onCalled = useCallback(({window}) => {
+    const breakpoint = calculateBreakPoint(window)
 
-    if (breakpoint != s.s.breakpoint) {
+    if (breakpoint.name != s.s.breakpoint.name) {
       s.set({breakpoint})
     }
   }, [])
 
   s.useStates({
-    breakpoint: () => calculateBreakPoint()
+    breakpoint: () => calculateBreakPoint(Dimensions.get("window"))
   })
 
   useLayoutEffect(() => {
-    window.addEventListener("resize", onCalled)
+    const subscription = Dimensions.addEventListener("change", onCalled)
 
-    return () => {
-      window.removeEventListener("resize", onCalled)
-    }
-  }, [])
+    return () => subscription?.remove()
+  })
 
-  return {breakpoint: s.s.breakpoint}
+  return s.s.breakpoint
 }
 
 export default useBreakpoint