d2-ui
Version:
169 lines (140 loc) • 3.56 kB
JSX
import React from 'react';
import StylePropable from '../mixins/style-propable';
import getMuiTheme from '../styles/getMuiTheme';
const TableRowColumn = React.createClass({
propTypes: {
children: React.PropTypes.node,
/**
* The css class name of the root element.
*/
className: React.PropTypes.string,
/**
* Number to identify the header row. This property
* is automatically populated when used with TableHeader.
*/
columnNumber: React.PropTypes.number,
/**
* If true, this column responds to hover events.
*/
hoverable: React.PropTypes.bool,
/**
* Key for this element.
*/
key: React.PropTypes.string,
/**
* Callback function for click event.
*/
onClick: React.PropTypes.func,
/**
* Callback function for hover event.
*/
onHover: React.PropTypes.func,
/**
* Callback function for hover exit event.
*/
onHoverExit: React.PropTypes.func,
/**
* Override the inline-styles of the root element.
*/
style: React.PropTypes.object,
},
contextTypes: {
muiTheme: React.PropTypes.object,
},
//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},
mixins: [
StylePropable,
],
getDefaultProps() {
return {
hoverable: false,
};
},
getInitialState() {
return {
muiTheme: this.context.muiTheme || getMuiTheme(),
hovered: false,
};
},
getChildContext() {
return {
muiTheme: this.state.muiTheme,
};
},
//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
},
getTheme() {
return this.state.muiTheme.tableRowColumn;
},
getStyles() {
let theme = this.getTheme();
let styles = {
root: {
paddingLeft: theme.spacing,
paddingRight: theme.spacing,
height: theme.height,
textAlign: 'left',
fontSize: 13,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
};
if (React.Children.count(this.props.children) === 1 && !isNaN(this.props.children)) {
styles.textAlign = 'right';
}
return styles;
},
_onClick(e) {
if (this.props.onClick) this.props.onClick(e, this.props.columnNumber);
},
_onMouseEnter(e) {
if (this.props.hoverable) {
this.setState({hovered: true});
if (this.props.onHover) this.props.onHover(e, this.props.columnNumber);
}
},
_onMouseLeave(e) {
if (this.props.hoverable) {
this.setState({hovered: false});
if (this.props.onHoverExit) this.props.onHoverExit(e, this.props.columnNumber);
}
},
render() {
let {
className,
columnNumber,
hoverable,
onClick,
onHover,
onHoverExit,
style,
...other,
} = this.props;
let styles = this.getStyles();
let handlers = {
onClick: this._onClick,
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
};
return (
<td
key={this.props.key}
className={className}
style={this.prepareStyles(styles.root, style)}
{...handlers}
{...other}
>
{this.props.children}
</td>
);
},
});
export default TableRowColumn;