361 lines
12 KiB
JavaScript
361 lines
12 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
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);
|
||
|
|
|
||
|
|
var _warning = require('warning');
|
||
|
|
|
||
|
|
var _warning2 = _interopRequireDefault(_warning);
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
function getStyles(props, context) {
|
||
|
|
var _context$muiTheme = context.muiTheme,
|
||
|
|
baseTheme = _context$muiTheme.baseTheme,
|
||
|
|
table = _context$muiTheme.table;
|
||
|
|
|
||
|
|
|
||
|
|
return {
|
||
|
|
root: {
|
||
|
|
backgroundColor: table.backgroundColor,
|
||
|
|
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) {
|
||
|
|
(0, _inherits3.default)(Table, _Component);
|
||
|
|
|
||
|
|
function Table() {
|
||
|
|
var _ref;
|
||
|
|
|
||
|
|
var _temp, _this, _ret;
|
||
|
|
|
||
|
|
(0, _classCallCheck3.default)(this, Table);
|
||
|
|
|
||
|
|
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 = Table.__proto__ || (0, _getPrototypeOf2.default)(Table)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||
|
|
allRowsSelected: false
|
||
|
|
}, _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), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
||
|
|
}
|
||
|
|
|
||
|
|
(0, _createClass3.default)(Table, [{
|
||
|
|
key: 'componentWillMount',
|
||
|
|
value: function componentWillMount() {
|
||
|
|
if (this.props.allRowsSelected) {
|
||
|
|
this.setState({ allRowsSelected: true });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
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,
|
||
|
|
children = _props.children,
|
||
|
|
className = _props.className,
|
||
|
|
fixedFooter = _props.fixedFooter,
|
||
|
|
fixedHeader = _props.fixedHeader,
|
||
|
|
style = _props.style,
|
||
|
|
wrapperStyle = _props.wrapperStyle,
|
||
|
|
headerStyle = _props.headerStyle,
|
||
|
|
bodyStyle = _props.bodyStyle,
|
||
|
|
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);
|
||
|
|
} else {
|
||
|
|
process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Children of the Table component must be TableBody or TableHeader or TableFooter.\n Nothing is rendered.') : void 0;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 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.defaultProps = {
|
||
|
|
allRowsSelected: false,
|
||
|
|
fixedFooter: true,
|
||
|
|
fixedHeader: true,
|
||
|
|
height: 'inherit',
|
||
|
|
multiSelectable: false,
|
||
|
|
selectable: true
|
||
|
|
};
|
||
|
|
Table.contextTypes = {
|
||
|
|
muiTheme: _react.PropTypes.object.isRequired
|
||
|
|
};
|
||
|
|
process.env.NODE_ENV !== "production" ? 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
|
||
|
|
} : void 0;
|
||
|
|
exports.default = Table;
|