react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/src/web/variants/useVariants.ts

@@ -0,0 +1,65 @@
+import { useMemo, useRef, useState } from 'react'
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
+import { equal, keyInObject, reduceObject } from '../utils'
+import { getVariants } from './getVariants'
+
+export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => {
+    const useVariants = (selectedVariants: Record<string, any>) => {
+        const [selectedVariantStylesMap] = useState(() => new Map<string, Record<string, any>>())
+        const lastSelectedVariantsRef = useRef<Record<string, any>>()
+        // Variable that determines if variants have changed and we need to recalculate styles
+        const variantsChanged = !equal(lastSelectedVariantsRef.current, selectedVariants)
+
+        if (variantsChanged) {
+            lastSelectedVariantsRef.current = selectedVariants
+            setSelectedVariants(selectedVariants)
+        }
+
+        const combinedVariantStyles = useMemo(() => {
+            const result = getVariants(styles, selectedVariants)
+
+            result.forEach(([key, value]) => {
+                selectedVariantStylesMap.set(key, value)
+            })
+
+            return result
+        }, [lastSelectedVariantsRef.current])
+
+        combinedVariantStyles.forEach(([key]) => {
+            const styleEntry = styles[key]
+
+            if (!styleEntry) {
+                return
+            }
+
+            const selectedVariantStyles = selectedVariantStylesMap.get(key)
+
+            Object.defineProperties(styleEntry, reduceObject(selectedVariantStyles ?? {}, value => ({
+                value,
+                enumerable: false,
+                configurable: true
+            })))
+
+            // Add __uni__variants to static styles
+            Object.keys(styleEntry).forEach(key => {
+                if (!key.startsWith('__uni__secrets__')) {
+                    return
+                }
+
+                const secret = keyInObject(styleEntry, key) ? styleEntry[key] : undefined
+
+                if (!secret) {
+                    return
+                }
+
+                Object.defineProperty(secret, '__uni__variants', {
+                    value: selectedVariants
+                })
+            })
+        })
+    }
+
+    Object.defineProperty(styles, 'useVariants', {
+        value: useVariants
+    })
+}

package/lib/typescript/example/App.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './unistyles';
-export declare const App: () => React.JSX.Element;
-//# sourceMappingURL=App.d.ts.map

package/lib/typescript/example/App.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../example/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAG/C,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,GAAG,yBAoBf,CAAA"}

package/lib/typescript/example/unistyles.d.ts

@@ -1,63 +0,0 @@
-declare const lightTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-    gap: (v: number) => number;
-};
-declare const darkTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-    gap: (v: number) => number;
-};
-declare const premiumTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-    gap: (v: number) => number;
-};
-declare const breakpoints: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
-type AppBreakpoints = typeof breakpoints;
-type AppThemes = {
-    light: typeof lightTheme;
-    dark: typeof darkTheme;
-    premium: typeof premiumTheme;
-};
-declare module 'react-native-unistyles' {
-    interface UnistylesThemes extends AppThemes {
-    }
-    interface UnistylesBreakpoints extends AppBreakpoints {
-    }
-}
-export {};
-//# sourceMappingURL=unistyles.d.ts.map

package/lib/typescript/example/unistyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"unistyles.d.ts","sourceRoot":"","sources":["../../../example/unistyles.ts"],"names":[],"mappings":"AAWA,QAAA,MAAM,UAAU;;;;;;;;;;;;aAOH,MAAM;CAClB,CAAA;AAED,QAAA,MAAM,SAAS;;;;;;;;;;;;aAOF,MAAM;CAClB,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;aAOL,MAAM;CAClB,CAAA;AAED,QAAA,MAAM,WAAW;;;;;;CAMhB,CAAA;AAED,KAAK,cAAc,GAAG,OAAO,WAAW,CAAA;AACxC,KAAK,SAAS,GAAG;IACb,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,IAAI,EAAE,OAAO,SAAS,CAAA;IACtB,OAAO,EAAE,OAAO,YAAY,CAAA;CAC/B,CAAA;AAED,OAAO,QAAQ,wBAAwB,CAAC;IACpC,UAAiB,eAAgB,SAAQ,SAAS;KAAG;IAErD,UAAiB,oBAAqB,SAAQ,cAAc;KAAG;CAClE"}

package/lib/typescript/expo-example/App.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './unistyles';
-export default function App(): React.JSX.Element;
-//# sourceMappingURL=App.d.ts.map

package/lib/typescript/expo-example/App.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../expo-example/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,aAAa,CAAA;AAEpB,MAAM,CAAC,OAAO,UAAU,GAAG,sBAyC1B"}

package/lib/typescript/expo-example/unistyles.d.ts

@@ -1,63 +0,0 @@
-declare const lightTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-    gap: (v: number) => number;
-};
-declare const darkTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-    gap: (v: number) => number;
-};
-declare const premiumTheme: {
-    colors: {
-        backgroundColor: string;
-        typography: string;
-        accent: string;
-        barbie: string;
-        oak: string;
-        sky: string;
-        fog: string;
-        aloes: string;
-        blood: string;
-    };
-    gap: (v: number) => number;
-};
-declare const breakpoints: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
-type AppBreakpoints = typeof breakpoints;
-type AppThemes = {
-    light: typeof lightTheme;
-    dark: typeof darkTheme;
-    premium: typeof premiumTheme;
-};
-declare module 'react-native-unistyles' {
-    interface UnistylesThemes extends AppThemes {
-    }
-    interface UnistylesBreakpoints extends AppBreakpoints {
-    }
-}
-export {};
-//# sourceMappingURL=unistyles.d.ts.map

