From c0659cd8615e6168b8bfa5da45b5ba5880482ac0 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Fri, 3 Jun 2022 07:41:35 +1000 Subject: [PATCH] fix: inline useDeviceOrientation to remove need to transpile --- package-lock.json | 19 +-------- package.json | 1 - src/context/device-media.tsx | 2 +- src/context/use-device-orientation.ts | 60 +++++++++++++++++++++++++++ 4 files changed, 63 insertions(+), 19 deletions(-) create mode 100644 src/context/use-device-orientation.ts diff --git a/package-lock.json b/package-lock.json index e74f35d..70e73e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,15 @@ { "name": "tailwindcss-react-native", - "version": "1.0.0", + "version": "0.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "tailwindcss-react-native", - "version": "1.0.0", + "version": "0.0.0", "license": "MIT", "dependencies": { "@babel/types": "7.18.2", - "@react-native-community/hooks": "^2.8.1", "css-mediaquery": "^0.1.2", "css-to-react-native": "^3.0.0", "micromatch": "^4.0.5", @@ -5711,15 +5710,6 @@ "node": ">=8" } }, - "node_modules/@react-native-community/hooks": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/@react-native-community/hooks/-/hooks-2.8.1.tgz", - "integrity": "sha512-DCmCIC0Gn9m6K0Mlg2MwNmTxMEpBu5lTLsI6b/XUAv/vLGa6o+X7RhCai4FWeqkjCU36+ZOwaLzDo4NBWMXaoQ==", - "peerDependencies": { - "react": ">=16.8.0", - "react-native": ">=0.59" - } - }, "node_modules/@react-native/assets": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz", @@ -25606,11 +25596,6 @@ "ora": "^3.4.0" } }, - "@react-native-community/hooks": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/@react-native-community/hooks/-/hooks-2.8.1.tgz", - "integrity": "sha512-DCmCIC0Gn9m6K0Mlg2MwNmTxMEpBu5lTLsI6b/XUAv/vLGa6o+X7RhCai4FWeqkjCU36+ZOwaLzDo4NBWMXaoQ==" - }, "@react-native/assets": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz", diff --git a/package.json b/package.json index bc3d745..3750eeb 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,6 @@ ], "dependencies": { "@babel/types": "7.18.2", - "@react-native-community/hooks": "^2.8.1", "css-mediaquery": "^0.1.2", "css-to-react-native": "^3.0.0", "micromatch": "^4.0.5", diff --git a/src/context/device-media.tsx b/src/context/device-media.tsx index 72033b0..f85ade1 100644 --- a/src/context/device-media.tsx +++ b/src/context/device-media.tsx @@ -1,6 +1,6 @@ import React, { createContext, PropsWithChildren, useContext } from "react"; import { useWindowDimensions } from "react-native"; -import { useDeviceOrientation } from "@react-native-community/hooks"; +import { useDeviceOrientation } from "./use-device-orientation"; export interface DeviceMediaContext { width: number; diff --git a/src/context/use-device-orientation.ts b/src/context/use-device-orientation.ts new file mode 100644 index 0000000..7ce8278 --- /dev/null +++ b/src/context/use-device-orientation.ts @@ -0,0 +1,60 @@ +/** + * ISC License (ISC) + * + * Copyright (c) 2018 - 2020 React Native Community + * + * Permission to use, copy, modify, and distribute this software for any + * purpose with or without fee is hereby granted, provided that the above + * copyright notice and this permission notice appear in all copies. + * + * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES + * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF + * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR + * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES + * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN + * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF + * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. + */ + +/* + * Source: https://github.com/react-native-community/hooks/blob/34548fb56e30cb115e9dfbf516663eaa862a50ea/src/useDeviceOrientation.ts + */ +import { useEffect, useState } from "react"; +import { Dimensions, ScaledSize } from "react-native"; + +const isOrientationPortrait = ({ width, height }: ScaledSize) => + height >= width; +const isOrientationLandscape = ({ width, height }: ScaledSize) => + width >= height; + +export function useDeviceOrientation() { + const [orientation, setOrientation] = useState(() => { + const screen = Dimensions.get("screen"); + return { + portrait: isOrientationPortrait(screen), + landscape: isOrientationLandscape(screen), + }; + }); + + useEffect(() => { + const onChange = ({ screen }: { screen: ScaledSize }) => { + setOrientation({ + portrait: isOrientationPortrait(screen), + landscape: isOrientationLandscape(screen), + }); + }; + + const subscription = Dimensions.addEventListener("change", onChange); + + return () => { + if (typeof subscription?.remove === "function") { + subscription.remove(); + } else { + // React Native < 0.65 + Dimensions.removeEventListener("change", onChange); + } + }; + }, []); + + return orientation; +}