2022-10-05 01:55:24 -03:00
|
|
|
import { useDerivedValue, interpolate } from 'react-native-reanimated';
|
|
|
|
|
2022-06-28 22:57:14 +05:30
|
|
|
// Generic Worklets
|
|
|
|
|
2023-01-23 15:55:24 +05:30
|
|
|
// 1. kebab-case styles are not working for worklets
|
|
|
|
// so we have to convert kebab case styles into camel case styles
|
|
|
|
// 2. remove keys with nil value, else useAnimatedStyle will throw an error
|
|
|
|
// https://github.com/status-im/status-mobile/issues/14756
|
2022-06-28 22:57:14 +05:30
|
|
|
export function applyAnimationsToStyle(animations, style) {
|
|
|
|
return function() {
|
|
|
|
'worklet'
|
2023-01-19 16:46:05 +04:00
|
|
|
|
2022-06-28 22:57:14 +05:30
|
|
|
var animatedStyle = {}
|
2023-01-19 16:46:05 +04:00
|
|
|
|
2023-01-23 15:55:24 +05:30
|
|
|
// Normal Style
|
|
|
|
for (var key in style) {
|
|
|
|
if (key == "transform") {
|
|
|
|
var transforms = style[key];
|
|
|
|
var filteredTransforms = []
|
|
|
|
|
|
|
|
for (var transform of transforms) {
|
|
|
|
var transformKey = Object.keys(transform)[0];
|
|
|
|
var transformValue = transform[transformKey];
|
|
|
|
if(transformValue !== null) {
|
|
|
|
filteredTransforms.push(
|
|
|
|
{[transformKey.replace(/-./g, x=>x[1].toUpperCase())]: transformValue}
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
animatedStyle[key] = filteredTransforms;
|
|
|
|
} else {
|
|
|
|
var value = style[key];
|
|
|
|
if (value !== null) {
|
|
|
|
animatedStyle[key.replace(/-./g, x=>x[1].toUpperCase())] = value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Animations
|
2022-06-28 22:57:14 +05:30
|
|
|
for (var key in animations) {
|
|
|
|
if (key == "transform") {
|
|
|
|
var transforms = animations[key];
|
|
|
|
var animatedTransforms = []
|
2023-01-19 16:46:05 +04:00
|
|
|
|
2022-06-28 22:57:14 +05:30
|
|
|
for (var transform of transforms) {
|
|
|
|
var transformKey = Object.keys(transform)[0];
|
2023-01-23 15:55:24 +05:30
|
|
|
var transformValue = transform[transformKey].value;
|
|
|
|
if (transformValue !== null) {
|
|
|
|
animatedTransforms.push(
|
|
|
|
{[transformKey.replace(/-./g, x=>x[1].toUpperCase())]: transformValue}
|
|
|
|
);
|
|
|
|
}
|
2022-06-28 22:57:14 +05:30
|
|
|
}
|
2023-01-19 16:46:05 +04:00
|
|
|
|
2022-06-28 22:57:14 +05:30
|
|
|
animatedStyle[key] = animatedTransforms;
|
|
|
|
} else {
|
2023-01-23 15:55:24 +05:30
|
|
|
var animatedValue = animations[key].value;
|
|
|
|
if (animatedValue !== null) {
|
|
|
|
animatedStyle[key.replace(/-./g, x=>x[1].toUpperCase())] = animatedValue;
|
|
|
|
}
|
2022-06-28 22:57:14 +05:30
|
|
|
}
|
|
|
|
}
|
2023-01-19 16:46:05 +04:00
|
|
|
|
2023-01-23 15:55:24 +05:30
|
|
|
return animatedStyle;
|
2022-06-28 22:57:14 +05:30
|
|
|
};
|
|
|
|
};
|
2022-10-05 01:55:24 -03:00
|
|
|
|
2023-01-19 16:46:05 +04:00
|
|
|
export function interpolateValue(sharedValue, inputRange, outputRange, extrapolation) {
|
2022-10-05 01:55:24 -03:00
|
|
|
return useDerivedValue(
|
|
|
|
function () {
|
|
|
|
'worklet'
|
2023-01-19 16:46:05 +04:00
|
|
|
return interpolate(sharedValue.value, inputRange, outputRange, extrapolation);
|
2022-10-05 01:55:24 -03:00
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|