2016-02-19 19:35:49 +08:00
|
|
|
|
import React from 'react';
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
|
|
|
|
|
export default props => {
|
2016-04-10 15:38:52 +08:00
|
|
|
|
let { prefixCls = 'ant-card', className, children, extra, bodyStyle,
|
|
|
|
|
title, loading, bordered = true, ...other } = props;
|
2016-02-19 19:35:49 +08:00
|
|
|
|
const classString = classNames({
|
|
|
|
|
[prefixCls]: true,
|
|
|
|
|
[className]: !!className,
|
2016-02-22 16:25:13 +08:00
|
|
|
|
[`${prefixCls}-loading`]: loading,
|
2016-04-10 15:38:52 +08:00
|
|
|
|
[`${prefixCls}-bordered`]: bordered,
|
2016-02-19 19:35:49 +08:00
|
|
|
|
});
|
2016-02-22 16:25:13 +08:00
|
|
|
|
|
|
|
|
|
if (loading) {
|
|
|
|
|
children = (
|
|
|
|
|
<div>
|
2016-03-30 19:06:05 +08:00
|
|
|
|
<p>████████████████████████</p>
|
2016-02-22 16:25:13 +08:00
|
|
|
|
<p>██████ ███████████████████</p>
|
2016-03-30 19:06:05 +08:00
|
|
|
|
<p>██████████████ ██████████</p>
|
2016-02-22 16:25:13 +08:00
|
|
|
|
<p>█████ ██████ █████████████</p>
|
2016-03-30 19:06:05 +08:00
|
|
|
|
<p>███████████ ██████████ ███</p>
|
2016-02-22 16:25:13 +08:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2016-02-20 16:40:18 +08:00
|
|
|
|
const head = title ? (
|
|
|
|
|
<div className={`${prefixCls}-head`}>
|
|
|
|
|
<h3 className={`${prefixCls}-head-title`}>{title}</h3>
|
|
|
|
|
</div>
|
|
|
|
|
) : null;
|
2016-02-22 16:25:13 +08:00
|
|
|
|
|
2016-02-19 19:35:49 +08:00
|
|
|
|
return (
|
|
|
|
|
<div {...other} className={classString}>
|
2016-02-20 16:40:18 +08:00
|
|
|
|
{head}
|
|
|
|
|
{extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
|
|
|
|
|
<div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
|
2016-02-19 19:35:49 +08:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|