fix(carousel): remvoed flickering (#2211)

eBay · Jul 29, 2024 · 371d277 · 371d277
1 parent abe01b8
commit 371d277
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 12 deletions.
diff --git a/.changeset/curly-lions-agree.md b/.changeset/curly-lions-agree.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": patch
+---
+
+fix(carousel): removed flickering from controlled
diff --git a/src/components/ebay-carousel/component.ts b/src/components/ebay-carousel/component.ts
@@ -61,8 +61,8 @@ interface State {
         scrollTransitioning?: boolean;
     };
     items: (Item & {
-        left: number;
-        right: number;
+        left?: number;
+        right?: number;
     })[];
     index: number;
     slideWidth: number;
@@ -129,18 +129,18 @@ class Carousel extends Marko.Component<Input, State> {
 
             while (high - low > 1) {
                 const mid = Math.floor((low + high) / 2);
-                if (scrollLeft > items[mid * itemsPerSlide].left) {
+                if (scrollLeft > items[mid * itemsPerSlide].left!) {
                     low = mid;
                 } else {
                     high = mid;
                 }
             }
 
             const deltaLow = Math.abs(
-                scrollLeft - items[low * itemsPerSlide].left,
+                scrollLeft - items[low * itemsPerSlide].left!,
             );
             const deltaHigh = Math.abs(
-                scrollLeft - items[high * itemsPerSlide].left,
+                scrollLeft - items[high * itemsPerSlide].left!,
             );
             closest = this.normalizeIndex(
                 state,
@@ -161,14 +161,14 @@ class Carousel extends Marko.Component<Input, State> {
         if (!items.length) {
             return 0;
         }
-        return Math.min(items[index].left, this.getMaxOffset(state)) || 0;
+        return Math.min(items[index].left!, this.getMaxOffset(state)) || 0;
     }
 
     getMaxOffset({ items, slideWidth }: State) {
         if (!items.length) {
             return 0;
         }
-        return Math.max(items[items.length - 1].right - slideWidth, 0) || 0;
+        return Math.max(items[items.length - 1].right! - slideWidth, 0) || 0;
     }
 
     getSlide({ index, itemsPerSlide }: State, i: number = index) {
@@ -218,10 +218,10 @@ class Carousel extends Marko.Component<Input, State> {
 
             if (delta === LEFT && !itemsPerSlide) {
                 // If going left without items per slide, go as far left as possible while keeping this item fully in view.
-                const targetOffset = item.right - slideWidth;
+                const targetOffset = item.right! - slideWidth;
                 do {
                     item = items[--i];
-                } while (item && item.left >= targetOffset);
+                } while (item && item.left! >= targetOffset);
                 i += 1;
             }
         }
@@ -284,7 +284,7 @@ class Carousel extends Marko.Component<Input, State> {
             item.fullyVisible =
                 item.left === undefined ||
                 (item.left - offset >= -0.01 &&
-                    item.right - offset <= slideWidth + 0.01);
+                    item.right! - offset <= slideWidth + 0.01);
         });
 
         const data = Object.assign({}, state, {
@@ -494,8 +494,6 @@ class Carousel extends Marko.Component<Input, State> {
                 key: item.key || i.toString(),
                 style: item.style,
                 renderBody: item.renderBody,
-                left: 0,
-                right: 0,
             };
         });
 

diff --git a/src/components/ebay-carousel/examples/discrete-controlled.marko b/src/components/ebay-carousel/examples/discrete-controlled.marko
@@ -0,0 +1,54 @@
+export interface Input {
+    items: number;
+    index: number;
+    itemsPerSlide: number;
+    gap: number;
+    a11yPreviousText: string;
+    a11yNextText: string;
+}
+
+export interface State {
+    index?: number;
+}
+
+class {
+    onCreate() {
+        this.state = {
+            index: 0
+        }
+    }
+    onMove({visibleIndexes}) {
+        this.state.index = visibleIndexes[0];
+    }
+}
+
+<style>
+    .demo2-card {
+        color: #cdf4fd;
+        background: #a1208b;
+        font-size: 36px;
+        font-weight: bold;
+        height: 330px;
+        line-height: 330px;
+        text-align: center;
+    }
+</style>
+
+<ebay-carousel
+    ...input
+    index=state.index
+    itemsPerSlide=(input.itemsPerSlide || 2)
+    on-next("emit", "next")
+    on-previous("emit", "previous")
+    on-move("onMove")>
+    <@item style={ width: 400 } class="demo2-card">Card 1</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 2</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 3</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 4</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 5</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 6</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 7</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 8</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 9</@item>
+    <@item style={ width: 400 } class="demo2-card">Card 10</@item>
+</ebay-carousel>