Merge pull request #448 from gluestack/patch

fix: resolve inline props specificity
gluestack · Sep 21, 2023 · 04141ab · 04141ab
2 parents ba436d2 + 2de002e
commit 04141ab
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 22 deletions.
diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -11,6 +11,7 @@ import {
   Pressable as RNPressable,
   Text as RNText,
   StyleSheet,
+  Switch,
   View,
 } from 'react-native';
 import {
@@ -29,6 +30,7 @@ import { AddIcon, Box, Icon } from '@gluestack/design-system';
 import { AlertCircle, Circle, Sun } from 'lucide-react-native';
 
 import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { ScrollView } from 'react-native';
 
 const styleshet = StyleSheet.create({
   style: {
@@ -194,6 +196,9 @@ const Text1 = styled(
   },
   { ancestorStyle: ['_text'], componentName: 'TEXT' }
 );
+
+const StyledSwitch = styled(ScrollView, {});
+
 export function ContextBasedStyles() {
   const [state, setState] = useState(false);
 
@@ -206,7 +211,38 @@ export function ContextBasedStyles() {
       >
         <Text>color mode: {state ? 'dark' : 'light'}</Text>
       </Pressable>
-      <MyIcon as={Sun} size={32}></MyIcon>
+
+      <StyledSwitch
+        height={200}
+        width={200}
+        sx={{
+          props: {
+            contentContainerStyle: {
+              // backgroundColor: 'blue',
+            },
+          },
+        }}
+
+        // trackColor={{ false: '$green500', true: '$primary600' }}
+        // thumbColor="$red500"
+        // sx={{
+        //   props: { trackColor: { false: '$blue500', true: '$primary600' } },
+        // }}
+      >
+        <View
+          style={{ height: 100, width: 100, backgroundColor: 'red' }}
+        ></View>
+      </StyledSwitch>
+
+      {/* 
+      <StyledSwitch
+        // trackColor={{ false: '$green500', true: '$primary600' }}
+        thumbColor="$red500"
+        sx={{
+          props: { trackColor: { false: '$blue500', true: '$primary600' } },
+        }}
+      ></StyledSwitch> */}
+
       <ContextBasedStylesContent></ContextBasedStylesContent>
       {/* <Pressable></Pressable> */}
       {/* <Box1
@@ -249,15 +285,12 @@ export function ContextBasedStylesContent() {
     setTabName(tabName);
   };
 
-  // const value = useToken('colors', 'red500');
-  // const value = useBreakpointValue({
-  //   base: 'base',
-  //   sm: 'sm',
-  //   md: 'md',
-  //   // md: 'md',
-  // });
-  const colorMode = useColorMode();
-  console.log(colorMode, 'color mode');
+  const value = useBreakpointValue({
+    base: true,
+    sm: false,
+  });
+
+  console.log(value, 'value here');
   // const color = tabName ? '$red500' : '$green500';
   // return (
   //   <>

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "0.2.49",
+  "version": "0.2.50",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/react/src/hooks/useBreakpointValue.ts b/packages/react/src/hooks/useBreakpointValue.ts
@@ -28,6 +28,7 @@ export function useBreakpointValue(values: BreakPointValue) {
   Object.keys(mediaQueries).forEach((key: any) => {
     const currentBreakpoint: any = extractWidthValues(mediaQueries[key]);
     const isValid = isValidBreakpoint(theme.config, mediaQueries[key], width);
+
     mediaQueriesBreakpoints.push({
       key: key,
       breakpoint: currentBreakpoint[0],
@@ -39,7 +40,7 @@ export function useBreakpointValue(values: BreakPointValue) {
   mediaQueriesBreakpoints.sort((a: any, b: any) => a.breakpoint - b.breakpoint);
 
   mediaQueriesBreakpoints.forEach((breakpoint: any, index: any) => {
-    breakpoint.value = values[breakpoint.key]
+    breakpoint.value = values.hasOwnProperty(breakpoint.key)
       ? values[breakpoint.key]
       : mediaQueriesBreakpoints[index - 1].value;
   });

diff --git a/packages/react/src/styled.tsx b/packages/react/src/styled.tsx
@@ -1134,10 +1134,17 @@ export function verboseStyled<P, Variants, ComCon>(
     Object.assign(incomingComponentProps, applySxAncestorPassingProps);
     Object.assign(incomingComponentProps, componentProps);
 
-    Object.assign(themeDefaultProps, incomingComponentProps);
+    const {
+      variantProps: defaultVariantProps,
+      restProps: defaultComponentPropsWithoutVariants,
+    } = getVariantProps(themeDefaultProps, theme);
+
+    const {
+      variantProps: inlineVariantProps,
+      restProps: inlineComponentPropsWithoutVariants,
+    } = getVariantProps(incomingComponentProps, theme);
 
-    const { variantProps, restProps: componentPropsWithoutVariants } =
-      getVariantProps(themeDefaultProps, theme);
+    const variantProps = Object.assign(defaultVariantProps, inlineVariantProps);
 
     const {
       baseStyleCSSIds: applyBaseStyleCSSIds,
@@ -1309,10 +1316,17 @@ export function verboseStyled<P, Variants, ComCon>(
     // 520ms
 
     // Inline prop based style resolution TODO: Diagram insertion
-    const resolvedInlineProps = resolveInlineProps(
+    const defaultResolvedInlineProps = resolveInlineProps(
       componentStyleConfig,
       componentExtendedConfig,
-      componentPropsWithoutVariants,
+      defaultComponentPropsWithoutVariants,
+      CONFIG
+    );
+
+    const inlineResolvedInlineProps = resolveInlineProps(
+      componentStyleConfig,
+      componentExtendedConfig,
+      inlineComponentPropsWithoutVariants,
       CONFIG
     );
 
@@ -1325,7 +1339,10 @@ export function verboseStyled<P, Variants, ComCon>(
 
     const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } =
       convertUtiltiyToSXFromProps(
-        componentPropsWithoutVariants,
+        Object.assign(
+          defaultComponentPropsWithoutVariants,
+          inlineComponentPropsWithoutVariants
+        ),
         styledSystemProps,
         componentStyleConfig
       );
@@ -1339,7 +1356,9 @@ export function verboseStyled<P, Variants, ComCon>(
 
     let containsSX = false;
     Object.assign(applyComponentInlineProps, filteredPassingRemainingProps);
-    Object.assign(applyComponentInlineProps, resolvedInlineProps);
+    Object.assign(applyComponentInlineProps, defaultResolvedInlineProps);
+
+    Object.assign(applyComponentInlineProps, inlineResolvedInlineProps);
     Object.assign(applyComponentInlineProps, filteredComponentRemainingProps);
 
     if (
@@ -1552,14 +1571,29 @@ export function verboseStyled<P, Variants, ComCon>(
           CONFIG
         );
 
+        // if (componentName === 'Switch') {
+        //   console.log(
+        //     // passingPropsUpdated,
+        //     // resolvedPassingRemainingProps,
+        //     resolvedInlineProps,
+        //     // componentStyleConfig,
+        //     '>>>>>>'
+        //   );
+        // }
+
+        // Object.assign(applyComponentInlineProps, defaultResolvedInlineProps);
+        // Object.assign(applyComponentInlineProps, filteredPassingRemainingProps);
+        // Object.assign(applyComponentInlineProps, defaultInlineResolvedInlineProps);
+        // Object.assign(applyComponentInlineProps, filteredComponentRemainingProps);
+
         Object.assign(
           applyComponentInlineProps,
           filteredPassingRemainingPropsUpdated
         );
 
         Object.assign(applyComponentInlineProps, resolvedPassingRemainingProps);
 
-        Object.assign(applyComponentInlineProps, resolvedInlineProps);
+        Object.assign(applyComponentInlineProps, inlineResolvedInlineProps);
 
         Object.assign(
           applyComponentInlineProps,
@@ -1782,10 +1816,10 @@ export function verboseStyled<P, Variants, ComCon>(
       ...applySxStateBaseStyleCSSIds.current,
     ];
 
-    Object.assign(resolvedInlineProps, applyComponentInlineProps);
+    // Object.assign(resolvedInlineProps, applyComponentInlineProps);
 
     const resolvedStyleProps = generateStylePropsFromCSSIds(
-      resolvedInlineProps,
+      applyComponentInlineProps,
       styleCSSIds,
       CONFIG,
       activeTheme