chore: remove IDE config files and improve web platform compatibility
- Remove `.idea/` IntelliJ configuration files from version control - Add web-specific touch handling for swipeable message bubbles and schedule screen - Fix CSS touch-action rules for better web scrolling behavior - Add nestedScrollEnabled to ScrollViews for proper gesture handling - Improve null safety checks in profile screens - Add horizontal ScrollView wrapper for notification filter tags - Add hasHeader prop support for embedded profile screens
This commit is contained in:
@@ -4,13 +4,12 @@
|
||||
*/
|
||||
|
||||
import React, { useRef, useCallback } from 'react';
|
||||
import { View, StyleSheet, Animated } from 'react-native';
|
||||
import { View, StyleSheet, Animated, Platform } from 'react-native';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { PanGestureHandler, State } from 'react-native-gesture-handler';
|
||||
import * as Haptics from 'expo-haptics';
|
||||
import { useAppColors } from '../../../../theme';
|
||||
|
||||
// 滑动阈值
|
||||
const SWIPE_THRESHOLD = 30;
|
||||
const MAX_SWIPE_DISTANCE = 50;
|
||||
|
||||
@@ -31,45 +30,39 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
|
||||
const translateX = useRef(new Animated.Value(0)).current;
|
||||
const hasTriggeredRef = useRef(false);
|
||||
|
||||
// 处理手势事件 - 使用原生驱动,不干预值
|
||||
const onGestureEvent = Animated.event(
|
||||
[{ nativeEvent: { translationX: translateX } }],
|
||||
{ useNativeDriver: true }
|
||||
);
|
||||
|
||||
// 处理手势状态变化
|
||||
const onHandlerStateChange = useCallback((event: any) => {
|
||||
const { nativeEvent } = event;
|
||||
|
||||
if (nativeEvent.state === State.END) {
|
||||
const translationX = nativeEvent.translationX;
|
||||
|
||||
// 只允许特定方向的滑动
|
||||
const shouldTrigger = isMe
|
||||
? translationX < -SWIPE_THRESHOLD // 自己消息只能向左滑
|
||||
: translationX > SWIPE_THRESHOLD; // 对方消息只能向右滑
|
||||
? translationX < -SWIPE_THRESHOLD
|
||||
: translationX > SWIPE_THRESHOLD;
|
||||
|
||||
if (shouldTrigger && !hasTriggeredRef.current) {
|
||||
hasTriggeredRef.current = true;
|
||||
|
||||
// 触觉反馈
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
if (Platform.OS !== 'web') {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
||||
}
|
||||
|
||||
// 立即触发回复
|
||||
onReply();
|
||||
|
||||
// 重置标记
|
||||
setTimeout(() => {
|
||||
hasTriggeredRef.current = false;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 立即回到原位
|
||||
translateX.setValue(0);
|
||||
}
|
||||
}, [isMe, onReply]);
|
||||
|
||||
// 计算回复图标的透明度 - 只在允许的方向显示
|
||||
const iconOpacity = translateX.interpolate({
|
||||
inputRange: isMe
|
||||
? [-MAX_SWIPE_DISTANCE, -SWIPE_THRESHOLD, 0, 10]
|
||||
@@ -78,7 +71,6 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
|
||||
extrapolate: 'clamp',
|
||||
});
|
||||
|
||||
// 计算消息的位移 - 限制在允许的方向
|
||||
const clampedTranslateX = translateX.interpolate({
|
||||
inputRange: isMe
|
||||
? [-MAX_SWIPE_DISTANCE - 10, -MAX_SWIPE_DISTANCE, 0, 10]
|
||||
@@ -89,21 +81,117 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
|
||||
extrapolate: 'clamp',
|
||||
});
|
||||
|
||||
// 如果禁用手势,直接返回子元素
|
||||
const webTouchStartRef = useRef<{ x: number; time: number } | null>(null);
|
||||
const webTranslateXRef = useRef(new Animated.Value(0)).current;
|
||||
const webIconOpacity = webTranslateXRef.interpolate({
|
||||
inputRange: isMe
|
||||
? [-MAX_SWIPE_DISTANCE, -SWIPE_THRESHOLD, 0, 10]
|
||||
: [-10, 0, SWIPE_THRESHOLD, MAX_SWIPE_DISTANCE],
|
||||
outputRange: isMe ? [1, 0.8, 0, 0] : [0, 0, 0.8, 1],
|
||||
extrapolate: 'clamp',
|
||||
});
|
||||
const webClampedTranslateX = webTranslateXRef.interpolate({
|
||||
inputRange: isMe
|
||||
? [-MAX_SWIPE_DISTANCE - 10, -MAX_SWIPE_DISTANCE, 0, 10]
|
||||
: [-10, 0, MAX_SWIPE_DISTANCE, MAX_SWIPE_DISTANCE + 10],
|
||||
outputRange: isMe
|
||||
? [-MAX_SWIPE_DISTANCE, -MAX_SWIPE_DISTANCE, 0, 0]
|
||||
: [0, 0, MAX_SWIPE_DISTANCE, MAX_SWIPE_DISTANCE],
|
||||
extrapolate: 'clamp',
|
||||
});
|
||||
const webLastTouchRef = useRef<{ x: number } | null>(null);
|
||||
|
||||
const handleWebTouchStart = useCallback((e: any) => {
|
||||
const touch = e.nativeEvent?.touches?.[0] || e.nativeEvent;
|
||||
if (touch && touch.pageX !== undefined) {
|
||||
webTouchStartRef.current = { x: touch.pageX, time: Date.now() };
|
||||
webLastTouchRef.current = { x: touch.pageX };
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleWebTouchMove = useCallback((e: any) => {
|
||||
const start = webTouchStartRef.current;
|
||||
if (!start) return;
|
||||
const touch = e.nativeEvent?.touches?.[0] || e.nativeEvent;
|
||||
if (!touch || touch.pageX === undefined) return;
|
||||
const dx = touch.pageX - start.x;
|
||||
const allowed = isMe ? dx < 5 : dx > -5;
|
||||
if (allowed) {
|
||||
webTranslateXRef.setValue(dx);
|
||||
webLastTouchRef.current = { x: touch.pageX };
|
||||
}
|
||||
}, [isMe]);
|
||||
|
||||
const handleWebTouchEnd = useCallback((e: any) => {
|
||||
const start = webTouchStartRef.current;
|
||||
if (!start) return;
|
||||
webTouchStartRef.current = null;
|
||||
const touch = e.nativeEvent?.changedTouches?.[0] || e.nativeEvent;
|
||||
if (!touch || touch.pageX === undefined) {
|
||||
Animated.spring(webTranslateXRef, { toValue: 0, useNativeDriver: true }).start();
|
||||
return;
|
||||
}
|
||||
const dx = touch.pageX - start.x;
|
||||
const shouldTrigger = isMe
|
||||
? dx < -SWIPE_THRESHOLD
|
||||
: dx > SWIPE_THRESHOLD;
|
||||
|
||||
if (shouldTrigger && !hasTriggeredRef.current) {
|
||||
hasTriggeredRef.current = true;
|
||||
onReply();
|
||||
setTimeout(() => {
|
||||
hasTriggeredRef.current = false;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
Animated.spring(webTranslateXRef, { toValue: 0, useNativeDriver: true }).start();
|
||||
}, [isMe, onReply]);
|
||||
|
||||
if (!enabled) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
if (Platform.OS === 'web') {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.replyIconContainer,
|
||||
isMe ? styles.replyIconLeft : styles.replyIconRight,
|
||||
{ opacity: webIconOpacity },
|
||||
]}
|
||||
>
|
||||
<MaterialCommunityIcons
|
||||
name="reply"
|
||||
size={20}
|
||||
color={colors.primary.main}
|
||||
/>
|
||||
</Animated.View>
|
||||
<View
|
||||
data-gesture-area={true}
|
||||
onTouchStart={handleWebTouchStart}
|
||||
onTouchMove={handleWebTouchMove}
|
||||
onTouchEnd={handleWebTouchEnd}
|
||||
>
|
||||
<Animated.View
|
||||
style={{
|
||||
transform: [{ translateX: webClampedTranslateX }],
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Animated.View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* 回复图标 - 在消息后面 */}
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.replyIconContainer,
|
||||
isMe ? styles.replyIconLeft : styles.replyIconRight,
|
||||
{
|
||||
opacity: iconOpacity,
|
||||
},
|
||||
{ opacity: iconOpacity },
|
||||
]}
|
||||
>
|
||||
<MaterialCommunityIcons
|
||||
@@ -112,8 +200,6 @@ export const SwipeableMessageBubble: React.FC<SwipeableMessageBubbleProps> = ({
|
||||
color={colors.primary.main}
|
||||
/>
|
||||
</Animated.View>
|
||||
|
||||
{/* 可滑动的消息内容 */}
|
||||
<PanGestureHandler
|
||||
onGestureEvent={onGestureEvent}
|
||||
onHandlerStateChange={onHandlerStateChange}
|
||||
|
||||
Reference in New Issue
Block a user