package/lib/typescript/expo-example/unistyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"unistyles.d.ts","sourceRoot":"","sources":["../../../expo-example/unistyles.ts"],"names":[],"mappings":"AAWA,QAAA,MAAM,UAAU;;;;;;;;;;;;aAOH,MAAM;CAClB,CAAA;AAED,QAAA,MAAM,SAAS;;;;;;;;;;;;aAOF,MAAM;CAClB,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;aAOL,MAAM;CAClB,CAAA;AAED,QAAA,MAAM,WAAW;;;;;;CAMhB,CAAA;AAED,KAAK,cAAc,GAAG,OAAO,WAAW,CAAA;AACxC,KAAK,SAAS,GAAG;IACb,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,IAAI,EAAE,OAAO,SAAS,CAAA;IACtB,OAAO,EAAE,OAAO,YAAY,CAAA;CAC/B,CAAA;AAED,OAAO,QAAQ,wBAAwB,CAAC;IACpC,UAAiB,eAAgB,SAAQ,SAAS;KAAG;IAErD,UAAiB,oBAAqB,SAAQ,cAAc;KAAG;CAClE"}

package/lib/typescript/web/convert/boxShadow.d.ts

@@ -1,3 +0,0 @@
-import type { NestedCSSProperties } from 'typestyle/lib/types';
-export declare const getBoxShadowStyle: (styles: Record<string, any>) => NestedCSSProperties;
-//# sourceMappingURL=boxShadow.d.ts.map

package/lib/typescript/web/convert/boxShadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"boxShadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/boxShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAkB9D,eAAO,MAAM,iBAAiB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,mBAoD/D,CAAA"}

package/lib/typescript/web/convert/breakpoint.d.ts

@@ -1,3 +0,0 @@
-import type { MediaQuery } from 'typestyle/lib/types';
-export declare const convertBreakpoint: (breakpoint: string) => MediaQuery;
-//# sourceMappingURL=breakpoint.d.ts.map

package/lib/typescript/web/convert/breakpoint.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../web/convert/breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAMrD,eAAO,MAAM,iBAAiB,eAAgB,MAAM,KAAG,UActD,CAAA"}

package/lib/typescript/web/convert/index.d.ts

@@ -1,4 +0,0 @@
-import type { NestedCSSProperties } from 'typestyle/lib/types';
-import type { UnistylesValues } from '../../src/types';
-export declare const convertToTypeStyle: (value: UnistylesValues) => NestedCSSProperties;
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/web/convert/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../web/convert/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAWtD,eAAO,MAAM,kBAAkB,UAAW,eAAe,wBAiExD,CAAA"}

package/lib/typescript/web/convert/shadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/shadow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,qBAAsB,aAAa,CAAC,MAAM,CAAC,UAAU,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAAe,GAAG,CAAC,MAAM,CAAC,SAiE5H,CAAA"}

package/lib/typescript/web/convert/style.d.ts

@@ -1,3 +0,0 @@
-import type { NestedCSSProperties } from 'typestyle/lib/types';
-export declare const getStyle: (key: string, value: any) => NestedCSSProperties;
-//# sourceMappingURL=style.d.ts.map

package/lib/typescript/web/convert/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../web/convert/style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAgF9D,eAAO,MAAM,QAAQ,QAAS,MAAM,SAAS,GAAG,wBAY/C,CAAA"}

package/lib/typescript/web/convert/textShadow.d.ts

@@ -1,3 +0,0 @@
-import type { NestedCSSProperties } from 'typestyle/lib/types';
-export declare const getTextShadowStyle: (styles: Record<string, any>) => NestedCSSProperties;
-//# sourceMappingURL=textShadow.d.ts.map

package/lib/typescript/web/convert/textShadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"textShadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/textShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAiB9D,eAAO,MAAM,kBAAkB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,mBAkDhE,CAAA"}

package/lib/typescript/web/convert/transform.d.ts

@@ -1,5 +0,0 @@
-import type { NestedCSSProperties } from 'typestyle/lib/types';
-type Transforms = Array<Record<string, any>>;
-export declare const getTransformStyle: (transforms: Transforms) => NestedCSSProperties;
-export {};
-//# sourceMappingURL=transform.d.ts.map

package/lib/typescript/web/convert/transform.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../../web/convert/transform.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAK9D,KAAK,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAmC5C,eAAO,MAAM,iBAAiB,eAAgB,UAAU,KAAG,mBA+C1D,CAAA"}

package/lib/typescript/web/convert/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../web/convert/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAEjE,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAE7E,eAAO,MAAM,kBAAkB,sEAAuE,CAAA;AAEtG,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,2EAA4E,CAAA;AAE1G,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAEnF,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;AAE9C,MAAM,MAAM,aAAa,GAAG,MAAM,SAAS,CAAA"}

package/lib/typescript/web/convert/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../web/convert/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAA;AAEnG,eAAO,MAAM,WAAW,QAAS,MAAM,SAAS,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAgD,CAAA;AAExI,eAAO,MAAM,YAAY,QAAS,MAAM,YAA0E,CAAA;AAElH,eAAO,MAAM,WAAW,QAAS,MAAM,YAAwE,CAAA;AAE/G,eAAO,MAAM,qBAAqB,UAAW,MAAM,oBAAiC,CAAA;AAEpF,eAAO,MAAM,cAAc,UAAW,MAAM,YAAW,MAAM,WAyB5D,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,aAAa,OAAO,IAAI,cAAc,MAAM,UAAU,GAAG,KAAG,SAAS,CAAC,IAAI,CAazH,CAAA"}