chore: support preview image in Modal
Benjy Cui
9 years ago
parent
cf74561ef5
commit
5a08d410c5
@ -0,0 +1,87 @@
|
||||
.preview-image-boxes {
|
||||
float: right;
|
||||
margin: 0 0 110px 60px;
|
||||
width: 616px;
|
||||
|
||||
&-with-popup {
|
||||
width: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-boxes + .preview-image-boxes {
|
||||
margin-top: -75px;
|
||||
}
|
||||
|
||||
.preview-image-box {
|
||||
width: 100%;
|
||||
float: left;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.preview-image-wrapper {
|
||||
background: #f4f4f4;
|
||||
padding: 16px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-image-wrapper.good:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #2db7f5;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.preview-image-wrapper.bad:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #f50;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.preview-image-title {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview-image-description {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-image-description hr {
|
||||
margin: 2px 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.preview-image-box img {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.preview-image-boxes.pack img {
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd;
|
||||
}
|
||||
|
||||
.preview-image-box img:hover {
|
||||
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
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);
|
||||
}
|
||||
|
||||
const parser = new DOMParser();
|
||||
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 xml = parser.parseFromString(img, 'application/xml');
|
||||
const attributes = xml.firstChild.attributes;
|
||||
const { alt, description, src } = attributes;
|
||||
const imgClassName = attributes.class.nodeValue;
|
||||
return {
|
||||
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'}`}>
|
||||
<img src={cover.src} alt="Sample Picture" />
|
||||
</div>
|
||||
<div className="preview-image-title">{cover.alt}</div>
|
||||
<div className="preview-image-description">
|
||||
{cover.description}
|
||||
</div>
|
||||
|
||||
<Modal visible={this.state.leftVisible} title={null} footer={null}
|
||||
onCancel={this.handleCancel.bind(this)}>
|
||||
<Carousel>
|
||||
{ comparable ? imagesList[0] : imagesList }
|
||||
</Carousel>
|
||||
</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'}`}>
|
||||
<img src={imgsMeta[1].src} alt="Sample Picture" />
|
||||
</div>
|
||||
<div className="preview-image-title">{imgsMeta[1].alt}</div>
|
||||
<div className="preview-image-description">
|
||||
{imgsMeta[1].description}
|
||||
</div>
|
||||
|
||||
<Modal visible={this.state.rightVisible} title={null} footer={null}
|
||||
onCancel={this.handleCancel.bind(this)}>
|
||||
<Carousel>
|
||||
{ comparable ? imagesList[1] : imagesList }
|
||||
</Carousel>
|
||||
</Modal>
|
||||
</div> : null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue