1 | import color from 'color';
|
2 | import { Animated } from 'react-native';
|
3 | import DarkTheme from './DarkTheme';
|
4 |
|
5 | const isAnimatedValue = it => it instanceof Animated.Value;
|
6 |
|
7 | export 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];
|
12 |
|
13 | return elevation.interpolate({
|
14 | inputRange,
|
15 | outputRange: inputRange.map(elevation => {
|
16 | return calculateColor(surfaceColor, elevation);
|
17 | })
|
18 | });
|
19 | }
|
20 |
|
21 |
|
22 | return calculateColor(surfaceColor, elevation);
|
23 | }
|
24 |
|
25 | function 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 |
|
40 | const 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 |
|
\ | No newline at end of file |