fix(drawer): fix drawer delay bug for removing from dom

Trendyol · May 30, 2024 · bee97f0 · bee97f0
1 parent c2a96e2
commit bee97f0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/src/components/drawer/bl-drawer.css b/src/components/drawer/bl-drawer.css
@@ -12,7 +12,7 @@
   padding-bottom: max(env(safe-area-inset-bottom), var(--bl-size-xl));
   background: var(--bl-color-neutral-full);
   box-shadow: var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);
-  transition: right var(--bl-drawer-animation-duration);
+  transition: right var(--bl-drawer-animation-duration, 0.25s);
   z-index: var(--bl-index-sticky);
 }
 

diff --git a/src/components/drawer/bl-drawer.ts b/src/components/drawer/bl-drawer.ts
@@ -1,6 +1,6 @@
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { event, EventDispatcher } from "../../utilities/event";
 import { styleToPixelConverter } from "../../utilities/style-to-px.converter";
 import "../button/bl-button";
@@ -59,6 +59,9 @@ export default class BlDrawer extends LitElement {
    */
   @event("bl-drawer-close") private onClose: EventDispatcher<string>;
 
+  @query("iframe")
+  private _drawerIframe: HTMLIFrameElement;
+
   connectedCallback() {
     super.connectedCallback();
     window?.addEventListener("bl-drawer-open", event => {
@@ -107,21 +110,18 @@ export default class BlDrawer extends LitElement {
       if (this.domExistenceSchedule) {
         clearTimeout(this.domExistenceSchedule);
       }
-
       this.domExistence = true;
+      // When drawer open with embedUrl, iframe should reload because of unmount issues
+      if (this.embedUrl) {
+        this._drawerIframe.src = this.embedUrl;
+      }
       // FIXME: Allow events without payload
       this.onOpen("");
     } else {
-      const documentElement = document.documentElement;
-      const durationString = getComputedStyle(documentElement).getPropertyValue(
-        "--bl-drawer-animation-duration"
-      );
-      const durationInMs = parseFloat(durationString) * 1000;
-
       // Give some time for exit animation
       this.domExistenceSchedule = window.setTimeout(() => {
         this.domExistence = false;
-      }, durationInMs);
+      }, 1000);
 
       // FIXME: Allow events without payload
       this.onClose("");

diff --git a/src/themes/default.css b/src/themes/default.css
@@ -215,9 +215,6 @@
   --bl-font-caption-size: var(--bl-font-caption-font-size) / var(--bl-font-caption-line-height);
   --bl-font-caption: var(--bl-font-weight-medium) var(--bl-font-caption-size) var(--bl-font-family);
 
-  /* Style: Drawer */
-  --bl-drawer-animation-duration: 250ms;
-
   /*
   @DEPRECATED