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);
}
function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
comparable, onClick, onCancel }) {
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,
};
}
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 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 (
);
}
}