UNPKG

d2-ui

Version:
221 lines (183 loc) 7.88 kB
'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); var _Checkbox = require('../Checkbox'); var _Checkbox2 = _interopRequireDefault(_Checkbox); var _TableHeaderColumn = require('./TableHeaderColumn'); var _TableHeaderColumn2 = _interopRequireDefault(_TableHeaderColumn); 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 tableHeader = context.muiTheme.tableHeader; return { root: { borderBottom: '1px solid ' + tableHeader.borderColor } }; } var TableHeader = function (_Component) { _inherits(TableHeader, _Component); function TableHeader() { var _Object$getPrototypeO; var _temp, _this, _ret; _classCallCheck(this, TableHeader); 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(TableHeader)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleCheckAll = function (event, checked) { if (_this.props.onSelectAll) _this.props.onSelectAll(checked); }, _temp), _possibleConstructorReturn(_this, _ret); } _createClass(TableHeader, [{ key: 'createSuperHeaderRows', value: function createSuperHeaderRows() { var numChildren = _react2.default.Children.count(this.props.children); if (numChildren === 1) return undefined; var superHeaders = []; for (var index = 0; index < numChildren - 1; index++) { var child = this.props.children[index]; if (!_react2.default.isValidElement(child)) continue; var props = { key: 'sh' + index, rowNumber: index }; superHeaders.push(this.createSuperHeaderRow(child, props)); } if (superHeaders.length) return superHeaders; } }, { key: 'createSuperHeaderRow', value: function createSuperHeaderRow(child, props) { var children = []; if (this.props.adjustForCheckbox) { children.push(this.getCheckboxPlaceholder(props)); } _react2.default.Children.forEach(child.props.children, function (child) { children.push(child); }); return _react2.default.cloneElement(child, props, children); } }, { key: 'createBaseHeaderRow', value: function createBaseHeaderRow() { var numChildren = _react2.default.Children.count(this.props.children); var child = numChildren === 1 ? this.props.children : this.props.children[numChildren - 1]; var props = { key: 'h' + numChildren, rowNumber: numChildren }; var children = [this.getSelectAllCheckboxColumn(props)]; _react2.default.Children.forEach(child.props.children, function (child) { children.push(child); }); return _react2.default.cloneElement(child, props, children); } }, { key: 'getCheckboxPlaceholder', value: function getCheckboxPlaceholder(props) { if (!this.props.adjustForCheckbox) return null; var key = 'hpcb' + props.rowNumber; return _react2.default.createElement(_TableHeaderColumn2.default, { key: key, style: { width: 24 } }); } }, { key: 'getSelectAllCheckboxColumn', value: function getSelectAllCheckboxColumn(props) { if (!this.props.displaySelectAll) return this.getCheckboxPlaceholder(props); var checkbox = _react2.default.createElement(_Checkbox2.default, { key: 'selectallcb', name: 'selectallcb', value: 'selected', disabled: !this.props.enableSelectAll, checked: this.props.selectAllSelected, onCheck: this.handleCheckAll }); var key = 'hpcb' + props.rowNumber; return _react2.default.createElement( _TableHeaderColumn2.default, { key: key, style: { width: 24 } }, checkbox ); } }, { key: 'render', value: function render() { var _props = this.props; var className = _props.className; var style = _props.style; var prepareStyles = this.context.muiTheme.prepareStyles; var styles = getStyles(this.props, this.context); var superHeaderRows = this.createSuperHeaderRows(); var baseHeaderRow = this.createBaseHeaderRow(); return _react2.default.createElement( 'thead', { className: className, style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, superHeaderRows, baseHeaderRow ); } }]); return TableHeader; }(_react.Component); TableHeader.muiName = 'TableHeader'; TableHeader.propTypes = { /** * Controls whether or not header rows should be * adjusted for a checkbox column. If the select all * checkbox is true, this property will not influence * the number of columns. This is mainly useful for * "super header" rows so that the checkbox column * does not create an offset that needs to be accounted * for manually. */ adjustForCheckbox: _react.PropTypes.bool, /** * Children passed to table header. */ children: _react.PropTypes.node, /** * The css class name of the root element. */ className: _react.PropTypes.string, /** * Controls whether or not the select all checkbox is displayed. */ displaySelectAll: _react.PropTypes.bool, /** * If set to true, the select all button will be interactable. * If set to false, the button will not be interactable. * To hide the checkbox, set displaySelectAll to false. */ enableSelectAll: _react.PropTypes.bool, /** * @ignore * Callback when select all has been checked. */ onSelectAll: _react.PropTypes.func, /** * @ignore * True when select all has been checked. */ selectAllSelected: _react.PropTypes.bool, /** * Override the inline-styles of the root element. */ style: _react.PropTypes.object }; TableHeader.defaultProps = { adjustForCheckbox: true, displaySelectAll: true, enableSelectAll: true, selectAllSelected: false }; TableHeader.contextTypes = { muiTheme: _react.PropTypes.object.isRequired }; exports.default = TableHeader;