Skip to content

Commit

Permalink
Merged.
Browse files Browse the repository at this point in the history
  • Loading branch information
@joellanciaux
joellanciaux committed Jan 15, 2016
2 parents bbc9229 + 3de1b01 commit 4f50a78
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 84 deletions.
91 changes: 64 additions & 27 deletions build/griddle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -735,7 +735,13 @@ return /******/ (function(modules) { // webpackBootstrap
var sortProperties = this.getSortObject();
var multipleSelectionProperties = this.getMultipleSelectionObject();

// no data section
var showNoData = this.shouldShowNoDataSection(data);
var noDataSection = this.getNoDataSection();

return React.createElement('div', { className: 'griddle-body' }, React.createElement(GridTable, { useGriddleStyles: this.props.useGriddleStyles,
noDataSection: noDataSection,
showNoData: showNoData,
columnSettings: this.columnSettings,
rowSettings: this.rowSettings,
sortSettings: sortProperties,
Expand Down Expand Up @@ -773,16 +779,11 @@ return /******/ (function(modules) { // webpackBootstrap
return this.getStandardGridSection(data, cols, meta, pagingContent, hasMorePages);
}
},
getNoDataSection: function getNoDataSection(gridClassName, topSection) {
var myReturn = null;
getNoDataSection: function getNoDataSection() {
if (this.props.customNoDataComponent != null) {
myReturn = React.createElement('div', { className: gridClassName }, React.createElement(this.props.customNoDataComponent, null));

return myReturn;
return React.createElement('div', { className: this.props.noDataClassName }, React.createElement(this.props.customNoDataComponent, null));
}

myReturn = React.createElement('div', { className: gridClassName }, topSection, React.createElement(GridNoData, { noDataMessage: this.props.noDataMessage }));
return myReturn;
return React.createElement(GridNoData, { noDataMessage: this.props.noDataMessage });
},
shouldShowNoDataSection: function shouldShowNoDataSection(results) {
return this.props.useExternal === false && (typeof results === 'undefined' || results.length === 0) || this.props.useExternal === true && this.props.externalIsLoading === false && results.length === 0;
Expand Down Expand Up @@ -832,11 +833,6 @@ return /******/ (function(modules) { // webpackBootstrap
//add custom to the class name so we can style it differently
gridClassName += this.props.useCustomRowComponent ? " griddle-custom" : "";

if (this.shouldShowNoDataSection(results)) {
gridClassName += this.props.noDataClassName && this.props.noDataClassName.length > 0 ? " " + this.props.noDataClassName : "";
return this.getNoDataSection(gridClassName, topSection);
}

return React.createElement('div', { className: gridClassName }, topSection, columnSelector, React.createElement('div', { className: 'griddle-container', style: this.props.useGriddleStyles && !this.props.isSubGriddle ? { border: "1px solid #DDD" } : null }, resultContent));
}
});
Expand Down Expand Up @@ -990,21 +986,39 @@ return /******/ (function(modules) { // webpackBootstrap

var nodes = nodeData.map(function (row, index) {
var hasChildren = typeof row["children"] !== "undefined" && row["children"].length > 0;
var uniqueId = that.props.rowSettings.getRowKey(row);
var uniqueId = that.props.rowSettings.getRowKey(row, index);

//at least one item in the group has children.
if (hasChildren) {
anyHasChildren = hasChildren;
}

return React.createElement(GridRowContainer, { useGriddleStyles: that.props.useGriddleStyles, isSubGriddle: that.props.isSubGriddle,
parentRowExpandedClassName: that.props.parentRowExpandedClassName, parentRowCollapsedClassName: that.props.parentRowCollapsedClassName,
parentRowExpandedComponent: that.props.parentRowExpandedComponent, parentRowCollapsedComponent: that.props.parentRowCollapsedComponent,
data: row, key: uniqueId + '-container', uniqueId: uniqueId, columnSettings: that.props.columnSettings, rowSettings: that.props.rowSettings, paddingHeight: that.props.paddingHeight,
return React.createElement(GridRowContainer, {
useGriddleStyles: that.props.useGriddleStyles,
isSubGriddle: that.props.isSubGriddle,
parentRowExpandedClassName: that.props.parentRowExpandedClassName,
parentRowCollapsedClassName: that.props.parentRowCollapsedClassName,
parentRowExpandedComponent: that.props.parentRowExpandedComponent,
parentRowCollapsedComponent: that.props.parentRowCollapsedComponent,
data: row,
key: uniqueId + '-container',
uniqueId: uniqueId,
columnSettings: that.props.columnSettings,
rowSettings: that.props.rowSettings,
paddingHeight: that.props.paddingHeight,
multipleSelectionSettings: that.props.multipleSelectionSettings,
rowHeight: that.props.rowHeight, hasChildren: hasChildren, tableClassName: that.props.className, onRowClick: that.props.onRowClick });
rowHeight: that.props.rowHeight,
hasChildren: hasChildren,
tableClassName: that.props.className,
onRowClick: that.props.onRowClick
});
});

// no data section
if (this.props.showNoData) {
nodes.push(React.createElement('tr', { key: 'no-data-section' }, React.createElement('td', null, this.props.noDataSection)));
}

// Add the spacer rows for nodes we're not rendering.
if (aboveSpacerRow) {
nodes.unshift(aboveSpacerRow);
Expand Down Expand Up @@ -1399,7 +1413,7 @@ return /******/ (function(modules) { // webpackBootstrap
hasChildren: that.props.hasChildren,
toggleChildren: that.toggleChildren,
showChildren: that.state.showChildren,
key: that.props.uniqueId,
key: that.props.uniqueId + '_base_row',
useGriddleIcons: that.props.useGriddleIcons,
parentRowExpandedClassName: this.props.parentRowExpandedClassName,
parentRowCollapsedClassName: this.props.parentRowCollapsedClassName,
Expand All @@ -1408,23 +1422,44 @@ return /******/ (function(modules) { // webpackBootstrap
paddingHeight: that.props.paddingHeight,
rowHeight: that.props.rowHeight,
onRowClick: that.props.onRowClick,
multipleSelectionSettings: this.props.multipleSelectionSettings }));
multipleSelectionSettings: this.props.multipleSelectionSettings
}));

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 (typeof row["children"] !== "undefined") {
var Griddle = __webpack_require__(1);
return React.createElement('tr', { 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, { isSubGriddle: true, results: [row], columns: that.props.columnSettings.getColumns(), tableClassName: that.props.tableClassName, parentRowExpandedClassName: that.props.parentRowExpandedClassName,
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,
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 })));
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: that.props.rowSettings.getRowKey(row) });
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
});
});
}

