fix: stop relying on orientation

wintercounter · May 15, 2020 · 8e5b24a · 8e5b24a
1 parent 78944c6
commit 8e5b24a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/src/useBreakpoint.d.ts b/src/useBreakpoint.d.ts
@@ -1,5 +1,5 @@
 declare type TBreakpointItem = [string, unknown];
-declare type TCalculateValue = (defaultValue: unknown, breakpointValues: TBreakpointItem[] | TBreakpointItem, iw?: number) => typeof defaultValue;
+declare type TCalculateValue = (defaultValue: unknown, breakpointValues: TBreakpointItem[] | TBreakpointItem, iw?: number, ih?: number) => typeof defaultValue;
 export declare const calculateValue: TCalculateValue;
 export declare function useBreakpoint(defaultValue: any, breakpointValues: any[]): any;
 export declare function useBreakpoint(): {

diff --git a/src/useBreakpoint.ts b/src/useBreakpoint.ts
@@ -1,27 +1,21 @@
 import { useState, useMemo } from 'react'
 import { options, useResize, LANDSCAPE, PORTRAIT } from '.'
 
-const getIsLandscape = function() {
-    const s = window.screen
-    // @ts-ignore
-    const orientation = (s.mozOrientation || s.orientation || { type: 'portrait' }).type || s.msOrientation
-    return orientation && orientation.includes('landscape')
-}
-
 type TBreakpointItem = [string, unknown]
 
 type TCalculateValue = (
     defaultValue: unknown,
     breakpointValues: TBreakpointItem[] | TBreakpointItem,
-    iw?: number
-) => typeof defaultValue
+    iw?: number,
+    ih?: number) => typeof defaultValue
 
 // We will save the calculated value until innerWidth changes
 let cachedProplessValue = {}
-const calculateProplessValue = function(iw) {
-    if (cachedProplessValue[iw]) return cachedProplessValue[iw]
+const calculateProplessValue = function(iw, ih) {
+    const key = `${iw}${ih}`
+    if (cachedProplessValue[key]) return cachedProplessValue[key]
 
-    const isLandscape = getIsLandscape()
+    const isLandscape = iw > ih
     const proplessValue = { isLandscape, isPortrait: !isLandscape, isHDPI: window.devicePixelRatio > 1 }
 
     // @ts-ignore
@@ -40,11 +34,11 @@ const calculateProplessValue = function(iw) {
 }
 
 /* eslint-disable no-continue */
-export const calculateValue: TCalculateValue = function(defaultValue, breakpointValues = [], iw = window.innerWidth) {
+export const calculateValue: TCalculateValue = function(defaultValue, breakpointValues = [], iw = window.innerWidth, ih = window.innerHeight) {
     if (defaultValue === undefined && !breakpointValues.length) {
-        return calculateProplessValue(iw)
+        return calculateProplessValue(iw, ih)
     }
-    const isLandscape = getIsLandscape()
+    const isLandscape = iw > ih
     if (!breakpointValues || !breakpointValues.length) {
         return defaultValue
     }
@@ -64,18 +58,22 @@ export const calculateValue: TCalculateValue = function(defaultValue, breakpoint
 
 // @ts-ignore
 const getInnerWidth = () => typeof window !== 'undefined' ? window.innerWidth : (global.innerWidth || 1920)
+// @ts-ignore
+const getInnerHeight = () => typeof window !== 'undefined' ? window.innerHeight : (global.innerHeight || 1080)
 
 let cachedIw = getInnerWidth()
+let cachedIh = getInnerHeight()
 
 export function useBreakpoint(defaultValue: any, breakpointValues: any[]): any
 export function useBreakpoint(): { [key: string]: boolean }
 export function useBreakpoint(defaultValue?, breakpointValues?) {
-    const [innerWidth, setInnerWidth] = useState(cachedIw)
+    const [[innerWidth, innerHeight], setInnerWidth] = useState(cachedIw)
     useResize(() => {
         cachedIw = getInnerWidth()
-        setInnerWidth(cachedIw)
+        cachedIh = getInnerHeight()
+        setInnerWidth([cachedIw, cachedIh])
     })
-    return useMemo(() => calculateValue(defaultValue, breakpointValues, innerWidth), [innerWidth, defaultValue])
+    return useMemo(() => calculateValue(defaultValue, breakpointValues, innerWidth, innerHeight), [innerWidth, defaultValue])
 }
 
 export default useBreakpoint