Skip to content

Commit 6b5c55d

Browse files
tim-phillipstim-phillips
committed
add onSelectionChange and persist selectedRowIds across pages
1 parent b57372c commit 6b5c55d

7 files changed

Lines changed: 2312 additions & 1843 deletions

File tree

‎build/Griddle.js‎

Lines changed: 2060 additions & 1621 deletions
Large diffs are not rendered by default.

‎modules/gridRow.jsx.js‎

Lines changed: 141 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -14,126 +14,155 @@ var toPairs = require('lodash/toPairs');
1414
var without = require('lodash/without');
1515

1616
var GridRow = React.createClass({
17-
displayName: 'GridRow',
18-
19-
getDefaultProps: function getDefaultProps() {
20-
return {
21-
"isChildRow": false,
22-
"showChildren": false,
23-
"data": {},
24-
"columnSettings": null,
25-
"rowSettings": null,
26-
"hasChildren": false,
27-
"useGriddleStyles": true,
28-
"useGriddleIcons": true,
29-
"isSubGriddle": false,
30-
"paddingHeight": null,
31-
"rowHeight": null,
32-
"parentRowCollapsedClassName": "parent-row",
33-
"parentRowExpandedClassName": "parent-row expanded",
34-
"parentRowCollapsedComponent": "▶",
35-
"parentRowExpandedComponent": "▼",
36-
"onRowClick": null,
37-
"multipleSelectionSettings": null
38-
};
39-
},
40-
handleClick: function handleClick(e) {
41-
if (this.props.onRowClick !== null && isFunction(this.props.onRowClick)) {
42-
this.props.onRowClick(this, e);
43-
} else if (this.props.hasChildren) {
44-
this.props.toggleChildren();
45-
}
46-
},
47-
handleSelectionChange: function handleSelectionChange(e) {
48-
//hack to get around warning that's not super useful in this case
49-
return;
50-
},
51-
handleSelectClick: function handleSelectClick(e) {
52-
if (this.props.multipleSelectionSettings.isMultipleSelection) {
53-
if (e.target.type === "checkbox") {
54-
this.props.multipleSelectionSettings.toggleSelectRow(this.props.data, this.refs.selected.checked);
55-
} else {
56-
this.props.multipleSelectionSettings.toggleSelectRow(this.props.data, !this.refs.selected.checked);
57-
}
58-
}
59-
},
60-
verifyProps: function verifyProps() {
61-
if (this.props.columnSettings === null) {
62-
console.error("gridRow: The columnSettings prop is null and it shouldn't be");
63-
}
64-
},
65-
render: function render() {
66-
var _this = this;
67-
68-
this.verifyProps();
69-
var that = this;
70-
var columnStyles = null;
71-
72-
if (this.props.useGriddleStyles) {
73-
columnStyles = {
74-
margin: "0px",
75-
padding: that.props.paddingHeight + "px 5px " + that.props.paddingHeight + "px 5px",
76-
height: that.props.rowHeight ? this.props.rowHeight - that.props.paddingHeight * 2 + "px" : null,
77-
backgroundColor: "#FFF",
78-
borderTopColor: "#DDD",
79-
color: "#222"
80-
};
81-
}
82-
83-
var columns = this.props.columnSettings.getColumns();
84-
85-
// make sure that all the columns we need have default empty values
86-
// otherwise they will get clipped
87-
var defaultValues = zipObject(columns, []);
88-
89-
// 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
90-
var dataView = assign({}, this.props.data);
91-
92-
defaults(dataView, defaultValues);
93-
var data = toPairs(deep.pick(dataView, without(columns, 'children')));
94-
var nodes = data.map(function (col, index) {
95-
var returnValue = null;
96-
var meta = _this.props.columnSettings.getColumnMetadataByName(col[0]);
97-
98-
//todo: Make this not as ridiculous looking
99-
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) : "";
100-
101-
if (index === 0 && _this.props.isChildRow && _this.props.useGriddleStyles) {
102-
columnStyles = assign(columnStyles, { paddingLeft: 10 });
103-
}
17+
displayName: 'GridRow',
18+
19+
getDefaultProps: function getDefaultProps() {
20+
return {
21+
"isChildRow": false,
22+
"showChildren": false,
23+
"data": {},
24+
"columnSettings": null,
25+
"rowSettings": null,
26+
"hasChildren": false,
27+
"useGriddleStyles": true,
28+
"useGriddleIcons": true,
29+
"isSubGriddle": false,
30+
"paddingHeight": null,
31+
"rowHeight": null,
32+
"parentRowCollapsedClassName": "parent-row",
33+
"parentRowExpandedClassName": "parent-row expanded",
34+
"parentRowCollapsedComponent": "▶",
35+
"parentRowExpandedComponent": "▼",
36+
"onRowClick": null,
37+
"multipleSelectionSettings": null
38+
};
39+
},
40+
handleClick: function handleClick(e) {
41+
if (this.props.onRowClick !== null && isFunction(this.props.onRowClick)) {
42+
this.props.onRowClick(this, e);
43+
} else if (this.props.hasChildren) {
44+
this.props.toggleChildren();
45+
}
46+
},
47+
handleSelectionChange: function handleSelectionChange(e) {
48+
//hack to get around warning that's not super useful in this case
49+
return;
50+
},
51+
handleSelectClick: function handleSelectClick(e) {
52+
if (this.props.multipleSelectionSettings.isMultipleSelection) {
53+
if (e.target.type === "checkbox") {
54+
this.props.multipleSelectionSettings.toggleSelectRow(this.props.data, this.refs.selected.checked);
55+
} else {
56+
this.props.multipleSelectionSettings.toggleSelectRow(this.props.data, !this.refs.selected.checked);
57+
}
58+
}
59+
},
60+
verifyProps: function verifyProps() {
61+
if (this.props.columnSettings === null) {
62+
console.error("gridRow: The columnSettings prop is null and it shouldn't be");
63+
}
64+
},
65+
formatData: function formatData(data) {
66+
if (typeof data === 'boolean') {
67+
return String(data);
68+
}
69+
return data;
70+
},
71+
render: function render() {
72+
var _this = this;
73+
74+
this.verifyProps();
75+
var that = this;
76+
var columnStyles = null;
77+
78+
if (this.props.useGriddleStyles) {
79+
columnStyles = {
80+
margin: "0px",
81+
padding: that.props.paddingHeight + "px 5px " + that.props.paddingHeight + "px 5px",
82+
height: that.props.rowHeight ? this.props.rowHeight - that.props.paddingHeight * 2 + "px" : null,
83+
backgroundColor: "#FFF",
84+
borderTopColor: "#DDD",
85+
color: "#222"
86+
};
87+
}
10488

105-
if (_this.props.columnSettings.hasColumnMetadata() && typeof meta !== 'undefined' && meta !== null) {
106-
if (typeof meta.customComponent !== 'undefined' && meta.customComponent !== null) {
107-
var customComponent = React.createElement(meta.customComponent, { data: col[1], rowData: dataView, metadata: meta });
108-
returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, customComponent);
89+
var columns = this.props.columnSettings.getColumns();
90+
91+
// make sure that all the columns we need have default empty values
92+
// otherwise they will get clipped
93+
var defaultValues = zipObject(columns, []);
94+
95+
// 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
96+
var dataView = assign({}, this.props.data);
97+
98+
defaults(dataView, defaultValues);
99+
var data = toPairs(deep.pick(dataView, without(columns, 'children')));
100+
var nodes = data.map(function (col, index) {
101+
var returnValue = null;
102+
var meta = _this.props.columnSettings.getColumnMetadataByName(col[0]);
103+
104+
//todo: Make this not as ridiculous looking
105+
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) : "";
106+
107+
if (index === 0 && _this.props.isChildRow && _this.props.useGriddleStyles) {
108+
columnStyles = assign(columnStyles, { paddingLeft: 10 });
109+
}
110+
111+
if (_this.props.columnSettings.hasColumnMetadata() && typeof meta !== 'undefined' && meta !== null) {
112+
if (typeof meta.customComponent !== 'undefined' && meta.customComponent !== null) {
113+
var customComponent = React.createElement(meta.customComponent, { data: col[1], rowData: dataView, metadata: meta });
114+
returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, customComponent);
115+
} else {
116+
returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, firstColAppend, _this.formatData(col[1]));
117+
}
118+
}
119+
120+
return returnValue || React.createElement('td', { onClick: _this.handleClick, key: index, style: columnStyles }, firstColAppend, col[1]);
121+
});
122+
123+
// Don't compete with onRowClick, but if no onRowClick function then
124+
// clicking on the row should trigger select
125+
var trOnClick, tdOnClick;
126+
if (this.props.onRowClick !== null && isFunction(this.props.onRowClick)) {
127+
trOnClick = null;
128+
tdOnClick = this.handleSelectClick;
109129
} else {
110-
returnValue = React.createElement('td', { onClick: _this.handleClick, className: meta.cssClassName, key: index, style: columnStyles }, firstColAppend, col[1]);
130+
if (this.props.multipleSelectionSettings && this.props.multipleSelectionSettings.isMultipleSelection) {
131+
trOnClick = this.handleSelectClick;
132+
tdOnClick = null;
133+
} else {
134+
trOnClick = null;
135+
tdOnClick = null;
136+
}
111137
}
112-
}
113138

114-
return returnValue || React.createElement('td', { onClick: _this.handleClick, key: index, style: columnStyles }, firstColAppend, col[1]);
115-
});
116-
117-
if (nodes && this.props.multipleSelectionSettings && this.props.multipleSelectionSettings.isMultipleSelection) {
118-
var selectedRowIds = this.props.multipleSelectionSettings.getSelectedRowIds();
139+
if (nodes && this.props.multipleSelectionSettings && this.props.multipleSelectionSettings.isMultipleSelection) {
140+
var selectedRowIds = this.props.multipleSelectionSettings.getSelectedRowIds();
141+
142+
nodes.unshift(React.createElement('td', {
143+
key: 'selection',
144+
style: columnStyles,
145+
className: 'griddle-select griddle-select-cell',
146+
onClick: tdOnClick
147+
}, React.createElement('input', {
148+
type: 'checkbox',
149+
checked: this.props.multipleSelectionSettings.getIsRowChecked(dataView),
150+
onChange: this.handleSelectionChange,
151+
ref: 'selected'
152+
})));
153+
}
119154

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

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

130-
if (that.props.isChildRow) {
131-
className = "child-row";
132-
} else if (that.props.hasChildren) {
133-
className = that.props.showChildren ? this.props.parentRowExpandedClassName : this.props.parentRowCollapsedClassName;
164+
return React.createElement('tr', { onClick: trOnClick, className: className }, nodes);
134165
}
135-
return React.createElement('tr', { onClick: this.props.multipleSelectionSettings && this.props.multipleSelectionSettings.isMultipleSelection ? this.handleSelectClick : null, className: className }, nodes);
136-
}
137166
});
138167

