react-loading-image
Advanced tools
Comparing version 0.2.0 to 0.3.0
158
lib/index.js
@@ -0,11 +1,34 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
import * as React from 'react'; | ||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
export default class ImageLoader extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.reload = this.reload.bind(this); | ||
var _react = require('react'); | ||
this.state = { | ||
var React = _interopRequireWildcard(_react); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
var ImageLoader = function (_React$Component) { | ||
_inherits(ImageLoader, _React$Component); | ||
function ImageLoader(props) { | ||
_classCallCheck(this, ImageLoader); | ||
var _this = _possibleConstructorReturn(this, (ImageLoader.__proto__ || Object.getPrototypeOf(ImageLoader)).call(this, props)); | ||
_this.reload = _this.reload.bind(_this); | ||
_this.state = { | ||
isLoading: true, | ||
@@ -16,63 +39,84 @@ isError: false, | ||
}; | ||
return _this; | ||
} | ||
componentWillReceiveProps(nextProps) { | ||
this.reload(nextProps); | ||
} | ||
_createClass(ImageLoader, [{ | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps(nextProps) { | ||
this.reload(nextProps); | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this.reload(this.props); | ||
} | ||
}, { | ||
key: 'reload', | ||
value: function reload(props) { | ||
var _this2 = this; | ||
componentDidMount() { | ||
this.reload(this.props); | ||
} | ||
reload(props) { | ||
// initialize | ||
this.setState({ | ||
isLoading: true, | ||
isError: false, | ||
src: null, | ||
errMsg: null | ||
}); | ||
const image = new Image(); | ||
image.src = props.src; | ||
image.onload = () => { | ||
// initialize | ||
this.setState({ | ||
src: image.src, | ||
isLoading: false, | ||
isLoading: true, | ||
isError: false, | ||
src: null, | ||
errMsg: null | ||
}); | ||
if (props.onLoad) { | ||
props.onLoad(image); | ||
var image = new Image(); | ||
image.src = props.src; | ||
image.onload = function () { | ||
_this2.setState({ | ||
src: image.src, | ||
isLoading: false, | ||
isError: false, | ||
errMsg: null | ||
}); | ||
if (props.onLoad) { | ||
props.onLoad(image); | ||
} | ||
}; | ||
image.onerror = function (err) { | ||
_this2.setState({ | ||
src: null, | ||
isLoading: false, | ||
isError: true, | ||
errMsg: err | ||
}); | ||
if (props.onError) { | ||
props.onError(err); | ||
} | ||
}; | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var _props = this.props, | ||
loading = _props.loading, | ||
error = _props.error, | ||
image = _props.image; | ||
var _state = this.state, | ||
src = _state.src, | ||
isLoading = _state.isLoading, | ||
isError = _state.isError, | ||
errMsg = _state.errMsg; | ||
if (loading && isLoading) { | ||
return loading(); | ||
} else if (error && isError && errMsg) { | ||
return error(errMsg); | ||
} else if (src && image) { | ||
return image({ src: src }); | ||
} else if (src) { | ||
return React.createElement('img', _extends({}, this.props, { src: src })); | ||
} | ||
}; | ||
image.onerror = err => { | ||
this.setState({ | ||
src: null, | ||
isLoading: false, | ||
isError: true, | ||
errMsg: err | ||
}); | ||
if (props.onError) { | ||
props.onError(err); | ||
} | ||
}; | ||
} | ||
render() { | ||
const { loading, error, image } = this.props; | ||
const { src, isLoading, isError, errMsg } = this.state; | ||
if (loading && isLoading) { | ||
return loading(); | ||
} else if (error && isError && errMsg) { | ||
return error(errMsg); | ||
} else if (src && image) { | ||
return image({ src }); | ||
} else if (src) { | ||
return React.createElement('img', _extends({}, this.props, { src: src })); | ||
return null; | ||
} | ||
}]); | ||
return null; | ||
} | ||
} | ||
return ImageLoader; | ||
}(React.Component); | ||
exports.default = ImageLoader; |
{ | ||
"name": "react-loading-image", | ||
"version": "0.2.0", | ||
"version": "0.3.0", | ||
"description": "A react image loader component", | ||
@@ -19,2 +19,3 @@ "homepage": "", | ||
"devDependencies": { | ||
"antd": "^3.2.3", | ||
"babel-cli": "^6.14.0", | ||
@@ -24,2 +25,3 @@ "babel-core": "^6.14.0", | ||
"babel-loader": "^7.1.3", | ||
"babel-preset-env": "^1.6.1", | ||
"babel-preset-flow": "^6.23.0", | ||
@@ -30,2 +32,3 @@ "babel-preset-react": "^6.24.1", | ||
"cross-env": "^5.1.3", | ||
"css-loader": "^0.28.10", | ||
"enzyme": "^2.4.1", | ||
@@ -46,2 +49,3 @@ "eslint": "^4.18.2", | ||
"rimraf": "^2.5.4", | ||
"style-loader": "^0.20.2", | ||
"styled-components": "^3.2.0", | ||
@@ -64,3 +68,3 @@ "webpack": "^4.0.1", | ||
"gh-pages:clean": "rimraf _gh-pages && ncp ./docs ./_gh-pages", | ||
"gh-pages:build": "cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.ghPage.js", | ||
"gh-pages:build": "cross-env BABEL_ENV=production ./node_modules/.bin/webpack --config webpack.config.ghPage.js --mode production", | ||
"gh-pages:publish": "git-directory-deploy --directory _gh-pages", | ||
@@ -67,0 +71,0 @@ "gh-pages": "npm run gh-pages:clean && npm run gh-pages:build && npm run gh-pages:publish", |
# react-loading-image [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] | ||
> A react image loader component | ||
![preview](./docs/image-loader.gif) | ||
## Installation | ||
@@ -54,6 +57,4 @@ | ||
You might want to customized such as `<div/>` as your final view, instead of `<img/>` tags | ||
You might want to customized such as `<div/>` as your final view, instead of `<img/>` tags, you can use `image` prop to replace any React element as you wish! | ||
you can use `image` prop to replace any React element as you wish! | ||
For example, using `styled-components`: | ||
@@ -60,0 +61,0 @@ |
12994
100
127
32