79 lines
1.6 KiB
TypeScript
79 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
ViewStyle,
|
|
StyleProp,
|
|
} from 'react-native'
|
|
import { Swipeable } from 'react-native-gesture-handler'
|
|
|
|
export interface SwipeToDeleteProps {
|
|
children: React.ReactNode
|
|
onDelete: () => void
|
|
enabled?: boolean
|
|
disabled?: boolean
|
|
deleteText?: string
|
|
style?: StyleProp<ViewStyle>
|
|
}
|
|
|
|
export function SwipeToDelete({
|
|
children,
|
|
onDelete,
|
|
enabled = true,
|
|
disabled = false,
|
|
deleteText = '删除',
|
|
style,
|
|
}: SwipeToDeleteProps) {
|
|
const isDisabled = disabled || !enabled
|
|
|
|
const renderRightActions = () => {
|
|
return (
|
|
<TouchableOpacity
|
|
testID="swipe-delete-button"
|
|
accessibilityRole="button"
|
|
accessibilityLabel="删除"
|
|
style={styles.deleteButton}
|
|
onPress={() => {
|
|
if (!isDisabled) {
|
|
onDelete()
|
|
}
|
|
}}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={styles.deleteText}>{deleteText}</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Swipeable
|
|
testID="swipe-container"
|
|
renderRightActions={renderRightActions}
|
|
enabled={!isDisabled}
|
|
overshootRight={false}
|
|
friction={2}
|
|
>
|
|
<View style={style}>{children}</View>
|
|
</Swipeable>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
deleteButton: {
|
|
backgroundColor: '#FF3B30',
|
|
width: 80,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
borderTopRightRadius: 16,
|
|
borderBottomRightRadius: 16,
|
|
},
|
|
deleteText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
})
|