2016-03-02 17:12:43 +08:00
|
|
|
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) => {
|
2016-03-07 16:24:17 +08:00
|
|
|
const span = document.createElement('span');
|
|
|
|
span.innerHTML = img;
|
|
|
|
const imgNode = span.children[0];
|
|
|
|
const attributes = imgNode.attributes;
|
2016-03-02 17:12:43 +08:00
|
|
|
const { alt, description, src } = attributes;
|
|
|
|
const imgClassName = attributes.class.nodeValue;
|
|
|
|
return {
|
2016-03-02 17:58:06 +08:00
|
|
|
className: imgClassName,
|
2016-03-02 17:12:43 +08:00
|
|
|
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 <img {...meta} key={index} />;
|
|
|
|
});
|
|
|
|
const comparable = imgs.length === 2 &&
|
|
|
|
(imgsMeta[0].isGood || imgsMeta[0].isBad) &&
|
|
|
|
(imgsMeta[1].isGood || imgsMeta[1].isBad);
|
|
|
|
const style = comparable ? { width: '50%' } : null;
|
|
|
|
return (
|
|
|
|
<div className={className}>
|
|
|
|
<div className="preview-image-box"
|
|
|
|
style={style}
|
|
|
|
onClick={this.handleClick.bind(this, 'left')}>
|
|
|
|
<div className={`preview-image-wrapper ${cover.isGood && 'good'} ${cover.isBad && 'bad'}`}>
|
2016-03-02 17:58:06 +08:00
|
|
|
<img className={cover.className} src={cover.src} alt="Sample Picture" />
|
2016-03-02 17:12:43 +08:00
|
|
|
</div>
|
|
|
|
<div className="preview-image-title">{cover.alt}</div>
|
2016-03-15 11:19:57 +08:00
|
|
|
<div className="preview-image-description"
|
|
|
|
dangerouslySetInnerHTML={{ __html: cover.description }} />
|
2016-03-02 17:12:43 +08:00
|
|
|
|
2016-03-02 17:58:06 +08:00
|
|
|
<Modal className="image-modal" visible={this.state.leftVisible} title={null} footer={null}
|
2016-03-02 17:12:43 +08:00
|
|
|
onCancel={this.handleCancel.bind(this)}>
|
|
|
|
<Carousel>
|
|
|
|
{ comparable ? imagesList[0] : imagesList }
|
|
|
|
</Carousel>
|
2016-03-02 17:58:06 +08:00
|
|
|
{
|
|
|
|
comparable || imagesList.length === 1 ?
|
|
|
|
<div className="preview-image-title">{cover.alt}</div> :
|
|
|
|
null
|
|
|
|
}
|
2016-03-02 17:12:43 +08:00
|
|
|
</Modal>
|
|
|
|
</div>
|
|
|
|
{
|
|
|
|
comparable ?
|
|
|
|
<div className="preview-image-box"
|
|
|
|
style={style}
|
|
|
|
onClick={this.handleClick.bind(this, 'right')}>
|
|
|
|
<div className={`preview-image-wrapper ${imgsMeta[1].isGood && 'good'} ${imgsMeta[1].isBad && 'bad'}`}>
|
2016-03-02 17:58:06 +08:00
|
|
|
<img className={imgsMeta[1].className} src={imgsMeta[1].src} alt="Sample Picture" />
|
2016-03-02 17:12:43 +08:00
|
|
|
</div>
|
|
|
|
<div className="preview-image-title">{imgsMeta[1].alt}</div>
|
|
|
|
<div className="preview-image-description">
|
|
|
|
{imgsMeta[1].description}
|
|
|
|
</div>
|
|
|
|
|
2016-03-02 17:58:06 +08:00
|
|
|
<Modal className="image-modal" visible={this.state.rightVisible} title={null} footer={null}
|
2016-03-02 17:12:43 +08:00
|
|
|
onCancel={this.handleCancel.bind(this)}>
|
|
|
|
<Carousel>
|
|
|
|
{ comparable ? imagesList[1] : imagesList }
|
|
|
|
</Carousel>
|
2016-03-02 17:58:06 +08:00
|
|
|
<div className="preview-image-title">{imagesList[1].alt}</div>
|
2016-03-02 17:12:43 +08:00
|
|
|
</Modal>
|
|
|
|
</div> : null
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|