From 132a1e58bfc86d466308fb6bf44d5257ea29dcd4 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Tue, 23 Jun 2020 17:34:41 +0800 Subject: [PATCH] feat: update vc-tabs --- components/vc-tabs/src/InkTabBar.jsx | 35 +++++++-------- components/vc-tabs/src/InkTabBarNode.jsx | 10 +---- .../vc-tabs/src/ScrollableInkTabBar.jsx | 16 +++---- components/vc-tabs/src/ScrollableTabBar.jsx | 31 ++++++------- .../vc-tabs/src/ScrollableTabBarNode.jsx | 45 ++++--------------- components/vc-tabs/src/Sentinel.jsx | 13 ++---- components/vc-tabs/src/TabBar.jsx | 7 +-- components/vc-tabs/src/TabBarRootNode.jsx | 11 ++--- components/vc-tabs/src/index.js | 4 -- 9 files changed, 53 insertions(+), 119 deletions(-) diff --git a/components/vc-tabs/src/InkTabBar.jsx b/components/vc-tabs/src/InkTabBar.jsx index 49fb356a0..d3097caac 100644 --- a/components/vc-tabs/src/InkTabBar.jsx +++ b/components/vc-tabs/src/InkTabBar.jsx @@ -4,24 +4,19 @@ import TabBarRootNode from './TabBarRootNode'; import SaveRef from './SaveRef'; function noop() {} -export default { - name: 'InkTabBar', - functional: true, - render(h, context) { - const { props, listeners = {} } = context; - return ( - ( - - - - - )} - /> - ); - }, +const InkTabBar = (_, { attrs }) => { + const { onTabClick = noop, ...props } = attrs; + return ( + ( + + + + + )} + /> + ); }; + +InkTabBar.inheritAttrs = false; +export default InkTabBar; diff --git a/components/vc-tabs/src/InkTabBarNode.jsx b/components/vc-tabs/src/InkTabBarNode.jsx index c786cc9c3..105dcec6c 100644 --- a/components/vc-tabs/src/InkTabBarNode.jsx +++ b/components/vc-tabs/src/InkTabBarNode.jsx @@ -8,6 +8,7 @@ import { getActiveIndex, } from './utils'; import BaseMixin from '../../_util/BaseMixin'; +import createRefHooks from '../../_util/createRefHooks'; function componentDidUpdate(component, init) { const { styles = {}, panels, activeKey, direction } = component.$props; @@ -120,14 +121,7 @@ export default { style={styles.inkBar} class={classes} key="inkBar" - {...{ - directives: [ - { - name: 'ant-ref', - value: this.saveRef('inkBar'), - }, - ], - }} + {...createRefHooks(this.saveRef('inkBar'))} /> ); }, diff --git a/components/vc-tabs/src/ScrollableInkTabBar.jsx b/components/vc-tabs/src/ScrollableInkTabBar.jsx index 751ae24dd..8731b04d6 100644 --- a/components/vc-tabs/src/ScrollableInkTabBar.jsx +++ b/components/vc-tabs/src/ScrollableInkTabBar.jsx @@ -3,7 +3,6 @@ import TabBarTabsNode from './TabBarTabsNode'; import TabBarRootNode from './TabBarRootNode'; import ScrollableTabBarNode from './ScrollableTabBarNode'; import SaveRef from './SaveRef'; -import { getListeners } from '../../_util/props-util'; export default { name: 'ScrollableInkTabBar', @@ -21,19 +20,14 @@ export default { 'nextIcon', ], render() { - const props = { ...this.$props }; - const listeners = getListeners(this); - const { default: renderTabBarNode } = this.$scopedSlots; + const { default: renderTabBarNode } = this.$slots; return ( ( - - - - + + + + )} diff --git a/components/vc-tabs/src/ScrollableTabBar.jsx b/components/vc-tabs/src/ScrollableTabBar.jsx index 57f0f0524..564900fc8 100644 --- a/components/vc-tabs/src/ScrollableTabBar.jsx +++ b/components/vc-tabs/src/ScrollableTabBar.jsx @@ -3,21 +3,18 @@ import TabBarRootNode from './TabBarRootNode'; import TabBarTabsNode from './TabBarTabsNode'; import SaveRef from './SaveRef'; -export default { - name: 'ScrollableTabBar', - functional: true, - render(h, context) { - const { props, listeners = {} } = context; - return ( - ( - - - - - - )} - /> - ); - }, +const ScrollableTabBar = (_, { attrs }) => { + return ( + ( + + + + + + )} + /> + ); }; +ScrollableTabBar.inheritAttrs = false; +export default ScrollableTabBar; diff --git a/components/vc-tabs/src/ScrollableTabBarNode.jsx b/components/vc-tabs/src/ScrollableTabBarNode.jsx index 90b1eac4f..d9e699b65 100644 --- a/components/vc-tabs/src/ScrollableTabBarNode.jsx +++ b/components/vc-tabs/src/ScrollableTabBarNode.jsx @@ -2,8 +2,9 @@ import debounce from 'lodash/debounce'; import ResizeObserver from 'resize-observer-polyfill'; import PropTypes from '../../_util/vue-types'; import BaseMixin from '../../_util/BaseMixin'; -import { getComponentFromProp } from '../../_util/props-util'; +import { getComponent, getSlot } from '../../_util/props-util'; import { setTransform, isTransform3dSupported } from './utils'; +import createRefHooks from '../../_util/createRefHooks'; function noop() {} export default { @@ -202,9 +203,6 @@ export default { }, setNext(v) { - if (!v) { - // debugger - } if (this.next !== v) { this.next = v; } @@ -275,8 +273,8 @@ export default { render() { const { next, prev } = this; const { prefixCls, scrollAnimated, navWrapper } = this.$props; - const prevIcon = getComponentFromProp(this, 'prevIcon'); - const nextIcon = getComponentFromProp(this, 'nextIcon'); + const prevIcon = getComponent(this, 'prevIcon'); + const nextIcon = getComponent(this, 'nextIcon'); const showNextPrev = prev || next; const prevButton = ( @@ -321,41 +319,14 @@ export default { [`${prefixCls}-nav-container-scrolling`]: showNextPrev, }} key="container" - {...{ - directives: [ - { - name: 'ant-ref', - value: this.saveRef('container'), - }, - ], - }} + {...createRefHooks(this.saveRef('container'))} > {prevButton} {nextButton} -
+
-
- {navWrapper(this.$slots.default)} +
+ {navWrapper(getSlot(this))}
diff --git a/components/vc-tabs/src/Sentinel.jsx b/components/vc-tabs/src/Sentinel.jsx index e89a5a26c..cbb38f0ca 100644 --- a/components/vc-tabs/src/Sentinel.jsx +++ b/components/vc-tabs/src/Sentinel.jsx @@ -1,5 +1,7 @@ import PropTypes from '../../_util/vue-types'; import KeyCode from '../../_util/KeyCode'; +import createRefHooks from '../../_util/createRefHooks'; +import { getSlot } from '../../_util/props-util'; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' }; export default { @@ -31,19 +33,12 @@ export default { return (
- {this.$slots.default} + {getSlot(this)}
); }, diff --git a/components/vc-tabs/src/TabBar.jsx b/components/vc-tabs/src/TabBar.jsx index 01d78cba5..5073ff697 100644 --- a/components/vc-tabs/src/TabBar.jsx +++ b/components/vc-tabs/src/TabBar.jsx @@ -1,19 +1,16 @@ import TabBarRootNode from './TabBarRootNode'; import TabBarTabsNode from './TabBarTabsNode'; import SaveRef from './SaveRef'; -import { getAttrs, getListeners } from '../../_util/props-util'; export default { name: 'TabBar', inheritAttrs: false, render() { - const props = getAttrs(this); - const listeners = getListeners(this); return ( ( - - + + )} /> diff --git a/components/vc-tabs/src/TabBarRootNode.jsx b/components/vc-tabs/src/TabBarRootNode.jsx index 0ec644fee..3a6735314 100644 --- a/components/vc-tabs/src/TabBarRootNode.jsx +++ b/components/vc-tabs/src/TabBarRootNode.jsx @@ -1,6 +1,7 @@ import { cloneElement } from '../../_util/vnode'; import PropTypes from '../../_util/vue-types'; import BaseMixin from '../../_util/BaseMixin'; +import createRefHooks from '../../_util/createRefHooks'; function noop() {} export default { name: 'TabBarRootNode', @@ -11,6 +12,7 @@ export default { prefixCls: PropTypes.string.def(''), tabBarPosition: PropTypes.string.def('top'), extraContent: PropTypes.any, + onKeydown: PropTypes.func, }, methods: { onKeyDown(e) { @@ -45,14 +47,7 @@ export default { class={cls} tabIndex="0" onKeydown={onKeyDown} - {...{ - directives: [ - { - name: 'ant-ref', - value: this.saveRef('root'), - }, - ], - }} + {...createRefHooks(this.saveRef('root'))} > {newChildren}
diff --git a/components/vc-tabs/src/index.js b/components/vc-tabs/src/index.js index 91f7e76d6..57f2c1960 100755 --- a/components/vc-tabs/src/index.js +++ b/components/vc-tabs/src/index.js @@ -1,11 +1,7 @@ // based on rc-tabs 9.7.0 -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 };