NissayaAlignerModal.tsx 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import { Modal } from "antd";
  2. import NissayaAligner from "./NissayaAligner";
  3. import { useEffect, useState, type JSX } from "react";
  4. import type { IChannel } from "../channel/Channel";
  5. interface IWidget {
  6. trigger?: JSX.Element | string;
  7. sentencesId?: string[];
  8. channel?: IChannel;
  9. open?: boolean;
  10. onClose?: () => void;
  11. }
  12. const NissayaAlignerModal = ({
  13. trigger,
  14. sentencesId,
  15. open,
  16. onClose,
  17. }: IWidget) => {
  18. const [isModalOpen, setIsModalOpen] = useState(open);
  19. useEffect(() => {
  20. setIsModalOpen(open);
  21. }, [open]);
  22. const showModal = () => {
  23. setIsModalOpen(true);
  24. };
  25. const modalClose = () => {
  26. setIsModalOpen(false);
  27. if (onClose) {
  28. onClose();
  29. }
  30. };
  31. const handleOk = () => {
  32. modalClose();
  33. };
  34. const handleCancel = () => {
  35. modalClose();
  36. };
  37. return (
  38. <>
  39. <span onClick={showModal}>{trigger}</span>
  40. <Modal
  41. width={"95%"}
  42. style={{ maxWidth: 1500 }}
  43. title="版本间复制"
  44. open={isModalOpen}
  45. onOk={handleOk}
  46. onCancel={handleCancel}
  47. destroyOnHidden={true}
  48. footer={[]}
  49. >
  50. <NissayaAligner sentencesId={sentencesId} />
  51. </Modal>
  52. </>
  53. );
  54. };
  55. export default NissayaAlignerModal;