fix: inline useDeviceOrientation to remove need to transpile

This commit is contained in:
Mark Lawlor
2022-06-03 07:41:35 +10:00
parent 5447022d26
commit c0659cd861
4 changed files with 63 additions and 19 deletions

19
package-lock.json generated
View File

@@ -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",

View File

@@ -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",

View File

@@ -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;

View File

@@ -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;
}