PreviewModal.jsx 1.1KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import React, { useState } from 'react';
  2. import { Modal, Image } from 'antd';
  3. import { Swiper, SwiperSlide } from 'swiper/react';
  4. // Import Swiper styles
  5. import 'swiper/css';
  6. import 'swiper/css/effect-fade';
  7. import 'swiper/css/navigation';
  8. import 'swiper/css/pagination';
  9. // import 'style.module.less';
  10. // import required modules
  11. import { Pagination } from 'swiper/modules';
  12. export default (props) => {
  13. const { versionInfo, isModalOpen, onClose, width = 1200, ...leftProps } = props;
  14. return (
  15. <Modal keyboard footer={null} width={width} open={isModalOpen} onCancel={onClose} {...leftProps}>
  16. <Swiper
  17. spaceBetween={30}
  18. effect={'fade'}
  19. pagination={{
  20. clickable: true,
  21. }}
  22. modules={[Pagination]}
  23. className="mySwiper"
  24. >
  25. {
  26. (versionInfo || []).map((x, index) => {
  27. return (
  28. <SwiperSlide>
  29. <img src={x} key={index} style={{ width: '100%' }} alt="fail" />
  30. </SwiperSlide>
  31. )
  32. })
  33. }
  34. </Swiper>
  35. </Modal>
  36. )
  37. }