Merge branch 'master' of https://github.com/primefaces/primereact

primefaces · Feb 3, 2019 · 1e3557c · 1e3557c
2 parents 93efab6 + 9d73834
commit 1e3557c
Show file tree

Hide file tree

Showing 10 changed files with 436 additions and 14 deletions.
diff --git a/src/App.js b/src/App.js
@@ -72,6 +72,7 @@ import { DataTableResponsiveDemo } from './showcase/datatable/DataTableResponsiv
 import { DataTableEditDemo } from './showcase/datatable/DataTableEditDemo';
 import { DataTableRowGroupDemo } from './showcase/datatable/DataTableRowGroupDemo';
 import { DataTableStyleDemo } from './showcase/datatable/DataTableStyleDemo';
+import { DataTableStateDemo } from './showcase/datatable/DataTableStateDemo';
 import { OrderListDemo } from './showcase/orderlist/OrderListDemo';
 import { PickListDemo } from './showcase/picklist/PickListDemo';
 import { FullCalendarDemo } from './showcase/fullcalendar/FullCalendarDemo';
@@ -364,6 +365,7 @@ export class App extends Component {
                     <Route path="/datatable/rowgroup" component={DataTableRowGroupDemo} />
                     <Route path="/datatable/crud" component={DataTableCrudDemo} />
                     <Route path="/datatable/style" component={DataTableStyleDemo} />
+                    <Route path="/datatable/state" component={DataTableStateDemo} />
                     <Route path="/orderlist" component={OrderListDemo} />
                     <Route path="/picklist" component={PickListDemo} />
                     <Route path="/fullcalendar" component={FullCalendarDemo} />

diff --git a/src/components/common/Common.css b/src/components/common/Common.css
@@ -135,7 +135,7 @@ button {
 
 .p-link {
 	text-align: left;
-	background: transparent;
+	background-color: transparent;
 	margin: 0;
 	padding: 0;
 	border: none;

diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -77,6 +77,8 @@ export class DataTable extends Component {
         loading: false,
         loadingIcon: 'pi pi-spinner',
         tabIndex: '0',
+        stateKey: null,
+        stateStorage: 'session',
         onColumnResizeEnd: null,
         onSort: null,
         onPage: null,
@@ -158,6 +160,8 @@ export class DataTable extends Component {
         loading: PropTypes.bool,
         loadingIcon: PropTypes.string,
         tabIndex: PropTypes.string,
+        stateKey: PropTypes.string,
+        stateStorage: PropTypes.string,
         onColumnResizeEnd: PropTypes.func,
         onSort: PropTypes.func,
         onPage: PropTypes.func,
@@ -194,6 +198,10 @@ export class DataTable extends Component {
             state.filters = props.filters;
         }
 
+        if (this.isStateful()) {
+            this.restoreState(state);
+        }
+
         if (Object.keys(state).length) {
             this.state = state;
         }
@@ -235,6 +243,188 @@ export class DataTable extends Component {
         return this.props.onFilter ? this.props.filters : this.state.filters;
     }
 
+    getStorage() {
+        switch(this.props.stateStorage) {
+            case 'local':
+                return window.localStorage;
+
+            case 'session':
+                return window.sessionStorage;
+
+            default:
+                throw new Error(this.props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
+        }
+    }
+
+    isStateful() {
+        return this.props.stateKey != null;
+    }
+
+    saveState() {
+        const storage = this.getStorage();
+        let state = {};
+
+        if (this.props.paginator) {
+            state.first = this.getFirst();
+            state.rows = this.getRows();
+        }
+
+        if (this.getSortField()) {
+            state.sortField = this.getSortField();
+            state.sortOrder = this.getSortOrder();
+            state.multiSortMeta = this.getMultiSortMeta();
+        }
+
+        if (this.hasFilter()) {
+            state.filters = this.getFilters();
+        }
+
+        if (this.props.resizableColumns) {
+            this.saveColumnWidths(state);
+        }
+
+        if (this.props.reorderableColumns) {
+            state.columnOrder = this.state.columnOrder;
+        }
+
+        if (this.props.expandedRows) {
+            state.expandedRows = this.props.expandedRows;
+        }
+
+        if (this.props.selection && this.props.onSelectionChange) {
+            state.selection = this.props.selection;
+        }
+
+        if (Object.keys(state).length) {
+            storage.setItem(this.props.stateKey, JSON.stringify(state));
+        }
+    }
+
+    clearState() {
+        const storage = this.getStorage();
+
+        if (this.props.stateKey) {
+            storage.removeItem(this.props.stateKey);
+        }
+    }
+
+    restoreState(state) {
+        const storage = this.getStorage();
+        const stateString = storage.getItem(this.props.stateKey);
+
+        if (stateString) {
+            let restoredState = JSON.parse(stateString);
+
+            if (this.props.paginator) {
+                if (this.props.onPage) {
+                    this.props.onPage({
+                        first: restoredState.first,
+                        rows: restoredState.rows
+                    });
+                }
+                else {
+                    state.first = restoredState.first;
+                    state.rows = restoredState.rows;
+                }
+            }
+
+            if (restoredState.sortField) {
+                if (this.props.onSort) {
+                    this.props.onSort({
+                        sortField: restoredState.sortField,
+                        sortOrder: restoredState.sortOrder,
+                        multiSortMeta: restoredState.multiSortMeta
+                    });
+                }
+                else {
+                    state.sortField = restoredState.sortField;
+                    state.sortOrder = restoredState.sortOrder;
+                    state.multiSortMeta = restoredState.multiSortMeta;
+                }
+            }
+
+            if (restoredState.filters) {
+                if (this.props.onFilter) {
+                    this.props.onFilter({
+                        filters: restoredState.filters
+                    });
+                }
+                else {
+                    state.filters = restoredState.filters;
+                }
+            }
+
+            if (this.props.resizableColumns) {
+                this.columnWidthsState = restoredState.columnWidths;
+                this.tableWidthState = restoredState.tableWidth;
+            }
+
+            if (this.props.reorderableColumns) {
+                state.columnOrder = restoredState.columnOrder;
+            }
+
+            if (restoredState.expandedRows && this.props.onRowToggle) {
+                this.props.onRowToggle({
+                    data: restoredState.expandedRows
+                });
+            }
+
+            if (restoredState.selection && this.props.onSelectionChange) {
+                this.props.onSelectionChange({
+                    value: restoredState.selection
+                });
+            }
+        }
+    }
+
+    saveColumnWidths(state) {
+        let widths = [];
+        let headers = DomHandler.find(this.container, '.p-datatable-thead > tr > th');
+        headers.map(header => widths.push(DomHandler.getOuterWidth(header)));
+        state.columnWidths = widths.join(',');
+
+        if (this.props.columnResizeMode === 'expand') {
+            state.tableWidth = this.props.scrollable ? DomHandler.findSingle(this.container, '.p-datatable-scrollable-header-table').style.width :
+                                                DomHandler.getOuterWidth(this.table) + 'px';
+        }
+    }
+
+    restoreColumnWidths() {
+        if (this.columnWidthsState) {
+            let widths = this.columnWidthsState.split(',');
+
+            if (this.props.columnResizeMode === 'expand' && this.tableWidthState) {
+                if (this.props.scrollable) {
+                    let scrollableBodyTable = DomHandler.findSingle(this.container, '.p-datatable-scrollable-body-table');
+                    let scrollableHeaderTable = DomHandler.findSingle(this.container, '.p-datatable-scrollable-header-table');
+                    let scrollableFooterTable = DomHandler.findSingle(this.container, '.p-datatable-scrollable-footer-table');
+                    scrollableBodyTable.style.width = this.tableWidthState;
+                    scrollableHeaderTable.style.width = this.tableWidthState;
+
+                    if (scrollableFooterTable) {
+                        scrollableFooterTable.style.width = this.tableWidthState;
+                    }
+                }
+                else {
+                    this.tableViewChild.nativeElement.style.width = this.tableWidthState;
+                    this.containerViewChild.nativeElement.style.width = this.tableWidthState;
+                }
+            }
+
+            if (this.props.scrollable) {
+                let headerCols = DomHandler.find(this.container, '.p-datatable-scrollable-header-table > colgroup > col');
+                let bodyCols = DomHandler.find(this.container, '.p-datatable-scrollable-body-table > colgroup > col');
+
+                headerCols.map((col, index) => col.style.width = widths[index] + 'px');
+                bodyCols.map((col, index) => col.style.width = widths[index] + 'px');
+            }
+            else {
+                let headers = DomHandler.find(this.table, '.p-datatable-thead > tr > th');
+                headers.map((header, index) => header.style.width = widths[index] + 'px');
+            }
+        } 
+    }
+
     onPageChange(event) {
         if (this.props.onPage)
             this.props.onPage(event);
@@ -533,6 +723,10 @@ export class DataTable extends Component {
                     delta: delta
                 });
             }
+
+            if (this.isStateful()) {
+                this.saveState();
+            }
         }
 
         this.resizerHelper.style.display = 'none';
@@ -1000,6 +1194,18 @@ export class DataTable extends Component {
         );
     }
 
+    componentDidMount() {
+        if (this.isStateful() && this.props.resizableColumns) {
+            this.restoreColumnWidths();
+        }
+    }
+
+    componentDidUpdate() {
+        if (this.isStateful()) {
+            this.saveState();
+        }
+    }
+
     render() {
         let value = this.processData();
         let columns = this.getColumns();

diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
@@ -271,7 +271,7 @@ export class TableBody extends Component {
         let index = -1;
         if(this.props.expandedRows) {
             for(let i = 0; i < this.props.expandedRows.length; i++) {
-                if(this.props.expandedRows[i] === row) {
+                if(ObjectUtils.equals(this.props.expandedRows[i], row)) {
                     index = i;
                     break;
                 }

diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
@@ -150,7 +150,7 @@ export default class DomHandler {
     }
 
     static find(element, selector) {
-        return element.querySelectorAll(selector);
+        return Array.from(element.querySelectorAll(selector));
     }
 
     static findSingle(element, selector) {

diff --git a/src/resources/images/primereact-slider-bg.jpg b/src/resources/images/primereact-slider-bg.jpg
diff --git a/src/sass/App.scss b/src/sass/App.scss
@@ -268,6 +268,7 @@ body {
             display: block;
             padding: 0px 24px;
             color: #333333;
+            background-color: transparent;
             cursor: pointer;
             user-select: none;
             text-align: left;
@@ -675,7 +676,6 @@ body {
                 td {
                     padding: 8px 14px;
                     border: 1px solid #d4e1e3;
-                    word-break: break-word;
                 }
 
                 tr{