rn-css 1.9.2 → 1.9.4

package/dist/styleComponent.d.ts

@@ -1,5 +1,6 @@
 import React, { MouseEvent } from 'react';
-import { FlatListProps, GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, SectionListProps, StyleProp, TargetedEvent, VirtualizedListProps } from 'react-native';
+import { FlatListProps, SectionListProps, StyleProp, TouchableHighlightProps, ViewProps, VirtualizedListProps } from 'react-native';
+import { FocusEventListener, BlurEventListener } from './features';
 import type { CompleteStyle, Units } from './types';
 export declare const defaultUnits: Units;
 export declare const RemContext: React.Context<number>;
@@ -15,16 +16,16 @@ declare type Functs<T> = (arg: T & {
 }) => Primitive;
 declare type OptionalProps = {
     rnCSS?: `${string};`;
-    onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
-    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
-    onPressIn?: (event: GestureResponderEvent) => void;
-    onPressOut?: (event: GestureResponderEvent) => void;
-    onResponderStart?: (event: GestureResponderEvent) => void;
-    onResponderRelease?: (event: GestureResponderEvent) => void;
-    onResponderGrant?: (event: GestureResponderEvent) => boolean;
+    onFocus?: FocusEventListener;
+    onBlur?: BlurEventListener;
+    onPressIn?: TouchableHighlightProps['onPressIn'];
+    onPressOut?: TouchableHighlightProps['onPressOut'];
+    onResponderStart?: ViewProps['onResponderStart'];
+    onResponderRelease?: ViewProps['onResponderRelease'];
+    onStartShouldSetResponder?: ViewProps['onStartShouldSetResponder'];
     onMouseEnter?: (event: MouseEvent) => void;
     onMouseLeave?: (event: MouseEvent) => void;
-    onLayout?: (event: LayoutChangeEvent) => void;
+    onLayout?: ViewProps['onLayout'];
     children?: React.ReactNode;
 };
 declare const styled: <StyleType, InitialProps extends {

package/dist/styleComponent.js

@@ -69,7 +69,7 @@ const styled = (Component) => {
             // Handle hover
             const { onMouseEnter, onMouseLeave, hover } = (0, features_1.useHover)(props.onMouseEnter, props.onMouseLeave, needsHover);
             // Handle active
-            const { onPressIn, onPressOut, onResponderGrant, onResponderRelease, onResponderStart, active } = (0, features_1.useActive)(props.onPressIn, props.onPressOut, props.onResponderStart, props.onResponderRelease, props.onResponderGrant, needsTouch);
+            const { onPressIn, onPressOut, onStartShouldSetResponder, onResponderRelease, onResponderStart, active } = (0, features_1.useActive)(props.onPressIn, props.onPressOut, props.onResponderStart, props.onResponderRelease, props.onStartShouldSetResponder, needsTouch);
             // Handle focus
             const { onFocus, onBlur, focused } = (0, features_1.useFocus)(props.onFocus, props.onBlur, needsFocus);
             const tempStyle = react_1.default.useMemo(() => {
@@ -132,7 +132,7 @@ const styled = (Component) => {
                     onBlur,
                     onPressIn,
                     onPressOut,
-                    onResponderGrant,
+                    onStartShouldSetResponder,
                     onResponderStart,
                     onResponderRelease
                 };
@@ -140,7 +140,7 @@ const styled = (Component) => {
                     Object.assign(newProps, { numberOfLines: 1 });
                 }
                 return newProps;
-            }, [finalStyle.textOverflow, onBlur, onFocus, onLayout, onMouseEnter, onMouseLeave, onPressIn, onPressOut, onResponderGrant, onResponderRelease, onResponderStart, props.style, styleConvertedFromCSS]);
+            }, [finalStyle.textOverflow, onBlur, onFocus, onLayout, onMouseEnter, onMouseLeave, onPressIn, onPressOut, onStartShouldSetResponder, onResponderRelease, onResponderStart, props.style, styleConvertedFromCSS]);
             react_1.default.useEffect(() => () => removeStyle(hash), [hash]);
             // em !== parentEm alone is a bit dangerous as the component would rerender when the font size change
             if (em !== parentEm || finalStyle.fontSize !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.9.2",
+  "version": "1.9.4",
   "scripts": {
     "test": "jest",
     "prepare": "rm -rf dist && tsc",

package/src/features.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
 import type { Style, Units, MediaQuery, PartialStyle } from './types'
-import { useWindowDimensions, LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, GestureResponderEvent } from 'react-native'
+import { useWindowDimensions, LayoutChangeEvent, GestureResponderEvent, TouchableHighlightProps, TextInputProps } from 'react-native'
 import { parseValue } from './convertUnits'
 import { createContext } from './cssToRN/mediaQueries'
 
@@ -33,7 +33,7 @@ export const useActive = (
   onPressOut: undefined | ((event: GestureResponderEvent) => void),
   onResponderStart: undefined | ((event: GestureResponderEvent) => void),
   onResponderRelease: undefined | ((event: GestureResponderEvent) => void),
-  onResponderGrant: undefined | ((event: GestureResponderEvent) => boolean),
+  onStartShouldSetResponder: undefined | ((event: GestureResponderEvent) => void),
   needsTouch: boolean
 ) => {
   const [active, setActive] = React.useState(false)
@@ -48,8 +48,8 @@ export const useActive = (
     setActive(false)
   } : undefined, [needsTouch, onResponderRelease, onPressOut])
   const grantTouch = React.useMemo(() =>
-    needsTouch ? onResponderGrant || (() => true) : undefined
-  , [needsTouch, onResponderGrant]
+    needsTouch ? onStartShouldSetResponder || (() => true) : undefined
+  , [needsTouch, onStartShouldSetResponder]
   )
   return {
     active,
@@ -57,18 +57,20 @@ export const useActive = (
     onPressOut: touchEnd || onPressOut,
     onResponderStart: touchStart || onResponderStart,
     onResponderRelease: touchEnd || onResponderRelease,
-    onResponderGrant: grantTouch || onResponderGrant
+    onStartShouldSetResponder: grantTouch || onStartShouldSetResponder
   }
 }
 
+export type FocusEventListener = TouchableHighlightProps['onFocus'] | TextInputProps['onFocus']
+export type BlurEventListener = TouchableHighlightProps['onBlur'] | TextInputProps['onBlur']
 /** Hook that will apply the style reserved for active state if needed */
-export const useFocus = (onFocus: undefined | ((event: NativeSyntheticEvent<TargetedEvent>) => void), onBlur: undefined | ((event: NativeSyntheticEvent<TargetedEvent>) => void | undefined), needsFocus: boolean) => {
+export const useFocus = (onFocus: undefined | FocusEventListener, onBlur: undefined | BlurEventListener, needsFocus: boolean) => {
   const [focused, setFocused] = React.useState(false)
-  const focusStart = React.useMemo(() => needsFocus ? (event: NativeSyntheticEvent<TargetedEvent>) => {
+  const focusStart = React.useMemo(() => needsFocus ? (event: any) => {
     if (onFocus) onFocus(event)
     setFocused(true)
   } : undefined, [needsFocus, onFocus])
-  const focusStop = React.useMemo(() => needsFocus ? (event: NativeSyntheticEvent<TargetedEvent>) => {
+  const focusStop = React.useMemo(() => needsFocus ? (event: any) => {
     if (onBlur) onBlur(event)
     setFocused(false)
   } : undefined, [needsFocus, onBlur])

package/src/styleComponent.tsx

@@ -2,10 +2,10 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import React, { MouseEvent } from 'react'
-import { FlatList, FlatListProps, GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TargetedEvent, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
+import { FlatList, FlatListProps, Platform, SectionList, SectionListProps, StyleProp, StyleSheet, TouchableHighlightProps, ViewProps, ViewStyle, VirtualizedList, VirtualizedListProps } from 'react-native'
 import convertStyle from './convertStyle'
 import cssToStyle from './cssToRN'
-import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery, useActive, useFocus } from './features'
+import { useFontSize, useHover, useLayout, useScreenSize, useMediaQuery, useActive, useFocus, FocusEventListener, BlurEventListener } from './features'
 import type { AnyStyle, CompleteStyle, Style, Units } from './types'
 import generateHash from './generateHash'
 import rnToCSS from './rnToCss'
@@ -24,16 +24,16 @@ type Primitive = number | string | null | undefined | boolean | CompleteStyle
 type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown, theme: DefaultTheme }) => Primitive
 type OptionalProps = {
   rnCSS?: `${string};`;
-  onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
-  onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
-  onPressIn?: (event: GestureResponderEvent) => void;
-  onPressOut?: (event: GestureResponderEvent) => void;
-  onResponderStart?: (event: GestureResponderEvent) => void,
-  onResponderRelease?: (event: GestureResponderEvent) => void,
-  onResponderGrant?: (event: GestureResponderEvent) => boolean,
+  onFocus?: FocusEventListener;
+  onBlur?: BlurEventListener;
+  onPressIn?: TouchableHighlightProps['onPressIn'];
+  onPressOut?: TouchableHighlightProps['onPressOut'];
+  onResponderStart?: ViewProps['onResponderStart'];
+  onResponderRelease?: ViewProps['onResponderRelease'];
+  onStartShouldSetResponder?: ViewProps['onStartShouldSetResponder'];
   onMouseEnter?: (event: MouseEvent) => void;
   onMouseLeave?: (event: MouseEvent) => void;
-  onLayout?: (event: LayoutChangeEvent) => void
+  onLayout?: ViewProps['onLayout'];
   children?: React.ReactNode;
 }
 
@@ -89,9 +89,9 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
       // Handle hover
       const { onMouseEnter, onMouseLeave, hover } = useHover(props.onMouseEnter, props.onMouseLeave, needsHover)
       // Handle active
-      const { onPressIn, onPressOut, onResponderGrant, onResponderRelease, onResponderStart, active } = useActive(
+      const { onPressIn, onPressOut, onStartShouldSetResponder, onResponderRelease, onResponderStart, active } = useActive(
         props.onPressIn, props.onPressOut,
-        props.onResponderStart, props.onResponderRelease, props.onResponderGrant,
+        props.onResponderStart, props.onResponderRelease, props.onStartShouldSetResponder,
         needsTouch
       )
       // Handle focus
@@ -157,7 +157,7 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
           onBlur,
           onPressIn,
           onPressOut,
-          onResponderGrant,
+          onStartShouldSetResponder,
           onResponderStart,
           onResponderRelease
         }
@@ -165,7 +165,7 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
           Object.assign(newProps, { numberOfLines: 1 })
         }
         return newProps
-      }, [finalStyle.textOverflow, onBlur, onFocus, onLayout, onMouseEnter, onMouseLeave, onPressIn, onPressOut, onResponderGrant, onResponderRelease, onResponderStart, props.style, styleConvertedFromCSS])
+      }, [finalStyle.textOverflow, onBlur, onFocus, onLayout, onMouseEnter, onMouseLeave, onPressIn, onPressOut, onStartShouldSetResponder, onResponderRelease, onResponderStart, props.style, styleConvertedFromCSS])
 
       React.useEffect(() => () => removeStyle(hash), [hash])