i-react-utils/lib/LazyLoad.js

iReact utils

'use strict';Object.defineProperty(exports,'__esModule',{value:true});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}}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _iJsUtils=require('i-js-utils');var _utilsInternal=require('./utils-internal');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}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}function _subElementProps(source){var dst={};(0,_iJsUtils.shallowCopyExcept)(dst,source,['component','errorComponent','loadingComponent','ajax']);return dst}var LazyLoad=function(_React$Component){_inherits(LazyLoad,_React$Component);function LazyLoad(props){_classCallCheck(this,LazyLoad);var _this=_possibleConstructorReturn(this,(LazyLoad.__proto__||Object.getPrototypeOf(LazyLoad)).call(this));_this.state={element:null,loading:true};_this._setup=_this._setup.bind(_this);_this.reload=_this.reload.bind(_this);_this.subElementProps=_subElementProps(props);_this.loadingElement=(0,_utilsInternal._buildElement)(props.loadingComponent,_this.subElementProps,[]);return _this}_createClass(LazyLoad,[{key:'_setup',value:function _setup(props){var _this2=this;if(props.component==undefined){throw new Error('Property component of LazyLoad is required')}var promise=props.ajax();if(promise&&promise.then&&promise.catch){promise.then(function(res){var data=res.data;var cProps=_subElementProps(props);cProps.data=data;var element=(0,_utilsInternal._buildElement)(props.component,cProps,props.children);_this2.setState({element:element,loading:false})}).catch(function(err){(0,_iJsUtils.devOnly)(function(){console.log('Unable to load resource via ajax for LazyLoad.',err)});if(props.errorComponent){var cProps=_subElementProps(props);cProps.data=err.response.data;var element=(0,_utilsInternal._buildElement)(props.errorComponent,cProps,props.children);_this2.setState({element:element,loading:false})}else{_this2.setState({element:null,loading:false})}})}else{throw new Error('Ajax returned '+promise+' instead of Promise.')}}},{key:'reload',value:function reload(){this.setState({element:null,loading:true});this._setup(this.props)}},{key:'componentWillMount',value:function componentWillMount(){this._setup(this.props)}},{key:'componentWillReceiveProps',value:function componentWillReceiveProps(newProps){if(this.props.loadingComponent!=newProps.loadingComponent){this.loadingElement=(0,_utilsInternal._buildElement)(newProps.loadingComponent,_subElementProps(newProps),[])}this.props=newProps}},{key:'render',value:function render(){var _state=this.state,element=_state.element,loading=_state.loading;if(element==null){if(loading){return this.loadingElement}else{return null}}else{return element}}}]);return LazyLoad}(_react2.default.Component);LazyLoad.propTypes={component:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.func,_react2.default.PropTypes.element]).isRequired,errorComponent:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.func,_react2.default.PropTypes.element]),loadingComponent:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.func,_react2.default.PropTypes.element]),ajax:_react2.default.PropTypes.func.isRequired};LazyLoad.defaultProps={errorComponent:null,loadingComponent:null};exports.default=LazyLoad;module.exports=exports.default;