4ee3079b9f
- Updated app.json to set userInterfaceStyle to automatic for improved theme adaptability. - Refactored layout components to utilize useAppColors for dynamic theming, ensuring consistent color usage. - Introduced SystemChrome component to manage system UI background color based on theme. - Enhanced TabsLayout, ProfileStackLayout, and other components to leverage new theming structure. - Improved QRCodeScanner, SearchBar, and CommentItem styles to align with the updated theme system. - Consolidated styles in SystemMessageItem and TabBar for better maintainability and visual coherence.
104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
/**
|
|
* @成员选择面板组件
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { View, ScrollView, TouchableOpacity } from 'react-native';
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|
import { Avatar, Text } from '../../../../components/common';
|
|
import { useChatScreenStyles } from './styles';
|
|
import { MentionPanelProps } from './types';
|
|
|
|
export const MentionPanel: React.FC<MentionPanelProps> = ({
|
|
members,
|
|
currentUserId,
|
|
mentionQuery,
|
|
currentUserRole,
|
|
onSelectMention,
|
|
onMentionAll,
|
|
onClose,
|
|
}) => {
|
|
const styles = useChatScreenStyles();
|
|
// 过滤成员列表
|
|
const filteredMembers = members.filter(member => {
|
|
if (member.user_id === currentUserId) return false; // 排除自己
|
|
const displayName = member.nickname || member.user?.nickname || '';
|
|
return displayName.toLowerCase().includes(mentionQuery);
|
|
});
|
|
|
|
// 检查是否可以@所有人（仅群主和管理员）
|
|
const canMentionAll = currentUserRole === 'owner' || currentUserRole === 'admin';
|
|
|
|
return (
|
|
<View style={styles.mentionPanelContainer}>
|
|
{/* 拖动把手 */}
|
|
<View style={styles.mentionPanelDragHandle}>
|
|
<View style={styles.mentionPanelDragBar} />
|
|
</View>
|
|
|
|
{/* 标题栏 */}
|
|
<View style={styles.mentionPanelHeader}>
|
|
<Text style={styles.mentionPanelTitle}>@ 成员</Text>
|
|
<TouchableOpacity style={styles.mentionPanelCloseBtn} onPress={onClose}>
|
|
<MaterialCommunityIcons name="close" size={14} color="#999" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<ScrollView
|
|
style={styles.mentionList}
|
|
keyboardShouldPersistTaps="handled"
|
|
showsVerticalScrollIndicator={true}
|
|
nestedScrollEnabled={true}
|
|
>
|
|
{/* @所有人选项 */}
|
|
{canMentionAll && (
|
|
<TouchableOpacity style={styles.mentionItemAll} onPress={onMentionAll}>
|
|
<View style={styles.mentionAllIcon}>
|
|
<MaterialCommunityIcons name="account-group" size={22} color="#FFF" />
|
|
</View>
|
|
<View style={styles.mentionItemInfo}>
|
|
<Text style={styles.mentionItemNameAll}>所有人</Text>
|
|
<Text style={styles.mentionItemSub}>通知群内所有成员</Text>
|
|
</View>
|
|
<MaterialCommunityIcons name="chevron-right" size={18} color="rgba(255,107,53,0.4)" />
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
{/* 成员列表 */}
|
|
{filteredMembers.map(member => (
|
|
<TouchableOpacity
|
|
key={member.id}
|
|
style={styles.mentionItem}
|
|
onPress={() => onSelectMention(member)}
|
|
>
|
|
<Avatar
|
|
source={member.user?.avatar || null}
|
|
size={38}
|
|
name={member.nickname || member.user?.nickname || ''}
|
|
/>
|
|
<View style={styles.mentionItemInfo}>
|
|
<Text style={styles.mentionItemName}>
|
|
{member.nickname || member.user?.nickname || '用户'}
|
|
</Text>
|
|
{member.role === 'owner' && (
|
|
<Text style={styles.mentionItemRole}>群主</Text>
|
|
)}
|
|
{member.role === 'admin' && (
|
|
<Text style={styles.mentionItemRole}>管理员</Text>
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
))}
|
|
|
|
{filteredMembers.length === 0 && (
|
|
<View style={styles.mentionEmpty}>
|
|
<Text style={styles.mentionEmptyText}>没有找到匹配的成员</Text>
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default MentionPanel;
|