i-react-utils/lib/AjaxList.js

iReact utils

'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};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 _ListComponents=require('./ListComponents');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 copyProps(props){return(0,_iJsUtils.shallowCopyExcept)({},props,['dataTransform','fetchDataCallback','onFetch','onSuccess','onError','renderRow','showPagination','loadingComponent','errorComponent','noDataComponent','headerAlwaysOn'])}var AjaxList=function(_React$Component){_inherits(AjaxList,_React$Component);function AjaxList(props){_classCallCheck(this,AjaxList);var _this=_possibleConstructorReturn(this,(AjaxList.__proto__||Object.getPrototypeOf(AjaxList)).call(this,props));_this.props=props;_this.id=props.id||'ajaxList-'+Math.random()*10000;_this._fetchData=_this._fetchData.bind(_this);_this._handlePageChange=_this._handlePageChange.bind(_this);_this.updateAndResetPage=_this.updateAndResetPage.bind(_this);_this.update=_this.update.bind(_this);_this.mounted=false;_this.currentPage=1;_this.htmlProps=copyProps(props);_this.loadingElement=(0,_utilsInternal._buildElement)(props.loadingComponent,_this.htmlProps,[]);_this.noDataElement=(0,_utilsInternal._buildElement)(props.noDataComponent,_this.htmlProps,[]);_this.state={'items':null,'paging':{'total':0,'page':1,'count':1},error:null};return _this}_createClass(AjaxList,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(newProps){this.htmlProps=copyProps(newProps);if(this.props.loadingComponent!=newProps.loadingComponent){this.loadingElement=(0,_utilsInternal._buildElement)(newProps.loadingComponent,this.htmlProps,[])}if(this.props.noDataComponent!=newProps.noDataComponent){this.noDataElement=(0,_utilsInternal._buildElement)(newProps.noDataComponent,this.htmlProps,[])}this.props=newProps}},{key:'_checkData',value:function _checkData(data){if(Array.isArray(data)&&this.props.showPagination&&this.pagesCount==undefined){throw new Error('Got array of data and pagination was required but pagesCount is not set.')}}},{key:'_fetchData',value:function _fetchData(page,withClear){var _this2=this;this.currentPage=page;if(this.props.onFetch){this.props.onFetch({page:page})}if(withClear){this.setState({items:null,error:null})}else{this.setState({error:null})}var promise=this.props.fetchDataCallback(page);if(promise){promise.then(function(resp){var data=resp.data;if(_this2.props.dataTransform){data=_this2.props.dataTransform(data,resp)}if(_this2.mounted){if(Array.isArray(data)){var _page=_this2.state.paging.page+1;var np=_extends({},_this2.state.paging);np.page=_page;_this2.setState({items:data,paging:np})}else{_this2.setState(data)}}if(_this2.props.onSuccess){_this2.props.onSuccess({page:page,data:data})}},function(err){(0,_iJsUtils.devOnly)(function(){console.log('AjaxList: fetch rejected: ',err)});if(_this2.props.onError){_this2.props.onError(err)}if(_this2.mounted){var errCompProps=_extends({},_this2.htmlProps,{error:err});var errorElement=(0,_utilsInternal._buildElement)(_this2.props.errorComponent,errCompProps,[]);_this2.setState({error:errorElement})}})}else{this.setState({'items':[],'paging':{'total':0,'page':1,'count':1}})}}},{key:'componentWillMount',value:function componentWillMount(){this.mounted=true}},{key:'componentDidMount',value:function componentDidMount(){this._fetchData(1,false)}},{key:'componentWillUnmount',value:function componentWillUnmount(){this.mounted=false}},{key:'_handlePageChange',value:function _handlePageChange(pg){this._fetchData(pg,true)}},{key:'updateAndResetPage',value:function updateAndResetPage(){this._fetchData(1,true)}},{key:'update',value:function update(){this._fetchData(this.currentPage,false)}},{key:'render',value:function render(){var _this3=this;var _state=this.state,paging=_state.paging,items=_state.items,error=_state.error;var noDataElem=void 0;if(error){noDataElem=error}else{noDataElem=items==null?this.loadingElement:this.noDataElement}var indexOffset=Math.max(0,paging.page-1)*paging.count;return _react2.default.createElement('div',_extends({id:this.id},this.htmlProps),_react2.default.createElement(_ListComponents.SimpleListTable,{className:this.props.className,id:this.id,renderRow:this.props.renderRow,data:items,headerAlwaysOn:this.props.headerAlwaysOn,noDataElement:noDataElem,indexOffset:indexOffset},this.props.children),function(){if(_this3.props.showPagination){return _react2.default.createElement(_ListComponents.ListPagination,{className:_this3.props.className,onPageChanged:_this3._handlePageChange,id:_this3.id,total:paging.total,count:paging.count,page:paging.page})}else{return null}}())}}]);return AjaxList}(_react2.default.Component);AjaxList.propTypes={id:_react2.default.PropTypes.string,fetchDataCallback:_react2.default.PropTypes.func.isRequired,dataTransform:_react2.default.PropTypes.func,onFetch:_react2.default.PropTypes.func,onError:_react2.default.PropTypes.func,onSuccess:_react2.default.PropTypes.func,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]),noDataComponent:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.func,_react2.default.PropTypes.element]),renderRow:_react2.default.PropTypes.func.isRequired,showPagination:_react2.default.PropTypes.bool,headerAlwaysOn:_react2.default.PropTypes.bool};AjaxList.defaultProps={id:'ajaxList-'+Math.floor(Math.random()*1000000).toString(22),showPagination:true,headerAlwaysOn:true,className:'ajaxList',errorComponent:_react2.default.createElement('div',{className:'center-block ajaxList-error'},'An error occurred.'),loadingComponent:_react2.default.createElement('div',{className:'center-block ajaxList-loader'})};exports.default=AjaxList;module.exports=exports.default;