d2-ui
Version:
338 lines (303 loc) • 12 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function getStyles(props, context) {
var _context$muiTheme = context.muiTheme;
var baseTheme = _context$muiTheme.baseTheme;
var table = _context$muiTheme.table;
return {
root: {
backgroundColor: table.backgroundColor,
padding: '0 ' + baseTheme.spacing.desktopGutter + 'px',
width: '100%',
borderCollapse: 'collapse',
borderSpacing: 0,
tableLayout: 'fixed',
fontFamily: baseTheme.fontFamily
},
bodyTable: {
height: props.fixedHeader || props.fixedFooter ? props.height : 'auto',
overflowX: 'hidden',
overflowY: 'auto'
},
tableWrapper: {
height: props.fixedHeader || props.fixedFooter ? 'auto' : props.height,
overflow: 'auto'
}
};
}
var Table = function (_Component) {
_inherits(Table, _Component);
function Table() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
_classCallCheck(this, Table);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
allRowsSelected: _this.props.allRowsSelected
}, _this.onCellClick = function (rowNumber, columnNumber, event) {
if (_this.props.onCellClick) _this.props.onCellClick(rowNumber, columnNumber, event);
}, _this.onCellHover = function (rowNumber, columnNumber, event) {
if (_this.props.onCellHover) _this.props.onCellHover(rowNumber, columnNumber, event);
}, _this.onCellHoverExit = function (rowNumber, columnNumber, event) {
if (_this.props.onCellHoverExit) _this.props.onCellHoverExit(rowNumber, columnNumber, event);
}, _this.onRowHover = function (rowNumber) {
if (_this.props.onRowHover) _this.props.onRowHover(rowNumber);
}, _this.onRowHoverExit = function (rowNumber) {
if (_this.props.onRowHoverExit) _this.props.onRowHoverExit(rowNumber);
}, _this.onRowSelection = function (selectedRows) {
if (_this.state.allRowsSelected) _this.setState({ allRowsSelected: false });
if (_this.props.onRowSelection) _this.props.onRowSelection(selectedRows);
}, _this.onSelectAll = function () {
if (_this.props.onRowSelection) {
if (!_this.state.allRowsSelected) {
_this.props.onRowSelection('all');
} else {
_this.props.onRowSelection('none');
}
}
_this.setState({ allRowsSelected: !_this.state.allRowsSelected });
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Table, [{
key: 'isScrollbarVisible',
value: function isScrollbarVisible() {
var tableDivHeight = this.refs.tableDiv.clientHeight;
var tableBodyHeight = this.refs.tableBody.clientHeight;
return tableBodyHeight > tableDivHeight;
}
}, {
key: 'createTableHeader',
value: function createTableHeader(base) {
return _react2.default.cloneElement(base, {
enableSelectAll: base.props.enableSelectAll && this.props.selectable && this.props.multiSelectable,
onSelectAll: this.onSelectAll,
selectAllSelected: this.state.allRowsSelected
});
}
}, {
key: 'createTableBody',
value: function createTableBody(base) {
return _react2.default.cloneElement(base, {
allRowsSelected: this.state.allRowsSelected,
multiSelectable: this.props.multiSelectable,
onCellClick: this.onCellClick,
onCellHover: this.onCellHover,
onCellHoverExit: this.onCellHoverExit,
onRowHover: this.onRowHover,
onRowHoverExit: this.onRowHoverExit,
onRowSelection: this.onRowSelection,
selectable: this.props.selectable,
style: (0, _simpleAssign2.default)({ height: this.props.height }, base.props.style)
});
}
}, {
key: 'createTableFooter',
value: function createTableFooter(base) {
return base;
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props;
var children = _props.children;
var className = _props.className;
var fixedFooter = _props.fixedFooter;
var fixedHeader = _props.fixedHeader;
var style = _props.style;
var wrapperStyle = _props.wrapperStyle;
var headerStyle = _props.headerStyle;
var bodyStyle = _props.bodyStyle;
var footerStyle = _props.footerStyle;
var prepareStyles = this.context.muiTheme.prepareStyles;
var styles = getStyles(this.props, this.context);
var tHead = void 0;
var tFoot = void 0;
var tBody = void 0;
_react2.default.Children.forEach(children, function (child) {
if (!_react2.default.isValidElement(child)) return;
var muiName = child.type.muiName;
if (muiName === 'TableBody') {
tBody = _this2.createTableBody(child);
} else if (muiName === 'TableHeader') {
tHead = _this2.createTableHeader(child);
} else if (muiName === 'TableFooter') {
tFoot = _this2.createTableFooter(child);
}
});
// If we could not find a table-header and a table-body, do not attempt to display anything.
if (!tBody && !tHead) return null;
var mergedTableStyle = (0, _simpleAssign2.default)(styles.root, style);
var headerTable = void 0;
var footerTable = void 0;
var inlineHeader = void 0;
var inlineFooter = void 0;
if (fixedHeader) {
headerTable = _react2.default.createElement(
'div',
{ style: prepareStyles((0, _simpleAssign2.default)({}, headerStyle)) },
_react2.default.createElement(
'table',
{ className: className, style: mergedTableStyle },
tHead
)
);
} else {
inlineHeader = tHead;
}
if (tFoot !== undefined) {
if (fixedFooter) {
footerTable = _react2.default.createElement(
'div',
{ style: prepareStyles((0, _simpleAssign2.default)({}, footerStyle)) },
_react2.default.createElement(
'table',
{ className: className, style: prepareStyles(mergedTableStyle) },
tFoot
)
);
} else {
inlineFooter = tFoot;
}
}
return _react2.default.createElement(
'div',
{ style: prepareStyles((0, _simpleAssign2.default)(styles.tableWrapper, wrapperStyle)) },
headerTable,
_react2.default.createElement(
'div',
{ style: prepareStyles((0, _simpleAssign2.default)(styles.bodyTable, bodyStyle)), ref: 'tableDiv' },
_react2.default.createElement(
'table',
{ className: className, style: mergedTableStyle, ref: 'tableBody' },
inlineHeader,
inlineFooter,
tBody
)
),
footerTable
);
}
}]);
return Table;
}(_react.Component);
Table.propTypes = {
/**
* Set to true to indicate that all rows should be selected.
*/
allRowsSelected: _react.PropTypes.bool,
/**
* Override the inline-styles of the body's table element.
*/
bodyStyle: _react.PropTypes.object,
/**
* Children passed to table.
*/
children: _react.PropTypes.node,
/**
* The css class name of the root element.
*/
className: _react.PropTypes.string,
/**
* If true, the footer will appear fixed below the table.
* The default value is true.
*/
fixedFooter: _react.PropTypes.bool,
/**
* If true, the header will appear fixed above the table.
* The default value is true.
*/
fixedHeader: _react.PropTypes.bool,
/**
* Override the inline-styles of the footer's table element.
*/
footerStyle: _react.PropTypes.object,
/**
* Override the inline-styles of the header's table element.
*/
headerStyle: _react.PropTypes.object,
/**
* The height of the table.
*/
height: _react.PropTypes.string,
/**
* If true, multiple table rows can be selected.
* CTRL/CMD+Click and SHIFT+Click are valid actions.
* The default value is false.
*/
multiSelectable: _react.PropTypes.bool,
/**
* 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,
/**
* 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,
/**
* 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,
/**
* Called when a table row is hovered.
* rowNumber is the row number of the hovered row.
*/
onRowHover: _react.PropTypes.func,
/**
* 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,
/**
* Called when a row is selected.
* selectedRows is an array of all row selections.
* IF all rows have been selected, the string "all"
* will be returned instead to indicate that all rows have been selected.
*/
onRowSelection: _react.PropTypes.func,
/**
* If true, table rows can be selected.
* If multiple row selection is desired, enable multiSelectable.
* The default value is true.
*/
selectable: _react.PropTypes.bool,
/**
* Override the inline-styles of the root element.
*/
style: _react.PropTypes.object,
/**
* Override the inline-styles of the table's wrapper element.
*/
wrapperStyle: _react.PropTypes.object
};
Table.defaultProps = {
allRowsSelected: false,
fixedFooter: true,
fixedHeader: true,
height: 'inherit',
multiSelectable: false,
selectable: true
};
Table.contextTypes = {
muiTheme: _react.PropTypes.object.isRequired
};
exports.default = Table;