diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index 707030ea..ab9e261c 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -1,5 +1,12 @@ import React from 'react' import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' +import Animated, { + useSharedValue, + useAnimatedStyle, + withDelay, + withTiming, + interpolate, +} from 'react-native-reanimated' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {UpIcon, UpIconSolid, DownIcon, DownIconSolid} from '../../lib/icons' import {s, colors} from '../../lib/styles' @@ -19,48 +26,123 @@ interface PostCtrlsOpts { } export function PostCtrls(opts: PostCtrlsOpts) { + const interp1 = useSharedValue(0) + const interp2 = useSharedValue(0) + const interp3 = useSharedValue(0) + + const anim1Style = useAnimatedStyle(() => ({ + transform: [{scale: interpolate(interp1.value, [0, 1.0], [1.0, 3.0])}], + opacity: interpolate(interp1.value, [0, 1.0], [1.0, 0.0]), + })) + const anim2Style = useAnimatedStyle(() => ({ + transform: [{scale: interpolate(interp2.value, [0, 1.0], [1.0, 3.0])}], + opacity: interpolate(interp2.value, [0, 1.0], [1.0, 0.0]), + })) + const anim3Style = useAnimatedStyle(() => ({ + transform: [{scale: interpolate(interp3.value, [0, 1.0], [1.0, 3.0])}], + opacity: interpolate(interp3.value, [0, 1.0], [1.0, 0.0]), + })) + + const onPressToggleRepostWrapper = () => { + if (!opts.isReposted) { + interp1.value = withTiming(1, {duration: 300}, () => { + interp1.value = withDelay(100, withTiming(0, {duration: 20})) + }) + } + opts.onPressToggleRepost() + } + const onPressToggleUpvoteWrapper = () => { + if (!opts.isUpvoted) { + interp2.value = withTiming(1, {duration: 300}, () => { + interp2.value = withDelay(100, withTiming(0, {duration: 20})) + }) + } + opts.onPressToggleUpvote() + } + const onPressToggleDownvoteWrapper = () => { + if (!opts.isDownvoted) { + interp3.value = withTiming(1, {duration: 300}, () => { + interp3.value = withDelay(100, withTiming(0, {duration: 20})) + }) + } + opts.onPressToggleDownvote() + } + return ( - - - {opts.replyCount} - - - - - {opts.repostCount} - - - - {opts.isUpvoted ? ( - - ) : ( - - )} - - {opts.upvoteCount} - - - - {opts.isDownvoted ? ( - - ) : ( - - )} - - {opts.downvoteCount} - - + + + + {opts.replyCount} + + + + + + + + + {opts.repostCount} + + + + + + + {opts.isUpvoted ? ( + + ) : ( + + )} + + + {opts.upvoteCount} + + + + + + + {opts.isDownvoted ? ( + + ) : ( + + )} + + + {opts.downvoteCount} + + + ) } @@ -72,24 +154,19 @@ const styles = StyleSheet.create({ ctrl: { flexDirection: 'row', alignItems: 'center', - flex: 1, paddingLeft: 4, paddingRight: 4, }, ctrlIcon: { - marginRight: 5, color: colors.gray5, }, ctrlIconReposted: { - marginRight: 5, color: colors.green3, }, ctrlIconUpvoted: { - marginRight: 5, color: colors.red3, }, ctrlIconDownvoted: { - marginRight: 5, color: colors.blue3, }, })