♻️ Rename hook

ftes · Sep 4, 2022 · 821d0f1 · 821d0f1
1 parent 646c126
commit 821d0f1
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 14 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -24,7 +24,7 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
-import StoreView from "./hooks/StoreView"
+import PushHookEvent from "./hooks/PushHookEvent"
 import XReactCombobox from "./react/ComboboxWebcomponent"
 
 customElements.define('x-react-combobox', XReactCombobox)
@@ -33,7 +33,7 @@ let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("
 let liveSocket = new LiveSocket("/live", Socket, {
   params: {_csrf_token: csrfToken},
   hooks: {
-    StoreView,
+    PushHookEvent,
   },
 })
 

diff --git a/assets/js/hooks/PushHookEvent.js b/assets/js/hooks/PushHookEvent.js
@@ -0,0 +1,7 @@
+const PushEventHook = {
+  mounted() {
+    this.el.__pushHookEvent = this.__view.pushHookEvent?.bind(this.__view)
+  }
+}
+
+export default PushEventHook;
diff --git a/assets/js/hooks/StoreView.js b/assets/js/hooks/StoreView.js
diff --git a/assets/js/react/ComboboxWebcomponent.jsx b/assets/js/react/ComboboxWebcomponent.jsx
@@ -5,9 +5,6 @@ import Combobox from "./Combobox"
 export default class ComboboxWebcomponent extends HTMLElement {
   connectedCallback() {
     const mountPoint = document.createElement('div')
-    // https://github.com/tailwindlabs/headlessui/issues/835
-    // Shadow DOM not supported (yet) -> lost click events
-    // this.attachShadow({ mode: 'closed' })
     this.appendChild(mountPoint)
     this.__reactRoot = ReactDOM.createRoot(mountPoint)
     this.render()    
@@ -24,7 +21,7 @@ export default class ComboboxWebcomponent extends HTMLElement {
     const onSelect = ({ value }) => {
       const target = this.attributes["phx-target"]?.value
       function onReply() {}
-      this.__view.pushHookEvent(target, "select", { value }, onReply)
+      this.__pushHookEvent(target, "select", { value }, onReply)
     }
 
     this.__reactRoot.render(

diff --git a/lib/phoenix_headlessui_web/live/home.ex b/lib/phoenix_headlessui_web/live/home.ex
@@ -10,7 +10,7 @@ defmodule PhoenixHeadlessuiWeb.HomeLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <x-react-combobox phx-hook="StoreView" phx-update="ignore" id="react-combobox" options={Jason.encode!(@options)} value={@selected} />
+    <x-react-combobox phx-hook="PushHookEvent" phx-update="ignore" id="react-combobox" options={Jason.encode!(@options)} value={@selected} />
     """
   end