rn-css 1.8.13 → 1.9.0

package/dist/src/cssToRN/mediaQueries.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMedia = exports.createContext = void 0;
+const convertUnits_1 = require("../convertUnits");
+const react_native_1 = require("react-native");
+function createContext(units) {
+    const vw = (units.vw || 1) * 100;
+    const vh = (units.vh || 1) * 100;
+    return {
+        anyHover: 'hover',
+        anyPointer: react_native_1.Platform.OS === 'web' ? 'fine' : 'coarse',
+        aspectRatio: vw / vh,
+        color: 16,
+        colorGamut: 'srgb',
+        colorIndex: 0,
+        deviceAspectRatio: vw / vh,
+        deviceHeight: vh,
+        deviceWidth: vw,
+        dynamicRange: 'standard',
+        environmentBlending: 'opaque',
+        forcedColor: 'none',
+        grid: 0,
+        height: vh,
+        hover: 'hover',
+        invertedColors: 'none',
+        monochrome: 0,
+        orientation: vw > vh ? 'landscape' : 'portrait',
+        overflowBlock: 'scroll',
+        overflowInline: 'scroll',
+        pointer: 'coarse',
+        prefersColorScheme: 'dark',
+        prefersContrast: 'no-preference',
+        prefersReducedData: 'no-preference',
+        prefersReducedMotion: 'no-preference',
+        prefersReducedTransparency: 'no-preference',
+        resolution: react_native_1.PixelRatio.getPixelSizeForLayoutSize(vw),
+        scan: 'progressive',
+        scripting: 'enabled',
+        type: 'screen',
+        units,
+        update: 'fast',
+        width: vw
+    };
+}
+exports.createContext = createContext;
+function convertAnyValue(key, value, units) {
+    if (key === 'resolution') {
+        // Convert density
+        if (value === 'infinite')
+            return Infinity;
+        const densityUnitsEquivalence = {
+            dpi: 'in',
+            dpcm: 'cm',
+            dppx: 'px',
+            x: 'px'
+        };
+        const [num, unit] = (0, convertUnits_1.parseValue)(value);
+        return num + densityUnitsEquivalence[unit];
+    }
+    else if (key === 'deviceAspectRatio' || key === 'aspectRatio') {
+        // Convert ratio
+        const [w, h] = value.split('/').map(v => parseInt(v, 10));
+        return w / h;
+    }
+    return (0, convertUnits_1.convertValue)(key, value, units);
+}
+/** Check if a constraint is respected by the provided context */
+function evaluateConstraint(constraint, context) {
+    return Object.keys(constraint).every(key => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const [, baseKey, minMax] = key.match(/(.*?)(Min|Max|$)/);
+        const value = convertAnyValue(baseKey, constraint[key] + '', context.units);
+        if (minMax === 'Min') {
+            return context[baseKey] >= value;
+        }
+        else if (key.endsWith('Max')) {
+            return context[baseKey] <= value;
+        }
+        else if (['all', 'sprint', 'speech', 'screen'].includes(key)) {
+            return context.type === key || key === 'all';
+        }
+        else {
+            // Boolean check: we want the value to be defined and not equal to 'none'
+            if (value === undefined)
+                return !!context[baseKey] && context[baseKey] !== 'none';
+            // float comparison
+            if (baseKey.endsWith('aspectRatio'))
+                return Math.abs(context[baseKey] - value) < (value + context[baseKey]) / 100;
+            return context[baseKey] === value;
+        }
+    });
+}
+/** Parse media query constraint such as min-width: 600px, or screen */
+function parseConstraintValue(constraintString) {
+    let [key, value] = constraintString.split(':').map(v => v.trim());
+    if (key.startsWith('min-'))
+        key = key.substring(4) + 'Min';
+    else if (key.startsWith('max-'))
+        key = key.substring(4) + 'Max';
+    const constraint = { [key]: value };
+    return (context) => evaluateConstraint(constraint, context);
+}
+function parse(constraint, previous) {
+    const result = constraint.match(/\sand\s|,|\sonly\s|\(|\snot\s/im);
+    if (!result) {
+        // If we reached the end of the string, we just return the last constraint
+        if (constraint.match(/\w/))
+            return parseConstraintValue(constraint);
+        // If there is just an empty string, we just ignore it by returning a truthy evaluation
+        else
+            return previous || (() => true);
+    }
+    const token = result[0]; // The next command we found
+    const tail = constraint.substring(result.index + token.length); // The rest of the constraint
+    const current = constraint.substring(0, result.index); // The current constraint
+    if (token === '(') {
+        try {
+            const { index } = tail.match(/\)/);
+            const parenthesis = tail.substring(0, index);
+            const postParenthesis = tail.substring(index + 1);
+            return parse(postParenthesis, parse(parenthesis, previous));
+        }
+        catch (err) {
+            console.error('No matching parenthesis in the media query', constraint);
+            throw err;
+        }
+    }
+    else if (token.includes('and')) {
+        const left = previous || parseConstraintValue(current);
+        const right = parse(tail);
+        return (context) => left(context) && right(context);
+    }
+    else if (token.includes('not')) {
+        const evaluate = parse(tail);
+        return (context) => !evaluate(context);
+    }
+    else if (token.includes('only')) {
+        return parse(tail, previous || parseConstraintValue(current));
+    }
+    else if (token === ',') {
+        const left = previous || parseConstraintValue(current);
+        const right = parse(tail);
+        return (context) => left(context) || right(context);
+    }
+    else {
+        throw new Error(`Error while parsing media query '${constraint}'. No token found`);
+    }
+}
+const createMedia = (query) => {
+    // We use [\s\S] instead of dotall flag (s) because it is not supported by react-native-windows
+    const parsed = query.match(/@media([\s\S]*?){([^{}]*)}/mi);
+    if (!parsed)
+        throw new Error(`Parsing error: check the syntax of media query ${query}.`);
+    const [, constraints, css] = parsed;
+    const isValid = parse(constraints);
+    return {
+        css,
+        isValid
+    };
+};
+exports.createMedia = createMedia;

