@oxyhq/services
Version:
80 lines (76 loc) • 2.09 kB
JavaScript
;
import { Animated } from 'react-native';
// Simple hex color manipulation without color package
const hexToRgb = hex => {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return [r, g, b];
};
const rgbToHex = (r, g, b) => {
return `#${[r, g, b].map(x => {
const hex = Math.round(x).toString(16);
return hex.length === 1 ? '0' + hex : hex;
}).join('')}`;
};
const mixColors = (color1, color2, ratio) => {
const [r1, g1, b1] = hexToRgb(color1);
const [r2, g2, b2] = hexToRgb(color2);
const r = r1 + (r2 - r1) * ratio;
const g = g1 + (g2 - g1) * ratio;
const b = b1 + (b2 - b1) * ratio;
return rgbToHex(r, g, b);
};
export const isAnimatedValue = it => it instanceof Animated.Value;
export default function overlay(elevation, surfaceColor = '#121212') {
if (isAnimatedValue(elevation)) {
const inputRange = [0, 1, 2, 3, 8, 24];
// @ts-expect-error: TS doesn't seem to refine the type correctly
return elevation.interpolate({
inputRange,
outputRange: inputRange.map(elevation => {
return calculateColor(surfaceColor, elevation);
})
});
}
// @ts-expect-error: TS doesn't seem to refine the type correctly
return calculateColor(surfaceColor, elevation);
}
function calculateColor(surfaceColor, elevation = 1) {
let overlayTransparency;
if (elevation >= 1 && elevation <= 24) {
overlayTransparency = elevationOverlayTransparency[elevation];
} else if (elevation > 24) {
overlayTransparency = elevationOverlayTransparency[24];
} else {
overlayTransparency = elevationOverlayTransparency[1];
}
return mixColors(surfaceColor, '#FFFFFF', overlayTransparency * 0.01);
}
const elevationOverlayTransparency = {
1: 5,
2: 7,
3: 8,
4: 9,
5: 10,
6: 11,
7: 11.5,
8: 12,
9: 12.5,
10: 13,
11: 13.5,
12: 14,
13: 14.25,
14: 14.5,
15: 14.75,
16: 15,
17: 15.12,
18: 15.24,
19: 15.36,
20: 15.48,
21: 15.6,
22: 15.72,
23: 15.84,
24: 16
};
//# sourceMappingURL=overlay.js.map