fix: Tabs swipeable work(#1305)

ant-design · Sep 19, 2023 · 13bebb4 · 13bebb4
1 parent f4505bb
commit 13bebb4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/components/tabs/DefaultTabBar.tsx b/components/tabs/DefaultTabBar.tsx
@@ -137,14 +137,19 @@ export class DefaultTabBar extends React.PureComponent<PropsType, StateType> {
         return
       }
       this._newLineLeft = newLineLeft
-      Animated.timing(this.state._leftTabUnderline, {
-        toValue: newLineLeft,
-        useNativeDriver: false,
-      }).start()
-      Animated.timing(this.state._widthTabUnderline, {
-        toValue: newLineRight - newLineLeft,
-        useNativeDriver: false,
-      }).start()
+      if (this.props.animated) {
+        Animated.timing(this.state._leftTabUnderline, {
+          toValue: newLineLeft,
+          useNativeDriver: false,
+        }).start()
+        Animated.timing(this.state._widthTabUnderline, {
+          toValue: newLineRight - newLineLeft,
+          useNativeDriver: false,
+        }).start()
+      } else {
+        this.state._leftTabUnderline.setValue(newLineLeft)
+        this.state._widthTabUnderline.setValue(newLineRight - newLineLeft)
+      }
     }
   }
 

diff --git a/components/tabs/Tabs.tsx b/components/tabs/Tabs.tsx
@@ -65,7 +65,7 @@ export class Tabs extends React.PureComponent<TabsProps, StateType> {
   }
 
   renderContent = (getSubElements = this.getSubElements()) => {
-    const { tabs, usePaged, destroyInactiveTab } = this.props
+    const { tabs, destroyInactiveTab } = this.props
     const { containerHeight = 0, containerWidth = 0, currentTab } = this.state
     const content = tabs.map((tab, index) => {
       const key = tab.key || `tab_${index}`
@@ -103,7 +103,7 @@ export class Tabs extends React.PureComponent<TabsProps, StateType> {
             this.state.scrollX.setValue(index * this.state.containerWidth)
           })
         }}
-        scrollEnabled={this.props.swipeable || usePaged}
+        scrollEnabled={this.props.swipeable}
         style={{
           height: containerHeight,
           width: containerWidth,
@@ -219,12 +219,13 @@ export class Tabs extends React.PureComponent<TabsProps, StateType> {
     direction === 'vertical'
 
   shouldRenderTab = (idx: number) => {
-    const { prerenderingSiblingsNumber = 0 } = this.props
+    const { prerenderingSiblingsNumber = 0, usePaged } = this.props
     const { currentTab = 0 } = this.state
 
     return (
-      currentTab - prerenderingSiblingsNumber <= idx &&
-      idx <= currentTab + prerenderingSiblingsNumber
+      !usePaged ||
+      (currentTab - prerenderingSiblingsNumber <= idx &&
+        idx <= currentTab + prerenderingSiblingsNumber)
     )
   }
 
@@ -258,7 +259,7 @@ export class Tabs extends React.PureComponent<TabsProps, StateType> {
 
   goToTab(index: number) {
     if (this.carousel) {
-      this.carousel.goTo(index)
+      this.carousel.goTo(index, this.props.animated)
     }
     this.setState({ currentTab: index }, () => {
       this.state.scrollX.setValue(index * this.state.containerWidth)