react-native-unistyles 3.0.0-alpha.26 → 3.0.0-alpha.28

package/src/web/variants/useVariants.js

@@ -0,0 +1,50 @@
+import { useMemo, useRef, useState } from 'react';
+import { equal, keyInObject, reduceObject } from '../utils';
+import { getVariants } from './getVariants';
+export const createUseVariants = (styles, setSelectedVariants) => {
+    const useVariants = (selectedVariants) => {
+        const [selectedVariantStylesMap] = useState(() => new Map());
+        const lastSelectedVariantsRef = useRef();
+        // 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,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAGpB,eAAO,MAAM,GAAG,yBAef,CAAA"}

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import type { PropsWithChildren } from 'react';
-import type { UnistylesVariants } from 'react-native-unistyles';
-interface TypographyProps extends PropsWithChildren, UnistylesVariants<typeof styles> {
-    value: number;
-}
-export declare const Typography: React.FunctionComponent<TypographyProps>;
-declare const styles: {
-    title: (value: number) => {
-        fontWeight: "bold";
-    } & {
-        textAlign: "center";
-    } & {
-        fontSize: number;
-    } & {
-        fontSize: number;
-    } & {
-        fontSize: number;
-    } & {
-        color: string;
-    } & {
-        color: string;
-    } & {
-        color: string;
-    } & {};
-} & {
-    useVariants: (variants: {
-        isBold?: boolean | "true" | undefined;
-        isCentered?: boolean | "true" | undefined;
-        isPrimary?: boolean | "true" | undefined;
-        size?: "small" | "large" | undefined;
-    }) => void;
-};
-export {};
-//# sourceMappingURL=Typography.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../example/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAG9C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAA;AAE7D,UAAU,eAAgB,SAAQ,iBAAiB,EAAE,iBAAiB,CAAC,OAAO,MAAM,CAAC;IACjF,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAoB/D,CAAA;AAED,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CA2CT,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/app/(tabs)/_layout.d.ts

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

package/lib/typescript/expo-example/app/(tabs)/_layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_layout.d.ts","sourceRoot":"","sources":["../../../../../expo-example/app/(tabs)/_layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,CAAC,OAAO,UAAU,SAAS,sBAqBhC"}

package/lib/typescript/expo-example/app/(tabs)/explore.d.ts

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

package/lib/typescript/expo-example/app/(tabs)/explore.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"explore.d.ts","sourceRoot":"","sources":["../../../../../expo-example/app/(tabs)/explore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,CAAC,OAAO,UAAU,YAAY,sBAQnC"}

package/lib/typescript/expo-example/app/(tabs)/index.d.ts

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

package/lib/typescript/expo-example/app/(tabs)/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../expo-example/app/(tabs)/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,CAAC,OAAO,UAAU,UAAU,sBAQjC"}

package/lib/typescript/expo-example/app/+html.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type PropsWithChildren } from 'react';
-export default function Root({ children }: PropsWithChildren): React.JSX.Element;
-//# sourceMappingURL=+html.d.ts.map

package/lib/typescript/expo-example/app/+html.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"+html.d.ts","sourceRoot":"","sources":["../../../../expo-example/app/+html.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAqB3D"}

package/lib/typescript/expo-example/app/+not-found.d.ts

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

package/lib/typescript/expo-example/app/+not-found.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"+not-found.d.ts","sourceRoot":"","sources":["../../../../expo-example/app/+not-found.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,CAAC,OAAO,UAAU,cAAc,sBAIrC"}

package/lib/typescript/expo-example/app/_layout.d.ts

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

package/lib/typescript/expo-example/app/_layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_layout.d.ts","sourceRoot":"","sources":["../../../../expo-example/app/_layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,CAAC,OAAO,UAAU,UAAU,sBAMjC"}

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"}