import * as React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Col } from '../grid'; import { ListGridType } from './index'; export interface ListItemProps { className?: string; children?: React.ReactNode; prefixCls?: string; style?: React.CSSProperties; extra: React.ReactNode; actions?: Array; 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) => { const { prefixCls = 'ant-list', className, avatar, title, description, ...others, } = props; const classString = classNames(`${prefixCls}-item-meta`, className); const content = (
{title &&

{title}

} {description &&
{description}
}
); return (
{avatar &&
{avatar}
} {(title || description) && content}
); }; function getGrid(grid, t) { return grid[t] && Math.floor(24 / grid[t]); } const GridColumns = ['', 1, 2, 3, 4, 6, 8, 12, 24]; export default class Item extends React.Component { static Meta: typeof Meta = Meta; static propTypes = { column: PropTypes.oneOf(GridColumns), xs: PropTypes.oneOf(GridColumns), sm: PropTypes.oneOf(GridColumns), md: PropTypes.oneOf(GridColumns), lg: PropTypes.oneOf(GridColumns), xl: PropTypes.oneOf(GridColumns), }; static contextTypes = { grid: PropTypes.any, }; render() { const { grid } = this.context; const { prefixCls = 'ant-list', children, actions, extra, className, ...others } = this.props; const classString = classNames(`${prefixCls}-item`, className); const metaContent: React.ReactElement[] = []; const otherContent: React.ReactElement[] = []; React.Children.forEach(children, (element: React.ReactElement) => { if (element && element.type && element.type === Meta) { metaContent.push(element); } else { otherContent.push(element); } }); const contentClassString = classNames(`${prefixCls}-item-content`, { [`${prefixCls}-item-content-single`]: (metaContent.length < 1), }); const content = otherContent.length > 0 ? (
{otherContent}
) : null; let actionsContent; if (actions && actions.length > 0) { const actionsContentItem = (action, i) => (
  • {action} {i !== (actions.length - 1) && }
  • ); actionsContent = (
      {actions.map((action, i) => actionsContentItem(action, i))}
    ); } const extraContent = (
    {metaContent} {content} {actionsContent}
    {extra}
    ); const mainContent = grid ? (
    {extra && extraContent} {!extra && metaContent} {!extra && content} {!extra && actionsContent}
    ) : (
    {extra && extraContent} {!extra && metaContent} {!extra && content} {!extra && actionsContent}
    ); return mainContent; } }