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

110 lines
3.2 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);
}
2016-03-16 17:05:41 +08:00
function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
comparable, onClick, onCancel }) {
return (
<div className="preview-image-box"
style={style}
onClick={onClick}>
<div className={`preview-image-wrapper ${coverMeta.isGood && 'good'} ${coverMeta.isBad && 'bad'}`}>
<img className={coverMeta.className} src={coverMeta.src} alt="Sample Picture" />
</div>
<div className="preview-image-title">{coverMeta.alt}</div>
<div className="preview-image-description">
{coverMeta.description}
</div>
<Modal className="image-modal" visible={previewVisible} title={null} footer={null}
onCancel={onCancel}>
<Carousel>
{ comparable ? cover : imgs }
</Carousel>
<div className="preview-image-title">{coverMeta.alt}</div>
</Modal>
</div>
);
}
2016-03-02 17:12:43 +08:00
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 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}>
2016-03-16 17:05:41 +08:00
<PreviewImageBox style={style}
comparable={comparable}
previewVisible={this.state.leftVisible}
cover={imagesList[0]}
coverMeta={imgsMeta[0]}
imgs={imagesList}
onClick={this.handleClick.bind(this, 'left')}
onCancel={this.handleCancel.bind(this)}
/>
2016-03-02 17:12:43 +08:00
{
comparable ?
2016-03-16 17:05:41 +08:00
<PreviewImageBox style={style}
comparable
previewVisible={this.state.rightVisible}
cover={imagesList[1]}
coverMeta={imgsMeta[1]}
imgs={imagesList}
onClick={this.handleClick.bind(this, 'right')}
onCancel={this.handleCancel.bind(this)}
/> : null
2016-03-02 17:12:43 +08:00
}
</div>
);
}
}