Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add surface shadows #3089

Merged
merged 18 commits into from
Mar 25, 2022
Merged

feat: add surface shadows #3089

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
febf58b
feat: update v3 themes with new values
Drakeoon Feb 3, 2022
e1b406b
feat: add Surface component changes with new elevation
Drakeoon Feb 4, 2022
5fcc1e1
chore: update types and fix tests after rebase
Drakeoon Feb 15, 2022
58683cc
chore: update themes with elevation props
Drakeoon Feb 15, 2022
0bec8ef
feat: allow elevation to be animated
Drakeoon Mar 3, 2022
d07dd31
fix: fix Button tests
Drakeoon Mar 3, 2022
4374f57
fix: fix iOS build issue
Drakeoon Mar 3, 2022
bcefed7
feat: add ability to animate Surface elevation
Drakeoon Mar 16, 2022
803cace
chore: remove redundant properties from built in themes
Drakeoon Mar 16, 2022
9d6352b
feat: update Button default looks
Drakeoon Mar 16, 2022
1daeece
fix: fix AppbarHeader placement
Drakeoon Mar 16, 2022
45552eb
chore: improve Surface documentation
Drakeoon Mar 17, 2022
0abd46f
fix: disable useNativeDriver to support bg color animation
Drakeoon Mar 17, 2022
7e46fb0
chore: update Surface and built in themes description
Drakeoon Mar 18, 2022
09fbafc
chore: improve places that are using Surface elevation
Drakeoon Mar 19, 2022
ad6f93a
refactor: set elevation level0 as transparent, set native driver false
lukewalczak Mar 20, 2022
260db35
fix: fix Surface transform issues
Drakeoon Mar 23, 2022
25ea2c6
feat: apply small for elevation, correct Surface example
lukewalczak Mar 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: add ability to animate Surface elevation
  • Loading branch information
@Drakeoon
Drakeoon committed Mar 18, 2022
commit bcefed7f8dca07e6787bc251ea4b8d3c550b33e5
186 changes: 116 additions & 70 deletions src/components/Surface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import shadow from '../styles/shadow';
import { useTheme } from '../core/theming';
import overlay, { isAnimatedValue } from '../styles/overlay';
import type { MD3Colors, MD3Elevation, Theme } from '../types';
import type { MD3Elevation, Theme } from '../types';

