mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-11 10:05:07 +08:00
a307a7acf7
* remove unnecessary computed props for classNames * rollback autocomplete optimization for possible css style order issue * update snapshots * remove more unnecessary computed props at Input
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import React from 'react';
|
||
import classNames from 'classnames';
|
||
import splitObject from '../_util/splitObject';
|
||
|
||
export interface CardProps {
|
||
title?: React.ReactNode;
|
||
extra?: React.ReactNode;
|
||
bordered?: boolean;
|
||
bodyStyle?: React.CSSProperties;
|
||
style?: React.CSSProperties;
|
||
loading?: boolean;
|
||
children?: any;
|
||
id?: string;
|
||
className?: string;
|
||
}
|
||
|
||
export default (props: CardProps) => {
|
||
const [{
|
||
prefixCls = 'ant-card', className, extra, bodyStyle,
|
||
title, loading, bordered = true,
|
||
}, others] = splitObject(props,
|
||
['prefixCls', 'className', 'children', 'extra', 'bodyStyle', 'title', 'loading', 'bordered']);
|
||
let children = props.children;
|
||
const classString = classNames(prefixCls, className, {
|
||
[`${prefixCls}-loading`]: loading,
|
||
[`${prefixCls}-bordered`]: bordered,
|
||
});
|
||
|
||
if (loading) {
|
||
children = (
|
||
<div>
|
||
<p>████████████████████████</p>
|
||
<p>██████ ███████████████████</p>
|
||
<p>██████████████ ██████████</p>
|
||
<p>█████ ██████ █████████████</p>
|
||
<p>███████████ ██████████ ███</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
let head;
|
||
if (!title) {
|
||
head = null;
|
||
} else {
|
||
head = typeof title === 'string' ? (
|
||
<div className={`${prefixCls}-head`}>
|
||
<h3 className={`${prefixCls}-head-title`}>{title}</h3>
|
||
</div>
|
||
) : (
|
||
<div className={`${prefixCls}-head`}>
|
||
<div className={`${prefixCls}-head-title`}>{title}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div {...others} className={classString}>
|
||
{head}
|
||
{extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
|
||
<div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
|
||
</div>
|
||
);
|
||
};
|