diff options
Diffstat (limited to 'src/view/com/util/PostCtrls.tsx')
-rw-r--r-- | src/view/com/util/PostCtrls.tsx | 63 |
1 files changed, 11 insertions, 52 deletions
diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index a3d2085e9..144351d85 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -8,27 +8,23 @@ import Animated, { interpolate, } from 'react-native-reanimated' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UpIcon, UpIconSolid, DownIcon, DownIconSolid} from '../../lib/icons' +import {UpIcon, UpIconSolid} from '../../lib/icons' import {s, colors} from '../../lib/styles' interface PostCtrlsOpts { replyCount: number repostCount: number upvoteCount: number - downvoteCount: number isReposted: boolean isUpvoted: boolean - isDownvoted: boolean onPressReply: () => void onPressToggleRepost: () => void onPressToggleUpvote: () => void - onPressToggleDownvote: () => void } 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])}], @@ -38,10 +34,6 @@ export function PostCtrls(opts: PostCtrlsOpts) { 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) { @@ -59,14 +51,6 @@ export function PostCtrls(opts: PostCtrlsOpts) { } 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}> @@ -75,9 +59,9 @@ export function PostCtrls(opts: PostCtrlsOpts) { <FontAwesomeIcon style={styles.ctrlIcon} icon={['far', 'comment']} - size={14} + size={16} /> - <Text style={[s.gray5, s.ml5, s.f13]}>{opts.replyCount}</Text> + <Text style={[s.gray5, s.ml5, s.f17]}>{opts.replyCount}</Text> </TouchableOpacity> </View> <View style={s.flex1}> @@ -90,14 +74,14 @@ export function PostCtrls(opts: PostCtrlsOpts) { opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon } icon="retweet" - size={18} + size={20} /> </Animated.View> <Text style={ opts.isReposted - ? [s.bold, s.green3, s.f13, s.ml5] - : [s.gray5, s.f13, s.ml5] + ? [s.bold, s.green3, s.f17, s.ml5] + : [s.gray5, s.f17, s.ml5] }> {opts.repostCount} </Text> @@ -109,42 +93,22 @@ export function PostCtrls(opts: PostCtrlsOpts) { onPress={onPressToggleUpvoteWrapper}> <Animated.View style={anim2Style}> {opts.isUpvoted ? ( - <UpIconSolid style={styles.ctrlIconUpvoted} size={18} /> + <UpIconSolid style={[styles.ctrlIconUpvoted]} size={19} /> ) : ( - <UpIcon style={styles.ctrlIcon} size={18} /> + <UpIcon style={[styles.ctrlIcon]} size={20} strokeWidth={1.5} /> )} </Animated.View> <Text style={ opts.isUpvoted - ? [s.bold, s.red3, s.f13, s.ml5] - : [s.gray5, s.f13, s.ml5] + ? [s.bold, s.red3, s.f17, s.ml5] + : [s.gray5, s.f17, 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.gray5, s.f13, s.ml5] - }> - {opts.downvoteCount} - </Text> - </TouchableOpacity> - </View> + <View style={s.flex1}></View> </View> ) } @@ -152,12 +116,10 @@ export function PostCtrls(opts: PostCtrlsOpts) { const styles = StyleSheet.create({ ctrls: { flexDirection: 'row', - paddingRight: 20, }, ctrl: { flexDirection: 'row', alignItems: 'center', - paddingLeft: 4, paddingRight: 4, }, ctrlIcon: { @@ -169,7 +131,4 @@ const styles = StyleSheet.create({ ctrlIconUpvoted: { color: colors.red3, }, - ctrlIconDownvoted: { - color: colors.blue3, - }, }) |