react-toolbox/components/list/ListItem.js

100 lines
2.9 KiB
JavaScript
Raw Permalink Normal View History

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,
};
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-05-29 21:59:54 +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;
}
2017-01-26 20:05:32 +03:00
render() {
const {
className,
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 };