knk
Version:
react components based on react
47 lines • 1.37 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect } from 'react';
import Carousel, { Modal, ModalGateway } from 'react-images';
var ImgPreview = function ImgPreview(props) {
var _props$images = props.images,
images = _props$images === void 0 ? [] : _props$images,
open = props.open,
onClose = props.onClose;
var _useState = useState(open),
_useState2 = _slicedToArray(_useState, 2),
modalIsOpen = _useState2[0],
setModalIsOpen = _useState2[1];
useEffect(function () {
setModalIsOpen(open);
}, [images, open]);
var toggleModal = function toggleModal() {
setModalIsOpen(!modalIsOpen);
if (typeof onClose === 'function') {
onClose();
}
};
var styleInit = {
header: function header() {
return {
// 头部样式
position: 'absolute',
top: 10,
right: 10,
zIndex: 9999
};
},
view: function view() {
return {
textAlign: 'center',
maxHeight: '95vh',
maxWidth: '95vw'
};
}
};
return /*#__PURE__*/React.createElement(ModalGateway, null, modalIsOpen ? /*#__PURE__*/React.createElement(Modal, {
onClose: toggleModal
}, /*#__PURE__*/React.createElement(Carousel, {
views: images,
styles: styleInit
})) : null);
};
export default ImgPreview;