zent
Version:
一套前端设计语言和基于React的实现
139 lines (124 loc) • 3.51 kB
JavaScript
import React from 'react';
import TabPanel from './components/TabPanel/TabPanel';
import LazyMount from './components/LazyMount';
import Nav from './components/Nav/Nav';
import tabUtil from './tabUtil';
function noop() {}
export default class Tabs extends React.Component {
static propTypes = {
className: React.PropTypes.string,
prefix: React.PropTypes.string,
type: React.PropTypes.oneOf(['normal', 'card', 'slider']),
activeKey: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
// 推荐使用activeId代替原来的activeKey
// 更直观
activeId: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
size: React.PropTypes.oneOf(['huge', 'normal']),
align: React.PropTypes.oneOf(['left', 'right', 'center']),
onTabChange: React.PropTypes.func,
onTabDel: React.PropTypes.func,
onTabAdd: React.PropTypes.func,
candel: React.PropTypes.bool,
canadd: React.PropTypes.bool
};
static defaultProps = {
prefix: 'zent',
className: '',
type: 'normal',
activeKey: '',
activeId: '',
size: 'normal',
align: 'left',
onTabChange: noop,
onTabDel: noop,
onTabAdd: noop,
candel: false,
canadd: false
};
static uniqueId = 0;
static TabPanel = TabPanel;
constructor(props) {
super(props);
Tabs.uniqueId ++;
}
// 选中tab
onTabChange(selectKey) {
let { onTabChange } = this.props;
if (onTabChange) {
onTabChange(selectKey);
}
}
// 删除tab
onTabDel(tabKey) {
let { onTabDel } = this.props;
if (onTabDel) {
onTabDel(tabKey);
}
}
// 增加tab
onTabAdd() {
let { onTabAdd } = this.props;
if (onTabAdd) {
onTabAdd();
}
}
renderNav(tabListData) {
let { type, align, canadd, candel, prefix, size } = this.props;
if (tabListData && tabListData.length) {
return (
<Nav
onChange={this.onTabChange.bind(this)}
tabListData={tabListData}
type={type}
align={align}
size={size}
onDelete={this.onTabDel.bind(this)}
onTabAdd={this.onTabAdd.bind(this)}
canadd={canadd}
candel={candel}
prefix={prefix}
uniqueId={Tabs.uniqueId}
/>
);
}
}
renderTabPanel(tabListData) {
let { prefix } = this.props;
let newChildren = [];
if (tabListData && tabListData.length) {
tabListData.forEach((tabItem) => {
newChildren.push(
<LazyMount mountTrigger={tabItem.actived} key={tabItem.key}>
<TabPanel
tab={tabItem.title}
actived={tabItem.actived}
onTabReady={tabItem.onTabReady}
prefix={prefix}
className={tabItem.panelClassName}
id={tabItem.key}
uniqueId={Tabs.uniqueId}
>
{tabItem.content}
</TabPanel>
</LazyMount>
);
});
return newChildren;
}
return null;
}
render() {
let { prefix, className, children, activeKey, activeId } = this.props;
// 向上兼容
activeId = activeId || activeKey;
let tabListData = tabUtil.getTabListData(children, activeId);
return (
<div className={`${prefix}-tabs ${className}`}>
{this.renderNav(tabListData)}
<div className={`${prefix}-tabs-panewrap`}>
{this.renderTabPanel(tabListData)}
</div>
</div>
);
}
}