Skip to content

Commit

Permalink
add onSelectionChange and persist selectedRowIds across pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@tim-phillips
tim-phillips committed Nov 1, 2016
1 parent b57372c commit 6b5c55d
Show file tree
Hide file tree
Showing 7 changed files with 2,312 additions and 1,843 deletions.
3,681 changes: 2,060 additions & 1,621 deletions build/Griddle.js
View file

Large diffs are not rendered by default.

253 changes: 141 additions & 112 deletions modules/gridRow.jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,126 +14,155 @@ var toPairs = require('lodash/toPairs');
var without = require('lodash/without');

var GridRow = React.createClass({
displayName: 'GridRow',

getDefaultProps: function getDefaultProps() {
return {
"isChildRow": false,
"showChildren": false,
"data": {},
"columnSettings": null,
"rowSettings": null,
"hasChildren": false,
"useGriddleStyles": true,
"useGriddleIcons": true,
"isSubGriddle": false,
"paddingHeight": null,
"rowHeight": null,
"parentRowCollapsedClassName": "parent-row",
"parentRowExpandedClassName": "parent-row expanded",
"parentRowCollapsedComponent": "▶",
"parentRowExpandedComponent": "▼",
"onRowClick": null,
"multipleSelectionSettings": null
};
},
handleClick: function handleClick(e) {
if (this.props.onRowClick !== null && isFunction(this.props.onRowClick)) {
this.props.onRowClick(this, e);
} else if (this.props.hasChildren) {
this.props.toggleChildren();
}
},
handleSelectionChange: function handleSelectionChange(e) {
//hack to get around warning that's not super useful in this case
return;
},
handleSelectClick: function handleSelectClick(e) {
if (this.props.multipleSelectionSettings.isMultipleSelection) {
if (e.target.type === "checkbox") {
this.props.multipleSelectionSettings.toggleSelectRow(this.props.data, this.refs.selected.checked);
} else {
this.props.multipleSelectionSettings.toggleSelectRow(this.props.data, !this.refs.selected.checked);
}
}
},
verifyProps: function verifyProps() {
if (this.props.columnSettings === null) {
console.error("gridRow: The columnSettings prop is null and it shouldn't be");
}
},
render: function render() {
var _this = this;

this.verifyProps();
var that = this;
var columnStyles = null;

if (this.props.useGriddleStyles) {
columnStyles = {
margin: "0px",
padding: that.props.paddingHeight + "px 5px " + that.props.paddingHeight + "px 5px",
height: that.props.rowHeight ? this.props.rowHeight - that.props.paddingHeight * 2 + "px" : null,
backgroundColor: "#FFF",
borderTopColor: "#DDD",
color: "#222"
};
}

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

// make sure that all the columns we need have default empty values
// otherwise they will get clipped
var defaultValues = zipObject(columns, []);

// creates a 'view' on top the data so we will not alter the original data but will allow us to add default values to missing columns
var dataView = assign({}, this.props.data);

defaults(dataView, defaultValues);
var data = toPairs(deep.pick(dataView, without(columns, 'children')));
var nodes = data.map(function (col, index) {
var returnValue = null;
var meta = _this.props.columnSettings.getColumnMetadataByName(col[0]);

//todo: Make this not as ridiculous looking
var firstColAppend = index === 0 && _this.props.hasChildren && _this.props.showChildren === false && _this.props.useGriddleIcons ? React.createElement('span', { style: _this.props.useGriddleStyles ? { fontSize: "10px", marginRight: "5px" } : null }, _this.props.parentRowCollapsedComponent) : index === 0 && _this.props.hasChildren && _this.props.showChildren && _this.props.useGriddleIcons ? React.createElement('span', { style: _this.props.useGriddleStyles ? { fontSize: "10px" } : null }, _this.props.parentRowExpandedComponent) : "";

if (index === 0 && _this.props.isChildRow && _this.props.useGriddleStyles) {
columnStyles = assign(columnStyles, { paddingLeft: 10 });
}
displayName: 'GridRow',

getDefaultProps: function getDefaultProps() {
return {
"isChildRow": false,
"showChildren": false,
"data": {},
"columnSettings": null,
"rowSettings": null,
"hasChildren": false,
"useGriddleStyles": true,
"useGriddleIcons": true,
"isSubGriddle": false,
"paddingHeight": null,
"rowHeight": null,
"parentRowCollapsedClassName": "parent-row",
"parentRowExpandedClassName": "parent-row expanded",
"parentRowCollapsedComponent": "▶",
"parentRowExpandedComponent": "▼",
"onRowClick": null,
"multipleSelectionSettings": null
};
},
handleClick: function handleClick(e) {
if (this.props.onRowClick !== null && isFunction(this.props.onRowClick)) {
this.props.onRowClick(this, e);
} else if (this.props.hasChildren) {
this.props.toggleChildren();
}
},
handleSelectionChange: function handleSelectionChange(e) {
//hack to get around warning that's not super useful in this case
return;
},
handleSelectClick: function handleSelectClick(e) {
if (this.props.multipleSelectionSettings.isMultipleSelection) {
if (e.target.type === "checkbox") {
this.props.multipleSelectionSettings.toggleSelectRow(this.props.data, this.refs.selected.checked);
} else {
this.props.multipleSelectionSettings.toggleSelectRow(this.props.data, !this.refs.selected.checked);
}
}
},
verifyProps: function verifyProps() {
if (this.props.columnSettings === null) {
console.error("gridRow: The columnSettings prop is null and it shouldn't be");
}
},
formatData: function formatData(data) {
if (typeof data === 'boolean') {
return String(data);
}
return data;
},
render: function render() {
var _this = this;

this.verifyProps();
var that = this;
var columnStyles = null;

if (this.props.useGriddleStyles) {
columnStyles = {
margin: "0px",
padding: that.props.paddingHeight + "px 5px " + that.props.paddingHeight + "px 5px",
height: that.props.rowHeight ? this.props.rowHeight - that.props.paddingHeight * 2 + "px" : null,
backgroundColor: "#FFF",
borderTopColor: "#DDD",
color: "#222"
};
}

if (_this.props.columnSettings.hasColumnMetadata() && typeof meta !== 'undefined' && meta !== null) {
if (typeof meta.customComponent !== 'undefined' && meta.customComponent !== null) {
var customComponent = React.createElement(meta.customComponent, { data: col[1], rowData: dataView, metadata: meta });
returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, customComponent);
var columns = this.props.columnSettings.getColumns();

// make sure that all the columns we need have default empty values
// otherwise they will get clipped
var defaultValues = zipObject(columns, []);

// creates a 'view' on top the data so we will not alter the original data but will allow us to add default values to missing columns
var dataView = assign({}, this.props.data);

defaults(dataView, defaultValues);
var data = toPairs(deep.pick(dataView, without(columns, 'children')));
var nodes = data.map(function (col, index) {
var returnValue = null;
var meta = _this.props.columnSettings.getColumnMetadataByName(col[0]);

//todo: Make this not as ridiculous looking
var firstColAppend = index === 0 && _this.props.hasChildren && _this.props.showChildren === false && _this.props.useGriddleIcons ? React.createElement('span', { style: _this.props.useGriddleStyles ? { fontSize: "10px", marginRight: "5px" } : null }, _this.props.parentRowCollapsedComponent) : index === 0 && _this.props.hasChildren && _this.props.showChildren && _this.props.useGriddleIcons ? React.createElement('span', { style: _this.props.useGriddleStyles ? { fontSize: "10px" } : null }, _this.props.parentRowExpandedComponent) : "";

if (index === 0 && _this.props.isChildRow && _this.props.useGriddleStyles) {
columnStyles = assign(columnStyles, { paddingLeft: 10 });
}

if (_this.props.columnSettings.hasColumnMetadata() && typeof meta !== 'undefined' && meta !== null) {
if (typeof meta.customComponent !== 'undefined' && meta.customComponent !== null) {
var customComponent = React.createElement(meta.customComponent, { data: col[1], rowData: dataView, metadata: meta });
returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, customComponent);
} else {
returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, firstColAppend, _this.formatData(col[1]));
}
}

return returnValue || React.createElement('td', { onClick: _this.handleClick, key: index, style: columnStyles }, firstColAppend, col[1]);
});

// Don't compete with onRowClick, but if no onRowClick function then
// clicking on the row should trigger select
var trOnClick, tdOnClick;
if (this.props.onRowClick !== null && isFunction(this.props.onRowClick)) {
trOnClick = null;
tdOnClick = this.handleSelectClick;
} else {
returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, firstColAppend, col[1]);
if (this.props.multipleSelectionSettings && this.props.multipleSelectionSettings.isMultipleSelection) {
trOnClick = this.handleSelectClick;
tdOnClick = null;
} else {
trOnClick = null;
tdOnClick = null;
}
}
}

return returnValue || React.createElement('td', { onClick: _this.handleClick, key: index, style: columnStyles }, firstColAppend, col[1]);
});

if (nodes && this.props.multipleSelectionSettings && this.props.multipleSelectionSettings.isMultipleSelection) {
var selectedRowIds = this.props.multipleSelectionSettings.getSelectedRowIds();
if (nodes && this.props.multipleSelectionSettings && this.props.multipleSelectionSettings.isMultipleSelection) {
var selectedRowIds = this.props.multipleSelectionSettings.getSelectedRowIds();

nodes.unshift(React.createElement('td', {
key: 'selection',
style: columnStyles,
className: 'griddle-select griddle-select-cell',
onClick: tdOnClick
}, React.createElement('input', {
type: 'checkbox',
checked: this.props.multipleSelectionSettings.getIsRowChecked(dataView),
onChange: this.handleSelectionChange,
ref: 'selected'
})));
}

nodes.unshift(React.createElement('td', { key: 'selection', style: columnStyles }, React.createElement('input', {
type: 'checkbox',
checked: this.props.multipleSelectionSettings.getIsRowChecked(dataView),
onChange: this.handleSelectionChange,
ref: 'selected' })));
}
//Get the row from the row settings.
var className = that.props.rowSettings && that.props.rowSettings.getBodyRowMetadataClass(that.props.data) || "standard-row";

//Get the row from the row settings.
var className = that.props.rowSettings && that.props.rowSettings.getBodyRowMetadataClass(that.props.data) || "standard-row";
if (that.props.isChildRow) {
className = "child-row";
} else if (that.props.hasChildren) {
className = that.props.showChildren ? this.props.parentRowExpandedClassName : this.props.parentRowCollapsedClassName;
}

if (that.props.isChildRow) {
className = "child-row";
} else if (that.props.hasChildren) {
className = that.props.showChildren ? this.props.parentRowExpandedClassName : this.props.parentRowCollapsedClassName;
return React.createElement('tr', { onClick: trOnClick, className: className }, nodes);
}
return React.createElement('tr', { onClick: this.props.multipleSelectionSettings && this.props.multipleSelectionSettings.isMultipleSelection ? this.handleSelectClick : null, className: className }, nodes);
}
});

