mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

site: refactor ImagePreview

Browse Source
This commit is contained in:
Benjy Cui 2016-03-16 17:05:41 +08:00
parent 55b163d62e
commit b8957bcc92
1 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
site/component/Article/ImagePreview.jsx
View File

@ -8,6 +8,31 @@ function isBad(className) {
return /\bbad\b/i.test(className);
}
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>
);
}
export default class ImagePreview extends React.Component {
constructor(props) {
super(props);
@ -48,7 +73,6 @@ export default class ImagePreview extends React.Component {
};
});
const cover = imgsMeta[0];
const imagesList = imgsMeta.map((meta, index) => {
return <img {...meta} key={index} />;
});
@ -58,49 +82,26 @@ export default class ImagePreview extends React.Component {
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 className={cover.className} src={cover.src} alt="Sample Picture" />
</div>
<div className="preview-image-title">{cover.alt}</div>
<div className="preview-image-description"
dangerouslySetInnerHTML={{ __html: cover.description }} />
<Modal className="image-modal" visible={this.state.leftVisible} title={null} footer={null}
onCancel={this.handleCancel.bind(this)}>
<Carousel>
{ comparable ? imagesList[0] : imagesList }
</Carousel>
{
comparable || imagesList.length === 1 ?
<div className="preview-image-title">{cover.alt}</div> :
null
}
</Modal>
</div>
<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)}
/>
{
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 className={imgsMeta[1].className} 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 className="image-modal" visible={this.state.rightVisible} title={null} footer={null}
onCancel={this.handleCancel.bind(this)}>
<Carousel>
{ comparable ? imagesList[1] : imagesList }
</Carousel>
<div className="preview-image-title">{imagesList[1].alt}</div>
</Modal>
</div> : null
<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
}
</div>
);