91 lines
3.2 KiB
TypeScript
Executable File
91 lines
3.2 KiB
TypeScript
Executable File
import { Input, Button } from 'antd';
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
|
|
type InfoCardProps = {
|
|
onAdd: (content: string[]) => void;
|
|
onHeightChange?: (height: number) => void; // 添加高度变化回调
|
|
}
|
|
|
|
const InfoCard: React.FC<InfoCardProps> = ({ onAdd, onHeightChange }) => {
|
|
const [content, setContent] = useState('');
|
|
const [addedContents, setAddedContents] = useState<string[]>([]);
|
|
const contentContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// 监控内容区域高度变化并通知父组件
|
|
useEffect(() => {
|
|
if (!contentContainerRef.current) return;
|
|
|
|
// 使用ResizeObserver监控元素大小变化
|
|
const resizeObserver = new ResizeObserver(entries => {
|
|
for (const entry of entries) {
|
|
const height = entry.contentRect.height;
|
|
// 通知父组件高度变化
|
|
onHeightChange && onHeightChange(height + 20); // 添加一些缓冲空间
|
|
}
|
|
});
|
|
|
|
resizeObserver.observe(contentContainerRef.current);
|
|
|
|
return () => {
|
|
if (contentContainerRef.current) {
|
|
resizeObserver.unobserve(contentContainerRef.current);
|
|
}
|
|
};
|
|
}, [addedContents, onHeightChange]);
|
|
|
|
const handleAdd = () => {
|
|
if (content) {
|
|
const newContents = [...addedContents, content]; // 创建包含所有内容的新数组
|
|
onAdd(newContents); // 将累积数组传递给父组件
|
|
setAddedContents(newContents);
|
|
setContent('');
|
|
}
|
|
}
|
|
|
|
const handleDelete = (index: number) => {
|
|
const newContents = addedContents.filter((_, i) => i !== index);
|
|
setAddedContents(newContents);
|
|
}
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<div className="flex items-center mb-3 w-full">
|
|
<Input
|
|
placeholder='请输入内容'
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
className="flex-1 mr-2"
|
|
onPressEnter={handleAdd}
|
|
/>
|
|
<Button
|
|
type='primary'
|
|
onClick={handleAdd}
|
|
className="shrink-0"
|
|
>
|
|
添加
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 内容容器 */}
|
|
<div ref={contentContainerRef} className="w-full bg-white">
|
|
{addedContents.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex justify-between items-center p-2 border border-gray-200 rounded bg-gray-50 mb-2 last:mb-0"
|
|
>
|
|
<span>{item}</span>
|
|
<Button
|
|
type="text"
|
|
onClick={() => handleDelete(index)}
|
|
className="text-red-500"
|
|
>
|
|
X
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default InfoCard; |