Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user