diff --git a/components/blocks/ui/VideoSocialButton.tsx b/components/blocks/ui/VideoSocialButton.tsx index 13f4ffd..37a685a 100644 --- a/components/blocks/ui/VideoSocialButton.tsx +++ b/components/blocks/ui/VideoSocialButton.tsx @@ -1,5 +1,5 @@ -import React, { memo, useCallback } from 'react' -import { View, StyleSheet, Text, Pressable } from 'react-native' +import React, { memo, useCallback, useState } from 'react' +import { View, StyleSheet, Text, Pressable, ActivityIndicator } from 'react-native' import { Ionicons } from '@expo/vector-icons' export interface VideoSocialButtonProps { @@ -9,10 +9,10 @@ export interface VideoSocialButtonProps { likeCount?: number favoriteCount?: number loading?: boolean - onLike?: () => void - onUnlike?: () => void - onFavorite?: () => void - onUnfavorite?: () => void + onLike?: () => Promise | void + onUnlike?: () => Promise | void + onFavorite?: () => Promise | void + onUnfavorite?: () => Promise | void testID?: string } @@ -29,27 +29,40 @@ const VideoSocialButtonComponent: React.FC = ({ onUnfavorite, testID, }) => { + // 本地 loading 状态,防止重复点击 + const [localLoading, setLocalLoading] = useState(false) + // 处理点赞按钮点击 - const handleLikePress = useCallback(() => { - if (!loading) { + const handleLikePress = useCallback(async () => { + if (loading || localLoading) return + + setLocalLoading(true) + try { if (liked) { - onUnlike?.() + await onUnlike?.() } else { - onLike?.() + await onLike?.() } + } finally { + setLocalLoading(false) } - }, [loading, liked, onLike, onUnlike]) + }, [loading, localLoading, liked, onLike, onUnlike]) // 处理收藏按钮点击 - const handleFavoritePress = useCallback(() => { - if (!loading) { + const handleFavoritePress = useCallback(async () => { + if (loading || localLoading) return + + setLocalLoading(true) + try { if (favorited) { - onUnfavorite?.() + await onUnfavorite?.() } else { - onFavorite?.() + await onFavorite?.() } + } finally { + setLocalLoading(false) } - }, [loading, favorited, onFavorite, onUnfavorite]) + }, [loading, localLoading, favorited, onFavorite, onUnfavorite]) // 格式化数量显示 const formatCount = (count?: number): string => { @@ -63,21 +76,27 @@ const VideoSocialButtonComponent: React.FC = ({ return count.toString() } + const isLoading = loading || localLoading + return ( {/* 点赞按钮 */} - + {isLoading && liked ? ( + + ) : ( + + )} {formatCount(likeCount)} @@ -86,15 +105,19 @@ const VideoSocialButtonComponent: React.FC = ({ - + {isLoading && favorited ? ( + + ) : ( + + )} {formatCount(favoriteCount)}