import React from 'react';
import FontIcon from '../font_icon';
import ListItemContent from './content';
import Ripple from '../ripple';
import style from './style';
class ListItem extends React.Component {
static propTypes = {
avatar: React.PropTypes.string,
caption: React.PropTypes.string.isRequired,
disabled: React.PropTypes.bool,
leftIcon: React.PropTypes.string,
legend: React.PropTypes.string,
rightIcon: React.PropTypes.string,
ripple: React.PropTypes.bool,
selectable: React.PropTypes.bool,
to: React.PropTypes.string
};
static defaultProps = {
disabled: false,
ripple: false,
selectable: false
};
handleClick = (event) => {
if (this.props.onClick && !this.props.disabled) {
this.props.onClick(event);
}
};
handleMouseDown = (event) => {
if (this.refs.ripple && !this.props.disabled) {
this.refs.ripple.start(event);
}
};
renderContent () {
let className = style.item;
if (this.props.legend) className += ` ${style['with-legend']}`;
if (this.props.disabled) className += ` ${style.disabled}`;
if (this.props.className) className += ` ${this.props.className}`;
if (this.props.selectable) className += ` ${style.selectable}`;
return (
{ this.props.leftIcon ?