From 12e90db0ad9c2c13eb62ada12118d81353fd9956 Mon Sep 17 00:00:00 2001 From: apala4 Date: Thu, 29 Dec 2016 15:25:10 -0600 Subject: [PATCH] Fixing issue #115 by Passing down results from filter prop to row container to uncollapse children when they match the search. --- modules/gridRowContainer.jsx.js | 213 ++++++++++++++++---------------- modules/gridTable.jsx.js | 4 +- modules/griddle.jsx.js | 1 + 3 files changed, 113 insertions(+), 105 deletions(-) diff --git a/modules/gridRowContainer.jsx.js b/modules/gridRowContainer.jsx.js index 0619d3c7..3a1f8808 100644 --- a/modules/gridRowContainer.jsx.js +++ b/modules/gridRowContainer.jsx.js @@ -1,6 +1,6 @@ /* - See License / Disclaimer https://raw.githubusercontent.com/DynamicTyped/Griddle/master/LICENSE -*/ + See License / Disclaimer https://raw.githubusercontent.com/DynamicTyped/Griddle/master/LICENSE + */ 'use strict'; var React = require('react'); @@ -8,116 +8,121 @@ var ColumnProperties = require('./columnProperties.js'); var pick = require('lodash/pick'); var GridRowContainer = React.createClass({ - displayName: 'GridRowContainer', + displayName: 'GridRowContainer', - getDefaultProps: function getDefaultProps() { - return { - "useGriddleStyles": true, - "useGriddleIcons": true, - "isSubGriddle": false, - "columnSettings": null, - "rowSettings": null, - "paddingHeight": null, - "rowHeight": null, - "parentRowCollapsedClassName": "parent-row", - "parentRowExpandedClassName": "parent-row expanded", - "parentRowCollapsedComponent": "▶", - "parentRowExpandedComponent": "▼", - "onRowClick": null, - "multipleSelectionSettings": null - }; - }, - getInitialState: function getInitialState() { - return { - "data": {}, - "showChildren": false - }; - }, - componentWillReceiveProps: function componentWillReceiveProps() { - this.setShowChildren(false); - }, - toggleChildren: function toggleChildren() { - this.setShowChildren(this.state.showChildren === false); - }, - setShowChildren: function setShowChildren(visible) { - this.setState({ - showChildren: visible - }); - }, - verifyProps: function verifyProps() { - if (this.props.columnSettings === null) { - console.error("gridRowContainer: The columnSettings prop is null and it shouldn't be"); - } - }, - render: function render() { - this.verifyProps(); - var that = this; - if (typeof this.props.data === "undefined") { - return React.createElement('tbody', null); - } - var arr = []; + getDefaultProps: function getDefaultProps() { + return { + "useGriddleStyles": true, + "useGriddleIcons": true, + "isSubGriddle": false, + "columnSettings": null, + "rowSettings": null, + "paddingHeight": null, + "rowHeight": null, + "parentRowCollapsedClassName": "parent-row", + "parentRowExpandedClassName": "parent-row expanded", + "parentRowCollapsedComponent": "▶", + "parentRowExpandedComponent": "▼", + "onRowClick": null, + "multipleSelectionSettings": null, + "resultsFromFilter": false + }; + }, + getInitialState: function getInitialState() { + return { + "data": {}, + "showChildren": false + }; + }, + componentDidMount() { + this.setShowChildren(this.props.resultsFromFilter); + }, + componentWillReceiveProps: function componentWillReceiveProps() { + this.setShowChildren(false); + }, + toggleChildren: function toggleChildren() { + this.setShowChildren(this.state.showChildren === false); + }, + setShowChildren: function setShowChildren(visible) { + this.setState({ + showChildren: visible + }); + }, + verifyProps: function verifyProps() { + if (this.props.columnSettings === null) { + console.error("gridRowContainer: The columnSettings prop is null and it shouldn't be"); + } + }, + render: function render() { + this.verifyProps(); + var that = this; + if (typeof this.props.data === "undefined") { + return React.createElement('tbody', null); + } + var arr = []; + + var columns = this.props.columnSettings.getColumns(); - var columns = this.props.columnSettings.getColumns(); + arr.push(React.createElement(this.props.rowSettings.rowComponent, { + useGriddleStyles: this.props.useGriddleStyles, + isSubGriddle: this.props.isSubGriddle, + data: this.props.rowSettings.isCustom ? pick(this.props.data, columns) : this.props.data, + rowData: this.props.rowSettings.isCustom ? this.props.data : null, + columnSettings: this.props.columnSettings, + rowSettings: this.props.rowSettings, + hasChildren: that.props.hasChildren, + toggleChildren: that.toggleChildren, + showChildren: that.state.showChildren, + key: that.props.uniqueId + '_base_row', + useGriddleIcons: that.props.useGriddleIcons, + parentRowExpandedClassName: this.props.parentRowExpandedClassName, + parentRowCollapsedClassName: this.props.parentRowCollapsedClassName, + parentRowExpandedComponent: this.props.parentRowExpandedComponent, + parentRowCollapsedComponent: this.props.parentRowCollapsedComponent, + paddingHeight: that.props.paddingHeight, + rowHeight: that.props.rowHeight, + onRowClick: that.props.onRowClick, + multipleSelectionSettings: this.props.multipleSelectionSettings + })); - arr.push(React.createElement(this.props.rowSettings.rowComponent, { - useGriddleStyles: this.props.useGriddleStyles, - isSubGriddle: this.props.isSubGriddle, - data: this.props.rowSettings.isCustom ? pick(this.props.data, columns) : this.props.data, - rowData: this.props.rowSettings.isCustom ? this.props.data : null, - columnSettings: this.props.columnSettings, - rowSettings: this.props.rowSettings, - hasChildren: that.props.hasChildren, - toggleChildren: that.toggleChildren, - showChildren: that.state.showChildren, - key: that.props.uniqueId + '_base_row', - useGriddleIcons: that.props.useGriddleIcons, - parentRowExpandedClassName: this.props.parentRowExpandedClassName, - parentRowCollapsedClassName: this.props.parentRowCollapsedClassName, - parentRowExpandedComponent: this.props.parentRowExpandedComponent, - parentRowCollapsedComponent: this.props.parentRowCollapsedComponent, - paddingHeight: that.props.paddingHeight, - rowHeight: that.props.rowHeight, - onRowClick: that.props.onRowClick, - multipleSelectionSettings: this.props.multipleSelectionSettings })); + var children = null; - var children = null; + if (that.state.showChildren) { + children = that.props.hasChildren && this.props.data["children"].map(function (row, index) { + var key = that.props.rowSettings.getRowKey(row, index); - if (that.state.showChildren) { - children = that.props.hasChildren && this.props.data["children"].map(function (row, index) { - var key = that.props.rowSettings.getRowKey(row, index); + if (typeof row["children"] !== "undefined") { + var Griddle = that.constructor.Griddle; + return React.createElement('tr', {key: key, style: {paddingLeft: 5}}, React.createElement('td', {colSpan: that.props.columnSettings.getVisibleColumnCount(), className: 'griddle-parent', style: that.props.useGriddleStyles ? {border: "none", "padding": "0 0 0 5px"} : null}, React.createElement(Griddle, { + rowMetadata: {key: 'id'}, + isSubGriddle: true, + results: [row], + columns: that.props.columnSettings.getColumns(), + tableClassName: that.props.tableClassName, + parentRowExpandedClassName: that.props.parentRowExpandedClassName, + parentRowCollapsedClassName: that.props.parentRowCollapsedClassName, + showTableHeading: false, + showPager: false, + columnMetadata: that.props.columnSettings.columnMetadata, + parentRowExpandedComponent: that.props.parentRowExpandedComponent, + parentRowCollapsedComponent: that.props.parentRowCollapsedComponent, + paddingHeight: that.props.paddingHeight, + rowHeight: that.props.rowHeight + }))); + } - if (typeof row["children"] !== "undefined") { - var Griddle = that.constructor.Griddle; - return React.createElement('tr', { key: key, style: { paddingLeft: 5 } }, React.createElement('td', { colSpan: that.props.columnSettings.getVisibleColumnCount(), className: 'griddle-parent', style: that.props.useGriddleStyles ? { border: "none", "padding": "0 0 0 5px" } : null }, React.createElement(Griddle, { - rowMetadata: { key: 'id' }, - isSubGriddle: true, - results: [row], - columns: that.props.columnSettings.getColumns(), - tableClassName: that.props.tableClassName, - parentRowExpandedClassName: that.props.parentRowExpandedClassName, - parentRowCollapsedClassName: that.props.parentRowCollapsedClassName, - showTableHeading: false, - showPager: false, - columnMetadata: that.props.columnSettings.columnMetadata, - parentRowExpandedComponent: that.props.parentRowExpandedComponent, - parentRowCollapsedComponent: that.props.parentRowCollapsedComponent, - paddingHeight: that.props.paddingHeight, - rowHeight: that.props.rowHeight - }))); + return React.createElement(that.props.rowSettings.rowComponent, { + useGriddleStyles: that.props.useGriddleStyles, + isSubGriddle: that.props.isSubGriddle, + data: row, + columnSettings: that.props.columnSettings, + isChildRow: true, + columnMetadata: that.props.columnSettings.columnMetadata, + key: key + }); + }); } - return React.createElement(that.props.rowSettings.rowComponent, { - useGriddleStyles: that.props.useGriddleStyles, - isSubGriddle: that.props.isSubGriddle, - data: row, - columnSettings: that.props.columnSettings, - isChildRow: true, - columnMetadata: that.props.columnSettings.columnMetadata, - key: key - }); - }); - } - return that.props.hasChildren === false ? arr[0] : React.createElement('tbody', null, that.state.showChildren ? arr.concat(children) : arr); } }); diff --git a/modules/gridTable.jsx.js b/modules/gridTable.jsx.js index 4cfead26..0e90e04d 100644 --- a/modules/gridTable.jsx.js +++ b/modules/gridTable.jsx.js @@ -24,6 +24,7 @@ var GridTable = React.createClass({ "nextPage": null, "hasMorePages": false, "useFixedHeader": false, + "resultsFromFilter": false, "useFixedLayout": true, "paddingHeight": null, "rowHeight": null, @@ -159,7 +160,8 @@ var GridTable = React.createClass({ rowHeight: that.props.rowHeight, hasChildren: hasChildren, tableClassName: that.props.className, - onRowClick: that.props.onRowClick + onRowClick: that.props.onRowClick, + resultsFromFilter: that.props.resultsFromFilter }); }); diff --git a/modules/griddle.jsx.js b/modules/griddle.jsx.js index 1e22a78a..3bfc3f18 100644 --- a/modules/griddle.jsx.js +++ b/modules/griddle.jsx.js @@ -834,6 +834,7 @@ var Griddle = React.createClass({ useFixedLayout: this.props.useFixedLayout, showPager: this.props.showPager, pagingContent: pagingContent, + resultsFromFilter: !this.isNullOrUndefined(this.state.filteredResults), data: data, className: this.props.tableClassName, enableInfiniteScroll: this.isInfiniteScrollEnabled(),