274 lines
8.7 KiB
JavaScript
274 lines
8.7 KiB
JavaScript
|
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
||
|
|
|
||
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
||
|
|
|
||
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
||
|
|
|
||
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
||
|
|
|
||
|
|
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
||
|
|
|
||
|
|
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
||
|
|
|
||
|
|
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
||
|
|
|
||
|
|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
||
|
|
|
||
|
|
var _createClass2 = require('babel-runtime/helpers/createClass');
|
||
|
|
|
||
|
|
var _createClass3 = _interopRequireDefault(_createClass2);
|
||
|
|
|
||
|
|
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
||
|
|
|
||
|
|
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
||
|
|
|
||
|
|
var _inherits2 = require('babel-runtime/helpers/inherits');
|
||
|
|
|
||
|
|
var _inherits3 = _interopRequireDefault(_inherits2);
|
||
|
|
|
||
|
|
var _simpleAssign = require('simple-assign');
|
||
|
|
|
||
|
|
var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
|
||
|
|
|
||
|
|
var _react = require('react');
|
||
|
|
|
||
|
|
var _react2 = _interopRequireDefault(_react);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
function getStyles(props, context, state) {
|
||
|
|
var tableRow = context.muiTheme.tableRow;
|
||
|
|
|
||
|
|
|
||
|
|
var cellBgColor = 'inherit';
|
||
|
|
if (props.hovered || state.hovered) {
|
||
|
|
cellBgColor = tableRow.hoverColor;
|
||
|
|
} else if (props.selected) {
|
||
|
|
cellBgColor = tableRow.selectedColor;
|
||
|
|
} else if (props.striped) {
|
||
|
|
cellBgColor = tableRow.stripeColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
root: {
|
||
|
|
borderBottom: props.displayBorder && '1px solid ' + tableRow.borderColor,
|
||
|
|
color: tableRow.textColor,
|
||
|
|
height: tableRow.height
|
||
|
|
},
|
||
|
|
cell: {
|
||
|
|
backgroundColor: cellBgColor
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var TableRow = function (_Component) {
|
||
|
|
(0, _inherits3.default)(TableRow, _Component);
|
||
|
|
|
||
|
|
function TableRow() {
|
||
|
|
var _ref;
|
||
|
|
|
||
|
|
var _temp, _this, _ret;
|
||
|
|
|
||
|
|
(0, _classCallCheck3.default)(this, TableRow);
|
||
|
|
|
||
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||
|
|
args[_key] = arguments[_key];
|
||
|
|
}
|
||
|
|
|
||
|
|
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TableRow.__proto__ || (0, _getPrototypeOf2.default)(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||
|
|
hovered: false
|
||
|
|
}, _this.onCellClick = function (event, columnIndex) {
|
||
|
|
if (_this.props.selectable && _this.props.onCellClick) {
|
||
|
|
_this.props.onCellClick(event, _this.props.rowNumber, columnIndex);
|
||
|
|
}
|
||
|
|
event.ctrlKey = true;
|
||
|
|
_this.onRowClick(event);
|
||
|
|
}, _this.onCellHover = function (event, columnIndex) {
|
||
|
|
if (_this.props.hoverable) {
|
||
|
|
_this.setState({ hovered: true });
|
||
|
|
if (_this.props.onCellHover) _this.props.onCellHover(event, _this.props.rowNumber, columnIndex);
|
||
|
|
_this.onRowHover(event);
|
||
|
|
}
|
||
|
|
}, _this.onCellHoverExit = function (event, columnIndex) {
|
||
|
|
if (_this.props.hoverable) {
|
||
|
|
_this.setState({ hovered: false });
|
||
|
|
if (_this.props.onCellHoverExit) _this.props.onCellHoverExit(event, _this.props.rowNumber, columnIndex);
|
||
|
|
_this.onRowHoverExit(event);
|
||
|
|
}
|
||
|
|
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
||
|
|
}
|
||
|
|
|
||
|
|
(0, _createClass3.default)(TableRow, [{
|
||
|
|
key: 'onRowClick',
|
||
|
|
value: function onRowClick(event) {
|
||
|
|
if (this.props.selectable && this.props.onRowClick) this.props.onRowClick(event, this.props.rowNumber);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'onRowHover',
|
||
|
|
value: function onRowHover(event) {
|
||
|
|
if (this.props.onRowHover) this.props.onRowHover(event, this.props.rowNumber);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'onRowHoverExit',
|
||
|
|
value: function onRowHoverExit(event) {
|
||
|
|
if (this.props.onRowHoverExit) this.props.onRowHoverExit(event, this.props.rowNumber);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: 'render',
|
||
|
|
value: function render() {
|
||
|
|
var _this2 = this;
|
||
|
|
|
||
|
|
var _props = this.props,
|
||
|
|
className = _props.className,
|
||
|
|
displayBorder = _props.displayBorder,
|
||
|
|
hoverable = _props.hoverable,
|
||
|
|
hovered = _props.hovered,
|
||
|
|
onCellClick = _props.onCellClick,
|
||
|
|
onCellHover = _props.onCellHover,
|
||
|
|
onCellHoverExit = _props.onCellHoverExit,
|
||
|
|
onRowClick = _props.onRowClick,
|
||
|
|
onRowHover = _props.onRowHover,
|
||
|
|
onRowHoverExit = _props.onRowHoverExit,
|
||
|
|
rowNumber = _props.rowNumber,
|
||
|
|
selectable = _props.selectable,
|
||
|
|
selected = _props.selected,
|
||
|
|
striped = _props.striped,
|
||
|
|
style = _props.style,
|
||
|
|
other = (0, _objectWithoutProperties3.default)(_props, ['className', 'displayBorder', 'hoverable', 'hovered', 'onCellClick', 'onCellHover', 'onCellHoverExit', 'onRowClick', 'onRowHover', 'onRowHoverExit', 'rowNumber', 'selectable', 'selected', 'striped', 'style']);
|
||
|
|
var prepareStyles = this.context.muiTheme.prepareStyles;
|
||
|
|
|
||
|
|
var styles = getStyles(this.props, this.context, this.state);
|
||
|
|
|
||
|
|
var rowColumns = _react2.default.Children.map(this.props.children, function (child, columnNumber) {
|
||
|
|
if (_react2.default.isValidElement(child)) {
|
||
|
|
return _react2.default.cloneElement(child, {
|
||
|
|
columnNumber: columnNumber,
|
||
|
|
hoverable: _this2.props.hoverable,
|
||
|
|
key: _this2.props.rowNumber + '-' + columnNumber,
|
||
|
|
onClick: _this2.onCellClick,
|
||
|
|
onHover: _this2.onCellHover,
|
||
|
|
onHoverExit: _this2.onCellHoverExit,
|
||
|
|
style: (0, _simpleAssign2.default)({}, styles.cell, child.props.style)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return _react2.default.createElement(
|
||
|
|
'tr',
|
||
|
|
(0, _extends3.default)({
|
||
|
|
className: className,
|
||
|
|
style: prepareStyles((0, _simpleAssign2.default)(styles.root, style))
|
||
|
|
}, other),
|
||
|
|
rowColumns
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
return TableRow;
|
||
|
|
}(_react.Component);
|
||
|
|
|
||
|
|
TableRow.defaultProps = {
|
||
|
|
displayBorder: true,
|
||
|
|
hoverable: false,
|
||
|
|
hovered: false,
|
||
|
|
selectable: true,
|
||
|
|
selected: false,
|
||
|
|
striped: false
|
||
|
|
};
|
||
|
|
TableRow.contextTypes = {
|
||
|
|
muiTheme: _react.PropTypes.object.isRequired
|
||
|
|
};
|
||
|
|
process.env.NODE_ENV !== "production" ? TableRow.propTypes = {
|
||
|
|
/**
|
||
|
|
* Children passed to table row.
|
||
|
|
*/
|
||
|
|
children: _react.PropTypes.node,
|
||
|
|
/**
|
||
|
|
* The css class name of the root element.
|
||
|
|
*/
|
||
|
|
className: _react.PropTypes.string,
|
||
|
|
/**
|
||
|
|
* If true, row border will be displayed for the row.
|
||
|
|
* If false, no border will be drawn.
|
||
|
|
*/
|
||
|
|
displayBorder: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Controls whether or not the row reponseds to hover events.
|
||
|
|
*/
|
||
|
|
hoverable: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Controls whether or not the row should be rendered as being
|
||
|
|
* hovered. This property is evaluated in addition to this.state.hovered
|
||
|
|
* and can be used to synchronize the hovered state with some other
|
||
|
|
* external events.
|
||
|
|
*/
|
||
|
|
hovered: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* @ignore
|
||
|
|
* Called when a row cell is clicked.
|
||
|
|
* rowNumber is the row number and columnId is
|
||
|
|
* the column number or the column key.
|
||
|
|
*/
|
||
|
|
onCellClick: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* @ignore
|
||
|
|
* Called when a table cell is hovered.
|
||
|
|
* rowNumber is the row number of the hovered row
|
||
|
|
* and columnId is the column number or the column key of the cell.
|
||
|
|
*/
|
||
|
|
onCellHover: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* @ignore
|
||
|
|
* Called when a table cell is no longer hovered.
|
||
|
|
* rowNumber is the row number of the row and columnId
|
||
|
|
* is the column number or the column key of the cell.
|
||
|
|
*/
|
||
|
|
onCellHoverExit: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* @ignore
|
||
|
|
* Called when row is clicked.
|
||
|
|
*/
|
||
|
|
onRowClick: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* @ignore
|
||
|
|
* Called when a table row is hovered.
|
||
|
|
* rowNumber is the row number of the hovered row.
|
||
|
|
*/
|
||
|
|
onRowHover: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* @ignore
|
||
|
|
* Called when a table row is no longer hovered.
|
||
|
|
* rowNumber is the row number of the row that is no longer hovered.
|
||
|
|
*/
|
||
|
|
onRowHoverExit: _react.PropTypes.func,
|
||
|
|
/**
|
||
|
|
* Number to identify the row. This property is
|
||
|
|
* automatically populated when used with the TableBody component.
|
||
|
|
*/
|
||
|
|
rowNumber: _react.PropTypes.number,
|
||
|
|
/**
|
||
|
|
* If true, table rows can be selected. If multiple row
|
||
|
|
* selection is desired, enable multiSelectable.
|
||
|
|
* The default value is true.
|
||
|
|
*/
|
||
|
|
selectable: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Indicates that a particular row is selected.
|
||
|
|
* This property can be used to programmatically select rows.
|
||
|
|
*/
|
||
|
|
selected: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Indicates whether or not the row is striped.
|
||
|
|
*/
|
||
|
|
striped: _react.PropTypes.bool,
|
||
|
|
/**
|
||
|
|
* Override the inline-styles of the root element.
|
||
|
|
*/
|
||
|
|
style: _react.PropTypes.object
|
||
|
|
} : void 0;
|
||
|
|
exports.default = TableRow;
|