forked from mrzachnugent/react-native-reusables
-
Notifications
You must be signed in to change notification settings - Fork 0
/
collapsible.tsx
76 lines (73 loc) · 2.46 KB
/
collapsible.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { ChevronsDownUp, ChevronsUpDown } from '~/components/Icons';
import * as React from 'react';
import { Platform, Text, View } from 'react-native';
import Animated, {
FadeInDown,
LinearTransition,
} from 'react-native-reanimated';
import { Button } from '~/components/ui/button';
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '~/components/ui/collapsible';
export default function CollapsibleScreen() {
const [open, setOpen] = React.useState(false);
return (
<View className='flex-1 justify-center items-center'>
<Collapsible open={open} onOpenChange={setOpen} asChild>
<Animated.View layout={LinearTransition}>
<View className='w-[350px] gap-2'>
<View className='flex flex-row items-center justify-between space-x-4 px-4'>
<Text className='text-foreground text-sm native:text-lg font-semibold'>
@peduarte starred 3 repositories
</Text>
<CollapsibleTrigger asChild>
<Button variant='ghost' size='icon'>
{open ? (
<ChevronsDownUp size={16} className='text-foreground' />
) : (
<ChevronsUpDown size={16} className='text-foreground' />
)}
<Text className='sr-only'>Toggle</Text>
</Button>
</CollapsibleTrigger>
</View>
<View className='rounded-md border border-border px-4 py-3 '>
<Text className='text-foreground text-sm native:text-lg'>
@radix-ui/primitives
</Text>
</View>
<CollapsibleContent className='gap-2'>
<CollapsibleItem delay={100}>@radix-ui/react</CollapsibleItem>
<CollapsibleItem delay={200}>@stitches/core</CollapsibleItem>
</CollapsibleContent>
</View>
</Animated.View>
</Collapsible>
</View>
);
}
function CollapsibleItem({
children,
delay,
}: {
children: string;
delay: number;
}) {
if (Platform.OS === 'web') {
return (
<View className='rounded-md border border-border px-4 py-3'>
<Text className='text-foreground text-sm'>{children}</Text>
</View>
);
}
return (
<Animated.View
entering={FadeInDown.duration(200).delay(delay)}
className='rounded-md border border-border px-4 py-3'
>
<Text className='text-foreground text-lg'>{children}</Text>
</Animated.View>
);
}