From 32d316b7d4af9b4ebaa4c58068a5247fffac390c Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 23 May 2024 12:20:44 +0530 Subject: [PATCH] v1.0.20 --- .../core-components/nativewind/grid/index.tsx | 2 +- packages/nativewind/utils/CHANGELOG.md | 7 ++ packages/nativewind/utils/package.json | 5 +- packages/nativewind/utils/tsconfig.json | 3 +- .../utils/useBreakpointValue/index.d.ts | 8 +++ .../utils/useBreakpointValue/index.js | 69 +++++++++++++++++++ .../index.tsx | 0 7 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 packages/nativewind/utils/useBreakpointValue/index.d.ts create mode 100644 packages/nativewind/utils/useBreakpointValue/index.js rename packages/nativewind/utils/{useMediaQuery => useBreakpointValue}/index.tsx (100%) diff --git a/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx index a411100ffe..740eff1ff0 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx @@ -13,7 +13,7 @@ import { cssInterop } from 'nativewind'; import { useBreakpointValue, getBreakPointValue, -} from '@gluestack-ui/nativewind-utils/useMediaQuery'; +} from '@gluestack-ui/nativewind-utils/useBreakpointValue'; const { width } = Dimensions.get('window'); const GridContext = createContext({}); diff --git a/packages/nativewind/utils/CHANGELOG.md b/packages/nativewind/utils/CHANGELOG.md index e69de29bb2..c664e88762 100644 --- a/packages/nativewind/utils/CHANGELOG.md +++ b/packages/nativewind/utils/CHANGELOG.md @@ -0,0 +1,7 @@ +# @gluestack-ui/nativewind-utils + +## 1.0.20 + +### Patch Changes + +- - useBreakPointValue hook diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index d596b5b5fe..59a89e4007 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -17,7 +17,7 @@ "main": "index.js", "module": "index.js", "types": "index.d.ts", - "version": "1.0.19", + "version": "1.0.20", "react-native": "src/index", "source": "src/index", "scripts": { @@ -73,7 +73,8 @@ "cssInterop", "flush", "scripts", - "IsWeb" + "IsWeb", + "useBreakpointValue" ], "jest": { "preset": "jest-expo", diff --git a/packages/nativewind/utils/tsconfig.json b/packages/nativewind/utils/tsconfig.json index b0bf176c26..6ed0f2fe6a 100644 --- a/packages/nativewind/utils/tsconfig.json +++ b/packages/nativewind/utils/tsconfig.json @@ -12,7 +12,8 @@ "withStyleContextAndStates", "cssInterop", "flush", - "IsWeb" + "IsWeb", + "useBreakpointValue" ], "exclude": ["node_modules", "example"], "path": {}, diff --git a/packages/nativewind/utils/useBreakpointValue/index.d.ts b/packages/nativewind/utils/useBreakpointValue/index.d.ts new file mode 100644 index 0000000000..eac599e70f --- /dev/null +++ b/packages/nativewind/utils/useBreakpointValue/index.d.ts @@ -0,0 +1,8 @@ +type BreakPointValue = Partial<{}>; +export declare const getBreakPointValue: (values: any, width: any) => any; +export declare function useBreakpointValue(values: BreakPointValue): null; +export declare function isValidBreakpoint( + breakPointWidth: any, + width?: any +): boolean; +export {}; diff --git a/packages/nativewind/utils/useBreakpointValue/index.js b/packages/nativewind/utils/useBreakpointValue/index.js new file mode 100644 index 0000000000..88b67fc092 --- /dev/null +++ b/packages/nativewind/utils/useBreakpointValue/index.js @@ -0,0 +1,69 @@ +import { Dimensions, useWindowDimensions } from 'react-native'; +import { useEffect, useState } from 'react'; +import DefaultTheme from 'tailwindcss/defaultConfig'; +import resolveConfig from 'tailwindcss/resolveConfig'; +const TailwindTheme = resolveConfig(DefaultTheme); +const screenSize = TailwindTheme.theme.screens; +const resolveScreenWidth = { + default: 0, +}; +Object.entries(screenSize).forEach(([key, value]) => { + resolveScreenWidth[key] = parseInt(value.replace('px', '')); +}); +export const getBreakPointValue = (values, width) => { + if (typeof values !== 'object') return values; + let finalBreakPointResolvedValue; + const mediaQueriesBreakpoints = []; + Object.keys(resolveScreenWidth).forEach((key) => { + const isValid = isValidBreakpoint(resolveScreenWidth[key], width); + mediaQueriesBreakpoints.push({ + key: key, + breakpoint: resolveScreenWidth[key], + isValid: isValid, + }); + }); + mediaQueriesBreakpoints.sort((a, b) => a.breakpoint - b.breakpoint); + mediaQueriesBreakpoints.forEach((breakpoint, index) => { + breakpoint.value = values.hasOwnProperty(breakpoint.key) + ? // @ts-ignore + values[breakpoint.key] + : mediaQueriesBreakpoints[index - 1].value; + }); + const lastValidObject = getLastValidObject(mediaQueriesBreakpoints); + if (!lastValidObject) { + finalBreakPointResolvedValue = values; + } else { + finalBreakPointResolvedValue = lastValidObject.value; + } + return finalBreakPointResolvedValue; +}; +export function useBreakpointValue(values) { + const { width } = useWindowDimensions(); + const [currentBreakPointValue, setCurrentBreakPointValue] = useState(null); + useEffect(() => { + if (typeof values === 'object') { + const finalBreakPointResolvedValue = getBreakPointValue(values, width); + setCurrentBreakPointValue(finalBreakPointResolvedValue); + } + }, [values, width]); + if (typeof values !== 'object') return values; + return currentBreakPointValue; +} +export function isValidBreakpoint( + breakPointWidth, + width = Dimensions.get('window')?.width +) { + const windowWidth = width; + if (windowWidth >= breakPointWidth) { + return true; + } + return false; +} +function getLastValidObject(mediaQueries) { + for (let i = mediaQueries.length - 1; i >= 0; i--) { + if (mediaQueries[i].isValid) { + return mediaQueries[i]; + } + } + return null; // No valid object found +} diff --git a/packages/nativewind/utils/useMediaQuery/index.tsx b/packages/nativewind/utils/useBreakpointValue/index.tsx similarity index 100% rename from packages/nativewind/utils/useMediaQuery/index.tsx rename to packages/nativewind/utils/useBreakpointValue/index.tsx