overleaf/services/web/frontend/js/shared/hooks/use-resize.ts
ilkin-overleaf 4f35333a39 Merge pull request #9536 from overleaf/ii-adjustable-project-dashboard-panel
[web] Adjustable project dashboard sidebar

GitOrigin-RevId: 1007ecb896bbe215af28fa92d295201b2457aeef
2023-01-10 09:05:44 +00:00

113 lines
2.5 KiB
TypeScript

import { useState, useEffect, useRef } from 'react'
import usePersistedState from './use-persisted-state'
import { Nullable } from '../../../../types/utils'
type Pos = Nullable<{
x: number
}>
function useResizeBase(
state: [Pos, React.Dispatch<React.SetStateAction<Pos>>]
) {
const [mousePos, setMousePos] = state
const isResizingRef = useRef(false)
const handleRef = useRef<HTMLElement | null>(null)
const defaultHandleStyles = useRef<React.CSSProperties>({
cursor: 'col-resize',
userSelect: 'none',
})
useEffect(() => {
const handleMouseDown = function (e: MouseEvent) {
if (e.button !== 0) {
return
}
if (defaultHandleStyles.current.cursor) {
document.body.style.cursor = defaultHandleStyles.current.cursor
}
isResizingRef.current = true
}
const handle = handleRef.current
handle?.addEventListener('mousedown', handleMouseDown)
return () => {
handle?.removeEventListener('mousedown', handleMouseDown)
}
}, [])
useEffect(() => {
const handleMouseUp = function () {
document.body.style.cursor = 'default'
isResizingRef.current = false
}
document.addEventListener('mouseup', handleMouseUp)
return () => {
document.removeEventListener('mouseup', handleMouseUp)
}
}, [])
useEffect(() => {
const handleMouseMove = function (e: MouseEvent) {
if (isResizingRef.current) {
setMousePos({ x: e.clientX })
}
}
document.addEventListener('mousemove', handleMouseMove)
return () => {
document.removeEventListener('mousemove', handleMouseMove)
}
}, [setMousePos])
const getTargetProps = ({ style }: { style?: React.CSSProperties } = {}) => {
return {
style: {
...style,
},
}
}
const setHandleRef = (node: HTMLElement | null) => {
handleRef.current = node
}
const getHandleProps = ({ style }: { style?: React.CSSProperties } = {}) => {
if (style?.cursor) {
defaultHandleStyles.current.cursor = style.cursor
}
return {
style: {
...defaultHandleStyles.current,
...style,
},
ref: setHandleRef,
}
}
return <const>{
mousePos,
getHandleProps,
getTargetProps,
}
}
function useResize() {
const state = useState<Pos>(null)
return useResizeBase(state)
}
function usePersistedResize({ name }: { name: string }) {
const state = usePersistedState<Pos>(`resizeable-${name}`, null)
return useResizeBase(state)
}
export { useResize, usePersistedResize }