ant-design/components/card/index.tsx

206 lines
6.6 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2016-02-19 19:35:49 +08:00
import classNames from 'classnames';
2017-08-02 15:08:55 +08:00
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import omit from 'omit.js';
import Grid from './Grid';
import Meta from './Meta';
import Tabs from '../tabs';
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
2017-09-27 21:57:18 +08:00
import warning from '../_util/warning';
2016-07-14 13:29:50 +08:00
export { CardGridProps } from './Grid';
export { CardMetaProps } from './Meta';
export type CardType = 'inner';
export interface CardTabListType {
key: string;
tab: React.ReactNode;
}
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;
noHovering?: boolean;
2017-09-27 21:57:18 +08:00
hoverable?: boolean;
2017-07-31 20:29:56 +08:00
children?: React.ReactNode;
id?: string;
2016-10-21 16:27:26 +08:00
className?: string;
type?: CardType;
cover?: React.ReactNode;
actions?: Array<React.ReactNode>;
tabList?: CardTabListType[];
onTabChange?: (key: string) => void;
2016-07-14 13:29:50 +08:00
}
export default class Card extends React.Component<CardProps, {}> {
2017-07-14 11:55:00 +08:00
static Grid: typeof Grid = Grid;
static Meta: typeof Meta = Meta;
2017-08-02 15:08:55 +08:00
resizeEvent: any;
updateWiderPaddingCalled: boolean;
state = {
widerPadding: false,
};
2017-09-17 15:48:44 +08:00
private container: HTMLDivElement;
componentDidMount() {
this.updateWiderPadding();
this.resizeEvent = addEventListener(window, 'resize', this.updateWiderPadding);
2017-09-27 21:57:18 +08:00
if ('noHovering' in this.props) {
warning(
!this.props.noHovering,
'`noHovering` of Card is deperated, you can remove it safely or use `hoverable` instead.',
);
warning(!!this.props.noHovering, '`noHovering={false}` of Card is deperated, use `hoverable` instead.');
}
2016-02-22 16:25:13 +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
}
@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-11-22 11:07:19 +08:00
onTabChange = (key: string) => {
if (this.props.onTabChange) {
this.props.onTabChange(key);
}
}
saveRef = (node: HTMLDivElement) => {
this.container = node;
}
2017-07-14 16:10:04 +08:00
isContainGrid() {
let containGrid;
React.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-11-22 11:07:19 +08:00
getAction(actions: React.ReactNode[]) {
if (!actions || !actions.length) {
return null;
}
const actionList = actions.map((action, index) => (
<li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
<span>{action}</span>
</li>
),
);
return actionList;
}
2017-09-27 21:57:18 +08:00
// For 2.x compatible
getCompatibleHoverable() {
const { noHovering, hoverable } = this.props;
if ('noHovering' in this.props) {
return !noHovering || hoverable;
}
return !!hoverable;
}
render() {
const {
2017-09-27 21:57:18 +08:00
prefixCls = 'ant-card', className, extra, bodyStyle, noHovering, hoverable, title, loading,
bordered = true, type, cover, actions, tabList, children, ...others,
} = this.props;
2017-07-14 16:10:04 +08:00
const classString = classNames(prefixCls, className, {
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
2017-09-27 21:57:18 +08:00
[`${prefixCls}-hoverable`]: this.getCompatibleHoverable(),
[`${prefixCls}-wider-padding`]: this.state.widerPadding,
[`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
2017-07-14 16:10:04 +08:00
[`${prefixCls}-contain-grid`]: this.isContainGrid(),
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-type-${type}`]: !!type,
});
2016-02-22 16:25:13 +08:00
const loadingBlock = (
<div className={`${prefixCls}-loading-content`}>
<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>
);
let head;
const tabs = tabList && tabList.length ? (
2017-10-24 15:29:10 +08:00
<Tabs className={`${prefixCls}-head-tabs`} size="large" onChange={this.onTabChange}>
2017-08-15 22:50:00 +08:00
{tabList.map(item => <Tabs.TabPane tab={item.tab} key={item.key} />)}
</Tabs>
) : null;
if (title || extra || tabs) {
2017-08-15 22:34:48 +08:00
head = (
<div className={`${prefixCls}-head`}>
2017-09-20 21:56:56 +08:00
<div className={`${prefixCls}-head-wrapper`}>
{title && <div className={`${prefixCls}-head-title`}>{title}</div>}
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
</div>
{tabs}
</div>
);
}
const coverDom = cover ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
const body = (
<div className={`${prefixCls}-body`} style={bodyStyle}>
{loading ? loadingBlock : <div>{children}</div>}
</div>
);
const mainContent = (
<div>
{head}
{coverDom}
{children ? body : null}
</div>
);
const actionDom = actions && actions.length ?
<ul className={`${prefixCls}-actions`}>{this.getAction(actions)}</ul> : null;
const divProps = omit(others, [
'onTabChange',
]);
return (
<div {...divProps} className={classString} ref={this.saveRef}>
{mainContent}
{actionDom}
</div>
);
}
}