ant-design/site/component/Article/ImagePreview.jsx

109 lines
3.6 KiB
React
Raw Normal View History

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>
<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>
);
}
}