116 lines
2.7 KiB
TypeScript
116 lines
2.7 KiB
TypeScript
import React, { memo, useCallback, useMemo } from 'react'
|
|
import { View, StyleSheet } from 'react-native'
|
|
import { LikeButton, LikeButtonProps } from './LikeButton'
|
|
import { FavoriteButton, FavoriteButtonProps } from './FavoriteButton'
|
|
|
|
export interface VideoSocialButtonProps {
|
|
templateId: string
|
|
liked?: boolean
|
|
favorited?: boolean
|
|
likeCount?: number
|
|
favoriteCount?: number
|
|
loading?: boolean
|
|
onLike?: () => void
|
|
onUnlike?: () => void
|
|
onFavorite?: () => void
|
|
onUnfavorite?: () => void
|
|
testID?: string
|
|
}
|
|
|
|
const VideoSocialButtonComponent: React.FC<VideoSocialButtonProps> = ({
|
|
templateId,
|
|
liked = false,
|
|
favorited = false,
|
|
likeCount,
|
|
favoriteCount,
|
|
loading = false,
|
|
onLike,
|
|
onUnlike,
|
|
onFavorite,
|
|
onUnfavorite,
|
|
testID,
|
|
}) => {
|
|
// 处理点赞按钮点击
|
|
const handleLikePress = useCallback(() => {
|
|
if (!loading) {
|
|
if (liked) {
|
|
onUnlike?.()
|
|
} else {
|
|
onLike?.()
|
|
}
|
|
}
|
|
}, [loading, liked, onLike, onUnlike])
|
|
|
|
// 处理收藏按钮点击
|
|
const handleFavoritePress = useCallback(() => {
|
|
if (!loading) {
|
|
if (favorited) {
|
|
onUnfavorite?.()
|
|
} else {
|
|
onFavorite?.()
|
|
}
|
|
}
|
|
}, [loading, favorited, onFavorite, onUnfavorite])
|
|
|
|
// LikeButton 的 props
|
|
const likeButtonProps: LikeButtonProps = useMemo(
|
|
() => ({
|
|
liked,
|
|
loading,
|
|
count: likeCount,
|
|
onPress: handleLikePress,
|
|
testID: testID ? `${testID}-like-button` : undefined,
|
|
}),
|
|
[liked, loading, likeCount, handleLikePress, testID]
|
|
)
|
|
|
|
// FavoriteButton 的 props
|
|
const favoriteButtonProps: FavoriteButtonProps = useMemo(
|
|
() => ({
|
|
favorited,
|
|
loading,
|
|
count: favoriteCount,
|
|
onPress: handleFavoritePress,
|
|
testID: testID ? `${testID}-favorite-button` : undefined,
|
|
}),
|
|
[favorited, loading, favoriteCount, handleFavoritePress, testID]
|
|
)
|
|
|
|
return (
|
|
<View style={styles.container} testID={testID}>
|
|
{/* 点赞按钮 */}
|
|
<View style={styles.button}>
|
|
<LikeButton {...likeButtonProps} />
|
|
</View>
|
|
|
|
{/* 收藏按钮 */}
|
|
<View style={styles.button}>
|
|
<FavoriteButton {...favoriteButtonProps} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export const VideoSocialButton = memo(VideoSocialButtonComponent)
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: 'absolute',
|
|
right: 13,
|
|
bottom: 100,
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: 16,
|
|
},
|
|
button: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: 'rgba(25, 27, 31, 0.8)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(47, 49, 52, 1)',
|
|
},
|
|
})
|