rn-css 1.8.12 → 1.8.14

package/dist/cssToRN/convert.js

@@ -1,12 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cornerValue = exports.sideValue = exports.font = exports.transform = exports.textDecoration = exports.background = exports.placeContent = exports.flexFlow = exports.flex = exports.shadow = exports.borderLike = exports.border = void 0;
-/** Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min( */
-function isNumber(value) {
+/**
+ * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
+ * Optionally accept "auto" value (for margins)
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns true if the value is a number
+ */
+function isNumber(value, acceptAuto) {
+    if (acceptAuto && value === 'auto')
+        return true;
     return value.match(/^[+-]?(\.\d|\d|calc\(|max\(|min\()/mg);
 }
-/** Split the value into numbers values and non numbers values */
-function findNumbers(value) {
+/**
+ * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
+ * Optionally accept "auto" value (for margins)
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns true if the value is a number
+ */
+/**
+ * Split the value into numbers values and non numbers values
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns An object containing the number and non number values as arrays.
+ */
+function findNumbers(value, acceptAuto) {
     const result = {
         nonNumbers: [],
         numbers: []
@@ -21,7 +41,7 @@ function findNumbers(value) {
         if (group)
             result.nonNumbers.push(val);
         else
-            result[isNumber(val) ? 'numbers' : 'nonNumbers'].push(val);
+            result[isNumber(val, acceptAuto) ? 'numbers' : 'nonNumbers'].push(val);
     });
     return result;
 }
@@ -219,7 +239,7 @@ exports.font = font;
 function sideValue(prefixKey, value, postFix = '') {
     if (value === 'none')
         return sideValue(prefixKey, '0', postFix);
-    const [top = value, right = top, bottom = top, left = right] = findNumbers(value).numbers;
+    const [top = value, right = top, bottom = top, left = right] = findNumbers(value, prefixKey === 'margin').numbers;
     return {
         [prefixKey + 'Top' + postFix]: top,
         [prefixKey + 'Left' + postFix]: left,

package/dist/features.d.ts

@@ -9,9 +9,9 @@ export declare const useScreenSize: () => {
     vmax: number;
 };
 /** Hook that will apply the style reserved for hover state if needed */
-export declare const useHover: (onMouseOver: ((event: MouseEvent) => void) | undefined, onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined, needsHover: boolean) => {
+export declare const useHover: (onMouseEnter: ((event: MouseEvent) => void) | undefined, onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined, needsHover: boolean) => {
     hover: boolean;
-    onMouseOver: ((event: MouseEvent) => void) | undefined;
+    onMouseEnter: ((event: MouseEvent) => void) | undefined;
     onMouseLeave: ((event: MouseEvent) => void | undefined) | undefined;
 };
 /** Hook that will apply the style provided in the media queries */

package/dist/features.js

@@ -18,19 +18,19 @@ const useScreenSize = () => {
 };
 exports.useScreenSize = useScreenSize;
 /** Hook that will apply the style reserved for hover state if needed */
-const useHover = (onMouseOver, onMouseLeave, needsHover) => {
+const useHover = (onMouseEnter, onMouseLeave, needsHover) => {
     const [hover, setHover] = react_1.default.useState(false);
     const hoverStart = react_1.default.useMemo(() => needsHover ? (event) => {
-        if (onMouseOver)
-            onMouseOver(event);
+        if (onMouseEnter)
+            onMouseEnter(event);
         setHover(true);
-    } : undefined, [needsHover, onMouseOver]);
+    } : undefined, [needsHover, onMouseEnter]);
     const hoverStop = react_1.default.useMemo(() => needsHover ? (event) => {
         if (onMouseLeave)
             onMouseLeave(event);
         setHover(false);
     } : undefined, [needsHover, onMouseLeave]);
-    return { hover, onMouseOver: hoverStart || onMouseOver, onMouseLeave: hoverStop || onMouseLeave };
+    return { hover, onMouseEnter: hoverStart || onMouseEnter, onMouseLeave: hoverStop || onMouseLeave };
 };
 exports.useHover = useHover;
 /** Hook that will apply the style provided in the media queries */

package/dist/styleComponent.js

@@ -65,7 +65,7 @@ const styled = (Component) => {
                 needsHover: !!rnStyle.hover
             }), [css, rnStyle.hover]);
             // Handle hover
-            const { onMouseOver, onMouseLeave, hover } = (0, features_1.useHover)(props.onMouseEnter, props.onMouseLeave, needsHover);
+            const { onMouseEnter, onMouseLeave, hover } = (0, features_1.useHover)(props.onMouseEnter, props.onMouseLeave, needsHover);
             const tempStyle = react_1.default.useMemo(() => {
                 const style = { ...rnStyle };
                 delete style.media;
@@ -111,12 +111,12 @@ const styled = (Component) => {
                 return { style: getStyle(hash, style), hash };
             }, [finalStyle, units]);
             const newProps = react_1.default.useMemo(() => {
-                const newProps = { style: [styleConvertedFromCSS, props.style], onMouseOver, onMouseLeave, onLayout };
+                const newProps = { style: [styleConvertedFromCSS, props.style], onMouseEnter, onMouseLeave, onLayout };
                 if (finalStyle.textOverflow === 'ellipsis') {
                     Object.assign(newProps, { numberOfLines: 1 });
                 }
                 return newProps;
-            }, [finalStyle.textOverflow, onLayout, onMouseOver, onMouseLeave, props.style, styleConvertedFromCSS]);
+            }, [finalStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, 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.8.12",
+  "version": "1.8.14",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",

package/src/cssToRN/convert.ts

@@ -1,12 +1,31 @@
 import type { Style, Transform } from '../types'
 
-/** Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min( */
-function isNumber (value: string) {
+/**
+ * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
+ * Optionally accept "auto" value (for margins)
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns true if the value is a number
+ */
+function isNumber (value: string, acceptAuto?: boolean) {
+  if (acceptAuto && value === 'auto') return true
   return value.match(/^[+-]?(\.\d|\d|calc\(|max\(|min\()/mg)
 }
 
-/** Split the value into numbers values and non numbers values */
-function findNumbers (value: string) {
+/**
+ * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
+ * Optionally accept "auto" value (for margins)
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns true if the value is a number
+ */
+/**
+ * Split the value into numbers values and non numbers values
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns An object containing the number and non number values as arrays.
+ */
+function findNumbers (value: string, acceptAuto?: boolean) {
   const result = {
     nonNumbers: [] as string[],
     numbers: [] as string[]
@@ -17,7 +36,7 @@ function findNumbers (value: string) {
     if (val.startsWith('"') || val.startsWith("'")) group = val.charAt(0)
     if (group && val.endsWith(group)) group = ''
     if (group) result.nonNumbers.push(val)
-    else result[isNumber(val) ? 'numbers' : 'nonNumbers'].push(val)
+    else result[isNumber(val, acceptAuto) ? 'numbers' : 'nonNumbers'].push(val)
   })
   return result
 }
@@ -188,7 +207,7 @@ export function font (value: string) {
 /** Parses a css value for the side of an element (border-width, margin, padding) */
 export function sideValue <T extends 'padding' | 'margin' | 'border'> (prefixKey: T, value: string, postFix: T extends 'border' ? 'Width' | 'Style' | 'Color' | '' : '' = ''): { [x: string]: string} {
   if (value === 'none') return sideValue(prefixKey, '0', postFix)
-  const [top = value, right = top, bottom = top, left = right] = findNumbers(value).numbers
+  const [top = value, right = top, bottom = top, left = right] = findNumbers(value, prefixKey === 'margin').numbers
   return {
     [prefixKey + 'Top' + postFix]: top,
     [prefixKey + 'Left' + postFix]: left,

package/src/features.tsx

@@ -14,17 +14,17 @@ export const useScreenSize = () => {
 }
 
 /** Hook that will apply the style reserved for hover state if needed */
-export const useHover = (onMouseOver: undefined | ((event: MouseEvent) => void), onMouseLeave: undefined | ((event: MouseEvent) => void | undefined), needsHover: boolean) => {
+export const useHover = (onMouseEnter: undefined | ((event: MouseEvent) => void), onMouseLeave: undefined | ((event: MouseEvent) => void | undefined), needsHover: boolean) => {
   const [hover, setHover] = React.useState(false)
   const hoverStart = React.useMemo(() => needsHover ? (event: MouseEvent) => {
-    if (onMouseOver) onMouseOver(event)
+    if (onMouseEnter) onMouseEnter(event)
     setHover(true)
-  } : undefined, [needsHover, onMouseOver])
+  } : undefined, [needsHover, onMouseEnter])
   const hoverStop = React.useMemo(() => needsHover ? (event: MouseEvent) => {
     if (onMouseLeave) onMouseLeave(event)
     setHover(false)
   } : undefined, [needsHover, onMouseLeave])
-  return { hover, onMouseOver: hoverStart || onMouseOver, onMouseLeave: hoverStop || onMouseLeave }
+  return { hover, onMouseEnter: hoverStart || onMouseEnter, onMouseLeave: hoverStop || onMouseLeave }
 }
 
 /** Hook that will apply the style provided in the media queries */

package/src/styleComponent.tsx

@@ -78,7 +78,7 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
       }), [css, rnStyle.hover])
 
       // Handle hover
-      const { onMouseOver, onMouseLeave, hover } = useHover(props.onMouseEnter, props.onMouseLeave, needsHover)
+      const { onMouseEnter, onMouseLeave, hover } = useHover(props.onMouseEnter, props.onMouseLeave, needsHover)
       const tempStyle = React.useMemo<Style>(() => {
         const style = { ...rnStyle }
         delete style.media
@@ -127,12 +127,12 @@ const styled = <StyleType, InitialProps extends { style?: StyleProp<StyleType> }
         return { style: getStyle<CompleteStyle>(hash, style), hash }
       }, [finalStyle, units])
       const newProps = React.useMemo(() => {
-        const newProps = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseOver, onMouseLeave, onLayout }
+        const newProps = { style: [styleConvertedFromCSS as StyleType, props.style], onMouseEnter, onMouseLeave, onLayout }
         if (finalStyle.textOverflow === 'ellipsis') {
           Object.assign(newProps, { numberOfLines: 1 })
         }
         return newProps
-      }, [finalStyle.textOverflow, onLayout, onMouseOver, onMouseLeave, props.style, styleConvertedFromCSS])
+      }, [finalStyle.textOverflow, onLayout, onMouseEnter, onMouseLeave, props.style, styleConvertedFromCSS])
 
       React.useEffect(() => () => removeStyle(hash), [hash])