2015-10-19 03:38:25 +03:00
|
|
|
import React from 'react';
|
2016-05-22 20:08:47 +03:00
|
|
|
import { themr } from 'react-css-themr';
|
2015-11-23 00:28:24 +03:00
|
|
|
import ListItemContent from './ListItemContent';
|
2016-01-26 16:59:57 +03:00
|
|
|
import ListItemLayout from './ListItemLayout';
|
2015-12-07 04:34:12 +03:00
|
|
|
import Ripple from '../ripple';
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
class ListItem extends React.Component {
|
2015-10-20 08:40:51 +03:00
|
|
|
static propTypes = {
|
2015-12-07 03:13:59 +03:00
|
|
|
children: React.PropTypes.any,
|
2016-03-17 21:57:48 +03:00
|
|
|
className: React.PropTypes.string,
|
2015-10-19 03:38:25 +03:00
|
|
|
disabled: React.PropTypes.bool,
|
2015-11-22 21:20:05 +03:00
|
|
|
onClick: React.PropTypes.func,
|
2015-10-19 03:38:25 +03:00
|
|
|
ripple: React.PropTypes.bool,
|
2016-05-22 20:08:47 +03:00
|
|
|
theme: React.PropTypes.shape({
|
|
|
|
listItem: React.PropTypes.string.isRequired
|
|
|
|
}),
|
2015-10-29 03:04:59 +03:00
|
|
|
to: React.PropTypes.string
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
static defaultProps = {
|
2016-05-22 20:08:47 +03:00
|
|
|
className: '',
|
2015-10-20 08:40:51 +03:00
|
|
|
disabled: false,
|
2016-01-26 16:59:57 +03:00
|
|
|
ripple: false
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
handleClick = (event) => {
|
2015-10-19 03:38:25 +03:00
|
|
|
if (this.props.onClick && !this.props.disabled) {
|
|
|
|
this.props.onClick(event);
|
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
};
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-01-26 16:59:57 +03:00
|
|
|
groupChildren () {
|
|
|
|
const children = {
|
|
|
|
leftActions: [],
|
|
|
|
rightActions: [],
|
|
|
|
ignored: []
|
|
|
|
};
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-01-26 16:59:57 +03:00
|
|
|
React.Children.forEach(this.props.children, (child, i) => {
|
|
|
|
if (!React.isValidElement(child)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (child.props.listItemIgnore) {
|
|
|
|
children.ignored.push(child);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (child.type === ListItemContent) {
|
|
|
|
children.itemContent = child;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const bucket = children.itemContent ? 'rightActions' : 'leftActions';
|
|
|
|
children[bucket].push({...child, key: i});
|
|
|
|
});
|
|
|
|
|
|
|
|
return children;
|
2015-10-29 03:04:59 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2016-05-22 20:08:47 +03:00
|
|
|
const {className, onMouseDown, to, onClick, ripple, theme, ...other} = this.props; //eslint-disable-line no-unused-vars
|
2016-01-26 16:59:57 +03:00
|
|
|
const children = this.groupChildren();
|
|
|
|
const content = <ListItemLayout {...children} {...other}/>;
|
2015-10-29 03:04:59 +03:00
|
|
|
return (
|
2016-05-22 20:08:47 +03:00
|
|
|
<li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown}>
|
2016-01-26 16:59:57 +03:00
|
|
|
{to ? <a href={this.props.to}>{content}</a> : content}
|
|
|
|
{children.ignored}
|
2015-10-19 03:38:25 +03:00
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
2015-10-21 13:25:07 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
2016-05-22 20:08:47 +03:00
|
|
|
const RawListItem = themr('ToolboxList')(ListItem);
|
|
|
|
export default themr('ToolboxList')(Ripple({
|
2016-01-26 16:59:57 +03:00
|
|
|
centered: false,
|
|
|
|
listItemIgnore: true
|
2016-05-22 20:08:47 +03:00
|
|
|
})(ListItem));
|
|
|
|
|
|
|
|
export {RawListItem as RawListItem};
|