File size: 2,630 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import { useEffect, useImperativeHandle, useRef } from 'react'
/**
* 折叠面板组件，支持水平折叠、垂直折叠
* @param {type:['horizontal','vertical'],isOpen} props
* @returns
*/
const Collapse = props => {
const { collapseRef } = props
const ref = useRef(null)
const type = props.type || 'vertical'
useImperativeHandle(collapseRef, () => {
return {
/**
* 当子元素高度变化时，可调用此方法更新折叠组件的高度
* @param {*} param0
*/
updateCollapseHeight: ({ height, increase }) => {
if (props.isOpen) {
ref.current.style.height = ref.current.scrollHeight
ref.current.style.height = 'auto'
}
}
}
})
/**
* 折叠
* @param {*} element
*/
const collapseSection = element => {
const sectionHeight = element.scrollHeight
const sectionWidth = element.scrollWidth
requestAnimationFrame(function () {
switch (type) {
case 'horizontal':
element.style.width = sectionWidth + 'px'
requestAnimationFrame(function () {
element.style.width = 0 + 'px'
})
break
case 'vertical':
element.style.height = sectionHeight + 'px'
requestAnimationFrame(function () {
element.style.height = 0 + 'px'
})
}
})
}
/**
* 展开
* @param {*} element
*/
const expandSection = element => {
const sectionHeight = element.scrollHeight
const sectionWidth = element.scrollWidth
let clearTime = 0
switch (type) {
case 'horizontal':
element.style.width = sectionWidth + 'px'
clearTime = setTimeout(() => {
element.style.width = 'auto'
}, 400)
break
case 'vertical':
element.style.height = sectionHeight + 'px'
clearTime = setTimeout(() => {
element.style.height = 'auto'
}, 400)
}
clearTimeout(clearTime)
}
useEffect(() => {
if (props.isOpen) {
expandSection(ref.current)
} else {
collapseSection(ref.current)
}
// 通知父组件高度变化
props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
}, [props.isOpen])
return (
<div ref={ref} style={type === 'vertical' ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' }} className={`${props.className || ''} overflow-hidden duration-200 `}>
{props.children}
</div>
)
}
Collapse.defaultProps = { isOpen: false }
export default Collapse
|