rn-css 1.9.3 → 1.10.0

package/dist/styleComponent.d.ts

@@ -1,5 +1,6 @@
 import React, { MouseEvent } from 'react';
 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,8 +16,8 @@ declare type Functs<T> = (arg: T & {
 }) => Primitive;
 declare type OptionalProps = {
     rnCSS?: `${string};`;
-    onFocus?: TouchableHighlightProps['onFocus'];
-    onBlur?: TouchableHighlightProps['onBlur'];
+    onFocus?: FocusEventListener;
+    onBlur?: BlurEventListener;
     onPressIn?: TouchableHighlightProps['onPressIn'];
     onPressOut?: TouchableHighlightProps['onPressOut'];
     onResponderStart?: ViewProps['onResponderStart'];

package/package.json

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

package/src/convertUnits.ts

@@ -22,8 +22,8 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
   const finalUnits = { ...units }
   if (value.includes('%')) {
     if (Platform.OS === 'web') return value
-    if (['marginTop', 'marginBottom', 'translateY'].includes(key)) finalUnits['%'] = units.height! / 100
-    else if (['marginLeft', 'marginRight', 'translateX'].includes(key)) finalUnits['%'] = units.width! / 100
+    if (['marginTop', 'marginBottom', 'translateY'].includes(key) || key.startsWith('borderTop') || key.startsWith('borderBottom')) finalUnits['%'] = units.height! / 100
+    else if (['marginLeft', 'marginRight', 'translateX'].includes(key) || key.startsWith('borderLeft') || key.startsWith('borderRight')) finalUnits['%'] = units.width! / 100
     else if (key.startsWith('border') && key.endsWith('Radius')) finalUnits['%'] = (units.width! + units.height!) / 200
     else if (['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'top', 'left', 'bottom', 'right', 'flexBasis', 'rotate3d'].includes(key)) {
       if (value.startsWith('calc') || value.startsWith('max') || value.startsWith('min')) {

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'
 
@@ -61,14 +61,16 @@ export const useActive = (
   }
 }
 
+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

@@ -5,7 +5,7 @@ import React, { MouseEvent } from 'react'
 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,8 +24,8 @@ 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?: TouchableHighlightProps['onFocus'];
-  onBlur?: TouchableHighlightProps['onBlur'];
+  onFocus?: FocusEventListener;
+  onBlur?: BlurEventListener;
   onPressIn?: TouchableHighlightProps['onPressIn'];
   onPressOut?: TouchableHighlightProps['onPressOut'];
   onResponderStart?: ViewProps['onResponderStart'];