2017-07-14 16:10:04 +08:00
|
|
|
import React, { Component, Children } from 'react';
|
2016-02-19 19:35:49 +08:00
|
|
|
import classNames from 'classnames';
|
2017-07-29 14:17:02 +08:00
|
|
|
import addEventListener, { RcUtilEventHandler } from 'rc-util/lib/Dom/addEventListener';
|
2017-07-07 13:36:54 +08:00
|
|
|
import Grid from './Grid';
|
2017-07-14 11:37:28 +08:00
|
|
|
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
|
2016-07-14 13:29:50 +08:00
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface CardProps {
|
2016-12-19 15:19:15 +08:00
|
|
|
prefixCls?: string;
|
2016-07-14 13:29:50 +08:00
|
|
|
title?: React.ReactNode;
|
|
|
|
extra?: React.ReactNode;
|
|
|
|
bordered?: boolean;
|
|
|
|
bodyStyle?: React.CSSProperties;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
loading?: boolean;
|
2017-07-07 13:36:54 +08:00
|
|
|
noHovering?: boolean;
|
2017-07-22 21:12:55 +08:00
|
|
|
children?: React.ReactChild;
|
2016-09-21 09:27:58 +08:00
|
|
|
id?: string;
|
2016-10-21 16:27:26 +08:00
|
|
|
className?: string;
|
2016-07-14 13:29:50 +08:00
|
|
|
}
|
|
|
|
|
2017-07-22 21:12:55 +08:00
|
|
|
export default class Card extends Component<CardProps> {
|
2017-07-14 11:55:00 +08:00
|
|
|
static Grid: typeof Grid = Grid;
|
2017-07-22 21:12:55 +08:00
|
|
|
container: HTMLDivElement;
|
2017-07-29 14:17:02 +08:00
|
|
|
resizeEvent: RcUtilEventHandler;
|
2017-07-14 15:57:26 +08:00
|
|
|
updateWiderPaddingCalled: boolean;
|
2017-07-14 11:37:28 +08:00
|
|
|
state = {
|
|
|
|
widerPadding: false,
|
|
|
|
};
|
|
|
|
componentDidMount() {
|
|
|
|
this.updateWiderPadding();
|
|
|
|
this.resizeEvent = addEventListener(window, 'resize', this.updateWiderPadding);
|
2016-02-22 16:25:13 +08:00
|
|
|
}
|
2017-07-14 11:37:28 +08:00
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.resizeEvent) {
|
|
|
|
this.resizeEvent.remove();
|
|
|
|
}
|
2017-07-29 14:16:27 +08:00
|
|
|
(this.updateWiderPadding as any).cancel();
|
2016-10-14 14:41:21 +08:00
|
|
|
}
|
2017-07-14 11:37:28 +08:00
|
|
|
@throttleByAnimationFrameDecorator()
|
|
|
|
updateWiderPadding() {
|
2017-07-29 14:16:27 +08:00
|
|
|
if (!this.container) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// 936 is a magic card width pixer number indicated by designer
|
|
|
|
const WIDTH_BOUDARY_PX = 936;
|
|
|
|
if (this.container.offsetWidth >= WIDTH_BOUDARY_PX && !this.state.widerPadding) {
|
|
|
|
this.setState({ widerPadding: true }, () => {
|
|
|
|
this.updateWiderPaddingCalled = true; // first render without css transition
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (this.container.offsetWidth < WIDTH_BOUDARY_PX && this.state.widerPadding) {
|
|
|
|
this.setState({ widerPadding: false }, () => {
|
|
|
|
this.updateWiderPaddingCalled = true; // first render without css transition
|
|
|
|
});
|
2017-07-14 11:37:28 +08:00
|
|
|
}
|
|
|
|
}
|
2017-07-22 21:12:55 +08:00
|
|
|
saveRef = (node: HTMLDivElement) => {
|
2017-07-14 11:37:28 +08:00
|
|
|
this.container = node;
|
|
|
|
}
|
2017-07-14 16:10:04 +08:00
|
|
|
isContainGrid() {
|
|
|
|
let containGrid;
|
2017-07-22 21:12:55 +08:00
|
|
|
Children.forEach(this.props.children, (element: JSX.Element) => {
|
2017-07-14 16:10:04 +08:00
|
|
|
if (element && element.type && element.type === Grid) {
|
|
|
|
containGrid = true;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return containGrid;
|
|
|
|
}
|
2017-07-14 11:37:28 +08:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
prefixCls = 'ant-card', className, extra, bodyStyle, noHovering,
|
|
|
|
title, loading, bordered = true, ...others,
|
|
|
|
} = this.props;
|
|
|
|
let children = this.props.children;
|
2017-07-14 16:10:04 +08:00
|
|
|
|
2017-07-14 11:37:28 +08:00
|
|
|
const classString = classNames(prefixCls, className, {
|
|
|
|
[`${prefixCls}-loading`]: loading,
|
|
|
|
[`${prefixCls}-bordered`]: bordered,
|
|
|
|
[`${prefixCls}-no-hovering`]: noHovering,
|
|
|
|
[`${prefixCls}-wider-padding`]: this.state.widerPadding,
|
2017-07-14 15:57:26 +08:00
|
|
|
[`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
|
2017-07-14 16:10:04 +08:00
|
|
|
[`${prefixCls}-contain-grid`]: this.isContainGrid(),
|
2017-07-14 11:37:28 +08:00
|
|
|
});
|
2016-02-22 16:25:13 +08:00
|
|
|
|
2017-07-14 11:37:28 +08:00
|
|
|
if (loading) {
|
|
|
|
children = (
|
|
|
|
<div>
|
|
|
|
<p className={`${prefixCls}-loading-block`} style={{ width: '94%' }} />
|
|
|
|
<p>
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '28%' }} />
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '62%' }} />
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '22%' }} />
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '66%' }} />
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '56%' }} />
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '39%' }} />
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '21%' }} />
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '15%' }} />
|
|
|
|
<span className={`${prefixCls}-loading-block`} style={{ width: '40%' }} />
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2017-07-07 13:36:54 +08:00
|
|
|
|
2017-07-14 11:37:28 +08:00
|
|
|
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>
|
|
|
|
);
|
|
|
|
}
|
2017-07-07 13:36:54 +08:00
|
|
|
|
2017-07-14 11:37:28 +08:00
|
|
|
return (
|
|
|
|
<div {...others} className={classString} ref={this.saveRef}>
|
|
|
|
{head}
|
|
|
|
{extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
|
|
|
|
<div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|