SentHistoryGroup.tsx 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import { Button, _Space } from "antd";
  2. import { useState } from "react";
  3. import type { ISentHistoryData } from "./SentHistory"
  4. import SentHistoryItem from "./SentHistoryItem";
  5. interface IWidget {
  6. data?: ISentHistoryData[];
  7. oldContent?: string;
  8. }
  9. const SentHistoryGroupWidget = ({ data = [], oldContent }: IWidget) => {
  10. const [compact, setCompact] = useState(true);
  11. return (
  12. <>
  13. {data.length > 0 ? (
  14. <div>
  15. {data.length > 1 ? (
  16. <Button type="link" onClick={() => setCompact(!compact)}>
  17. {compact ? `显示全部修改记录-${data.length}` : "折叠"}
  18. </Button>
  19. ) : undefined}
  20. {compact ? (
  21. <SentHistoryItem
  22. data={data[data.length - 1]}
  23. oldContent={oldContent}
  24. />
  25. ) : (
  26. <div>
  27. {data.map((item, index) => {
  28. return (
  29. <SentHistoryItem
  30. key={index}
  31. data={item}
  32. oldContent={
  33. index === 0 ? oldContent : data[index - 1].content
  34. }
  35. />
  36. );
  37. })}
  38. </div>
  39. )}
  40. </div>
  41. ) : undefined}
  42. </>
  43. );
  44. };
  45. export default SentHistoryGroupWidget;