22 lines
808 B
React
22 lines
808 B
React
import React, { useRef } from 'react';
|
|
import './BottomSheet.css';
|
|
|
|
export default function BottomSheet({ visible = false, title = '', onClose, children, footer }) {
|
|
const startY = useRef(0);
|
|
return (
|
|
<>
|
|
<div className={'aa-sheet-mask' + (visible ? ' is-open' : '')} onClick={onClose} />
|
|
<div
|
|
className={'aa-sheet' + (visible ? ' is-open' : '')}
|
|
onPointerDown={e => { startY.current = e.clientY; }}
|
|
onPointerUp={e => { if (startY.current - e.clientY < -80) onClose && onClose(); }}
|
|
>
|
|
<div className="aa-sheet-handle" />
|
|
{title ? <div className="aa-sheet-header">{title}</div> : null}
|
|
<div className="aa-sheet-body">{children}</div>
|
|
{footer ? <div className="aa-sheet-footer">{footer}</div> : null}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|