diff --git a/components/vc-tabs/src/Sentinel.jsx b/components/vc-tabs/src/Sentinel.jsx
new file mode 100644
index 000000000..89b4ce168
--- /dev/null
+++ b/components/vc-tabs/src/Sentinel.jsx
@@ -0,0 +1,44 @@
+import PropTypes from '../../_util/vue-types'
+import KeyCode from '../../_util/KeyCode'
+
+const sentinelStyle = { width: 0, height: 0, overflow: 'hidden' }
+export default {
+ name: 'Sentinel',
+ props: {
+ setRef: PropTypes.func,
+ prevElement: PropTypes.any,
+ nextElement: PropTypes.any,
+ },
+ methods: {
+ onKeyDown ({ target, which, shiftKey }) {
+ const { nextElement, prevElement } = this.$props
+ if (which !== KeyCode.TAB || document.activeElement !== target) return
+
+ // Tab next
+ if (!shiftKey && nextElement) {
+ nextElement.focus()
+ }
+
+ // Tab prev
+ if (shiftKey && prevElement) {
+ prevElement.focus()
+ }
+ },
+ },
+ render () {
+ const { setRef } = this.$props
+
+ return (
+
+ )
+ },
+}
diff --git a/components/vc-tabs/src/TabBarRootNode.jsx b/components/vc-tabs/src/TabBarRootNode.jsx
index 7145084a0..2cf29febc 100644
--- a/components/vc-tabs/src/TabBarRootNode.jsx
+++ b/components/vc-tabs/src/TabBarRootNode.jsx
@@ -50,7 +50,7 @@ export default {
tabIndex='0'
onKeydown={onKeyDown}
{...{ directives: [{
- name: 'ref',
+ name: 'ant-ref',
value: this.saveRef('root'),
}] }}
>
diff --git a/components/vc-tabs/src/TabBarTabsNode.jsx b/components/vc-tabs/src/TabBarTabsNode.jsx
index 3ae896d91..67954acfd 100644
--- a/components/vc-tabs/src/TabBarTabsNode.jsx
+++ b/components/vc-tabs/src/TabBarTabsNode.jsx
@@ -3,7 +3,7 @@ import warning from 'warning'
import PropTypes from '../../_util/vue-types'
import BaseMixin from '../../_util/BaseMixin'
import { getOptionProps, getComponentFromProp } from '../../_util/props-util'
-
+import { isVertical } from './utils'
function noop () {
}
export default {
@@ -17,9 +17,13 @@ export default {
onTabClick: PropTypes.func,
saveRef: PropTypes.func.def(noop),
getRef: PropTypes.func.def(noop),
+ tabBarPosition: PropTypes.string,
},
render () {
- const { panels: children, activeKey, prefixCls, tabBarGutter, saveRef } = this.$props
+ const { panels: children,
+ activeKey, prefixCls,
+ tabBarGutter, saveRef,
+ tabBarPosition } = this.$props
const rst = []
children.forEach((child, index) => {
@@ -42,11 +46,16 @@ export default {
const directives = []
if (activeKey === key) {
directives.push({
- name: 'ref',
+ name: 'ant-ref',
value: saveRef('activeTab'),
})
}
const tab = getComponentFromProp(child, 'tab')
+ let gutter = tabBarGutter && index === children.length - 1 ? 0 : tabBarGutter
+ gutter = typeof gutter === 'number' ? `${gutter}px` : gutter
+ const style = {
+ [isVertical(tabBarPosition) ? 'marginBottom' : 'marginRight']: gutter,
+ }
warning(tab !== undefined, 'There must be `tab` property or slot on children of Tabs.')
rst.push(
{tab}
@@ -67,7 +76,7 @@ export default {
return (
{rst}
diff --git a/components/vc-tabs/src/TabPane.jsx b/components/vc-tabs/src/TabPane.jsx
index 8a08f6d9c..f82fbd192 100644
--- a/components/vc-tabs/src/TabPane.jsx
+++ b/components/vc-tabs/src/TabPane.jsx
@@ -1,5 +1,7 @@
import PropTypes from '../../_util/vue-types'
import { getComponentFromProp } from '../../_util/props-util'
+import Sentinel from './Sentinel'
+
export default {
name: 'TabPane',
props: {
@@ -12,6 +14,9 @@ export default {
closable: PropTypes.bool,
disabled: PropTypes.bool,
},
+ inject: {
+ sentinelContext: { default: {}},
+ },
render () {
const {
destroyInactiveTabPane, active, forceRender,
@@ -27,13 +32,33 @@ export default {
[`${prefixCls}-active`]: active,
}
const isRender = destroyInactiveTabPane ? active : this._isActived
+ const shouldRender = isRender || forceRender
+ const { sentinelStart, sentinelEnd, setPanelSentinelStart, setPanelSentinelEnd } = this.sentinelContext
+ let panelSentinelStart
+ let panelSentinelEnd
+ if (active && shouldRender) {
+ panelSentinelStart = (
+
+ )
+ panelSentinelEnd = (
+
+ )
+ }
return (
- {isRender || forceRender ? children : placeholder}
+ {panelSentinelStart}
+ {shouldRender ? children : placeholder}
+ {panelSentinelEnd}
)
},
diff --git a/components/vc-tabs/src/Tabs.jsx b/components/vc-tabs/src/Tabs.jsx
index 92b50a2eb..aea8df2a0 100644
--- a/components/vc-tabs/src/Tabs.jsx
+++ b/components/vc-tabs/src/Tabs.jsx
@@ -1,9 +1,11 @@
import omit from 'omit.js'
import BaseMixin from '../../_util/BaseMixin'
import PropTypes from '../../_util/vue-types'
+import raf from 'raf'
import KeyCode from './KeyCode'
import { getOptionProps } from '../../_util/props-util'
import { cloneElement } from '../../_util/vnode'
+import Sentinel from './Sentinel'
function getDefaultActiveKey (props) {
let activeKey
@@ -55,6 +57,11 @@ export default {
_activeKey: activeKey,
}
},
+ provide () {
+ return {
+ sentinelContext: this,
+ }
+ },
watch: {
__propsSymbol__ () {
const nextProps = getOptionProps(this)
@@ -70,6 +77,10 @@ export default {
}
},
},
+ beforeDestroy () {
+ this.destroy = true
+ raf.cancel(this.sentinelId)
+ },
methods: {
onTabClick (activeKey, e) {
if (this.tabBar.componentOptions &&
@@ -93,6 +104,35 @@ export default {
}
},
+ onScroll ({ target, currentTarget }) {
+ if (target === currentTarget && target.scrollLeft > 0) {
+ target.scrollLeft = 0
+ }
+ },
+
+ // Sentinel for tab index
+ setSentinelStart (node) {
+ this.sentinelStart = node
+ },
+
+ setSentinelEnd (node) {
+ this.sentinelEnd = node
+ },
+
+ setPanelSentinelStart (node) {
+ if (node !== this.panelSentinelStart) {
+ this.updateSentinelContext()
+ }
+ this.panelSentinelStart = node
+ },
+
+ setPanelSentinelEnd (node) {
+ if (node !== this.panelSentinelEnd) {
+ this.updateSentinelContext()
+ }
+ this.panelSentinelEnd = node
+ },
+
setActiveKey (activeKey) {
if (this.$data._activeKey !== activeKey) {
const props = getOptionProps(this)
@@ -130,6 +170,14 @@ export default {
})
return ret
},
+ updateSentinelContext () {
+ if (this.destroy) return
+
+ raf.cancel(this.sentinelId)
+ this.sentinelId = raf(() => {
+ this.$forceUpdate()
+ })
+ },
},
render () {
const props = this.$props
@@ -147,40 +195,62 @@ export default {
}
this.tabBar = renderTabBar()
- const contents = [
- cloneElement(this.tabBar, {
- props: {
- prefixCls,
- navWrapper,
- tabBarPosition,
- panels: props.children,
- activeKey: this.$data._activeKey,
- },
- on: {
- keydown: this.onNavKeyDown,
- tabClick: this.onTabClick,
- },
- key: 'tabBar',
- }),
- cloneElement(renderTabContent(), {
- props: {
- prefixCls,
- tabBarPosition,
- activeKey: this.$data._activeKey,
- destroyInactiveTabPane,
- },
- on: {
- change: this.setActiveKey,
- },
- children: props.children,
- key: 'tabContent',
- }),
- ]
+ const tabBar = cloneElement(this.tabBar, {
+ props: {
+ prefixCls,
+ navWrapper,
+ tabBarPosition,
+ panels: props.children,
+ activeKey: this.$data._activeKey,
+ },
+ on: {
+ keydown: this.onNavKeyDown,
+ tabClick: this.onTabClick,
+ },
+ key: 'tabBar',
+ })
+ const tabContent = cloneElement(renderTabContent(), {
+ props: {
+ prefixCls,
+ tabBarPosition,
+ activeKey: this.$data._activeKey,
+ destroyInactiveTabPane,
+ },
+ on: {
+ change: this.setActiveKey,
+ },
+ children: props.children,
+ key: 'tabContent',
+ })
+
+ const sentinelStart = (
+
+ )
+ const sentinelEnd = (
+
+ )
+
+ const contents = []
+
if (tabBarPosition === 'bottom') {
- contents.reverse()
+ contents.push(sentinelStart, tabContent, sentinelEnd, tabBar)
+ } else {
+ contents.push(tabBar, sentinelStart, tabContent, sentinelEnd)
+ }
+ const listeners = {
+ ...omit(this.$listeners, ['change']),
+ scroll: this.onScroll,
}
return (
-
+
{contents}
)
diff --git a/components/vc-tabs/src/index.js b/components/vc-tabs/src/index.js
index d646f05ac..368b0a61e 100755
--- a/components/vc-tabs/src/index.js
+++ b/components/vc-tabs/src/index.js
@@ -1,7 +1,11 @@
-// based on rc-tabs 9.4.8
+// based on rc-tabs 9.5.7
+import ref from 'vue-ref'
+import Vue from 'vue'
import Tabs from './Tabs'
import TabPane from './TabPane'
import TabContent from './TabContent'
+Vue.use(ref, { name: 'ant-ref' })
+
export default Tabs
export { TabPane, TabContent }
diff --git a/components/vc-tabs/src/utils.js b/components/vc-tabs/src/utils.js
index 80f2712a8..bfe509f6e 100644
--- a/components/vc-tabs/src/utils.js
+++ b/components/vc-tabs/src/utils.js
@@ -94,11 +94,11 @@ function getTypeValue (start, current, end, tabNode, wrapperNode) {
const { childNodes } = tabNode.parentNode
Array.prototype.some.call(childNodes, (node) => {
- const style = getComputedStyle(node)
+ const style = window.getComputedStyle(node)
if (node !== tabNode) {
total += toNum(style, `margin-${start}`)
- total += toNum(style, `margin-${end}`)
total += node[current]
+ total += toNum(style, `margin-${end}`)
if (style.boxSizing === 'content-box') {
total += toNum(style, `border-${start}-width`) + toNum(style, `border-${end}-width`)