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 { 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) => ( {({ 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 = (
{title &&

{title}

} {description &&
{description}
}
); return (
{avatar &&
{avatar}
} {(title || description) && content}
); }}
); function getGrid(grid: ListGridType, t: ColumnType) { return grid[t] && Math.floor(24 / grid[t]!); } export default class Item extends React.Component { static Meta: typeof Meta = Meta; static contextTypes = { grid: PropTypes.any, itemLayout: PropTypes.string, }; context: any; isItemContainsTextNode() { const { children } = this.props; let result; React.Children.forEach(children, (element: React.ReactElement) => { if (typeof element === 'string') { result = true; } }); return result; } isFlexMode() { const { extra } = this.props; const { itemLayout } = this.context; if (itemLayout === 'vertical') { return !!extra; } return !this.isItemContainsTextNode(); } renderItem = ({ getPrefixCls }: ConfigConsumerProps) => { const { grid, itemLayout } = this.context; const { prefixCls: customizePrefixCls, children, actions, extra, className, ...others } = this.props; const prefixCls = getPrefixCls('list', customizePrefixCls); const actionsContent = actions && actions.length > 0 && (
    {actions.map((action: React.ReactNode, i: number) => (
  • {action} {i !== actions.length - 1 && }
  • ))}
); const itemChildren = (
{itemLayout === 'vertical' && extra ? [
{children} {actionsContent}
,
{extra}
, ] : [ children, actionsContent, extra ? React.cloneElement(extra as React.ReactElement, { key: 'extra' }) : null, ]}
); return grid ? ( {itemChildren} ) : ( itemChildren ); }; render() { return {this.renderItem}; } }