mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 15:08:34 +08:00
502dac12aa
* docs: fix code * feat: lint * feat: prettier * feat: test * feat: review * feat: format html * feat: format html
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import type { ConfigConsumerProps } from '../config-provider';
|
|
import { ConfigContext } from '../config-provider';
|
|
|
|
export interface CardMetaProps {
|
|
prefixCls?: string;
|
|
style?: React.CSSProperties;
|
|
className?: string;
|
|
avatar?: React.ReactNode;
|
|
title?: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
}
|
|
|
|
const Meta: React.FC<CardMetaProps> = (props) => {
|
|
const { prefixCls: customizePrefixCls, className, avatar, title, description, ...others } = props;
|
|
|
|
const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('card', customizePrefixCls);
|
|
|
|
const classString = classNames(`${prefixCls}-meta`, className);
|
|
|
|
const avatarDom: React.ReactNode = avatar ? (
|
|
<div className={`${prefixCls}-meta-avatar`}>{avatar}</div>
|
|
) : null;
|
|
|
|
const titleDom: React.ReactNode = title ? (
|
|
<div className={`${prefixCls}-meta-title`}>{title}</div>
|
|
) : null;
|
|
|
|
const descriptionDom: React.ReactNode = description ? (
|
|
<div className={`${prefixCls}-meta-description`}>{description}</div>
|
|
) : null;
|
|
|
|
const MetaDetail: React.ReactNode =
|
|
titleDom || descriptionDom ? (
|
|
<div className={`${prefixCls}-meta-detail`}>
|
|
{titleDom}
|
|
{descriptionDom}
|
|
</div>
|
|
) : null;
|
|
|
|
return (
|
|
<div {...others} className={classString}>
|
|
{avatarDom}
|
|
{MetaDetail}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Meta;
|