rn-css 1.9.1 → 1.9.3

package/dist/cssToRN/index.js

@@ -32,7 +32,19 @@ function cssToStyle(css) {
         result.hover = cssChunkToStyle(hoverInstructions);
         return '';
     });
-    Object.assign(result, cssChunkToStyle(cssWithoutHover));
+    // Find active (we don't support active within media queries) (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
+    const cssWithoutActive = cssWithoutHover.replace(/&:active\s*{([\s\S]*?)}/gmi, res => {
+        const activeInstructions = res.substring(0, res.length - 1).replace(/&:active\s*{/mi, ''); // We remove the `&:active {` and `}`
+        result.active = cssChunkToStyle(activeInstructions);
+        return '';
+    });
+    // Find focus (we don't support focus within media queries) (We use [\s\S] instead of . because dotall flag (s) is not supported by react-native-windows)
+    const cssWithoutFocus = cssWithoutActive.replace(/&:focus\s*{([\s\S]*?)}/gmi, res => {
+        const activeInstructions = res.substring(0, res.length - 1).replace(/&:focus\s*{/mi, ''); // We remove the `&:focus {` and `}`
+        result.focus = cssChunkToStyle(activeInstructions);
+        return '';
+    });
+    Object.assign(result, cssChunkToStyle(cssWithoutFocus));
     return result;
 }
 function cssToRNStyle(css, units = {}) {

package/dist/features.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import type { Style, Units, MediaQuery } from './types';
-import { LayoutChangeEvent } from 'react-native';
+import { LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent, GestureResponderEvent } from 'react-native';
 /** Hook that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
 export declare const useScreenSize: () => {
     vw: number;
@@ -14,6 +14,21 @@ export declare const useHover: (onMouseEnter: ((event: MouseEvent) => void) | un
     onMouseEnter: ((event: MouseEvent) => void) | undefined;
     onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined;
 };
+/** Hook that will apply the style reserved for active state if needed */
+export declare const useActive: (onPressIn: ((event: GestureResponderEvent) => void) | undefined, onPressOut: ((event: GestureResponderEvent) => void) | undefined, onResponderStart: ((event: GestureResponderEvent) => void) | undefined, onResponderRelease: ((event: GestureResponderEvent) => void) | undefined, onStartShouldSetResponder: ((event: GestureResponderEvent) => void) | undefined, needsTouch: boolean) => {
+    active: boolean;
+    onPressIn: ((event: GestureResponderEvent) => void) | undefined;
+    onPressOut: ((event: GestureResponderEvent) => void) | undefined;
+    onResponderStart: ((event: GestureResponderEvent) => void) | undefined;
+    onResponderRelease: ((event: GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponder: ((event: GestureResponderEvent) => void) | undefined;
+};
+/** Hook that will apply the style reserved for active state if needed */
+export declare const useFocus: (onFocus: ((event: NativeSyntheticEvent<TargetedEvent>) => void) | undefined, onBlur: ((event: NativeSyntheticEvent<TargetedEvent>) => void | undefined) | undefined, needsFocus: boolean) => {
+    focused: boolean;
+    onFocus: ((event: NativeSyntheticEvent<TargetedEvent>) => void) | undefined;
+    onBlur: ((event: NativeSyntheticEvent<TargetedEvent>) => void | undefined) | undefined;
+};
 /** Hook that will apply the style provided in the media queries */
 export declare const useMediaQuery: (media: undefined | MediaQuery[], units: Units) => Style | undefined;
 /** Hook that will measure the layout to handle styles that use % units */

package/dist/features.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFontSize = exports.useLayout = exports.useMediaQuery = exports.useHover = exports.useScreenSize = void 0;
+exports.useFontSize = exports.useLayout = exports.useMediaQuery = exports.useFocus = exports.useActive = exports.useHover = exports.useScreenSize = void 0;
 /* eslint-disable react/display-name */
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
@@ -33,6 +33,50 @@ const useHover = (onMouseEnter, onMouseLeave, needsHover) => {
     return { hover, onMouseEnter: hoverStart || onMouseEnter, onMouseLeave: hoverStop || onMouseLeave };
 };
 exports.useHover = useHover;
+/** Hook that will apply the style reserved for active state if needed */
+const useActive = (onPressIn, onPressOut, onResponderStart, onResponderRelease, onStartShouldSetResponder, needsTouch) => {
+    const [active, setActive] = react_1.default.useState(false);
+    const touchStart = react_1.default.useMemo(() => needsTouch ? (event) => {
+        if (onPressIn)
+            onPressIn(event);
+        else if (onResponderStart)
+            onResponderStart(event);
+        setActive(true);
+    } : undefined, [needsTouch, onResponderStart, onPressIn]);
+    const touchEnd = react_1.default.useMemo(() => needsTouch ? (event) => {
+        if (onPressOut)
+            onPressOut(event);
+        else if (onResponderRelease)
+            onResponderRelease(event);
+        setActive(false);
+    } : undefined, [needsTouch, onResponderRelease, onPressOut]);
+    const grantTouch = react_1.default.useMemo(() => needsTouch ? onStartShouldSetResponder || (() => true) : undefined, [needsTouch, onStartShouldSetResponder]);
+    return {
+        active,
+        onPressIn: touchStart || onPressIn,
+        onPressOut: touchEnd || onPressOut,
+        onResponderStart: touchStart || onResponderStart,
+        onResponderRelease: touchEnd || onResponderRelease,
+        onStartShouldSetResponder: grantTouch || onStartShouldSetResponder
+    };
+};
+exports.useActive = useActive;
+/** Hook that will apply the style reserved for active state if needed */
+const useFocus = (onFocus, onBlur, needsFocus) => {
+    const [focused, setFocused] = react_1.default.useState(false);
+    const focusStart = react_1.default.useMemo(() => needsFocus ? (event) => {
+        if (onFocus)
+            onFocus(event);
+        setFocused(true);
+    } : undefined, [needsFocus, onFocus]);
+    const focusStop = react_1.default.useMemo(() => needsFocus ? (event) => {
+        if (onBlur)
+            onBlur(event);
+        setFocused(false);
+    } : undefined, [needsFocus, onBlur]);
+    return { focused, onFocus: focusStart || onFocus, onBlur: focusStop || onBlur };
+};
+exports.useFocus = useFocus;
 /** Hook that will apply the style provided in the media queries */
 const useMediaQuery = (media, units) => {
     const mediaStyle = react_1.default.useMemo(() => {