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}
{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 (
{meta.alt}
); }); 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 (
{ comparable ? : null }
); } }