zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Add animations to post controls

zio/stable
Paul Frazee 2022-11-16 10:58:39 -06:00
parent 64d095a96b
commit dcf6a49715
1 changed files with 122 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/view/com/util/PostCtrls.tsx
View File

@ -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<number>(0)
const interp2 = useSharedValue<number>(0)
const interp3 = useSharedValue<number>(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 (
<View style={styles.ctrls}>
<TouchableOpacity style={styles.ctrl} onPress={opts.onPressReply}>
<FontAwesomeIcon
style={styles.ctrlIcon}
icon={['far', 'comment']}
size={14}
/>
<Text style={s.f13}>{opts.replyCount}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={opts.onPressToggleRepost}>
<FontAwesomeIcon
style={opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon}
icon="retweet"
size={18}
/>
<Text style={opts.isReposted ? [s.bold, s.green3, s.f13] : s.f13}>
{opts.repostCount}
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={opts.onPressToggleUpvote}>
{opts.isUpvoted ? (
<UpIconSolid style={styles.ctrlIconUpvoted} size={18} />
) : (
<UpIcon style={styles.ctrlIcon} size={18} />
)}
<Text style={opts.isUpvoted ? [s.bold, s.red3, s.f13] : s.f13}>
{opts.upvoteCount}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.ctrl}
onPress={opts.onPressToggleDownvote}>
{opts.isDownvoted ? (
<DownIconSolid style={styles.ctrlIconDownvoted} size={18} />
) : (
<DownIcon style={styles.ctrlIcon} size={18} />
)}
<Text style={opts.isDownvoted ? [s.bold, s.blue3, s.f13] : s.f13}>
{opts.downvoteCount}
</Text>
</TouchableOpacity>
<View style={s.flex1}>
<TouchableOpacity style={styles.ctrl} onPress={opts.onPressReply}>
<FontAwesomeIcon
style={styles.ctrlIcon}
icon={['far', 'comment']}
size={14}
/>
<Text style={s.f13}>{opts.replyCount}</Text>
</TouchableOpacity>
</View>
<View style={s.flex1}>
<TouchableOpacity
onPress={onPressToggleRepostWrapper}
style={styles.ctrl}>
<Animated.View style={anim1Style}>
<FontAwesomeIcon
style={
opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon
}
icon="retweet"
size={18}
/>
</Animated.View>
<Text
style={
opts.isReposted
? [s.bold, s.green3, s.f13, s.ml5]
: [s.f13, s.ml5]
}>
{opts.repostCount}
</Text>
</TouchableOpacity>
</View>
<View style={s.flex1}>
<TouchableOpacity
style={styles.ctrl}
onPress={onPressToggleUpvoteWrapper}>
<Animated.View style={anim2Style}>
{opts.isUpvoted ? (
<UpIconSolid style={styles.ctrlIconUpvoted} size={18} />
) : (
<UpIcon style={styles.ctrlIcon} size={18} />
)}
</Animated.View>
<Text
style={
opts.isUpvoted ? [s.bold, s.red3, s.f13, s.ml5] : [s.f13, s.ml5]
}>
{opts.upvoteCount}
</Text>
</TouchableOpacity>
</View>
<View style={s.flex1}>
<TouchableOpacity
style={styles.ctrl}
onPress={onPressToggleDownvoteWrapper}>
<Animated.View style={anim3Style}>
{opts.isDownvoted ? (
<DownIconSolid style={styles.ctrlIconDownvoted} size={18} />
) : (
<DownIcon style={styles.ctrlIcon} size={18} />
)}
</Animated.View>
<Text
style={
opts.isDownvoted
? [s.bold, s.blue3, s.f13, s.ml5]
: [s.f13, s.ml5]
}>
{opts.downvoteCount}
</Text>
</TouchableOpacity>
</View>
</View>
)
}
@ -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,
},
})