material-ui-cordova/List/ListItemText.js.flow

React components that implement Google's Material Design.

// @flow weak

import React from 'react';
import type { Node } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import Typography from '../Typography';

export const styles = (theme: Object) => ({
  root: {
    flex: '1 1 auto',
    padding: '0 16px',
    '&:first-child': {
      paddingLeft: 0,
    },
  },
  inset: {
    '&:first-child': {
      paddingLeft: theme.spacing.unit * 7,
    },
  },
  dense: {
    fontSize: theme.typography.pxToRem(13),
  },
  text: {}, // Present to allow external customization
  textDense: {
    fontSize: 'inherit',
  },
});

type ProvidedProps = {
  classes: Object,
  /**
   * @ignore
   */
  theme?: Object,
};

export type Props = {
  /**
   * Useful to extend the style applied to components.
   */
  classes?: Object,
  /**
   * @ignore
   */
  className?: string,
  /**
   * If `true`, the children won't be wrapped by a typography component.
   * For instance, that can be useful to can render an h4 instead of a
   */
  disableTypography: boolean,
  /**
   * If `true`, the children will be indented.
   * This should be used if there is no left avatar or left icon.
   */
  inset: boolean,
  primary: Node,
  secondary: Node,
};

class ListItemText extends React.Component<ProvidedProps & Props> {
  static defaultProps = {
    disableTypography: false,
    primary: false,
    secondary: false,
    inset: false,
  };

  static contextTypes = {
    dense: PropTypes.bool,
  };

  render() {
    const {
      classes,
      className: classNameProp,
      disableTypography,
      primary,
      secondary,
      inset,
      ...other
    } = this.props;
    const { dense } = this.context;
    const className = classNames(
      classes.root,
      {
        [classes.dense]: dense,
        [classes.inset]: inset,
      },
      classNameProp,
    );

    return (
      <div className={className} {...other}>
        {primary &&
          (disableTypography ? (
            primary
          ) : (
            <Typography
              type="subheading"
              className={classNames(classes.text, { [classes.textDense]: dense })}
            >
              {primary}
            </Typography>
          ))}
        {secondary &&
          (disableTypography ? (
            secondary
          ) : (
            <Typography
              color="secondary"
              type="body1"
              className={classNames(classes.text, { [classes.textDense]: dense })}
            >
              {secondary}
            </Typography>
          ))}
      </div>
    );
  }
}

export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);