[FIX] Reviwed comments on the RP
This commit is contained in:
mathysPaul
@@ -5,132 +5,147 @@ type StyleObject = Record<string, any>;
|
||||
type InterpolatedStyleObject = Record<string, Animated.AnimatedInterpolation<any>>;
|
||||
|
||||
interface InteractiveCCProps {
|
||||
defaultStyle: StyleObject;
|
||||
hoverStyle: StyleObject;
|
||||
pressStyle: StyleObject;
|
||||
duration?: number;
|
||||
children?: React.ReactNode;
|
||||
onPress?: () => void | Promise<void>;
|
||||
isDisabled?: boolean;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
styleContainer?: StyleProp<ViewStyle>;
|
||||
defaultStyle: StyleObject;
|
||||
hoverStyle: StyleObject;
|
||||
pressStyle: StyleObject;
|
||||
duration?: number;
|
||||
children?: React.ReactNode;
|
||||
onPress?: () => void | Promise<void>;
|
||||
isDisabled?: boolean;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
styleContainer?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
const InteractiveCC: React.FC<InteractiveCCProps> = ({ defaultStyle, hoverStyle, pressStyle, children, onPress, isDisabled, style, styleContainer, duration=250 }) => {
|
||||
const animatedValues = useRef<Record<string, Animated.Value>>({}).current;
|
||||
const InteractiveCC: React.FC<InteractiveCCProps> = ({
|
||||
defaultStyle,
|
||||
hoverStyle,
|
||||
pressStyle,
|
||||
children,
|
||||
onPress,
|
||||
isDisabled,
|
||||
style,
|
||||
styleContainer,
|
||||
duration = 250,
|
||||
}) => {
|
||||
const animatedValues = useRef<Record<string, Animated.Value>>({}).current;
|
||||
|
||||
const extractTransformKeys = (styleObject: StyleObject) => {
|
||||
const transformKeys = styleObject.transform ? styleObject.transform.map((t: any) => Object.keys(t)[0]) : [];
|
||||
return transformKeys;
|
||||
};
|
||||
const extractTransformKeys = (styleObject: StyleObject) => {
|
||||
const transformKeys = styleObject.transform
|
||||
? styleObject.transform.map((t: any) => Object.keys(t)[0])
|
||||
: [];
|
||||
return transformKeys;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Initialisez les valeurs animées pour les propriétés de style non-transform
|
||||
const allStyleKeys = new Set([
|
||||
...Object.keys(defaultStyle),
|
||||
...Object.keys(hoverStyle),
|
||||
...Object.keys(pressStyle),
|
||||
]);
|
||||
useEffect(() => {
|
||||
// Initialisez les valeurs animées pour les propriétés de style non-transform
|
||||
const allStyleKeys = new Set([
|
||||
...Object.keys(defaultStyle),
|
||||
...Object.keys(hoverStyle),
|
||||
...Object.keys(pressStyle),
|
||||
]);
|
||||
|
||||
allStyleKeys.forEach(key => {
|
||||
if (!animatedValues[key]) {
|
||||
animatedValues[key] = new Animated.Value(0);
|
||||
}
|
||||
});
|
||||
// Initialisez les valeurs animées pour les propriétés de style transform
|
||||
const allTransformKeys = new Set([
|
||||
...extractTransformKeys(defaultStyle),
|
||||
...extractTransformKeys(hoverStyle),
|
||||
...extractTransformKeys(pressStyle),
|
||||
]);
|
||||
allStyleKeys.forEach((key) => {
|
||||
if (!animatedValues[key]) {
|
||||
animatedValues[key] = new Animated.Value(0);
|
||||
}
|
||||
});
|
||||
// Initialisez les valeurs animées pour les propriétés de style transform
|
||||
const allTransformKeys = new Set([
|
||||
...extractTransformKeys(defaultStyle),
|
||||
...extractTransformKeys(hoverStyle),
|
||||
...extractTransformKeys(pressStyle),
|
||||
]);
|
||||
|
||||
allTransformKeys.forEach(key => {
|
||||
if (!animatedValues[key]) {
|
||||
animatedValues[key] = new Animated.Value(0);
|
||||
}
|
||||
});
|
||||
}, [defaultStyle, hoverStyle, pressStyle]);
|
||||
allTransformKeys.forEach((key) => {
|
||||
if (!animatedValues[key]) {
|
||||
animatedValues[key] = new Animated.Value(0);
|
||||
}
|
||||
});
|
||||
}, [defaultStyle, hoverStyle, pressStyle]);
|
||||
|
||||
const getTransformValue = (key: string, style: StyleObject) => {
|
||||
const transformObject = style.transform?.find((t: any) => t.hasOwnProperty(key));
|
||||
return transformObject ? transformObject[key] : 0;
|
||||
};
|
||||
const getTransformValue = (key: string, style: StyleObject) => {
|
||||
const transformObject = style.transform?.find((t: any) => t.hasOwnProperty(key));
|
||||
return transformObject ? transformObject[key] : 0;
|
||||
};
|
||||
|
||||
const interpolateStyle = (stateStyle: StyleObject, stateValue: number): InterpolatedStyleObject => {
|
||||
const interpolatedStyle: InterpolatedStyleObject = { ...stateStyle };
|
||||
const transform: any = [];
|
||||
const interpolateStyle = (
|
||||
stateStyle: StyleObject,
|
||||
stateValue: number
|
||||
): InterpolatedStyleObject => {
|
||||
const interpolatedStyle: InterpolatedStyleObject = { ...stateStyle };
|
||||
const transform: any = [];
|
||||
|
||||
Object.keys(animatedValues).forEach(key => {
|
||||
if (stateStyle.transform?.some((t: any) => t.hasOwnProperty(key))) {
|
||||
// Interpolation des transformations
|
||||
const defaultValue = getTransformValue(key, defaultStyle);
|
||||
const hoverValue = getTransformValue(key, hoverStyle);
|
||||
const pressValue = getTransformValue(key, pressStyle);
|
||||
Object.keys(animatedValues).forEach((key) => {
|
||||
if (stateStyle.transform?.some((t: any) => t.hasOwnProperty(key))) {
|
||||
// Interpolation des transformations
|
||||
const defaultValue = getTransformValue(key, defaultStyle);
|
||||
const hoverValue = getTransformValue(key, hoverStyle);
|
||||
const pressValue = getTransformValue(key, pressStyle);
|
||||
|
||||
const interpolated = animatedValues[key].interpolate({
|
||||
inputRange: [0, 1, 2],
|
||||
outputRange: [defaultValue, hoverValue, pressValue],
|
||||
});
|
||||
const interpolated = animatedValues[key].interpolate({
|
||||
inputRange: [0, 1, 2],
|
||||
outputRange: [defaultValue, hoverValue, pressValue],
|
||||
});
|
||||
|
||||
transform.push({ [key]: interpolated });
|
||||
} else if (stateStyle[key]) {
|
||||
// Interpolation des autres styles
|
||||
const defaultValue = defaultStyle[key] || 0;
|
||||
const hoverValue = hoverStyle[key] !== undefined ? hoverStyle[key] : defaultValue;
|
||||
const pressValue = pressStyle[key] !== undefined ? pressStyle[key] : defaultValue;
|
||||
transform.push({ [key]: interpolated });
|
||||
} else if (stateStyle[key]) {
|
||||
// Interpolation des autres styles
|
||||
const defaultValue = defaultStyle[key] || 0;
|
||||
const hoverValue = hoverStyle[key] !== undefined ? hoverStyle[key] : defaultValue;
|
||||
const pressValue = pressStyle[key] !== undefined ? pressStyle[key] : defaultValue;
|
||||
|
||||
interpolatedStyle[key] = animatedValues[key].interpolate({
|
||||
inputRange: [0, 1, 2],
|
||||
outputRange: [defaultValue, hoverValue, pressValue],
|
||||
});
|
||||
}
|
||||
});
|
||||
interpolatedStyle[key] = animatedValues[key].interpolate({
|
||||
inputRange: [0, 1, 2],
|
||||
outputRange: [defaultValue, hoverValue, pressValue],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
interpolatedStyle.transform = transform;
|
||||
return interpolatedStyle;
|
||||
};
|
||||
interpolatedStyle.transform = transform;
|
||||
return interpolatedStyle;
|
||||
};
|
||||
|
||||
const animateToState = (stateValue: number) => {
|
||||
Object.keys(animatedValues).forEach(key => {
|
||||
Animated.timing(animatedValues[key], {
|
||||
toValue: stateValue,
|
||||
duration: duration,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
});
|
||||
};
|
||||
const animateToState = (stateValue: number) => {
|
||||
Object.keys(animatedValues).forEach((key) => {
|
||||
Animated.timing(animatedValues[key], {
|
||||
toValue: stateValue,
|
||||
duration: duration,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
});
|
||||
};
|
||||
|
||||
const handleMouseEnter = () => animateToState(1);
|
||||
const handlePressIn = () => animateToState(2);
|
||||
const handlePressOut = () => {
|
||||
animateToState(1);
|
||||
if (onPress && !isDisabled) {
|
||||
onPress();
|
||||
}
|
||||
};
|
||||
const handleMouseLeave = () => animateToState(0);
|
||||
const handleMouseEnter = () => animateToState(1);
|
||||
const handlePressIn = () => animateToState(2);
|
||||
const handlePressOut = () => {
|
||||
animateToState(1);
|
||||
if (onPress && !isDisabled) {
|
||||
onPress();
|
||||
}
|
||||
};
|
||||
const handleMouseLeave = () => animateToState(0);
|
||||
|
||||
const animatedStyle = StyleSheet.flatten([
|
||||
styleContainer,
|
||||
interpolateStyle(defaultStyle, 0),
|
||||
interpolateStyle(hoverStyle, 1),
|
||||
interpolateStyle(pressStyle, 2),
|
||||
]);
|
||||
const animatedStyle = StyleSheet.flatten([
|
||||
styleContainer,
|
||||
interpolateStyle(defaultStyle, 0),
|
||||
interpolateStyle(hoverStyle, 1),
|
||||
interpolateStyle(pressStyle, 2),
|
||||
]);
|
||||
|
||||
return (
|
||||
<Animated.View style={animatedStyle}>
|
||||
<Pressable
|
||||
style={[styles.content, style]}
|
||||
focusable={false}
|
||||
onHoverIn={handleMouseEnter}
|
||||
onPressIn={handlePressIn}
|
||||
onPressOut={handlePressOut}
|
||||
onHoverOut={handleMouseLeave}
|
||||
>
|
||||
{children}
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
);
|
||||
return (
|
||||
<Animated.View style={animatedStyle}>
|
||||
<Pressable
|
||||
style={[styles.content, style]}
|
||||
focusable={false}
|
||||
onHoverIn={handleMouseEnter}
|
||||
onPressIn={handlePressIn}
|
||||
onPressOut={handlePressOut}
|
||||
onHoverOut={handleMouseLeave}
|
||||
>
|
||||
{children}
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
||||
Reference in New Issue
Block a user