react-mdl/src/List/ListItemContent.js

React Components for Material Design Lite

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../Icon';

const propTypes = {
    avatar: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.element
    ]),
    children: PropTypes.node,
    className: PropTypes.string,
    icon: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.element
    ]),
    subtitle: PropTypes.node,
    useBodyClass: PropTypes.bool
};

function createIcon(type, icon) {
    if (typeof icon === 'string') {
        return <Icon className={`mdl-list__item-${type}`} name={icon} />;
    }
    const { className } = icon.props;
    const classes = classNames(`mdl-list__item-${type}`, className);
    return React.cloneElement(icon, { className: classes });
}

const ListItemContent = props => {
    const { avatar, children, className, icon,
        subtitle, useBodyClass, ...otherProps } = props;

    const classes = classNames('mdl-list__item-primary-content', className);
    const subtitleClassName = useBodyClass ? 'mdl-list__item-text-body' : 'mdl-list__item-sub-title';

    let iconElement = null;
    if (icon) {
        iconElement = createIcon('icon', icon);
    } else if (avatar) {
        iconElement = createIcon('avatar', avatar);
    }

    return (
        <span className={classes} {...otherProps}>
            {iconElement}
            <span>{children}</span>
            {subtitle && <span className={subtitleClassName}>{subtitle}</span>}
        </span>
    );
};

ListItemContent.propTypes = propTypes;

export default ListItemContent;