i-react-utils/lib/List.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,['data','count','renderRow','showPagination','onPageChanged','prepareDataForPage','noDataComponent','headerAlwaysOn'])}var List=function(_React$Component){_inherits(List,_React$Component);function List(props){_classCallCheck(this,List);var _this=_possibleConstructorReturn(this,(List.__proto__||Object.getPrototypeOf(List)).call(this));_this.state={};_this.page=1;if(props.renderRow==undefined){throw new Error('Missing function renderRow(item,index,key):component')}_this._handlePageChange=_this._handlePageChange.bind(_this);_this._data=_this._data.bind(_this);_this.props=props;_this.htmlProps=copyProps(props);_this.noDataElement=(0,_utilsInternal._buildElement)(props.noDataComponent,_this.htmlProps,[]);return _this}_createClass(List,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){var updateData=!(0,_iJsUtils.isEquivalent)(this.props.data,nextProps.data);this.htmlProps=copyProps(nextProps);if(this.props.noDataComponent!=nextProps.noDataComponent){this.noDataElement=(0,_utilsInternal._buildElement)(nextProps.noDataComponent,this.htmlProps,[])}this.props=nextProps;if(updateData){this._data(nextProps.data,true)}}},{key:'componentDidMount',value:function componentDidMount(){this._data(this.props.data,true)}},{key:'_data',value:function _data(data,resetPage){if(resetPage){this.page=1}if(data==null||data==undefined){data=[]}var update={items:this.props.prepareDataForPage(data,this.page,this.props.count),total:data.length,page:this.page};this.setState(update)}},{key:'_handlePageChange',value:function _handlePageChange(pg){if(this.props.onPageChanged!=undefined){this.props.onPageChanged(pg)}this.page=pg;this._data(this.props.data,false)}},{key:'render',value:function render(){var _this2=this;var _state=this.state,items=_state.items,total=_state.total,page=_state.page;return _react2.default.createElement('div',_extends({},this.htmlProps,{key:this.id}),_react2.default.createElement(_ListComponents.SimpleListTable,{className:this.props.className,id:this.props.id,renderRow:this.props.renderRow,data:items,indexOffset:(page-1)*this.props.count,headerAlwaysOn:this.props.headerAlwaysOn,noDataElement:this.noDataElement},this.props.children),function(){if(items&&_this2.props.showPagination){return _react2.default.createElement(_ListComponents.ListPagination,{className:_this2.props.className,onPageChanged:_this2._handlePageChange,id:_this2.props.id,total:total,count:_this2.props.count,page:page})}else{return null}}())}}]);return List}(_react2.default.Component);List.propTypes={id:_react2.default.PropTypes.string,data:_react2.default.PropTypes.array,renderRow:_react2.default.PropTypes.func.isRequired,count:_react2.default.PropTypes.number,onPageChanged:_react2.default.PropTypes.func,prepareDataForPage:_react2.default.PropTypes.func,showPagination:_react2.default.PropTypes.bool,headerAlwaysOn:_react2.default.PropTypes.bool,noDataComponent:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.func,_react2.default.PropTypes.element])};List.defaultProps={showPagination:true,headerAlwaysOn:true,count:10,id:'list-'+Math.floor(Math.random()*1000000).toString(22),prepareDataForPage:function prepareDataForPage(data,page,count){return data.slice((page-1)*count,page*count)}};exports.default=List;module.exports=exports.default;