40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
||
|
||
/**
|
||
* 监听容器宽度，宽时展开操作按钮，窄时收入 Dropdown。
|
||
* @param threshold 折叠阈值（px），默认 700
|
||
* @returns [collapsed, callbackRef]
|
||
*/
|
||
export function useCollapsedActions(threshold = 700) {
|
||
const [collapsed, setCollapsed] = useState(false)
|
||
const observerRef = useRef<ResizeObserver | null>(null)
|
||
const elementRef = useRef<HTMLElement | null>(null)
|
||
|
||
const ref = useCallback(
|
||
(el: HTMLElement | null) => {
|
||
observerRef.current?.disconnect()
|
||
observerRef.current = null
|
||
elementRef.current = el
|
||
|
||
if (!el || typeof ResizeObserver === 'undefined') return
|
||
|
||
const observer = new ResizeObserver(([entry]) => {
|
||
setCollapsed(entry.contentRect.width < threshold)
|
||
})
|
||
observer.observe(el)
|
||
observerRef.current = observer
|
||
},
|
||
[threshold],
|
||
)
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
observerRef.current?.disconnect()
|
||
observerRef.current = null
|
||
elementRef.current = null
|
||
}
|
||
}, [])
|
||
|
||
return [collapsed, ref] as const
|
||
}
|