react-toolbox/components/list/ListItemContent.js

65 lines
1.8 KiB
JavaScript
Raw Permalink Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
2016-04-10 12:39:04 +03:00
import classnames from 'classnames';
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 InjectListItemText from './ListItemText';
2015-10-19 03:38:25 +03:00
const types = ['auto', 'normal', 'large'];
2015-10-19 03:38:25 +03:00
2016-05-29 21:59:54 +03:00
const factory = (ListItemText) => {
class ListItemContent extends Component {
static propTypes = {
2016-12-06 15:11:04 +03:00
caption: PropTypes.oneOfType([
PropTypes.string,
2017-01-26 20:05:32 +03:00
PropTypes.node,
2016-12-06 15:11:04 +03:00
]),
2017-01-26 20:05:32 +03:00
children: PropTypes.node,
legend: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
]),
2016-05-29 21:59:54 +03:00
theme: PropTypes.shape({
2016-12-19 22:39:07 +03:00
auto: PropTypes.string,
itemContentRoot: PropTypes.string,
2016-12-19 22:39:07 +03:00
large: PropTypes.string,
2017-01-26 20:05:32 +03:00
normal: PropTypes.string,
2016-05-29 21:59:54 +03:00
}),
2017-01-26 20:05:32 +03:00
type: PropTypes.oneOf(types),
2016-05-29 21:59:54 +03:00
};
2017-01-26 20:05:32 +03:00
getType() {
const { type, children, caption, legend } = this.props;
2016-05-29 21:59:54 +03:00
let count = React.Children.count(children);
2017-01-26 20:05:32 +03:00
[caption, legend].forEach((s) => { count += s ? 1 : 0; });
2016-05-29 21:59:54 +03:00
const typeIndex = Math.min(count, types.length);
return type || types[typeIndex];
}
2017-01-26 20:05:32 +03:00
render() {
const { children, caption, legend, theme } = this.props;
2016-12-19 22:39:07 +03:00
const contentType = this.getType();
2016-05-29 21:59:54 +03:00
const className = classnames(theme.itemContentRoot, {
2017-01-26 20:05:32 +03:00
[theme[contentType]]: theme[contentType],
2016-05-29 21:59:54 +03:00
});
return (
<span className={className}>
{caption && <ListItemText theme={theme} primary>{caption}</ListItemText>}
{legend && <ListItemText theme={theme}>{legend}</ListItemText>}
2016-05-29 21:59:54 +03:00
{children}
</span>
);
}
}
2016-05-29 21:59:54 +03:00
return ListItemContent;
};
2016-10-06 21:11:39 +03:00
const ListItemContent = factory(InjectListItemText);
export default themr(LIST)(ListItemContent);
2016-05-29 21:59:54 +03:00
export { factory as listItemContentFactory };
export { ListItemContent };