72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import React, { useEffect, useRef, useState } from "react";
|
|
import Quill from "quill";
|
|
import "quill/dist/quill.snow.css"; // 引入默认样式
|
|
interface CollapsibleContentProps {
|
|
content: string;
|
|
maxHeight?: number;
|
|
}
|
|
|
|
const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
|
|
content,
|
|
maxHeight = 150,
|
|
}) => {
|
|
const contentWrapperRef = useRef(null);
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
const [shouldCollapse, setShouldCollapse] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (contentWrapperRef.current) {
|
|
const shouldCollapse =
|
|
contentWrapperRef.current.scrollHeight > maxHeight;
|
|
setShouldCollapse(shouldCollapse);
|
|
}
|
|
}, [content]);
|
|
|
|
return (
|
|
<div className=" text-base ">
|
|
<div className=" flex flex-col gap-4 border border-white hover:ring-1 ring-white transition-all duration-300 ease-in-out rounded-xl p-6 ">
|
|
{/* 包装整个内容区域的容器 */}
|
|
<div
|
|
ref={contentWrapperRef}
|
|
style={{
|
|
maxHeight:
|
|
shouldCollapse && !isExpanded
|
|
? maxHeight
|
|
: undefined,
|
|
}}
|
|
className={`duration-300 ${
|
|
shouldCollapse && !isExpanded
|
|
? ` overflow-hidden relative`
|
|
: ""
|
|
}`}>
|
|
{/* 内容区域 */}
|
|
<div
|
|
className="ql-editor p-0 space-y-1 leading-relaxed"
|
|
dangerouslySetInnerHTML={{
|
|
__html: content || "",
|
|
}}
|
|
/>
|
|
|
|
{/* 渐变遮罩 */}
|
|
{shouldCollapse && !isExpanded && (
|
|
<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent" />
|
|
)}
|
|
</div>
|
|
|
|
{/* 展开/收起按钮 */}
|
|
{shouldCollapse && (
|
|
<button
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="mt-2 text-blue-500 hover:text-blue-700">
|
|
{isExpanded ? "收起" : "展开"}
|
|
</button>
|
|
)}
|
|
{/* PostResources 组件 */}
|
|
{/* <PostResources post={post} /> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CollapsibleContent;
|