module.exports = GridRow;
10 changes: 7 additions & 3 deletions modules/gridTitle.jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,19 @@ var GridTitle = React.createClass({
};
}
titleStyles = meta && meta.titleStyles ? assign({}, defaultTitleStyles, meta.titleStyles) : assign({}, defaultTitleStyles);
return React.createElement('th', { onClick: columnIsSortable ? that.sort(col) : null, 'data-title': col, className: columnSort, key: col,

var ComponentClass = displayName ? 'th' : 'td';
return React.createElement(ComponentClass, { onClick: columnIsSortable ? that.sort(col) : null, 'data-title': col, className: columnSort, key: col,
style: titleStyles }, React.createElement(HeaderComponent, _extends({ columnName: col, displayName: displayName,
filterByColumn: that.props.filterByColumn }, headerProps)), sortComponent);
});

if (nodes && this.props.multipleSelectionSettings.isMultipleSelection) {
nodes.unshift(React.createElement('th', { key: 'selection', onClick: this.toggleSelectAll, style: titleStyles }, React.createElement('input', { type: 'checkbox',
nodes.unshift(React.createElement('th', { key: 'selection', onClick: this.toggleSelectAll, style: titleStyles, className: 'griddle-select griddle-select-title' }, React.createElement('input', {
type: 'checkbox',
checked: this.props.multipleSelectionSettings.getIsSelectAllChecked(),
onChange: this.handleSelectionChange })));
onChange: this.handleSelectionChange
})));
}

//Get the row from the row settings.
Expand Down
Loading

0 comments on commit 6b5c55d

Please sign in to comment.