56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import SlidingPane from 'react-sliding-pane'
|
|
import { Resizable, ResizeCallback } from 're-resizable'
|
|
import useGetWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
|
|
|
|
type ResizableSidebarProps = {
|
|
isShow: boolean
|
|
onClose: () => void
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export function ResizableSidebar(props: ResizableSidebarProps): JSX.Element {
|
|
const windowDimensions = useGetWindowDimensions()
|
|
|
|
const handleResize: ResizeCallback = (_e, _direction, ref) => {
|
|
if (parseInt(ref.style.width) < 210) {
|
|
props.onClose()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<SlidingPane
|
|
className="sliding-pane-class"
|
|
isOpen={props.isShow}
|
|
width="fit-content"
|
|
hideHeader={true}
|
|
from="right"
|
|
overlayClassName="slide-panel-overlay"
|
|
onRequestClose={props.onClose}
|
|
>
|
|
<Resizable
|
|
onResize={handleResize}
|
|
defaultSize={{
|
|
width: windowDimensions.width < 600 ? '100%' : '420px',
|
|
height: '100%',
|
|
}}
|
|
enable={
|
|
windowDimensions.width < 600
|
|
? false
|
|
: {
|
|
top: false,
|
|
right: false,
|
|
bottom: false,
|
|
left: true,
|
|
topRight: false,
|
|
bottomRight: false,
|
|
bottomLeft: false,
|
|
topLeft: false,
|
|
}
|
|
}
|
|
>
|
|
{props.children}
|
|
</Resizable>
|
|
</SlidingPane>
|
|
)
|
|
}
|