forked from mrzachnugent/react-native-reusables
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
129 lines (127 loc) · 4.62 KB
/
index.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React from 'react';
import { Text, View, ScrollView, Dimensions } from 'react-native';
import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
import { buttonTextVariants } from '~/components/ui/button';
import { Input } from '~/components/ui/input';
import { Label } from '~/components/ui/label';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '~/components/ui/popover';
import { cn } from '~/lib/utils';
const { height } = Dimensions.get('window');
export default function PopoverScreen() {
return (
<ScrollView>
<View className='p-6 w-full'>
<Alert icon='Code' className='max-w-xl'>
<AlertTitle>FYI</AlertTitle>
<AlertDescription>
This reusable does not use "rn-primitives"
</AlertDescription>
</Alert>
</View>
<View style={{ height: height / 3 }} className='pt-4 p-6'>
<Popover>
<PopoverTrigger className='w-full'>
{({ pressed }) => (
<Text
className={cn(
pressed ? 'opacity-70' : '',
buttonTextVariants({})
)}
>
Bottom-Y (trigger width)
</Text>
)}
</PopoverTrigger>
<PopoverContent className='gap-6 ' position='bottom'>
<View>
<Text className='text-2xl font-bold text-foreground'>
Dimensions
</Text>
<Text className='text-lg text-muted-foreground'>
Set the dimensions for the layer.
</Text>
</View>
<View className='flex-row gap-5 items-center'>
<Label className='pt-3 font-semibold w-20'>Width:</Label>
<Input className='flex-1' defaultValue='100%' />
</View>
<View className='flex-row gap-5 items-center'>
<Label className='pt-3 font-semibold w-20'>Height:</Label>
<Input className='flex-1' defaultValue='25px' />
</View>
</PopoverContent>
</Popover>
</View>
<View style={{ height: height }} className='p-6 gap-24'>
<Popover>
<PopoverTrigger className='w-full' variant={'secondary'}>
{({ pressed }) => (
<Text
className={cn(
pressed ? 'opacity-70' : '',
buttonTextVariants({ variant: 'secondary' })
)}
>
Auto-Y (right 300)
</Text>
)}
</PopoverTrigger>
<PopoverContent className='gap-6' width={300} align='right'>
<View>
<Text className='text-2xl font-bold text-foreground'>
Dimensions
</Text>
<Text className='text-lg text-muted-foreground'>
Set the dimensions for the layer.
</Text>
</View>
<View className='flex-row gap-5 items-center'>
<Label className='pt-3 font-semibold w-20'>Width:</Label>
<Input className='flex-1' defaultValue='100%' />
</View>
<View className='flex-row gap-5 items-center'>
<Label className='pt-3 font-semibold w-20'>Height:</Label>
<Input className='flex-1' defaultValue='25px' />
</View>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger className='w-full' variant={'secondary'}>
{({ pressed }) => (
<Text
className={cn(
pressed ? 'opacity-70' : '',
buttonTextVariants({ variant: 'secondary' })
)}
>
Auto-Y (center 300)
</Text>
)}
</PopoverTrigger>
<PopoverContent className='gap-6' width={300} align='center'>
<View>
<Text className='text-2xl font-bold text-foreground'>
Dimensions
</Text>
<Text className='text-lg text-muted-foreground'>
Set the dimensions for the layer.
</Text>
</View>
<View className='flex-row gap-5 items-center'>
<Label className='pt-3 font-semibold w-20'>Width:</Label>
<Input className='flex-1' defaultValue='100%' />
</View>
<View className='flex-row gap-5 items-center'>
<Label className='pt-3 font-semibold w-20'>Height:</Label>
<Input className='flex-1' defaultValue='25px' />
</View>
</PopoverContent>
</Popover>
</View>
</ScrollView>
);
}