Skip to content

Commit

Permalink
fix: passing flex to the shared and inner layer Surface styles (#3653)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukewalczak
lukewalczak authored Feb 6, 2023
1 parent 4189f4b commit a7eeb62
Show file tree
Hide file tree
Showing 18 changed files with 636 additions and 35 deletions.
26 changes: 20 additions & 6 deletions src/components/Surface.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const Surface = forwardRef<View, Props>(
children,
theme: overridenTheme,
style,
testID,
testID = 'surface',
...props
}: Props,
ref
Expand Down Expand Up @@ -228,6 +228,7 @@ const Surface = forwardRef<View, Props>(
bottom,
start,
end,
flex,
...restStyle
} = (StyleSheet.flatten(style) || {}) as ViewStyle;

Expand All @@ -241,7 +242,12 @@ const Surface = forwardRef<View, Props>(
start,
end,
};
const sharedStyle = [{ backgroundColor }, restStyle];

const sharedStyle = [{ backgroundColor, flex }, restStyle];

const innerLayerViewStyles = [{ flex }];

const outerLayerViewStyles = [absoluteStyles, innerLayerViewStyles];

if (isAnimatedValue(elevation)) {
const inputRange = [0, 1, 2, 3, 4, 5];
Expand Down Expand Up @@ -270,9 +276,13 @@ const Surface = forwardRef<View, Props>(

return (
<Animated.View
style={[getStyleForAnimatedShadowLayer(0), absoluteStyles]}
style={[getStyleForAnimatedShadowLayer(0), outerLayerViewStyles]}
testID={`${testID}-outer-layer`}
>
<Animated.View style={getStyleForAnimatedShadowLayer(1)}>
<Animated.View
style={[getStyleForAnimatedShadowLayer(1), innerLayerViewStyles]}
testID={`${testID}-inner-layer`}
>
<Animated.View {...props} testID={testID} style={sharedStyle}>
{children}
</Animated.View>
Expand All @@ -298,9 +308,13 @@ const Surface = forwardRef<View, Props>(
return (
<Animated.View
ref={ref}
style={[getStyleForShadowLayer(0), absoluteStyles]}
style={[getStyleForShadowLayer(0), outerLayerViewStyles]}
testID={`${testID}-outer-layer`}
>
<Animated.View style={getStyleForShadowLayer(1)}>
<Animated.View
style={[getStyleForShadowLayer(1), innerLayerViewStyles]}
testID={`${testID}-inner-layer`}
>
<Animated.View {...props} testID={testID} style={sharedStyle}>
{children}
</Animated.View>
Expand Down
37 changes: 37 additions & 0 deletions src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"alignSelf": undefined,
"bottom": undefined,
"end": undefined,
"flex": undefined,
"left": undefined,
"position": undefined,
"right": undefined,
Expand All @@ -22,11 +23,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"top": undefined,
}
}
testID="surface-outer-layer"
>
<View
collapsable={false}
style={
Object {
"flex": undefined,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 0,
Expand All @@ -36,13 +39,15 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"shadowRadius": 0,
}
}
testID="surface-inner-layer"
>
<View
collapsable={false}
style={
Object {
"alignItems": "center",
"backgroundColor": "rgba(255, 251, 254, 1)",
"flex": undefined,
"flexDirection": "row",
"height": 64,
"paddingBottom": undefined,
Expand All @@ -52,6 +57,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"paddingTop": undefined,
}
}
testID="surface"
>
<View
collapsable={false}
Expand All @@ -60,6 +66,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"alignSelf": undefined,
"bottom": undefined,
"end": undefined,
"flex": undefined,
"left": undefined,
"position": undefined,
"right": undefined,
Expand All @@ -74,11 +81,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"top": undefined,
}
}
testID="search-bar-container-outer-layer"
>
<View
collapsable={false}
style={
Object {
"flex": undefined,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 1,
Expand All @@ -88,6 +97,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"shadowRadius": 1,
}
}
testID="search-bar-container-inner-layer"
>
<View
collapsable={false}
Expand All @@ -96,6 +106,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"alignItems": "center",
"backgroundColor": "rgb(247, 243, 249)",
"borderRadius": 4,
"flex": undefined,
"flexDirection": "row",
}
}
Expand All @@ -108,6 +119,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"alignSelf": undefined,
"bottom": undefined,
"end": undefined,
"flex": undefined,
"left": undefined,
"position": undefined,
"right": undefined,
Expand All @@ -122,11 +134,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"top": undefined,
}
}
testID="icon-button-container-outer-layer"
>
<View
collapsable={false}
style={
Object {
"flex": undefined,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 0,
Expand All @@ -136,6 +150,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"shadowRadius": 0,
}
}
testID="icon-button-container-inner-layer"
>
<View
collapsable={false}
Expand All @@ -146,6 +161,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"borderRadius": 20,
"borderWidth": 0,
"elevation": 0,
"flex": undefined,
"height": 40,
"margin": 6,
"overflow": "hidden",
Expand Down Expand Up @@ -286,6 +302,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"alignSelf": undefined,
"bottom": undefined,
"end": undefined,
"flex": undefined,
"left": undefined,
"position": undefined,
"right": undefined,
Expand All @@ -300,11 +317,13 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"top": undefined,
}
}
testID="icon-button-container-outer-layer"
>
<View
collapsable={false}
style={
Object {
"flex": undefined,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 0,
Expand All @@ -314,6 +333,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"shadowRadius": 0,
}
}
testID="icon-button-container-inner-layer"
>
<View
collapsable={false}
Expand All @@ -324,6 +344,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
"borderRadius": 20,
"borderWidth": 0,
"elevation": 0,
"flex": undefined,
"height": 40,
"margin": 6,
"overflow": "hidden",
Expand Down Expand Up @@ -440,6 +461,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"alignSelf": undefined,
"bottom": undefined,
"end": undefined,
"flex": undefined,
"left": undefined,
"position": undefined,
"right": undefined,
Expand All @@ -454,11 +476,13 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"top": undefined,
}
}
testID="surface-outer-layer"
>
<View
collapsable={false}
style={
Object {
"flex": undefined,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 0,
Expand All @@ -468,13 +492,15 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"shadowRadius": 0,
}
}
testID="surface-inner-layer"
>
<View
collapsable={false}
style={
Object {
"alignItems": "center",
"backgroundColor": "rgba(255, 251, 254, 1)",
"flex": undefined,
"flexDirection": "row",
"height": 64,
"paddingBottom": undefined,
Expand All @@ -484,6 +510,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"paddingTop": undefined,
}
}
testID="surface"
>
<View
collapsable={false}
Expand All @@ -492,6 +519,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"alignSelf": undefined,
"bottom": undefined,
"end": undefined,
"flex": undefined,
"left": undefined,
"position": undefined,
"right": undefined,
Expand All @@ -506,11 +534,13 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"top": undefined,
}
}
testID="icon-button-container-outer-layer"
>
<View
collapsable={false}
style={
Object {
"flex": undefined,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 0,
Expand All @@ -520,6 +550,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"shadowRadius": 0,
}
}
testID="icon-button-container-inner-layer"
>
<View
collapsable={false}
Expand All @@ -530,6 +561,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"borderRadius": 20,
"borderWidth": 0,
"elevation": 0,
"flex": undefined,
"height": 40,
"margin": 6,
"overflow": "hidden",
Expand Down Expand Up @@ -748,6 +780,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"alignSelf": undefined,
"bottom": undefined,
"end": undefined,
"flex": undefined,
"left": undefined,
"position": undefined,
"right": undefined,
Expand All @@ -762,11 +795,13 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"top": undefined,
}
}
testID="icon-button-container-outer-layer"
>
<View
collapsable={false}
style={
Object {
"flex": undefined,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 0,
Expand All @@ -776,6 +811,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"shadowRadius": 0,
}
}
testID="icon-button-container-inner-layer"
>
<View
collapsable={false}
Expand All @@ -786,6 +822,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
"borderRadius": 20,
"borderWidth": 0,
"elevation": 0,
"flex": undefined,
"height": 40,
"margin": 6,
"overflow": "hidden",
Expand Down
5 changes: 5 additions & 0 deletions src/components/__tests__/Card/__snapshots__/Card.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ exports[`Card renders an outlined card 1`] = `
"alignSelf": undefined,
"bottom": undefined,
"end": undefined,
"flex": undefined,
"left": undefined,
"position": undefined,
"right": undefined,
Expand All @@ -22,11 +23,13 @@ exports[`Card renders an outlined card 1`] = `
"top": undefined,
}
}
testID="card-container-outer-layer"
>
<View
collapsable={false}
style={
Object {
"flex": undefined,
"shadowColor": "#000",
"shadowOffset": Object {
"height": 0,
Expand All @@ -36,6 +39,7 @@ exports[`Card renders an outlined card 1`] = `
"shadowRadius": 0,
}
}
testID="card-container-inner-layer"
>
<View
collapsable={false}
Expand All @@ -44,6 +48,7 @@ exports[`Card renders an outlined card 1`] = `
"backgroundColor": "rgba(255, 251, 254, 1)",
"borderRadius": 12,
"elevation": 1,
"flex": undefined,
}
}
testID="card-container"
Expand Down
Loading

0 comments on commit a7eeb62

Please sign in to comment.