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

Commit

Permalink
fix: as forwarder composition issue
Browse files Browse the repository at this point in the history
  • Loading branch information
Suraj authored and Suraj committed Sep 6, 2023
1 parent de597f2 commit 38ef205
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 67 deletions.
165 changes: 107 additions & 58 deletions example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,31 @@ import {
} from 'react-native';
import { AsForwarder, styled, Theme } from '@gluestack-style/react';
import { Wrapper } from '../../components/Wrapper';
import { AddIcon, Box, Icon } from '@gluestack/design-system';
// import { AddIcon } from '@gluestack/design-system';
import { AlertCircle, Circle } from 'lucide-react-native';

const Pressable = styled(
RNPressable,
{
'bg': '$red500',
bg: '$red500',
p: '$2',
// 'bg': '$red600',
'w': 100,
'h': 100,
'_light': {
bg: '$red600',
},
'@base': {
bg: '$blue500',
},
':hover': {
bg: '$red500',
},
// 'w': 100,
// 'h': 100,
// '_light': {
// bg: '$red600',
// },
// '@base': {
// bg: '$blue500',
// },
// ':hover': {
// bg: '$red500',
// },
},
{
componentName: 'Pressable',
descendantStyle: ['_text'],
// descendantStyle: ['_text'],
}
);

Expand All @@ -48,6 +51,43 @@ const Text = styled(
}
);

const MyIcon = styled(
AsForwarder,
{
variants: {
size: {
sm: {
width: 32,
height: 32,
props: {
size: 32,
},
},
md: {
props: {
size: 32,
},
width: '$4',
height: '$4',
},
},
},
props: {
size: 'sm',
},
},
{
componentName: 'MyIcon',
}
);

const MyNewIcon = styled(
MyIcon,
{},
{
componentName: 'MyNewIcon',
}
);
export function ContextBasedStyles() {
return (
<Wrapper colorMode="dark">
Expand All @@ -60,48 +100,52 @@ export function ContextBasedStylesContent() {
// return <MyFlatList></MyFlatList>;

const [tabName, setTabName] = useState(true);
const [state, setState] = useState(false);

const handleTabChange = (tabName: any) => {
setTabName(tabName);
};

// const color = tabName ? '$red500' : '$green500';
// return (
// <>
// {/* <Theme name={'modern'}>
// <Box states={{ hover: true }}></Box>
// </Theme>
// <Box states={{ hover: true }}></Box> */}
// {/* <Icon as={Circle} size="md" color="$red500" />
// <Pressable
// onPress={() => {
// handleTabChange(!tabName);
// }}
// bg="$amber400"
// h="$50"
// w="$50"
// >
// <Text
// sx={{
// _dark: {
// color: tabName ? '$red500' : '$green500',
// },
// }}
// >
// hello world
// </Text>
// </Pressable> */}
// </>
// );

return (
<>
{/* <Theme name={'modern'}>
<Box states={{ hover: true }}></Box>
</Theme>
<Box states={{ hover: true }}></Box> */}

<Pressable
// onPress={() => handleTabChange(tabName)}
onPress={() => {
handleTabChange(!tabName);
}}
bg="$amber400"
h="$50"
w="$50"
>
<Text
// color={tabName ? '$red500' : '$green500'}
sx={{
// color: tabName ? '$red500' : '$green500',
_dark: {
// color: '$red500',
color: tabName ? '$red500' : '$green500',
},
}}
>
hello world
</Text>
</Pressable>
<MyNewIcon as={AlertCircle} size="sm"></MyNewIcon>
</>
);

return (
<>
<RNPressable
onPress={handlePress}
onPress={() => {
setState(!state);
}}
style={{
height: 50,
width: 200,
Expand All @@ -111,16 +155,16 @@ export function ContextBasedStylesContent() {
left: 0,
}}
>
<Text style={{ color: 'black' }}>Mount</Text>
<Text style={{ color: 'black' }}>{state ? 'Unmount' : 'Mount'}</Text>
</RNPressable>
{/* <MyPressable>
<RNText>Hello</RNText>
</MyPressable> */}
{/* {state && <MyList />
} */}
<Box pointerEvents="none" style={{ display: state ? 'flex' : 'none' }}>
<MyList />
</Box>
{/* <Box pointerEvents="none" style={{ display: state ? 'flex' : 'none' }}> */}
{state && <MyList />}
{/* </Box> */}
</>
);
}
Expand All @@ -132,29 +176,34 @@ const MyList = React.memo(() => {
}, []);
const data = useMemo(
() =>
Array(2000)
Array(1)
.fill(0)
.map((_, index) => `Item ${index}`),
[]
);

const renderItem = useCallback(
(item: any) => (
<MyPressable key={item}>
<RNText>{item}</RNText>
</MyPressable>
<Pressable
key={item}
sx={{
bg: '$amber400',
}}
>
{/* <RNText>{item}</RNText> */}
</Pressable>
),
[]
);

const renderItem2 = useCallback(
(item: any) => (
<RNPressable key={item} style={styleshet.style}>
<RNText>{item}</RNText>r
</RNPressable>
),
[]
);
// const renderItem2 = useCallback(
// (item: any) => (
// <RNPressable key={item} style={styleshet.style}>
// <RNText>{item}</RNText>r
// </RNPressable>
// ),
// []
// );
return <>{data.map(renderItem)}</>;
});
export default ContextBasedStyles;
40 changes: 31 additions & 9 deletions packages/react/src/styled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1723,15 +1723,34 @@ export function verboseStyled<P, Variants, ComCon>(
resolvedStyleMemo = StyleSheet.flatten(resolvedStyleMemo);
}

const component = !AsComp ? (
<Component {...resolvedStyleProps} style={resolvedStyleMemo} ref={ref}>
{children}
</Component>
) : (
<AsComp {...resolvedStyleProps} style={resolvedStyleMemo} ref={ref}>
{children}
</AsComp>
);
let component;
if (AsComp) {
//@ts-ignore
if (Component.isStyledComponent) {
component = (
<Component
{...resolvedStyleProps}
style={resolvedStyleMemo}
as={AsComp}
ref={ref}
>
{children}
</Component>
);
} else {
component = (
<AsComp {...resolvedStyleProps} style={resolvedStyleMemo} ref={ref}>
{children}
</AsComp>
);
}
} else {
component = (
<Component {...resolvedStyleProps} style={resolvedStyleMemo} ref={ref}>
{children}
</Component>
);
}

if (containsDescendant) {
return (
Expand All @@ -1755,6 +1774,9 @@ export function verboseStyled<P, Variants, ComCon>(
? 'Styled' + displayName
: 'StyledComponent';

//@ts-ignore
StyledComp.isStyledComponent = true;

return StyledComp;
}

Expand Down

0 comments on commit 38ef205

Please sign in to comment.