139168
module.exports = GridRow;

‎modules/gridTitle.jsx.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,15 +103,19 @@ var GridTitle = React.createClass({
103103
};
104104
}
105105
titleStyles = meta && meta.titleStyles ? assign({}, defaultTitleStyles, meta.titleStyles) : assign({}, defaultTitleStyles);
106-
return React.createElement('th', { onClick: columnIsSortable ? that.sort(col) : null, 'data-title': col, className: columnSort, key: col,
106+
107+
var ComponentClass = displayName ? 'th' : 'td';
108+
return React.createElement(ComponentClass, { onClick: columnIsSortable ? that.sort(col) : null, 'data-title': col, className: columnSort, key: col,
107109
style: titleStyles }, React.createElement(HeaderComponent, _extends({ columnName: col, displayName: displayName,
108110
filterByColumn: that.props.filterByColumn }, headerProps)), sortComponent);
109111
});
110112

111113
if (nodes && this.props.multipleSelectionSettings.isMultipleSelection) {
112-
nodes.unshift(React.createElement('th', { key: 'selection', onClick: this.toggleSelectAll, style: titleStyles }, React.createElement('input', { type: 'checkbox',
114+
nodes.unshift(React.createElement('th', { key: 'selection', onClick: this.toggleSelectAll, style: titleStyles, className: 'griddle-select griddle-select-title' }, React.createElement('input', {
115+
type: 'checkbox',
113116
checked: this.props.multipleSelectionSettings.getIsSelectAllChecked(),
114-
onChange: this.handleSelectionChange })));
117+
onChange: this.handleSelectionChange
118+
})));
115119
}
116120

117121
//Get the row from the row settings.

0 commit comments

Comments
 (0)