UNPKG

1.63 kBJavaScriptView Raw
1import color from 'color';
2import { Animated } from 'react-native';
3import DarkTheme from './DarkTheme';
4
5const isAnimatedValue = it => it instanceof Animated.Value;
6
7export default function overlay(elevation) {
8 let surfaceColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DarkTheme.colors.surface;
9
10 if (isAnimatedValue(elevation)) {
11 const inputRange = [0, 1, 2, 3, 8, 24]; // @ts-expect-error: TS doesn't seem to refine the type correctly
12
13 return elevation.interpolate({
14 inputRange,
15 outputRange: inputRange.map(elevation => {
16 return calculateColor(surfaceColor, elevation);
17 })
18 });
19 } // @ts-expect-error: TS doesn't seem to refine the type correctly
20
21
22 return calculateColor(surfaceColor, elevation);
23}
24
25function calculateColor(surfaceColor) {
26 let elevation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
27 let overlayTransparency;
28
29 if (elevation >= 1 && elevation <= 24) {
30 overlayTransparency = elevationOverlayTransparency[elevation];
31 } else if (elevation > 24) {
32 overlayTransparency = elevationOverlayTransparency[24];
33 } else {
34 overlayTransparency = elevationOverlayTransparency[1];
35 }
36
37 return color(surfaceColor).mix(color('white'), overlayTransparency * 0.01).hex();
38}
39
40const elevationOverlayTransparency = {
41 1: 5,
42 2: 7,
43 3: 8,
44 4: 9,
45 5: 10,
46 6: 11,
47 7: 11.5,
48 8: 12,
49 9: 12.5,
50 10: 13,
51 11: 13.5,
52 12: 14,
53 13: 14.25,
54 14: 14.5,
55 15: 14.75,
56 16: 15,
57 17: 15.12,
58 18: 15.24,
59 19: 15.36,
60 20: 15.48,
61 21: 15.6,
62 22: 15.72,
63 23: 15.84,
64 24: 16
65};
66//# sourceMappingURL=overlay.js.map
\No newline at end of file