package/dist/src/features.d.ts

@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import type { Style, Units, MediaQuery } from './types';
+import { LayoutChangeEvent, NativeSyntheticEvent, TargetedEvent } 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;
+    vh: number;
+    vmin: number;
+    vmax: number;
+};
+/** Hook that will apply the style reserved for hover state if needed */
+export declare const useHover: (onMouseEnter: ((event: MouseEvent) => void) | undefined, onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined, needsHover: boolean) => {
+    hover: boolean;
+    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: (onFocus: ((event: NativeSyntheticEvent<TargetedEvent>) => void) | undefined, onBlur: ((event: NativeSyntheticEvent<TargetedEvent>) => void | undefined) | undefined, needsFocus: boolean) => {
+    active: 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 */
+export declare const useLayout: (onLayout: ((event: LayoutChangeEvent) => void) | undefined, needsLayout: boolean) => {
+    width: number;
+    height: number;
+    onLayout: ((event: LayoutChangeEvent) => void) | undefined;
+};
+/** Apply the new fontSize to the component before we can calculate em units */
+export declare const useFontSize: (fontSizeTarget: string | undefined, rem: number, em: number) => {
+    em: number;
+};

package/dist/src/features.js

@@ -0,0 +1,102 @@
+"use strict";
+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.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");
+const convertUnits_1 = require("./convertUnits");
+const mediaQueries_1 = require("./cssToRN/mediaQueries");
+/** Hook that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
+const useScreenSize = () => {
+    const { width, height } = (0, react_native_1.useWindowDimensions)();
+    return react_1.default.useMemo(() => ({
+        vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100
+    }), [height, width]);
+};
+exports.useScreenSize = useScreenSize;
+/** Hook that will apply the style reserved for hover state if needed */
+const useHover = (onMouseEnter, onMouseLeave, needsHover) => {
+    const [hover, setHover] = react_1.default.useState(false);
+    const hoverStart = react_1.default.useMemo(() => needsHover ? (event) => {
+        if (onMouseEnter)
+            onMouseEnter(event);
+        setHover(true);
+    } : undefined, [needsHover, onMouseEnter]);
+    const hoverStop = react_1.default.useMemo(() => needsHover ? (event) => {
+        if (onMouseLeave)
+            onMouseLeave(event);
+        setHover(false);
+    } : undefined, [needsHover, onMouseLeave]);
+    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 = (onFocus, onBlur, needsFocus) => {
+    const [active, setActive] = react_1.default.useState(false);
+    const focusStart = react_1.default.useMemo(() => needsFocus ? (event) => {
+        if (onFocus)
+            onFocus(event);
+        setActive(true);
+    } : undefined, [needsFocus, onFocus]);
+    const focusStop = react_1.default.useMemo(() => needsFocus ? (event) => {
+        if (onBlur)
+            onBlur(event);
+        setActive(false);
+    } : undefined, [needsFocus, onBlur]);
+    return { active, onFocus: focusStart || onFocus, onBlur: focusStop || onBlur };
+};
+exports.useActive = useActive;
+/** Hook that will apply the style provided in the media queries */
+const useMediaQuery = (media, units) => {
+    const mediaStyle = react_1.default.useMemo(() => {
+        if (media) {
+            const context = (0, mediaQueries_1.createContext)(units);
+            const mediaStyles = media.map(m => m(context)).filter(m => !!m);
+            if (!mediaStyles.length)
+                return;
+            const mq = {};
+            Object.assign(mq, ...mediaStyles);
+            return mq;
+        }
+    }, [media, units]);
+    return mediaStyle;
+};
+exports.useMediaQuery = useMediaQuery;
+/** Hook that will measure the layout to handle styles that use % units */
+const useLayout = (onLayout, needsLayout) => {
+    const [layout, setLayout] = react_1.default.useState({ width: 0, height: 0 });
+    // Prevent calling setState if the component is unmounted
+    const unmounted = react_1.default.useRef(false);
+    react_1.default.useEffect(() => () => { unmounted.current = true; }, []);
+    const updateLayout = react_1.default.useMemo(() => needsLayout ? (event) => {
+        if (unmounted.current)
+            return;
+        if (onLayout)
+            onLayout(event);
+        const { width, height } = event.nativeEvent.layout;
+        setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height });
+    } : undefined, [needsLayout, onLayout]);
+    return { onLayout: updateLayout || onLayout, ...layout };
+};
+exports.useLayout = useLayout;
+/** Apply the new fontSize to the component before we can calculate em units */
+const useFontSize = (fontSizeTarget, rem, em) => {
+    const [fontSize, fontUnit] = react_1.default.useMemo(() => fontSizeTarget === undefined ? [] : (0, convertUnits_1.parseValue)(fontSizeTarget), [fontSizeTarget]);
+    const isRelative = fontUnit && ['rem', 'em', '%'].includes(fontUnit);
+    const newSize = react_1.default.useMemo(() => {
+        if (fontSize && isRelative) {
+            const newSize = fontUnit === 'em' ? em * fontSize
+                : fontUnit === 'rem' ? fontSize * rem
+                    : fontUnit === '%' ? em * (1 + fontSize / 100)
+                        : fontSize;
+            return newSize;
+        }
+        else
+            return fontSize || em;
+    }, [em, fontSize, fontUnit, isRelative, rem]);
+    return { em: newSize };
+};
+exports.useFontSize = useFontSize;

package/dist/src/generateHash.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (value: string) => string;
+export default _default;

package/dist/src/generateHash.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = (value) => {
+    let h = 0;
+    for (let i = 0; i < value.length; i++)
+        h = Math.imul(31, h) + value.charCodeAt(i) | 0;
+    return h.toString(36);
+};