2017-04-17 17:14:17 +03:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2016-05-22 20:08:47 +03:00
|
|
|
import { themr } from 'react-css-themr';
|
2017-01-26 20:05:32 +03:00
|
|
|
import { LIST } from '../identifiers';
|
|
|
|
import InjectListItemContent from './ListItemContent';
|
|
|
|
import InjectListItemLayout from './ListItemLayout';
|
|
|
|
import rippleFactory from '../ripple/Ripple';
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
const factory = (ripple, ListItemLayout, ListItemContent) => {
|
2016-05-29 22:11:04 +03:00
|
|
|
class ListItem extends Component {
|
2016-05-29 21:59:54 +03:00
|
|
|
static propTypes = {
|
2017-01-26 20:05:32 +03:00
|
|
|
children: PropTypes.node,
|
2016-05-29 22:11:04 +03:00
|
|
|
className: PropTypes.string,
|
|
|
|
disabled: PropTypes.bool,
|
2017-01-26 20:05:32 +03:00
|
|
|
hasRipple: PropTypes.bool,
|
2016-05-29 22:11:04 +03:00
|
|
|
onClick: PropTypes.func,
|
2017-01-26 20:05:32 +03:00
|
|
|
onMouseDown: PropTypes.func,
|
|
|
|
onTouchStart: PropTypes.func,
|
2016-05-29 22:11:04 +03:00
|
|
|
ripple: PropTypes.bool,
|
|
|
|
theme: PropTypes.shape({
|
2017-01-26 20:05:32 +03:00
|
|
|
listItem: PropTypes.string,
|
2016-05-29 21:59:54 +03:00
|
|
|
}),
|
2017-01-26 20:05:32 +03:00
|
|
|
to: PropTypes.string,
|
2016-05-29 21:59:54 +03:00
|
|
|
};
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
static defaultProps = {
|
|
|
|
className: '',
|
|
|
|
disabled: false,
|
2017-01-26 20:05:32 +03:00
|
|
|
ripple: false,
|
2016-01-26 16:59:57 +03:00
|
|
|
};
|
2015-10-19 03:38:25 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
handleClick = (event) => {
|
|
|
|
if (this.props.onClick && !this.props.disabled) {
|
|
|
|
this.props.onClick(event);
|
2016-01-26 16:59:57 +03:00
|
|
|
}
|
2016-05-29 21:59:54 +03:00
|
|
|
};
|
2016-01-26 16:59:57 +03:00
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
groupChildren() {
|
2016-05-29 21:59:54 +03:00
|
|
|
const children = {
|
|
|
|
leftActions: [],
|
|
|
|
rightActions: [],
|
2017-01-26 20:05:32 +03:00
|
|
|
ignored: [],
|
2016-05-29 21:59:54 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
React.Children.forEach(this.props.children, (child, i) => {
|
|
|
|
if (!React.isValidElement(child)) {
|
2017-01-26 20:05:32 +03:00
|
|
|
return undefined;
|
2016-05-29 21:59:54 +03:00
|
|
|
}
|
2016-07-04 23:03:57 +03:00
|
|
|
|
|
|
|
const { listItemIgnore, ...rest } = child.props;
|
|
|
|
const strippedChild = { ...child, ...{ props: rest } };
|
|
|
|
|
|
|
|
if (listItemIgnore) {
|
|
|
|
children.ignored.push(strippedChild);
|
2017-01-26 20:05:32 +03:00
|
|
|
return undefined;
|
2016-05-29 21:59:54 +03:00
|
|
|
}
|
|
|
|
if (child.type === ListItemContent) {
|
2016-07-04 23:03:57 +03:00
|
|
|
children.itemContent = strippedChild;
|
2017-01-26 20:05:32 +03:00
|
|
|
return undefined;
|
2016-05-29 21:59:54 +03:00
|
|
|
}
|
|
|
|
const bucket = children.itemContent ? 'rightActions' : 'leftActions';
|
2017-01-26 20:05:32 +03:00
|
|
|
children[bucket].push({ ...strippedChild, key: i });
|
|
|
|
return undefined;
|
2016-05-29 21:59:54 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
return children;
|
|
|
|
}
|
2015-10-29 03:04:59 +03:00
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
className,
|
2017-02-19 13:54:15 +03:00
|
|
|
ripple: hasRipple, // eslint-disable-line no-unused-vars
|
2017-01-26 20:05:32 +03:00
|
|
|
onClick, // eslint-disable-line no-unused-vars
|
|
|
|
onMouseDown, // eslint-disable-line no-unused-vars
|
|
|
|
onTouchStart, // eslint-disable-line no-unused-vars
|
|
|
|
theme,
|
|
|
|
to,
|
|
|
|
...other
|
|
|
|
} = this.props;
|
2016-05-29 21:59:54 +03:00
|
|
|
const children = this.groupChildren();
|
2017-01-26 20:05:32 +03:00
|
|
|
const content = <ListItemLayout theme={theme} {...children} {...other} />;
|
2016-05-29 21:59:54 +03:00
|
|
|
return (
|
2016-08-23 18:06:45 +03:00
|
|
|
<li className={`${theme.listItem} ${className}`} onClick={this.handleClick} onMouseDown={onMouseDown} onTouchStart={onTouchStart}>
|
2016-05-29 21:59:54 +03:00
|
|
|
{to ? <a href={this.props.to}>{content}</a> : content}
|
|
|
|
{children.ignored}
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
2015-10-19 03:38:25 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
return ripple(ListItem);
|
|
|
|
};
|
|
|
|
|
|
|
|
const ripple = rippleFactory({ centered: false, listItemIgnore: true });
|
|
|
|
const ListItem = factory(ripple, InjectListItemLayout, InjectListItemContent);
|
2016-05-22 20:08:47 +03:00
|
|
|
|
2016-05-29 21:59:54 +03:00
|
|
|
export default themr(LIST)(ListItem);
|
|
|
|
export { factory as listItemFactory };
|
|
|
|
export { ListItem };
|