Expand Down Expand Up @@ -1457,17 +1492,19 @@ return /******/ (function(modules) { // webpackBootstrap
this.rowMetadata = rowMetadata;
this.rowComponent = rowComponent;
this.isCustom = isCustom;
// assign unique Id to each griddle instance
this.gridId = _.uniqueId();
}

_createClass(RowProperties, [{
key: 'getRowKey',
value: function getRowKey(row) {
value: function getRowKey(row, key) {
var uniqueId;

if (this.hasRowMetadataKey()) {
uniqueId = row[this.rowMetadata.key];
} else {
uniqueId = _.uniqueId("grid_row");
uniqueId = 'grid_' + this.gridId + '_row_' + key;
}

//todo: add error handling
Expand Down
88 changes: 57 additions & 31 deletions scripts/gridRowContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,47 +53,73 @@ var GridRowContainer = React.createClass({

var columns = this.props.columnSettings.getColumns();

arr.push(<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}
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(
<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;

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 = require('./griddle.jsx');
return (<tr style={{paddingLeft: 5}}>
<td colSpan={that.props.columnSettings.getVisibleColumnCount()} className="griddle-parent" style={that.props.useGriddleStyles ? {border: "none", "padding": "0 0 0 5px"} : null}>
<Griddle 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} />
</td>
</tr>);
return (
<tr key={key} style={{paddingLeft: 5}}>
<td colSpan={that.props.columnSettings.getVisibleColumnCount()} className="griddle-parent" style={that.props.useGriddleStyles ? {border: "none", "padding": "0 0 0 5px"} : null}>
<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}
/>
</td>
</tr>
);
}

return <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={that.props.rowSettings.getRowKey(row)} />
return (
<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}
/>
);
});
}

Expand Down
34 changes: 27 additions & 7 deletions scripts/gridTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,19 +133,39 @@ var GridTable = React.createClass({

var nodes = nodeData.map(function(row, index){
var hasChildren = (typeof row["children"] !== "undefined") && row["children"].length > 0;
var uniqueId = that.props.rowSettings.getRowKey(row);
var uniqueId = that.props.rowSettings.getRowKey(row, index);

//at least one item in the group has children.
if (hasChildren) { anyHasChildren = hasChildren; }

return (<GridRowContainer useGriddleStyles={that.props.useGriddleStyles} isSubGriddle={that.props.isSubGriddle}
parentRowExpandedClassName={that.props.parentRowExpandedClassName} parentRowCollapsedClassName={that.props.parentRowCollapsedClassName}
parentRowExpandedComponent={that.props.parentRowExpandedComponent} parentRowCollapsedComponent={that.props.parentRowCollapsedComponent}
data={row} key={uniqueId + '-container'} uniqueId={uniqueId} columnSettings={that.props.columnSettings} rowSettings={that.props.rowSettings} paddingHeight={that.props.paddingHeight}
multipleSelectionSettings={that.props.multipleSelectionSettings}
rowHeight={that.props.rowHeight} hasChildren={hasChildren} tableClassName={that.props.className} onRowClick={that.props.onRowClick} />)
return (
<GridRowContainer
useGriddleStyles={that.props.useGriddleStyles}
isSubGriddle={that.props.isSubGriddle}
parentRowExpandedClassName={that.props.parentRowExpandedClassName}
parentRowCollapsedClassName={that.props.parentRowCollapsedClassName}
parentRowExpandedComponent={that.props.parentRowExpandedComponent}
parentRowCollapsedComponent={that.props.parentRowCollapsedComponent}
data={row}
key={uniqueId + '-container'}
uniqueId={uniqueId}
columnSettings={that.props.columnSettings}
rowSettings={that.props.rowSettings}
paddingHeight={that.props.paddingHeight}
multipleSelectionSettings={that.props.multipleSelectionSettings}
rowHeight={that.props.rowHeight}
hasChildren={hasChildren}
tableClassName={that.props.className}
onRowClick={that.props.onRowClick}
/>
)
});

// no data section
if (this.props.showNoData) {
nodes.push(<tr key="no-data-section"><td>{this.props.noDataSection}</td></tr>);
}

// Add the spacer rows for nodes we're not rendering.
if (aboveSpacerRow) {
nodes.unshift(aboveSpacerRow);
Expand Down
Loading

0 comments on commit 4f50a78

Please sign in to comment.