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 (