diff --git a/src/components/dataview/DataView.js b/src/components/dataview/DataView.js index 522f5e221a..1785c9cad3 100644 --- a/src/components/dataview/DataView.js +++ b/src/components/dataview/DataView.js @@ -66,10 +66,10 @@ export class DataView extends Component { sortOrder: this.props.sortOrder, sortField: this.props.sortField }; + this.sortChange = false; this.onPageChange=this.onPageChange.bind(this) } - getTotalRecords() { return this.props.value ? this.props.lazy ? this.props.totalRecords : this.props.value.length : 0; } @@ -132,6 +132,7 @@ export class DataView extends Component { }); } + this.sortChange = true; if (this.props.lazy) { if(this.props.onLazyLoad) { this.props.onLazyLoad({ @@ -162,50 +163,106 @@ export class DataView extends Component { this.setState({totalRecords : this.filteredValue ? this.filteredValue.length : this.props.value ? this.props.value.length : 0}); } } - } + componentWillUpdate(nextProps){ if (this.state.sortField!==nextProps.sortField || this.state.sortOrder!==nextProps.sortOrder) { this.setState({sortField: nextProps.sortField, sortOrder: nextProps.sortOrder}); + this.sortChange = false; } } componentDidUpdate(){ - if(this.state.sortField){ + if(this.state.sortField && !this.sortChange){ this.sort(); } } - render() { + renderTopPaginator(){ + if(this.props.paginator && (this.props.paginatorPosition !== 'bottom' || this.props.paginatorPosition === 'both')){ + return this.createPaginator('top') + } + else { + return null; + } + } - let value=this.props.paginator ? ((this.filteredValue||this.props.value).slice((this.props.lazy ? 0 : this.state.first),((this.props.lazy ? 0 : this.state.first) + this.state.rows))): - (this.filteredValue||this.props.value); + renderBottomPaginator(){ + if(this.props.paginator && (this.props.paginatorPosition !== 'top' || this.props.paginatorPosition === 'both')) { + return this.createPaginator('bottom') + } + else { + return null; + } + } - let className = classNames('ui-dataview ui-widget', {'ui-dataview-list': (this.state.layout === 'list'), - 'ui-dataview-grid': (this.state.layout === 'grid')}, this.props.className); + renderEmptyMessage(){ + if(this.isEmpty()) { + return
{this.props.emptyMessage}
; + } + else { + return null; + } + } - let topPaginator = (this.props.paginator && (this.props.paginatorPosition !== 'bottom' || this.props.paginatorPosition === 'both')) && this.createPaginator('top'), - bottomPaginator = (this.props.paginator && (this.props.paginatorPosition !== 'top' || this.props.paginatorPosition === 'both')) && this.createPaginator('bottom'); + renderHeader(){ + if(this.props.header) { + return
{this.props.header}
; + } + else { + return null; + } + } - let emptyMessage =this.isEmpty() &&
{this.props.emptyMessage}
; + renderFooter(){ + if(this.props.footer) { + return
{this.props.footer}
; + } + else { + return null; + } + } + renderContent(){ + + let value=this.props.paginator ? ((this.filteredValue||this.props.value).slice((this.props.lazy ? 0 : this.state.first),((this.props.lazy ? 0 : this.state.first) + this.state.rows))): + (this.filteredValue||this.props.value); let itemClassName = classNames('ui-g-12', (this.state.layout === 'list'?'':' ui-md-3')); - let header = this.props.header &&
{this.props.header}
, - footer = this.props.footer &&
{this.props.footer}
, - content = ( -
-
- { - value && value.map((val, i) => { - return this.props.itemTemplate ? React.cloneElement(this.props.itemTemplate(val,this.state.layout), {key : i + '_dataviewitem'}) :
{val}
; - }) - } - {emptyMessage} -
+ let emptyMessage = this.renderEmptyMessage(); + + return ( +
+
+ { + value && value.map((val, i) => { + return this.props.itemTemplate ? React.cloneElement(this.props.itemTemplate(val,this.state.layout), {key : i + '_dataviewitem'}) :
{val}
; + }) + } + {emptyMessage}
- ); +
+ ); + } + + shouldComponentUpdate(nextProps, nextState) { + if(this.props.lazy && nextProps.value === this.props.value) + return false; + else + return true; + } + + render() { + + let className = classNames('ui-dataview ui-widget', {'ui-dataview-list': (this.state.layout === 'list'), + 'ui-dataview-grid': (this.state.layout === 'grid')}, this.props.className); + + let topPaginator = this.renderTopPaginator(); + let bottomPaginator = this.renderBottomPaginator() ; + let header = this.renderHeader(); + let footer = this.renderFooter(); + let content = this.renderContent(); return (