55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
|
import React, { useRef, useState } from "react";
|
||
|
|
|
||
|
|
interface CollapsibleContentProps {
|
||
|
|
content: string;
|
||
|
|
maxHeight?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
|
||
|
|
content,
|
||
|
|
maxHeight = 150,
|
||
|
|
}) => {
|
||
|
|
const contentWrapperRef = useRef<HTMLDivElement>(null);
|
||
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
||
|
|
|
||
|
|
// Determine if content needs to be collapsed
|
||
|
|
const shouldCollapse = contentWrapperRef.current
|
||
|
|
? contentWrapperRef.current.scrollHeight > maxHeight
|
||
|
|
: false;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
ref={contentWrapperRef}
|
||
|
|
className={`duration-300 ${
|
||
|
|
shouldCollapse && !isExpanded
|
||
|
|
? `max-h-[${maxHeight}px] overflow-hidden relative`
|
||
|
|
: ""
|
||
|
|
}`}>
|
||
|
|
<div
|
||
|
|
className="ql-editor p-0 space-y-1 leading-relaxed"
|
||
|
|
dangerouslySetInnerHTML={{
|
||
|
|
__html: content || "",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Gradient overlay */}
|
||
|
|
{shouldCollapse && !isExpanded && (
|
||
|
|
<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent" />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Expand/Collapse button */}
|
||
|
|
{shouldCollapse && (
|
||
|
|
<button
|
||
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
||
|
|
className="mt-2 text-blue-500 hover:text-blue-700">
|
||
|
|
{isExpanded ? "收起" : "展开"}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CollapsibleContent;
|