refactor(notification): disable touchmove down

Trendyol · Nov 23, 2023 · ddddf95 · ddddf95
1 parent 24b3501
commit ddddf95
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/src/components/notification/bl-notification.test.ts b/src/components/notification/bl-notification.test.ts
@@ -503,7 +503,7 @@ describe("bl-notification", () => {
         expect(notificationEl.style.transform).to.equal("");
       });
 
-      it("should update transform style when users touch moves up or down", async () => {
+      it("should update transform style when users touch moves up", async () => {
         // FIXME: Cant emulate touch events in web test runner
         if (!window.navigator.userAgent.includes("Chrome")) {
           return;
@@ -523,17 +523,38 @@ describe("bl-notification", () => {
 
         const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
 
-        sendTouchEvent(100, 50, notificationEl, "touchmove");
+        sendTouchEvent(100, -50, notificationEl, "touchmove");
 
         await el.updateComplete;
 
-        assert.equal(notificationEl.style.transform, "translateY(50px)");
+        assert.equal(notificationEl.style.transform, "translateY(-50px)");
+      });
 
-        sendTouchEvent(100, -50, notificationEl, "touchmove");
+      it("should not allow user to move notification down", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
 
         await el.updateComplete;
 
-        assert.equal(notificationEl.style.transform, "translateY(-50px)");
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, 590, notificationEl, "touchmove");
+
+        await el.updateComplete;
+
+        assert.equal(notificationEl.style.transform, "translateY(0px)");
       });
 
       it("should do nothing if device is not mobile", async () => {

diff --git a/src/components/notification/bl-notification.ts b/src/components/notification/bl-notification.ts
@@ -145,8 +145,10 @@ export default class BlNotification extends LitElement {
     const currentTarget = event.currentTarget as BlNotificationCard;
 
     const currentY = event.touches[0].clientY;
-    const movedY = currentY - this.touchStartY;
+    // Allow only moving up
+    const movedY = Math.min(currentY - this.touchStartY, 0);
 
+    console.log(movedY);
     currentTarget.style.transform = `translateY(${movedY}px)`;
   }