Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Commit

Permalink
fix: resolve inline props specificity
Browse files Browse the repository at this point in the history
  • Loading branch information
Suraj authored and Suraj committed Sep 21, 2023
1 parent ba436d2 commit 9625d01
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 21 deletions.
53 changes: 43 additions & 10 deletions example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Pressable as RNPressable,
Text as RNText,
StyleSheet,
Switch,
View,
} from 'react-native';
import {
Expand All @@ -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: {
Expand Down Expand Up @@ -194,6 +196,9 @@ const Text1 = styled(
},
{ ancestorStyle: ['_text'], componentName: 'TEXT' }
);

const StyledSwitch = styled(ScrollView, {});

export function ContextBasedStyles() {
const [state, setState] = useState(false);

Expand All @@ -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
Expand Down Expand Up @@ -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 (
// <>
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/hooks/useBreakpointValue.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand All @@ -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;
});
Expand Down
54 changes: 44 additions & 10 deletions packages/react/src/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
);

Expand All @@ -1325,7 +1339,10 @@ export function verboseStyled<P, Variants, ComCon>(

const { sx: filteredComponentSx, rest: filteredComponentRemainingProps } =
convertUtiltiyToSXFromProps(
componentPropsWithoutVariants,
Object.assign(
defaultComponentPropsWithoutVariants,
inlineComponentPropsWithoutVariants
),
styledSystemProps,
componentStyleConfig
);
Expand All @@ -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 (
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 9625d01

Please sign in to comment.