diff --git a/src/core/Expander.tsx b/src/core/Expander.tsx index b92ae3f06..c63fc21b6 100644 --- a/src/core/Expander.tsx +++ b/src/core/Expander.tsx @@ -1,31 +1,40 @@ import React, { PropsWithChildren, useEffect, useRef, useState } from "react"; type ExpanderProps = { - height?: number; + heightThreshold?: number; className?: string; fadeClassName?: string; }; const Expander = ({ - height = 200, + heightThreshold = 200, className, fadeClassName, children, }: PropsWithChildren) => { const innerRef = useRef(null); - const [contentHeight, setContentHeight] = useState(height); + const [showControls, setShowControls] = useState(false); + const [height, setHeight] = useState(heightThreshold); const [expanded, setExpanded] = useState(false); useEffect(() => { - setContentHeight(innerRef.current?.clientHeight ?? height); - }, [height, expanded]); + const contentHeight = innerRef.current?.clientHeight ?? heightThreshold; - const showControls = height > 0 && contentHeight > height; + if (contentHeight < heightThreshold) { + setHeight("auto"); + } else if (expanded) { + setHeight(contentHeight); + } else { + setHeight(heightThreshold); + } + + setShowControls(contentHeight >= heightThreshold); + }, [heightThreshold, expanded]); return ( <>
{showControls && !expanded && ( diff --git a/src/core/Expander/Expander.stories.tsx b/src/core/Expander/Expander.stories.tsx index f0e674d2a..ec5cf84b1 100644 --- a/src/core/Expander/Expander.stories.tsx +++ b/src/core/Expander/Expander.stories.tsx @@ -130,23 +130,3 @@ export const OverriddenStyles = { }, }, }; - -export const Bypassed = { - render: () => ( - - {longContentInner} - - ), - parameters: { - docs: { - description: { - story: - "A set height of 0, which means that no expansion behaviour is applied.", - }, - }, - }, -};