66 lines
1.7 KiB
JavaScript
66 lines
1.7 KiB
JavaScript
import React, { Component, PropTypes, cloneElement } from 'react';
|
|
import { themr } from 'react-css-themr';
|
|
import { TABLE } from '../identifiers.js';
|
|
import InjectCheckbox from '../checkbox/Checkbox.js';
|
|
import InjectTableCell from './TableCell.js';
|
|
|
|
const factory = (Checkbox, TableCell) => {
|
|
class TableHead extends Component {
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
className: PropTypes.string,
|
|
displaySelect: PropTypes.bool,
|
|
multiSelectable: PropTypes.bool,
|
|
onSelect: PropTypes.func,
|
|
selectable: PropTypes.bool,
|
|
selected: PropTypes.bool,
|
|
theme: PropTypes.shape({
|
|
checkboxCell: PropTypes.string
|
|
})
|
|
}
|
|
|
|
static defaultProps = {
|
|
displaySelect: true
|
|
}
|
|
|
|
handleSelect = (value, event) => {
|
|
this.props.onSelect(value, event);
|
|
};
|
|
|
|
render () {
|
|
const {
|
|
children,
|
|
displaySelect,
|
|
multiSelectable,
|
|
onSelect, // eslint-disable-line
|
|
selectable,
|
|
selected,
|
|
theme,
|
|
...other
|
|
} = this.props;
|
|
return (
|
|
<tr {...other}>
|
|
{selectable && <TableCell className={theme.checkboxCell} tagName="th">
|
|
{displaySelect && <Checkbox
|
|
checked={selected}
|
|
disabled={!multiSelectable}
|
|
onChange={this.handleSelect}
|
|
/>}
|
|
</TableCell>}
|
|
{React.Children.map(children, (child, index) => cloneElement(child, {
|
|
column: index,
|
|
tagName: 'th'
|
|
}))}
|
|
</tr>
|
|
);
|
|
}
|
|
}
|
|
|
|
return TableHead;
|
|
};
|
|
|
|
const TableHead = factory(InjectCheckbox, InjectTableCell);
|
|
export default themr(TABLE)(TableHead);
|
|
export { factory as tableHeadFactory };
|
|
export { TableHead };
|