ant-design/components/card/Meta.tsx
叶枫 502dac12aa
docs: format code (#48309)
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

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;