type MD2Props = React.ComponentPropsWithRef<typeof View> & {
/**
Expand Down Expand Up @@ -93,46 +93,6 @@ const MD2Surface = ({ style, theme: overrideTheme, ...rest }: MD2Props) => {
);
};

const getIOSShadows = (
elevation: MD3Elevation | Animated.Value,
colors: MD3Colors
) => {
const shadows = (() => {
if (isAnimatedValue(elevation)) {
return colors.elevationShadows?.[
`level${elevation as unknown as MD3Elevation}`
]?.map((shadow) => shadow.split(' '));
}

return colors.elevationShadows?.[`level${elevation}`]?.map((shadow) =>
shadow.split(' ')
);
})();

return shadows?.map((shadowProps: string[]) => {
if (shadowProps.length < 4) {
return;
}

const [width, height, size, ...colorArr] = shadowProps;

const shadowWidth = parseInt(width?.replace('px', ''));
const shadowHeight = parseInt(height?.replace('px', ''));
const shadowRadius = parseInt(size?.replace('px', ''));
const shadowColor = colorArr.join('');

return {
shadowColor,
shadowOffset: {
width: shadowWidth,
height: shadowHeight + 0.5,
},
shadowOpacity: 1,
shadowRadius: shadowRadius,
};
});
};

const Surface = ({
elevation = 1,
children,
Expand All @@ -151,57 +111,143 @@ const Surface = ({

const { colors } = theme;

const elevationStyles = [
{ elevation: 0 },
{ elevation: 3 },
{ elevation: 6 },
{ elevation: 9 },
{ elevation: 12 },
{ elevation: 15 },
];
const inputRange = [0, 1, 2, 3, 4, 5];

const sharedStyle = (() => {
const backgroundColor = (() => {
if (isAnimatedValue(elevation)) {
const inputRange = [0, 1, 2, 3, 4, 5];

const backgroundColor = elevation.interpolate({
return elevation.interpolate({
inputRange,
outputRange: inputRange.map((elevation) => {
return colors.elevation?.[`level${elevation as MD3Elevation}`];
}),
});

const elevationAndroid = elevation.interpolate({
inputRange,
outputRange: elevationStyles.map(({ elevation }) => elevation),
});

return [{ backgroundColor, elevation: elevationAndroid }, style];
}

const backgroundColor = colors.elevation?.[`level${elevation}`];

return [{ backgroundColor }, style];
return colors.elevation?.[`level${elevation}`];
})();

const sharedStyle = [{ backgroundColor }, style];

if (Platform.OS === 'android') {
const elevationLevels = [
[0, 1, 2, 3, 3, 3],
[0, 3, 4, 6, 8, 10],
];

const getElevationAndroid = (layer: 0 | 1) => {
const elevationLevel = elevationLevels[layer];

if (isAnimatedValue(elevation)) {
return elevation.interpolate({
inputRange,
outputRange: elevationLevel,
});
}

return elevationLevel[elevation];
};

const { margin, padding, transform, borderRadius } = StyleSheet.flatten(
style
) as ViewStyle;

const clearSpacing = {
margin: 0,
padding: 0,
};

const outerLayerStyles = { margin, padding, transform, borderRadius };

return (
<Animated.View {...props} style={sharedStyle}>
{children}
<Animated.View
style={[
{
elevation: getElevationAndroid(0),
backgroundColor,
},
outerLayerStyles,
]}
>
<Animated.View
style={[
{ elevation: getElevationAndroid(1), borderRadius },
sharedStyle,
clearSpacing,
]}
>
{children}
</Animated.View>
</Animated.View>
);
}

const iOSShadowOutputRanges = [
{
shadowOpacity: 0.15,
height: [0, 1, 2, 4, 6, 8],
shadowRadius: [0, 3, 6, 8, 10, 12],
},
{
shadowOpacity: 0.3,
height: [0, 1, 1, 1, 2, 4],
shadowRadius: [0, 1, 2, 3, 3, 4],
},
];

const shadowColor = '#000';

if (isAnimatedValue(elevation)) {
const inputRange = [0, 1, 2, 3, 4, 5];

const getStyleForAnimatedShadowLayer = (layer: 0 | 1) => {
return {
shadowColor,
shadowOpacity: iOSShadowOutputRanges[layer].shadowOpacity,
shadowOffset: {
width: 0,
height: elevation.interpolate({
inputRange,
outputRange: iOSShadowOutputRanges[layer].height,
}),
},
shadowRadius: elevation.interpolate({
inputRange,
outputRange: iOSShadowOutputRanges[layer].shadowRadius,
}),
};
};

return (
<Animated.View style={getStyleForAnimatedShadowLayer(0)}>
<Animated.View style={getStyleForAnimatedShadowLayer(1)}>
<Animated.View {...props} style={sharedStyle}>
{children}
</Animated.View>
</Animated.View>
</Animated.View>
);
}

const shadowStyles = getIOSShadows(elevation, colors);
const getStyleForShadowLayer = (layer: 0 | 1) => {
return {
shadowColor,
shadowOpacity: iOSShadowOutputRanges[layer].shadowOpacity,
shadowOffset: {
width: 0,
height: iOSShadowOutputRanges[layer].height[elevation],
},
shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
};
};

return (
<View style={shadowStyles?.[0]}>
<View style={shadowStyles?.[1]}>
<Animated.View style={getStyleForShadowLayer(0)}>
<Animated.View style={getStyleForShadowLayer(1)}>
<Animated.View {...props} style={sharedStyle}>
{children}
</Animated.View>
</View>
</View>
</Animated.View>
</Animated.View>
);
};

Expand Down