ant-design-vue/components/tabs/tabs.jsx

177 lines
5.0 KiB
Vue

import Icon from '../icon'
import VcTabs, { TabPane } from '../vc-tabs/src'
import TabContent from '../vc-tabs/src/TabContent'
import isFlexSupported from '../_util/isFlexSupported'
import PropTypes from '../_util/vue-types'
import { getComponentFromProp, getOptionProps, filterEmpty } from '../_util/props-util'
import { cloneElement } from '../_util/vnode'
import TabBar from './TabBar'
export default {
TabPane,
name: 'ATabs',
props: {
prefixCls: PropTypes.string.def('ant-tabs'),
activeKey: PropTypes.string,
defaultActiveKey: PropTypes.string,
hideAdd: PropTypes.bool.def(false),
tabBarStyle: PropTypes.object,
tabBarExtraContent: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.func,
]),
destroyInactiveTabPane: PropTypes.bool.def(false),
type: PropTypes.oneOf(['line', 'card', 'editable-card']),
tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'),
size: PropTypes.oneOf(['default', 'small', 'large']),
animated: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.object,
]),
tabBarGutter: PropTypes.number,
renderTabBar: PropTypes.func,
},
model: {
prop: 'activeKey',
event: 'change',
},
methods: {
removeTab (targetKey, e) {
e.stopPropagation()
if (!targetKey) {
return
}
this.$emit('edit', targetKey, 'remove')
},
handleChange (activeKey) {
this.$emit('change', activeKey)
},
createNewTab (targetKey) {
this.$emit('edit', targetKey, 'add')
},
onTabClick (val) {
this.$emit('tabClick', val)
},
onPrevClick (val) {
this.$emit('prevClick', val)
},
onNextClick (val) {
this.$emit('nextClick', val)
},
},
mounted () {
const NO_FLEX = ' no-flex'
const tabNode = this.$el
if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
tabNode.className += NO_FLEX
}
},
render () {
const props = getOptionProps(this)
const {
prefixCls,
size,
type = 'line',
tabPosition,
animated = true,
hideAdd,
renderTabBar,
} = props
const children = filterEmpty(this.$slots.default)
let tabBarExtraContent = getComponentFromProp(this, 'tabBarExtraContent')
let tabPaneAnimated = typeof animated === 'object' ? animated.tabPane : animated
// card tabs should not have animation
if (type !== 'line') {
tabPaneAnimated = 'animated' in props ? tabPaneAnimated : false
}
const cls = {
[`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
[`${prefixCls}-${size}`]: !!size,
[`${prefixCls}-card`]: type.indexOf('card') >= 0,
[`${prefixCls}-${type}`]: true,
[`${prefixCls}-no-animation`]: !tabPaneAnimated,
}
// only card type tabs can be added and closed
let childrenWithClose = []
if (type === 'editable-card') {
childrenWithClose = []
children.forEach((child, index) => {
const props = getOptionProps(child)
let closable = props.closable
closable = typeof closable === 'undefined' ? true : closable
const closeIcon = closable ? (
<Icon
type='close'
class={`${prefixCls}-close-x`}
onClick={e => this.removeTab(child.key, e)}
/>
) : null
childrenWithClose.push(cloneElement(child, {
props: {
tab: (
<div class={closable ? undefined : `${prefixCls}-tab-unclosable`}>
{getComponentFromProp(child, 'tab')}
{closeIcon}
</div>
),
},
key: child.key || index,
}))
})
// Add new tab handler
if (!hideAdd) {
tabBarExtraContent = (
<span>
<Icon type='plus' class={`${prefixCls}-new-tab`} onClick={this.createNewTab} />
{tabBarExtraContent}
</span>
)
}
}
tabBarExtraContent = tabBarExtraContent ? (
<div class={`${prefixCls}-extra-content`}>{tabBarExtraContent}</div>
) : null
const renderTabBarSlot = renderTabBar || this.$scopedSlots.renderTabBar
const tabBarProps = {
props: {
...this.$props,
tabBarExtraContent,
renderTabBar: renderTabBarSlot,
},
on: {
...this.$listeners,
},
}
const contentCls = {
[`${prefixCls}-${tabPosition}-content`]: true,
[`${prefixCls}-card-content`]: type.indexOf('card') >= 0,
}
const tabsProps = {
props: {
...getOptionProps(this),
tabBarPosition: tabPosition,
renderTabBar: () => <TabBar {...tabBarProps}/>,
renderTabContent: () => <TabContent class={contentCls} animated={tabPaneAnimated} animatedWithMargin />,
children: childrenWithClose.length > 0 ? childrenWithClose : children,
__propsSymbol__: Symbol(),
},
on: {
...this.$listeners,
change: this.handleChange,
},
class: cls,
}
return (
<VcTabs {...tabsProps} />
)
},
}