import React from 'react'; import { Modal, Carousel } from '../../../'; function isGood(className) { return /\bgood\b/i.test(className); } function isBad(className) { return /\bbad\b/i.test(className); } export default class ImagePreview extends React.Component { constructor(props) { super(props); this.state = { leftVisible: false, rightVisible: false, }; } handleClick(side) { this.setState({ [`${side}Visible`]: true }); } handleCancel() { this.setState({ leftVisible: false, rightVisible: false, }); } render() { const { className, imgs } = this.props; const imgsMeta = imgs.map((img) => { const span = document.createElement('span'); span.innerHTML = img; const imgNode = span.children[0]; const attributes = imgNode.attributes; const { alt, description, src } = attributes; const imgClassName = attributes.class.nodeValue; return { className: imgClassName, alt: alt && alt.nodeValue, description: description && description.nodeValue, src: src.nodeValue, isGood: isGood(imgClassName), isBad: isBad(imgClassName), }; }); const cover = imgsMeta[0]; 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; return (