import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; import { ConfigContext } from '../config-provider'; import SizeContext from '../config-provider/SizeContext'; import Skeleton from '../skeleton'; import type { TabsProps } from '../tabs'; import Tabs from '../tabs'; import Grid from './Grid'; import useStyle from './style'; export type CardType = 'inner'; export type CardSize = 'default' | 'small'; export interface CardTabListType { key: string; tab: React.ReactNode; disabled?: boolean; } export interface CardProps extends Omit, 'title'> { prefixCls?: string; title?: React.ReactNode; extra?: React.ReactNode; bordered?: boolean; headStyle?: React.CSSProperties; bodyStyle?: React.CSSProperties; style?: React.CSSProperties; loading?: boolean; hoverable?: boolean; children?: React.ReactNode; id?: string; className?: string; rootClassName?: string; size?: CardSize; type?: CardType; cover?: React.ReactNode; actions?: React.ReactNode[]; tabList?: CardTabListType[]; tabBarExtraContent?: React.ReactNode; onTabChange?: (key: string) => void; activeTabKey?: string; defaultActiveTabKey?: string; tabProps?: TabsProps; } function getAction(actions: React.ReactNode[]) { const actionList = actions.map((action, index) => ( // eslint-disable-next-line react/no-array-index-key
  • {action}
  • )); return actionList; } const Card = React.forwardRef((props: CardProps, ref: React.Ref) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); const size = React.useContext(SizeContext); const onTabChange = (key: string) => { props.onTabChange?.(key); }; const isContainGrid = () => { let containGrid; React.Children.forEach(props.children, (element: JSX.Element) => { if (element && element.type && element.type === Grid) { containGrid = true; } }); return containGrid; }; const { prefixCls: customizePrefixCls, className, rootClassName, extra, headStyle = {}, bodyStyle = {}, title, loading, bordered = true, size: customizeSize, type, cover, actions, tabList, children, activeTabKey, defaultActiveTabKey, tabBarExtraContent, hoverable, tabProps = {}, ...others } = props; const prefixCls = getPrefixCls('card', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); const loadingBlock = ( {children} ); const hasActiveTabKey = activeTabKey !== undefined; const extraProps = { ...tabProps, [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey ? activeTabKey : defaultActiveTabKey, tabBarExtraContent, }; let head: React.ReactNode; const tabs = tabList && tabList.length ? ( ({ label: item.tab, key: item.key, disabled: item.disabled ?? false, }))} /> ) : null; if (title || extra || tabs) { head = (
    {title &&
    {title}
    } {extra &&
    {extra}
    }
    {tabs}
    ); } const coverDom = cover ?
    {cover}
    : null; const body = (
    {loading ? loadingBlock : children}
    ); const actionDom = actions && actions.length ? (
      {getAction(actions)}
    ) : null; const divProps = omit(others, ['onTabChange']); const mergedSize = customizeSize || size; const classString = classNames( prefixCls, { [`${prefixCls}-loading`]: loading, [`${prefixCls}-bordered`]: bordered, [`${prefixCls}-hoverable`]: hoverable, [`${prefixCls}-contain-grid`]: isContainGrid(), [`${prefixCls}-contain-tabs`]: tabList && tabList.length, [`${prefixCls}-${mergedSize}`]: mergedSize, [`${prefixCls}-type-${type}`]: !!type, [`${prefixCls}-rtl`]: direction === 'rtl', }, className, rootClassName, hashId, ); return wrapSSR(
    {head} {coverDom} {body} {actionDom}
    , ); }); export default Card;