chowa
Version:
UI component library based on React
118 lines (117 loc) • 3.8 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const spin_1 = require("../spin");
const icon_1 = require("../icon");
class Image extends React.PureComponent {
constructor(props) {
super(props);
this.timer = null;
this.img = document.createElement('img');
this.state = {
loaded: false,
failure: false
};
[
'onImageLoad',
'onImageError',
'onImageAbort'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
onImageLoad() {
this.setState({
loaded: true
});
if (this.props.onLoad) {
this.props.onLoad();
}
this.clearTimer();
}
onImageError() {
this.setState({
failure: true
});
if (this.props.onError) {
this.props.onError();
}
this.clearTimer();
}
onImageAbort() {
this.setState({
failure: true
});
if (this.props.onAbort) {
this.props.onAbort();
}
this.clearTimer();
}
componentDidMount() {
const { src, timeout } = this.props;
utils_1.doms.on(this.img, 'load', this.onImageLoad);
utils_1.doms.on(this.img, 'error', this.onImageError);
utils_1.doms.on(this.img, 'abort', this.onImageAbort);
if (timeout > 0) {
this.timer = window.setTimeout(() => {
this.img.src = '';
}, timeout);
}
this.img.src = src;
}
clearTimer() {
utils_1.doms.off(this.img, 'load', this.onImageLoad);
utils_1.doms.off(this.img, 'error', this.onImageError);
utils_1.doms.off(this.img, 'abort', this.onImageAbort);
if (this.timer !== null) {
clearTimeout(this.timer);
this.timer = null;
this.img.src = '';
}
}
componentWillUnmount() {
this.clearTimer();
}
render() {
const { className, width, height, src, figure, style, imgStyle } = this.props;
const { loaded, failure } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass('image')]: true,
[utils_1.preClass('image-border')]: !loaded,
[className]: utils_1.isExist(className)
});
const componentStyle = Object.assign(Object.assign(Object.assign({}, (height ? { height } : { minHeight: '100%' })), (width ? { width } : { minWidth: '100%' })), (style ? style : {}));
return (React.createElement("div", { className: componentClass, style: componentStyle },
!failure && !loaded && React.createElement(spin_1.default, null),
!failure && loaded && React.createElement("img", { className: utils_1.preClass('image-main'), src: src, style: imgStyle }),
failure && figure));
}
}
Image.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
imgStyle: PropTypes.object,
width: PropTypes.number,
height: PropTypes.number,
src: PropTypes.string.isRequired,
timeout: PropTypes.number,
onError: PropTypes.func,
onAbort: PropTypes.func,
figure: PropTypes.node
};
Image.defaultProps = {
timeout: 0,
figure: (React.createElement(icon_1.default, { type: 'img-figure' }))
};
exports.default = Image;