diff --git a/components/Collapse.js b/components/Collapse.js index dd36f14f..c29dc386 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -2,13 +2,18 @@ import { useEffect, useImperativeHandle, useRef } from 'react' /** * 折叠面板组件,支持水平折叠、垂直折叠 - * @param {type:['horizontal','vertical'],isOpen} props + * @param {type:['horizontal','vertical'], isOpen} props * @returns */ -const Collapse = props => { - const { collapseRef } = props +const Collapse = ({ + type = 'vertical', + isOpen = false, + children, + onHeightChange, + className, + collapseRef +}) => { const ref = useRef(null) - const type = props.type || 'vertical' useImperativeHandle(collapseRef, () => { return { @@ -17,7 +22,7 @@ const Collapse = props => { * @param {*} param0 */ updateCollapseHeight: ({ height, increase }) => { - if (props.isOpen) { + if (isOpen) { ref.current.style.height = ref.current.scrollHeight ref.current.style.height = 'auto' } @@ -76,18 +81,18 @@ const Collapse = props => { } useEffect(() => { - if (props.isOpen) { + if (isOpen) { expandSection(ref.current) } else { collapseSection(ref.current) } // 通知父组件高度变化 - props?.onHeightChange && - props.onHeightChange({ + onHeightChange && + onHeightChange({ height: ref.current.scrollHeight, - increase: props.isOpen + increase: isOpen }) - }, [props.isOpen]) + }, [isOpen]) return (
{ ? { height: '0px', willChange: 'height' } : { width: '0px', willChange: 'width' } } - className={`${props.className || ''} overflow-hidden duration-300`}> - {props.children} + className={`${className || ''} overflow-hidden duration-300`}> + {children}
) } -Collapse.defaultProps = { isOpen: false } export default Collapse diff --git a/components/Draggable.js b/components/Draggable.js index 5cbe3dde..86b805a5 100644 --- a/components/Draggable.js +++ b/components/Draggable.js @@ -142,5 +142,3 @@ export const Draggable = ({ children, stick }) => { ) } - -Draggable.defaultProps = { left: 0, top: 0 }