ant-design/components/list/Item.tsx

158 lines
4.3 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2018-08-07 21:07:52 +08:00
import * as PropTypes from 'prop-types';
import classNames from 'classnames';
2017-11-21 19:02:04 +08:00
import { ListGridType, ColumnType } from './index';
import { Col } from '../grid';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { cloneElement } from '../_util/reactNode';
export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
className?: string;
children?: React.ReactNode;
prefixCls?: string;
style?: React.CSSProperties;
2017-12-05 16:12:55 +08:00
extra?: React.ReactNode;
2018-11-01 14:49:51 +08:00
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>
);
2017-11-21 19:02:04 +08:00
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,
itemLayout: PropTypes.string,
};
2017-08-14 11:08:19 +08:00
2018-11-09 17:38:19 +08:00
context: any;
isItemContainsTextNode() {
const { children } = this.props;
let result;
React.Children.forEach(children, (element: React.ReactElement<any>) => {
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;
2018-12-07 20:02:01 +08:00
const {
prefixCls: customizePrefixCls,
children,
actions,
extra,
className,
...others
} = this.props;
const prefixCls = getPrefixCls('list', customizePrefixCls);
2019-03-05 22:17:22 +08:00
const actionsContent = actions && actions.length > 0 && (
<ul className={`${prefixCls}-item-action`} key="actions">
2019-03-05 22:17:22 +08:00
{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 itemChildren = (
<div
{...others}
className={classNames(`${prefixCls}-item`, className, {
[`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
})}
>
{itemLayout === 'vertical' && extra
? [
<div className={`${prefixCls}-item-main`} key="content">
{children}
{actionsContent}
</div>,
<div className={`${prefixCls}-item-extra`} key="extra">
{extra}
</div>,
]
: [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
2019-03-05 22:17:22 +08:00
</div>
);
2019-03-06 15:23:51 +08:00
return 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')}
>
2019-03-05 22:17:22 +08:00
{itemChildren}
</Col>
) : (
2019-03-05 22:17:22 +08:00
itemChildren
);
2018-12-07 20:02:01 +08:00
};
render() {
2018-12-07 20:02:01 +08:00
return <ConfigConsumer>{this.renderItem}</ConfigConsumer>;
}
}