Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master'
Browse files Browse the repository at this point in the history 
# Conflicts:
#	build/Griddle.js
#	modules/gridRow.jsx.js
  • Loading branch information
Alexander Gusev committed Feb 19, 2017
1 parent 0742ec9 commit 79417d9
Showing 1 changed file with 165 additions and 142 deletions.
307 changes: 165 additions & 142 deletions modules/gridRow.jsx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,156 +14,179 @@ 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,
"onRowMouseEnter": null,
"onRowMouseLeave": null,
"onRowWillMount": null,
"onRowWillUnmount": null
};
},
componentWillMount: function componentWillMount() {
if (this.props.onRowWillMount !== null && isFunction(this.props.onRowWillMount)) {
this.props.onRowWillMount(this);
}
},
componentWillUnmount: function componentWillUnmount() {
if (this.props.onRowWillUnmount !== null && isFunction(this.props.onRowWillUnmount)) {
this.props.onRowWillUnmount(this);
}
},
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();
}
},
handleMouseEnter: function handleMouseEnter(e) {
if (this.props.onRowMouseEnter !== null && isFunction(this.props.onRowMouseEnter)) {
this.props.onRowMouseEnter(this, e);
}
},
handleMouseLeave: function handleMouseLeave(e) {
if (this.props.onRowMouseLeave !== null && isFunction(this.props.onRowMouseLeave)) {
this.props.onRowMouseLeave(this, e);
}
},
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"
};
}

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,
"onRowMouseEnter": null,
"onRowMouseLeave": null,
"onRowWillMount": null,
"onRowWillUnmount": null
};
},
componentWillMount: function componentWillMount() {
if (this.props.onRowWillMount !== null && isFunction(this.props.onRowWillMount)) {
this.props.onRowWillMount(this);
}
},
componentWillUnmount: function componentWillUnmount() {
if (this.props.onRowWillUnmount !== null && isFunction(this.props.onRowWillUnmount)) {
this.props.onRowWillUnmount(this);
}
},
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();
}
},
handleMouseEnter: function handleMouseEnter(e) {
if (this.props.onRowMouseEnter !== null && isFunction(this.props.onRowMouseEnter)) {
this.props.onRowMouseEnter(this, e);
}
},
handleMouseLeave: function handleMouseLeave(e) {
if (this.props.onRowMouseLeave !== null && isFunction(this.props.onRowMouseLeave)) {
this.props.onRowMouseLeave(this, e);
}
},
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, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, 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, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, className: meta.cssClassName, key: index, style: columnStyles }, customComponent);
} else {
returnValue = React.createElement('td', { onClick: _this.handleClick, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, className: meta.cssClassName, key: index, style: columnStyles }, firstColAppend, _this.formatData(col[1]));
}
}

return returnValue || React.createElement('td', { onClick: _this.handleClick, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, 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, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, className: meta.cssClassName, key: index, style: columnStyles }, firstColAppend, _this.formatData(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, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, 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;

0 comments on commit 79417d9

Please sign in to comment.