index.js 2.1 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4 5 6 7 8
import React, { PureComponent } from 'react';
import { Tabs, Skeleton } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
import BreadcrumbView from './breadcrumb';

const { TabPane } = Tabs;
export default class PageHeader extends PureComponent {
9 10 11 12 13 14
	onChange = (key) => {
		const { onTabChange } = this.props;
		if (onTabChange) {
			onTabChange(key);
		}
	};
徐立's avatar
徐立 committed
15

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
	render() {
		const {
			title,
			logo,
			action,
			content,
			extraContent,
			tabList,
			className,
			tabActiveKey,
			tabDefaultActiveKey,
			tabBarExtraContent,
			loading = false,
			wide = false,
			hiddenBreadcrumb = false,
		} = this.props;
徐立's avatar
徐立 committed
32

33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
		const clsString = classNames(styles.pageHeader, className);
		const activeKeyProps = {};
		if (tabDefaultActiveKey !== undefined) {
			activeKeyProps.defaultActiveKey = tabDefaultActiveKey;
		}
		if (tabActiveKey !== undefined) {
			activeKeyProps.activeKey = tabActiveKey;
		}
		return (
			<div className={clsString}>
				<div className={wide ? styles.wide : ''}>
					<Skeleton
						loading={loading}
						title={false}
						active
						paragraph={{ rows: 3 }}
						avatar={{ size: 'large', shape: 'circle' }}>
						{hiddenBreadcrumb ? null : <BreadcrumbView {...this.props} />}
						<div className={styles.detail}>
							{logo && <div className={styles.logo}>{logo}</div>}
							<div className={styles.main}>
								<div className={styles.row}>
									{title && <h1 className={styles.title}>{title}</h1>}
									{action && <div className={styles.action}>{action}</div>}
								</div>
								<div className={styles.row}>
									{content && <div className={styles.content}>{content}</div>}
									{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
								</div>
							</div>
						</div>
						{tabList && tabList.length ? (
							<Tabs
								className={styles.tabs}
								{...activeKeyProps}
								onChange={this.onChange}
								tabBarExtraContent={tabBarExtraContent}>
								{tabList.map((item) => (
									<TabPane tab={item.tab} key={item.key} />
								))}
							</Tabs>
						) : null}
					</Skeleton>
				</div>
			</div>
		);
	}
徐立's avatar
徐立 committed
80
}