2023-10-02 05:35:02 -04:00
|
|
|
import { RefObject, useEffect } from 'react'
|
|
|
|
import { ImperativePanelHandle } from 'react-resizable-panels'
|
|
|
|
|
|
|
|
export default function useCollapsiblePanel(
|
|
|
|
panelIsOpen: boolean,
|
|
|
|
panelRef: RefObject<ImperativePanelHandle>
|
|
|
|
) {
|
2023-12-20 06:48:24 -05:00
|
|
|
// store the expanded height in localStorage when collapsing,
|
|
|
|
// so it can be restored when expanding after reloading the page
|
2023-10-02 05:35:02 -04:00
|
|
|
useEffect(() => {
|
2023-12-20 06:48:24 -05:00
|
|
|
const panelHandle = panelRef.current
|
|
|
|
|
|
|
|
if (panelHandle) {
|
|
|
|
const storageKey = `ide-panel.expanded-size.${panelHandle.getId()}`
|
|
|
|
if (!panelIsOpen) {
|
|
|
|
// collapsing, so store the current size if > 0
|
|
|
|
const size = panelHandle.getSize()
|
|
|
|
if (size > 0) {
|
|
|
|
localStorage.setItem(storageKey, String(size))
|
|
|
|
}
|
|
|
|
|
|
|
|
panelHandle.collapse()
|
2023-12-05 04:34:21 -05:00
|
|
|
} else {
|
2023-12-20 06:48:24 -05:00
|
|
|
const storedKey = localStorage.getItem(storageKey)
|
|
|
|
|
|
|
|
if (storedKey) {
|
|
|
|
panelHandle.resize(Number(storedKey))
|
|
|
|
} else {
|
|
|
|
panelHandle.expand()
|
|
|
|
}
|
2023-12-05 04:34:21 -05:00
|
|
|
}
|
2023-10-02 05:35:02 -04:00
|
|
|
}
|
|
|
|
}, [panelIsOpen, panelRef])
|
|
|
|
}
|