1- import { provide } from 'vue' ;
1+ import { provide , reactive , watchEffect } from 'vue' ;
22import BaseMixin from '../../_util/BaseMixin' ;
33import PropTypes from '../../_util/vue-types' ;
44import raf from 'raf' ;
55import KeyCode from './KeyCode' ;
6- import { getOptionProps } from '../../_util/props-util' ;
76import { cloneElement } from '../../_util/vnode' ;
87import Sentinel from './Sentinel' ;
98import isValid from '../../_util/isValid' ;
@@ -40,43 +39,42 @@ export default {
4039 tabBarPosition : PropTypes . string . def ( 'top' ) ,
4140 activeKey : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] ) ,
4241 defaultActiveKey : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] ) ,
43- __propsSymbol__ : PropTypes . any ,
4442 direction : PropTypes . string . def ( 'ltr' ) ,
4543 tabBarGutter : PropTypes . number ,
4644 } ,
47- data ( ) {
48- provide ( 'sentinelContext' , this ) ;
49- const props = getOptionProps ( this ) ;
45+ setup ( props ) {
5046 let activeKey ;
51- if ( ' activeKey' in props ) {
47+ if ( props . activeKey !== undefined ) {
5248 activeKey = props . activeKey ;
53- } else if ( ' defaultActiveKey' in props ) {
49+ } else if ( props . defaultActiveKey !== undefined ) {
5450 activeKey = props . defaultActiveKey ;
5551 } else {
5652 activeKey = getDefaultActiveKey ( props ) ;
5753 }
54+ const state = reactive ( {
55+ _activeKey : activeKey ,
56+ } ) ;
57+ watchEffect (
58+ ( ) => {
59+ if ( props . activeKey !== undefined ) {
60+ state . _activeKey = props . activeKey ;
61+ } else if ( ! activeKeyIsValid ( props , state . _activeKey ) ) {
62+ // https://github.com/ant-design/ant-design/issues/7093
63+ state . _activeKey = getDefaultActiveKey ( props ) ;
64+ }
65+ } ,
66+ {
67+ flush : 'sync' ,
68+ } ,
69+ ) ;
70+ return { state } ;
71+ } ,
72+ created ( ) {
5873 this . panelSentinelStart = undefined ;
5974 this . panelSentinelEnd = undefined ;
6075 this . sentinelStart = undefined ;
6176 this . sentinelEnd = undefined ;
62- return {
63- _activeKey : activeKey ,
64- } ;
65- } ,
66- watch : {
67- __propsSymbol__ ( ) {
68- const nextProps = getOptionProps ( this ) ;
69- if ( 'activeKey' in nextProps ) {
70- this . setState ( {
71- _activeKey : nextProps . activeKey ,
72- } ) ;
73- } else if ( ! activeKeyIsValid ( nextProps , this . $data . _activeKey ) ) {
74- // https://github.com/ant-design/ant-design/issues/7093
75- this . setState ( {
76- _activeKey : getDefaultActiveKey ( nextProps ) ,
77- } ) ;
78- }
79- } ,
77+ provide ( 'sentinelContext' , this ) ;
8078 } ,
8179 beforeUnmount ( ) {
8280 this . destroy = true ;
@@ -133,20 +131,18 @@ export default {
133131 } ,
134132
135133 setActiveKey ( activeKey ) {
136- if ( this . $data . _activeKey !== activeKey ) {
137- const props = getOptionProps ( this ) ;
138- if ( ! ( 'activeKey' in props ) ) {
139- this . setState ( {
140- _activeKey : activeKey ,
141- } ) ;
134+ if ( this . state . _activeKey !== activeKey ) {
135+ const props = this . $props ;
136+ if ( props . activeKey === undefined ) {
137+ this . state . _activeKey = activeKey ;
142138 }
143139 this . __emit ( 'update:activeKey' , activeKey ) ;
144140 this . __emit ( 'change' , activeKey ) ;
145141 }
146142 } ,
147143
148144 getNextActiveKey ( next ) {
149- const activeKey = this . $data . _activeKey ;
145+ const activeKey = this . state . _activeKey ;
150146 const children = [ ] ;
151147 this . $props . children . forEach ( c => {
152148 if ( c && ! c . disabled && c . disabled !== '' ) {
@@ -206,7 +202,7 @@ export default {
206202 navWrapper,
207203 tabBarPosition,
208204 panels : props . children ,
209- activeKey : this . $data . _activeKey ,
205+ activeKey : this . state . _activeKey ,
210206 direction,
211207 tabBarGutter,
212208 onKeydown : this . onNavKeyDown ,
@@ -216,7 +212,7 @@ export default {
216212 const tabContent = cloneElement ( renderTabContent ( ) , {
217213 prefixCls,
218214 tabBarPosition,
219- activeKey : this . $data . _activeKey ,
215+ activeKey : this . state . _activeKey ,
220216 destroyInactiveTabPane,
221217 direction,
222218 onChange : this . setActiveKey ,
0 commit comments