83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
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 {
|
|
onChange = key => {
|
|
const { onTabChange } = this.props;
|
|
if (onTabChange) {
|
|
onTabChange(key);
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
title = '',
|
|
logo,
|
|
action,
|
|
content,
|
|
extraContent,
|
|
tabList,
|
|
className,
|
|
tabActiveKey,
|
|
tabDefaultActiveKey,
|
|
tabBarExtraContent,
|
|
loading = false,
|
|
wide = false,
|
|
hiddenBreadcrumb = false,
|
|
} = this.props;
|
|
|
|
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}>
|
|
<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>
|
|
);
|
|
}
|
|
}
|