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}> {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> ); } }