Skip to content

Commit

Permalink
no Data section moved inside table
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsdmc
jsdmc committed Jan 14, 2016
1 parent cb54f35 commit 3597fd7
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 34 deletions.
32 changes: 15 additions & 17 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,22 +779,14 @@ 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) {
// known issue https://github.com/GriddleGriddle/Griddle/issues/274
// return (this.props.useExternal === false && (typeof results === 'undefined' || results.length === 0 )) ||
// (this.props.useExternal === true && this.props.externalIsLoading === false && results.length === 0)
return false;
return this.props.useExternal === false && (typeof results === 'undefined' || results.length === 0) || this.props.useExternal === true && this.props.externalIsLoading === false && results.length === 0;
},
render: function render() {
var that = this,
Expand Down Expand Up @@ -835,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 @@ -1008,6 +1001,11 @@ return /******/ (function(modules) { // webpackBootstrap
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
5 changes: 5 additions & 0 deletions scripts/gridTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,11 @@ var GridTable = React.createClass({
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
27 changes: 10 additions & 17 deletions scripts/griddle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ var Griddle = React.createClass({
var deepKeys = deep.keys(nextProps.results[0]);

var is_same = (this.columnSettings.allColumns.length == deepKeys.length) && this.columnSettings.allColumns.every(function(element, index) {
return element === deepKeys[index];
return element === deepKeys[index];
});

if(!is_same) {
Expand Down Expand Up @@ -696,7 +696,13 @@ var Griddle = React.createClass({
var sortProperties = this.getSortObject();
var multipleSelectionProperties = this.getMultipleSelectionObject();

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

return (<div className='griddle-body'><GridTable useGriddleStyles={this.props.useGriddleStyles}
noDataSection={noDataSection}
showNoData={showNoData}
columnSettings={this.columnSettings}
rowSettings = {this.rowSettings}
sortSettings={sortProperties}
Expand Down Expand Up @@ -734,19 +740,11 @@ var Griddle = React.createClass({
return this.getStandardGridSection(data, cols, meta, pagingContent, hasMorePages);
}
},
getNoDataSection: function(gridClassName, topSection){
var myReturn = null;
getNoDataSection: function(){
if (this.props.customNoDataComponent != null) {
myReturn = (<div className={gridClassName}><this.props.customNoDataComponent /></div>);

return myReturn
return (<div className={this.props.noDataClassName}><this.props.customNoDataComponent /></div>);
}

myReturn = (<div className={gridClassName}>
{topSection}
<GridNoData noDataMessage={this.props.noDataMessage} />
</div>);
return myReturn;
return (<GridNoData noDataMessage={this.props.noDataMessage} />);
},
shouldShowNoDataSection: function(results){
return (this.props.useExternal === false && (typeof results === 'undefined' || results.length === 0 )) ||
Expand Down Expand Up @@ -797,11 +795,6 @@ var Griddle = React.createClass({
//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 (
<div className={gridClassName}>
{topSection}
Expand Down

0 comments on commit 3597fd7

Please sign in to comment.