Skip to content

add onSelectionChange and persist selectedRowIds across pages #508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joellanciaux merged 1 commit into from
Nov 8, 2016
Merged

add onSelectionChange and persist selectedRowIds across pages #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,681 changes: 2,060 additions & 1,621 deletions build/Griddle.js
View file
Open in desktop

Large diffs are not rendered by default.

253 changes: 141 additions & 112 deletions modules/gridRow.jsx.js
View file
Open in desktop
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
Open in desktop
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