forked from mrzachnugent/react-native-reusables
-
Notifications
You must be signed in to change notification settings - Fork 0
/
popover.tsx
41 lines (37 loc) · 1.75 KB
/
popover.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
import * as React from 'react';
import { Platform, StyleSheet } from 'react-native';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
import { TextClassContext } from '~/components/ui/typography';
import * as PopoverPrimitive from '~/components/primitives/popover';
import { cn } from '~/lib/utils';
const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
return (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Overlay
style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
>
<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
<TextClassContext.Provider value='text-popover-foreground'>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
'z-50 w-72 rounded-md web:cursor-auto border border-border bg-popover p-4 shadow-md shadow-foreground/5 web:outline-none web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2 web:animate-in web:zoom-in-95 web:fade-in-0',
className
)}
{...props}
/>
</TextClassContext.Provider>
</Animated.View>
</PopoverPrimitive.Overlay>
</PopoverPrimitive.Portal>
);
});
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
export { Popover, PopoverContent, PopoverTrigger };