fix: DragHandler fix for BottomSheet (#796)

coingaming · Dec 4, 2023 · 6ef2d5c · 6ef2d5c
1 parent 0dac1ff
commit 6ef2d5c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/assets/js/hooks/bottom_sheet.js b/assets/js/hooks/bottom_sheet.js
@@ -30,7 +30,7 @@ export default {
 
     mounted() {
         Animation.mounted.bind(this)();
-        this.dragHandle = this.el.querySelector(".moon-drag-handle");
+        this.dragHandle = this.el.querySelector(" & > .moon-panel > .bottom_sheet_header > .moon-drag-handle")
     },
 
     updated() {

diff --git a/lib/moon/design/bottom_sheet/header.ex b/lib/moon/design/bottom_sheet/header.ex
@@ -24,7 +24,7 @@ defmodule Moon.Design.BottomSheet.Header do
       {=@id}
       class={merge([
         [
-          "sticky top-0 z-10 bg-goku pt-1",
+          "sticky top-0 z-10 bg-goku pt-1 bottom_sheet_header",
           "min-h-[48px]": slot_assigned?(:drag_handle)
         ],
         @class

diff --git a/lib/moon_web/examples/design/bottom_sheet_example/double.ex b/lib/moon_web/examples/design/bottom_sheet_example/double.ex
@@ -23,6 +23,9 @@ defmodule MoonWeb.Examples.Design.BottomSheetExample.Double do
           </Button>
           <BottomSheet id="default_bottom_sheet2">
             <BottomSheet.Panel>
+              <BottomSheet.Header class="border-b-2 border-beerus">
+                <BottomSheet.DragHandle />
+              </BottomSheet.Header>
               <div class="flex grow items-center justify-center bg-jiren text-piccolo">
                 Bottom Sheet content2
               </div>