From d87c330b85446cd79cd9ca78db976576bcc92247 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Mon, 27 Jun 2022 09:51:37 +1000 Subject: [PATCH] fix: group-scoped context not applying --- src/styled.tsx | 6 +-- src/use-interaction.ts | 6 +-- src/with-class-names.ts | 6 +-- website/docs/core-concepts/quirks.md | 6 +++ website/docs/core-concepts/states.md | 70 ++++++++++++++++++++++++---- 5 files changed, 77 insertions(+), 17 deletions(-) diff --git a/src/styled.tsx b/src/styled.tsx index bb6433e..afb35a2 100644 --- a/src/styled.tsx +++ b/src/styled.tsx @@ -112,7 +112,7 @@ export function styled< const store = useContext(StoreContext); const scopedGroupContext = useContext(ScopedGroupContext); - const { className, allClasses, isComponent, isParent } = withClassNames({ + const { className, allClasses, isGroupScoped, isParent } = withClassNames({ baseClassName, propClassName, twClassName, @@ -125,7 +125,7 @@ export function styled< const { hover, focus, active, ...handlers } = useInteraction({ className: allClasses, - isComponent, + isGroupScoped, isParent, store, ...componentProps, @@ -167,7 +167,7 @@ export function styled< ref, } as unknown as T); - if (isComponent) { + if (isGroupScoped) { return createElement(ScopedGroupContext.Provider, { children: element, value: { diff --git a/src/use-interaction.ts b/src/use-interaction.ts index a1daca7..21c7b61 100644 --- a/src/use-interaction.ts +++ b/src/use-interaction.ts @@ -18,12 +18,12 @@ export interface Interaction extends PressableProps { export interface UseInteractionOptions extends PressableProps { className?: string; - isComponent: boolean; + isGroupScoped: boolean; isParent: boolean; } export function useInteraction({ - isComponent, + isGroupScoped, isParent, focusable = true, onFocus, @@ -113,7 +113,7 @@ export function useInteraction({ focus, }; - const isComponentOrParent = isComponent || isParent; + const isComponentOrParent = isGroupScoped || isParent; if (isComponentOrParent || className.includes("focus:")) { interaction.onBlur = handleBlur; diff --git a/src/with-class-names.ts b/src/with-class-names.ts index ee5e7b3..d0d7905 100644 --- a/src/with-class-names.ts +++ b/src/with-class-names.ts @@ -9,7 +9,7 @@ export interface WithClassNames { classProps?: string[]; } -const isComponentRegex = /(?:^|\s)(component)(?:$|\s)/gi; +const isGroupScopedRegex = /(?:^|\s)(component)(?:$|\s)/gi; const isParentRegex = /(?:^|\s)(parent)(?:$|\s)/gi; export function withClassNames({ @@ -29,7 +29,7 @@ export function withClassNames({ .filter(Boolean) .join(" "); - const isComponent = isComponentRegex.test(className); + const isGroupScoped = isGroupScopedRegex.test(className); const isParent = isParentRegex.test(className); const allClasses = [className]; @@ -44,7 +44,7 @@ export function withClassNames({ return { className, allClasses: allClasses.join(" "), - isComponent, + isGroupScoped, isParent, }; } diff --git a/website/docs/core-concepts/quirks.md b/website/docs/core-concepts/quirks.md index c0ed366..c3566bc 100644 --- a/website/docs/core-concepts/quirks.md +++ b/website/docs/core-concepts/quirks.md @@ -4,6 +4,12 @@ While NativeWind is stable, its developers still consider it a work-in-progress We are open to community assistance in helping us resolving these issues. +## Explicit styles + +React Native has various issues when conditionally applying styles. To prevent these issues it's best to declare all styles. + +For example, instead of only apply a text color for dark mode, provide both a light and dark mode text color. + ## Dp vs px React Native's default unit is device-independent pixels (dp) while the web's default is pixels (px). These two units are different, however NativeWind treats them as if they are equalivant. Additionally, the NativeWind's compiler requires a unit for most numeric values forcing some styles to use a `px` unit. diff --git a/website/docs/core-concepts/states.md b/website/docs/core-concepts/states.md index 48b863f..849c96c 100644 --- a/website/docs/core-concepts/states.md +++ b/website/docs/core-concepts/states.md @@ -1,8 +1,8 @@ # Hover, Focus and Other States -:::info -If you are using CSS on web, please refer to the [offical Tailwind CSS docs](https://tailwindcss.com/docs/hover-focus-and-other-states) -::: +NativeWind polyfills a subset of the Tailwind states for React Native by adding event listeners on your components. This documentation only applies when compiling for native or when `webOutput` is set to `native`. + +When using CSS on web, please refer to the [offical Tailwind CSS docs](https://tailwindcss.com/docs/hover-focus-and-other-states). ## Hover, focus, and active @@ -12,11 +12,38 @@ If you are using NativeWind you need to ensure these listeners are passed to the The supported psuedo-classes and their related listeners are: -| Variant | Listeners | -| -------- | ------------------------------------ | -| `hover` | `onHoverIn`, `onHoverOut` | -| `focus` | `onBlur`, `onFocus` | -| `active` | `onPress`, `onPressIn`, `onPressOut` | +| Variant | Event Listeners | +| -------- | ------------------------- | +| `hover` | `onHoverIn`, `onHoverOut` | +| `focus` | `onBlur`, `onFocus` | +| `active` | `onPressIn`, `onPressOut` | + +```SnackPlayer name=States +import { Text, Pressable } from 'react-native'; +import { styled } from 'nativewind'; + +const StyledPressable = styled(Pressable) +const StyledText = styled(Text) + +const App = () => { + return ( + + + Hover and click me! 🎉 + + + ); +} +``` ## Styling based on parent state @@ -28,6 +55,33 @@ The difference between `group` and `group-scoped` is that components under a `gr `group` and `group-scoped` both work with the `hover`/`active`/`focus` psuedo-classes. +```SnackPlayer name=States +import { Text, Pressable } from 'react-native'; +import { styled } from 'nativewind'; + +const StyledPressable = styled(Pressable) +const StyledText = styled(Text) + +const App = () => { + return ( + + + Hover and click me! 🎉 + + + ); +} +``` + ## Responsive breakpoints To style an element at a specific breakpoint, use responsive modifiers like `md` and `lg`.