69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@tamagui/button';
|
|
import { Camera } from 'lucide-react';
|
|
import { useGuestThemeVariant } from '../lib/guestTheme';
|
|
|
|
type FloatingActionButtonProps = {
|
|
onPress: () => void;
|
|
onLongPress?: () => void;
|
|
hidden?: boolean;
|
|
inline?: boolean;
|
|
};
|
|
|
|
export default function FloatingActionButton({ onPress, onLongPress, hidden = false, inline = false }: FloatingActionButtonProps) {
|
|
const longPressTriggered = React.useRef(false);
|
|
const { isDark } = useGuestThemeVariant();
|
|
const translateValue = inline
|
|
? 'none'
|
|
: hidden
|
|
? 'translateX(-50%) translateY(36px) scale(0.72)'
|
|
: 'translateX(-50%)';
|
|
|
|
return (
|
|
<Button
|
|
onPress={() => {
|
|
if (longPressTriggered.current) {
|
|
longPressTriggered.current = false;
|
|
return;
|
|
}
|
|
onPress();
|
|
}}
|
|
onPressIn={() => {
|
|
longPressTriggered.current = false;
|
|
}}
|
|
onLongPress={() => {
|
|
if (!onLongPress) {
|
|
return;
|
|
}
|
|
longPressTriggered.current = true;
|
|
onLongPress();
|
|
}}
|
|
position={inline ? 'relative' : 'fixed'}
|
|
bottom={inline ? undefined : 20}
|
|
left={inline ? undefined : '50%'}
|
|
zIndex={1100}
|
|
width={76}
|
|
height={76}
|
|
borderRadius={999}
|
|
backgroundColor="$primary"
|
|
borderWidth={0}
|
|
elevation={4}
|
|
shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
|
|
shadowOpacity={0.5}
|
|
shadowRadius={22}
|
|
shadowOffset={{ width: 0, height: 10 }}
|
|
opacity={hidden ? 0 : 1}
|
|
pointerEvents={hidden ? 'none' : 'auto'}
|
|
style={{
|
|
transform: translateValue,
|
|
transition: inline ? undefined : 'transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 220ms ease',
|
|
boxShadow: isDark
|
|
? '0 20px 40px rgba(255, 79, 216, 0.38), 0 0 0 8px rgba(255, 79, 216, 0.16)'
|
|
: '0 18px 32px rgba(15, 23, 42, 0.2), 0 0 0 8px rgba(255, 255, 255, 0.7)',
|
|
}}
|
|
>
|
|
<Camera size={30} color="white" />
|
|
</Button>
|
|
);
|
|
}
|