import React from 'react';
import classNames from 'classnames';
import { Modal, Carousel } from 'antd';
function isGood(className) {
return /\bgood\b/i.test(className);
}
function isBad(className) {
return /\bbad\b/i.test(className);
}
function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
comparable, onClick, onCancel }) {
const onlyOneImg = comparable || imgs.length === 1;
return (
{coverMeta.alt}
{comparable ? cover : imgs}
{coverMeta.alt}
);
}
export default class ImagePreview extends React.Component {
constructor(props) {
super(props);
this.state = {
leftVisible: false,
rightVisible: false,
};
this.handleLeftClick = this.handleClick.bind(this, 'left');
this.handleRightClick = this.handleClick.bind(this, 'right');
}
handleClick(side) {
this.setState({ [`${side}Visible`]: true });
}
handleCancel = () => {
this.setState({
leftVisible: false,
rightVisible: false,
});
}
render() {
const { imgs } = this.props;
const imgsMeta = imgs.map((img) => {
const { alt, description, src } = img;
const imgClassName = img.class;
return {
className: imgClassName,
alt, description, src,
isGood: isGood(imgClassName),
isBad: isBad(imgClassName),
};
});
const imagesList = imgsMeta.map((meta, index) => {
return (
);
});
const comparable = imgs.length === 2 &&
(imgsMeta[0].isGood || imgsMeta[0].isBad) &&
(imgsMeta[1].isGood || imgsMeta[1].isBad);
const style = comparable ? { width: '50%' } : null;
const hasCarousel = imgs.length > 1 && !comparable;
const previewClassName = classNames({
'preview-image-boxes': true,
clearfix: true,
'preview-image-boxes-with-carousel': hasCarousel,
});
return (
);
}
}