hamid zarghami
83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useRef } from 'react'
|
|
import BlurredOverlayContainer, { BlurredOverlayContainerProps } from '../overlays/BlurredOverlayContainer'
|
|
import clsx from 'clsx'
|
|
import CloseIcon from '../icons/CloseIcon'
|
|
import { motion, PanInfo, Variants } from 'framer-motion'
|
|
|
|
type Props = {
|
|
title?: string,
|
|
showCloseButton?: boolean,
|
|
showTitle?: boolean,
|
|
blurOpacity?: string | number | null,
|
|
overrideClassName?: string,
|
|
titlePadding?: string,
|
|
} & BlurredOverlayContainerProps
|
|
|
|
const AnimatedBottomSheet = ({ blurOpacity = 64, overrideClassName = '', showTitle = true, showCloseButton = true, titlePadding = 'ps-[31px] pe-[33px]', ...props }: Props) => {
|
|
const closeRef: React.Ref<HTMLDivElement> | undefined = useRef(null);
|
|
|
|
const variants: Variants = {
|
|
hidden: {
|
|
y: '100%',
|
|
},
|
|
visible: {
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.1,
|
|
ease: 'easeInOut',
|
|
},
|
|
},
|
|
};
|
|
|
|
const onDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
|
|
if (info.offset.y > 200) {
|
|
if (closeRef.current) {
|
|
closeRef.current.click();
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<BlurredOverlayContainer {...props} outDelay={100}>
|
|
<motion.div
|
|
drag='y'
|
|
dragConstraints={{ top: 0, bottom: 0 }}
|
|
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
|
dragTransition={{ bounceDamping: 10, bounceStiffness: 600 }}
|
|
dragElastic={0.05}
|
|
onDragEnd={onDrag}
|
|
data-visible={props.visible}
|
|
data-bg-opacity={blurOpacity}
|
|
className={clsx(
|
|
overrideClassName ?? '',
|
|
'absolute left-0 w-full rounded-t-4xl pt-[39px] pb-6',
|
|
'bottom-0',
|
|
'bg-container/64 dark:bg-container/80'
|
|
)}
|
|
initial="hidden"
|
|
animate={props.visible ? 'visible' : 'hidden'}
|
|
variants={variants}
|
|
>
|
|
<div className={clsx(titlePadding, 'flex justify-between')}>
|
|
{showTitle &&
|
|
<div className='text-lg font-medium text-foreground leading-8 mt-2.5'>
|
|
{props.title}
|
|
</div>
|
|
}
|
|
{showCloseButton &&
|
|
<div ref={closeRef} onClick={props.onClick} className="bg-container/38 w-8 h-8 rounded-full p-1.5">
|
|
<CloseIcon size={20} />
|
|
</div>
|
|
}
|
|
</div>
|
|
{props.children}
|
|
</motion.div>
|
|
|
|
</BlurredOverlayContainer>
|
|
)
|
|
}
|
|
|
|
export default AnimatedBottomSheet
|