fix(comp:carousel): gotTo doesn't work after item dynamic change (#1196)

* fix(comp:carousel): gotTo doesn't work after item dynamic change * fix(comp:carousel): vertical carousel style error
IDuxFE · Oct 13, 2022 · 1406d27 · 1406d27
1 parent a206051
commit 1406d27
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 51 deletions.
diff --git a/packages/components/carousel/demo/DotPlacement.vue b/packages/components/carousel/demo/DotPlacement.vue
@@ -6,7 +6,7 @@
     <IxRadio value="end">end</IxRadio>
     <IxRadio value="none">none</IxRadio>
   </IxRadioGroup>
-  <IxCarousel :dotPlacement="value">
+  <IxCarousel class="carousel" :dotPlacement="value">
     <div class="card-item">1</div>
     <div class="card-item">2</div>
     <div class="card-item">3</div>
@@ -21,6 +21,10 @@ const value = ref('start')
 </script>
 
 <style lang="less" scoped>
+.carousel {
+  height: 160px;
+  width: 100%;
+}
 .card-item {
   height: 160px;
   line-height: 160px;

diff --git a/packages/components/carousel/src/Carousel.tsx b/packages/components/carousel/src/Carousel.tsx
@@ -50,7 +50,7 @@ export default defineComponent({
       sliderRefs.value = []
     })
 
-    const { activeIndex, runningIndex, unitHeight, unitWidth, goTo, next, prev } = useStrategy(
+    const { activeIndex, runningIndex, nextIndex, unitHeight, unitWidth, goTo, next, prev } = useStrategy(
       props,
       carouselRef,
       sliderTrackRef,
@@ -93,10 +93,22 @@ export default defineComponent({
       if (width <= 0 || height <= 0 || length <= 0) {
         return undefined
       }
-      if (mergedVertical.value) {
-        return `width: ${width}px;height: ${height * length}px;`
-      }
-      return `width: ${width * length}px;height: ${height}px;`
+
+      const index = runningIndex.value > -1 ? nextIndex.value : activeIndex.value
+
+      /* eslint-disable indent */
+      return mergedVertical.value
+        ? {
+            width: `${width}px`,
+            height: `${height * length}px`,
+            transform: `translate3d(0, ${-index * unitHeight.value}px, 0)`,
+          }
+        : {
+            width: `${width * length}px`,
+            height: `${height}px`,
+            transform: `translate3d(${-index * unitWidth.value}px, 0, 0)`,
+          }
+      /* eslint-enable indent */
     })
 
     const dotsClasses = computed(() => {
@@ -135,11 +147,6 @@ export default defineComponent({
         }
       })
 
-      if (mergedVertical.value) {
-        sliderTrackElement.style.transform = `translate3d(0, ${-currRunningIndex * unitHeight.value}px, 0)`
-      } else {
-        sliderTrackElement.style.transform = `translate3d(${-currRunningIndex * unitWidth.value}px,0 , 0)`
-      }
       activeIndex.value = currRunningIndex
       runningIndex.value = -1
       startAutoplay()

diff --git a/packages/components/carousel/src/composables/useStrategy.ts b/packages/components/carousel/src/composables/useStrategy.ts
@@ -5,16 +5,17 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+import type { CarouselProps } from '../types'
+
 import { type ComputedRef, type Ref, onMounted, ref, watch } from 'vue'
 
 import { useResizeObserver } from '@idux/cdk/resize'
 import { callEmit, convertElement, useState } from '@idux/cdk/utils'
 
-import { type CarouselProps } from '../types'
-
 export interface StrategyContext {
   activeIndex: Ref<number>
   runningIndex: Ref<number>
+  nextIndex: Ref<number>
   unitHeight: ComputedRef<number>
   unitWidth: ComputedRef<number>
   goTo(slideIndex: number): void
@@ -36,6 +37,7 @@ export function useStrategy(
   })
 
   const runningIndex = ref(-1)
+  const nextIndex = ref(-1)
   const [unitWidth, setUnitWidth] = useState(0)
   const [unitHeight, setUnitHeight] = useState(0)
 
@@ -48,14 +50,6 @@ export function useStrategy(
 
     setUnitWidth(width)
     setUnitHeight(height)
-
-    const sliderTrackElement = sliderTrackRef.value
-    if (!sliderTrackElement) {
-      return
-    }
-    sliderTrackElement.style.transform = mergedVertical.value
-      ? `translate3d(0, ${-activeIndex.value * height}px, 0)`
-      : `translate3d(${-activeIndex.value * width}px, 0, 0)`
   }
 
   useResizeObserver(carouselRef, layout)
@@ -75,7 +69,7 @@ export function useStrategy(
     )
   })
 
-  const goTo = (nextIndex: number) => {
+  const goTo = (index: number) => {
     const length = mergedLength.value
     const sliderTrackElement = sliderTrackRef.value
     const firstSliderElement = convertElement(sliderRefs.value[0])
@@ -84,44 +78,30 @@ export function useStrategy(
     if (
       length <= 1 ||
       runningIndex.value !== -1 ||
-      nextIndex === activeIndex.value ||
+      index === activeIndex.value ||
       !sliderTrackElement ||
       !firstSliderElement ||
       !lastSliderElement
     ) {
       return
     }
 
-    const { from, to } = getBoundary(activeIndex.value, nextIndex, length)
+    const { from, to } = getBoundary(activeIndex.value, index, length)
+    nextIndex.value = index
     runningIndex.value = to
-    sliderTrackElement.style.transition = `transform 0.5s ease`
 
-    const needToAdjust = length > 2 && nextIndex !== to
-    if (mergedVertical.value) {
-      if (needToAdjust) {
-        if (to < from) {
-          firstSliderElement.style.top = `${length * unitHeight.value}px`
-          lastSliderElement.style.top = ''
-        } else {
-          firstSliderElement.style.top = ''
-          lastSliderElement.style.top = `${-length * unitHeight.value}px`
-        }
-        sliderTrackElement.style.transform = `translate3d(0, ${-nextIndex * unitHeight.value}px, 0)`
-      } else {
-        sliderTrackElement.style.transform = `translate3d(0, ${-to * unitHeight.value}px, 0)`
-      }
-    } else {
-      if (needToAdjust) {
-        if (to < from) {
-          firstSliderElement.style.left = `${length * unitWidth.value}px`
-          lastSliderElement.style.left = ''
-        } else {
-          firstSliderElement.style.left = ''
-          lastSliderElement.style.left = `${-length * unitWidth.value}px`
-        }
-        sliderTrackElement.style.transform = `translate3d(${-nextIndex * unitWidth.value}px, 0, 0)`
+    sliderTrackElement.style.transition = `transform 0.5s ease`
+    const needToAdjust = length > 2 && index !== to
+
+    if (needToAdjust) {
+      const stylePropertyName = mergedVertical.value ? 'top' : 'left'
+      const unit = mergedVertical.value ? unitHeight.value : unitWidth.value
+      if (to < from) {
+        firstSliderElement.style[stylePropertyName] = `${length * unit}px`
+        lastSliderElement.style[stylePropertyName] = ''
       } else {
-        sliderTrackElement.style.transform = `translate3d(${-to * unitWidth.value}px, 0, 0)`
+        firstSliderElement.style[stylePropertyName] = ''
+        lastSliderElement.style[stylePropertyName] = `${-length * unit}px`
       }
     }
   }
@@ -136,6 +116,7 @@ export function useStrategy(
   return {
     activeIndex,
     runningIndex,
+    nextIndex,
     unitHeight,
     unitWidth,
     goTo,
@@ -144,6 +125,6 @@ export function useStrategy(
   }
 }
 
-function getBoundary(f: number, t: number, length: number) {
+function getBoundary(f: number, t: number, length: number): { from: number; to: number } {
   return { from: (f + length) % length, to: (t + length) % length }
 }
diff --git a/packages/components/carousel/style/index.less b/packages/components/carousel/style/index.less
@@ -28,6 +28,9 @@
     touch-action: pan-y;
     transform: translate3d(0, 0, 0);
   }
+  &-vertical &-slider-track {
+    flex-direction: column;
+  }
 
   &-slider {
     position: relative;