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

178 lines
4.8 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-04-07 10:52:02 +00:00
import Tabs from '../vc-tabs/src/Tabs'
2017-11-30 11:11:42 +00:00
import isFlexSupported from '../_util/isFlexSupported'
2018-02-24 10:12:24 +00:00
import { hasProp, getComponentFromProp, getComponentName, isEmptyElement } from '../_util/props-util'
2018-01-21 03:52:34 +00:00
import warning from '../_util/warning'
2017-11-30 11:11:42 +00:00
export default {
props: {
prefixCls: { type: String, default: 'ant-tabs' },
activeKey: String,
defaultActiveKey: String,
hideAdd: { type: Boolean, default: false },
tabBarStyle: Object,
2017-12-01 10:48:16 +00:00
tabBarExtraContent: [String, Number, Function],
destroyInactiveTabPane: { type: Boolean, default: false },
2017-11-30 11:11:42 +00:00
type: {
validator (value) {
return ['line', 'card', 'editable-card'].includes(value)
},
},
tabPosition: {
validator (value) {
return ['top', 'right', 'bottom', 'left'].includes(value)
},
},
size: {
validator (value) {
2018-01-20 12:55:37 +00:00
return ['default', 'small', 'large'].includes(value)
2017-11-30 11:11:42 +00:00
},
},
2017-12-01 10:48:16 +00:00
animated: { type: [Boolean, Object], default: undefined },
2018-02-05 05:50:04 +00:00
tabBarGutter: Number,
2017-12-01 10:48:16 +00:00
},
model: {
prop: 'activeKey',
event: 'change',
2017-11-30 11:11:42 +00:00
},
methods: {
createNewTab (targetKey) {
2017-12-01 10:48:16 +00:00
this.$emit('edit', targetKey, 'add')
2017-11-30 11:11:42 +00:00
},
removeTab (targetKey, e) {
e.stopPropagation()
if (!targetKey) {
return
}
2017-12-01 10:48:16 +00:00
this.$emit('edit', targetKey, 'remove')
2017-11-30 11:11:42 +00:00
},
handleChange (activeKey) {
2017-12-01 04:21:43 +00:00
this.$emit('change', activeKey)
2017-11-30 11:11:42 +00:00
},
2017-12-01 10:48:16 +00:00
onTabClick (val) {
this.$emit('tabClick', val)
},
onPrevClick (val) {
this.$emit('prevClick', val)
},
onNextClick (val) {
this.$emit('nextClick', val)
},
2017-11-30 11:11:42 +00:00
},
mounted () {
const NO_FLEX = ' no-flex'
const tabNode = this.$el
if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
tabNode.className += NO_FLEX
}
},
2017-12-01 10:48:16 +00:00
render (createElement) {
2017-11-30 11:11:42 +00:00
const {
prefixCls,
size,
type = 'line',
tabPosition,
tabBarStyle,
2017-12-01 10:48:16 +00:00
hideAdd,
2018-02-05 05:50:04 +00:00
onTabClick,
2017-11-30 11:11:42 +00:00
onPrevClick,
onNextClick,
2017-12-01 10:48:16 +00:00
animated,
destroyInactiveTabPane = false,
activeKey,
defaultActiveKey,
2017-12-07 07:05:33 +00:00
$slots,
2018-02-05 05:50:04 +00:00
tabBarGutter,
2017-12-01 10:48:16 +00:00
} = this
2017-11-30 11:11:42 +00:00
let { inkBarAnimated, tabPaneAnimated } = typeof animated === 'object' ? { // eslint-disable-line
2017-12-01 10:48:16 +00:00
inkBarAnimated: !!animated.inkBar, tabPaneAnimated: !!animated.tabPane,
2017-11-30 11:11:42 +00:00
} : {
2017-12-01 10:48:16 +00:00
inkBarAnimated: animated === undefined || animated, tabPaneAnimated: animated === undefined || animated,
2017-11-30 11:11:42 +00:00
}
// card tabs should not have animation
if (type !== 'line') {
2017-12-01 10:48:16 +00:00
tabPaneAnimated = animated === undefined ? false : tabPaneAnimated
2017-11-30 11:11:42 +00:00
}
const cls = {
2018-01-20 12:55:37 +00:00
[`${prefixCls}-small`]: size === 'small',
[`${prefixCls}-large`]: size === 'large',
[`${prefixCls}-default`]: size === 'default',
2017-11-30 11:11:42 +00:00
[`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
[`${prefixCls}-card`]: type.indexOf('card') >= 0,
[`${prefixCls}-${type}`]: true,
[`${prefixCls}-no-animation`]: !tabPaneAnimated,
}
2018-01-19 03:47:06 +00:00
const tabBarExtraContent = getComponentFromProp(this, 'tabBarExtraContent')
2018-01-21 03:52:34 +00:00
const children = []
$slots.default && $slots.default.forEach((child) => {
if (isEmptyElement(child)) { return }
const { componentOptions } = child
const componentName = getComponentName(componentOptions)
warning(componentName === 'TabPane', '`Tabs children just support TabPane')
if (componentOptions && componentName === 'TabPane') {
componentOptions.propsData = componentOptions.propsData || {}
if (componentOptions.propsData.tab === undefined) {
const tab = (componentOptions.children || []).filter(({ data = {}}) => data.slot === 'tab')
componentOptions.propsData.tab = tab
}
children.push(child)
2017-12-08 03:46:53 +00:00
}
2017-12-07 07:05:33 +00:00
})
2017-11-30 11:11:42 +00:00
const tabBarProps = {
2018-01-12 09:06:01 +00:00
props: {
hideAdd,
removeTab: this.removeTab,
createNewTab: this.createNewTab,
inkBarAnimated,
2018-02-05 05:50:04 +00:00
tabBarGutter,
2018-01-12 09:06:01 +00:00
},
on: {
2018-02-05 05:50:04 +00:00
tabClick: onTabClick,
2018-01-12 09:06:01 +00:00
prevClick: onPrevClick,
nextClick: onNextClick,
},
2017-11-30 11:11:42 +00:00
style: tabBarStyle,
}
2017-12-01 04:21:43 +00:00
const tabContentProps = {
2018-01-12 09:06:01 +00:00
props: {
animated: tabPaneAnimated,
animatedWithMargin: true,
},
2017-12-01 04:21:43 +00:00
}
2017-12-01 10:48:16 +00:00
const tabsProps = {
props: {
prefixCls,
tabBarPosition: tabPosition,
tabBarProps: tabBarProps,
tabContentProps: tabContentProps,
destroyInactiveTabPane,
defaultActiveKey,
type,
},
on: {
2018-01-12 09:06:01 +00:00
change: this.handleChange,
tabClick: this.onTabClick,
2017-12-01 10:48:16 +00:00
},
}
2017-12-27 10:15:11 +00:00
if (hasProp(this, 'activeKey')) {
tabsProps.props.activeKey = activeKey
}
2017-11-30 11:11:42 +00:00
return (
<Tabs
class={cls}
2017-12-01 10:48:16 +00:00
{...tabsProps}
2017-11-30 11:11:42 +00:00
>
2018-01-21 03:52:34 +00:00
{children}
2017-12-12 03:08:56 +00:00
{tabBarExtraContent ? <template slot='tabBarExtraContent'>
{tabBarExtraContent}
</template> : null}
2017-11-30 11:11:42 +00:00
</Tabs>
)
},
}
2018-03-19 02:16:27 +00:00