14452b2a46
Alle <Pressable style={({pressed}) => ({...})}> ersetzt — style-Funktion
droppt auf Android (New Arch) intermittierend width/height, führt zu 0×0
unsichtbaren Elementen. TouchableOpacity mit activeOpacity ist stabil.
Außerdem übrige Pressables (plain style) aus components/ und app/
migriert sowie zwei überschüssige </View>-Tags in chat.tsx + RoomCard.tsx
entfernt die TS-Fehler verursacht haben.
64 Dateien, typecheck sauber.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
136 lines
3.8 KiB
TypeScript
136 lines
3.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { View, Text, TouchableOpacity, LayoutAnimation, Platform, UIManager } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useColors } from '../../lib/theme';
|
|
|
|
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
|
|
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
}
|
|
|
|
export type ApprovedDomain = {
|
|
domain: string;
|
|
approvedAt: string;
|
|
};
|
|
|
|
type Props = {
|
|
domains: ApprovedDomain[];
|
|
loading?: boolean;
|
|
};
|
|
|
|
export function ApprovedDomainsList({ domains, loading }: Props) {
|
|
const colors = useColors();
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
function toggle() {
|
|
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
|
|
setExpanded((v) => !v);
|
|
}
|
|
|
|
return (
|
|
<View style={{ marginHorizontal: 16, marginTop: 12 }}>
|
|
<TouchableOpacity
|
|
onPress={toggle}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: colors.surface,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
borderRadius: 14,
|
|
padding: 16,
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }}>
|
|
<Text style={{ fontSize: 13, color: colors.text, fontFamily: 'Nunito_600SemiBold' }}>
|
|
Approved Domains{' '}
|
|
<Text style={{ color: colors.textMuted, fontFamily: 'Nunito_400Regular' }}>
|
|
({domains.length})
|
|
</Text>
|
|
</Text>
|
|
</View>
|
|
<Ionicons
|
|
name={expanded ? 'chevron-up' : 'chevron-down'}
|
|
size={18}
|
|
color={colors.textMuted}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
{expanded ? (
|
|
<View
|
|
style={{
|
|
marginTop: 6,
|
|
backgroundColor: colors.surface,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
borderRadius: 12,
|
|
paddingVertical: 4,
|
|
}}
|
|
>
|
|
{loading ? (
|
|
<View style={{ padding: 16 }}>
|
|
<SkeletonRow />
|
|
<SkeletonRow />
|
|
<SkeletonRow />
|
|
</View>
|
|
) : domains.length === 0 ? (
|
|
<Text
|
|
style={{
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 14,
|
|
fontSize: 12,
|
|
color: colors.textMuted,
|
|
fontFamily: 'Nunito_400Regular',
|
|
}}
|
|
>
|
|
Noch keine approved Domains. Submit deine erste in der Community.
|
|
</Text>
|
|
) : (
|
|
domains.map((d, idx) => (
|
|
<View
|
|
key={d.domain}
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 14,
|
|
borderTopWidth: idx === 0 ? 0 : 1,
|
|
borderTopColor: colors.border,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 13, color: colors.text, fontFamily: 'Nunito_600SemiBold' }}>
|
|
{d.domain}
|
|
</Text>
|
|
<Text
|
|
style={{ fontSize: 11, color: colors.textMuted, fontFamily: 'Nunito_400Regular' }}
|
|
>
|
|
{d.approvedAt}
|
|
</Text>
|
|
</View>
|
|
))
|
|
)}
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function SkeletonRow() {
|
|
const colors = useColors();
|
|
return (
|
|
<View
|
|
style={{
|
|
height: 14,
|
|
backgroundColor: colors.surfaceElevated,
|
|
borderRadius: 4,
|
|
marginVertical: 6,
|
|
}}
|
|
/>
|
|
);
|
|
}
|