ant-design/components/list/Item.tsx

import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from 'classnames';
import { ListGridType, ColumnType } from './index';
import { Col } from '../grid';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  children?: React.ReactNode;
  prefixCls?: string;
  style?: React.CSSProperties;
  extra?: React.ReactNode;
  actions?: React.ReactNode[];
  grid?: ListGridType;
}

export interface ListItemMetaProps {
  avatar?: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
  description?: React.ReactNode;
  prefixCls?: string;
  style?: React.CSSProperties;
  title?: React.ReactNode;
}

export const Meta = (props: ListItemMetaProps) => (
  <ConfigConsumer>
    {({ getPrefixCls }: ConfigConsumerProps) => {
      const {
        prefixCls: customizePrefixCls,
        className,
        avatar,
        title,
        description,
        ...others
      } = props;

      const prefixCls = getPrefixCls('list', customizePrefixCls);
      const classString = classNames(`${prefixCls}-item-meta`, className);

      const content = (
        <div className={`${prefixCls}-item-meta-content`}>
          {title && <h4 className={`${prefixCls}-item-meta-title`}>{title}</h4>}
          {description && <div className={`${prefixCls}-item-meta-description`}>{description}</div>}
        </div>
      );

      return (
        <div {...others} className={classString}>
          {avatar && <div className={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
          {(title || description) && content}
        </div>
      );
    }}
  </ConfigConsumer>
);

function getGrid(grid: ListGridType, t: ColumnType) {
  return grid[t] && Math.floor(24 / grid[t]!);
}

export default class Item extends React.Component<ListItemProps, any> {
  static Meta: typeof Meta = Meta;

  static contextTypes = {
    grid: PropTypes.any,
  };

  context: any;

  renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {
    const { grid } = this.context;
    const {
      prefixCls: customizePrefixCls,
      children,
      actions,
      extra,
      className,
      ...others
    } = this.props;
    const prefixCls = getPrefixCls('list', customizePrefixCls);
    const classString = classNames(`${prefixCls}-item`, className);

    const actionsContent = actions && actions.length > 0 && (
      <ul className={`${prefixCls}-item-action`}>
        {actions.map((action: React.ReactNode, i: number) => (
          <li key={`${prefixCls}-item-action-${i}`}>
            {action}
            {i !== actions.length - 1 && <em className={`${prefixCls}-item-action-split`} />}
          </li>
        ))}
      </ul>
    );

    const extraContent = (
      <div className={`${prefixCls}-item-extra-wrap`}>
        <div className={`${prefixCls}-item-main`}>
          {children}
          {actionsContent}
        </div>
        <div className={`${prefixCls}-item-extra`}>{extra}</div>
      </div>
    );

    const itemChildren = (
      <div {...others} className={classString}>
        {extra ? extraContent : [children, actionsContent]}
      </div>
    );

    const mainContent = grid ? (
      <Col
        span={getGrid(grid, 'column')}
        xs={getGrid(grid, 'xs')}
        sm={getGrid(grid, 'sm')}
        md={getGrid(grid, 'md')}
        lg={getGrid(grid, 'lg')}
        xl={getGrid(grid, 'xl')}
        xxl={getGrid(grid, 'xxl')}
      >
        {itemChildren}
      </Col>
    ) : (
      itemChildren
    );

    return mainContent;
  };

  render() {
    return <ConfigConsumer>{this.renderItem}</ConfigConsumer>;
  }
}