WIP: generic dropdown for close on click outside

dropdown.cljs

(defn dropdown
  [display-name component-fn handle-click-outside]
  (let [ref (atom nil)]
    (r/create-class
      {:display-name           display-name
       :component-did-mount    (fn [_this] (listen js/document "mousedown" handle-click-outside))
       :component-will-unmount (fn [_this] (unlisten js/document "mousedown" handle-click-outside))
       :reagent-render         (component-fn ref)})))

(defn menu-dropdown-component
  (fn [ref]
    (fn [block state]
      (let [{:block/keys [uid] sidebar :page/sidebar} block
            {:menu/keys [show x y]} @state]
        (when show
          [:div (merge (use-style dropdown-style
                                  {:ref #(reset! ref %)})
                       {:style {:font-size "14px"
                                :position  "fixed"
                                :left      (str x "px")
                                :top       (str y "px")}})
           [:div (use-style menu-style)
            (if sidebar
              [button {:on-click #(dispatch [:page/remove-shortcut uid])}
               [:<>
                [:> mui-icons/BookmarkBorder]
                [:span "Remove Shortcut"]]]
              [button {:on-click #(dispatch [:page/add-shortcut uid])}
               [:<>
                [:> mui-icons/Bookmark]
                [:span "Add Shortcut"]]])
            [:hr (use-style menu-separator-style)]
            [button {:on-click #(do
                                  (navigate :pages)
                                  (dispatch [:page/delete uid]))}
             [:<> [:> mui-icons/Delete] [:span "Delete Page"]]]]])))))

(defn menu-dropdown
  [_block state]
  ;; but how to use @ref here? not in scope anymore
  [dropdown "node-page-menu" menu-dropdown-component (fn [e]
                                                       (when (and (:menu/show @state)
                                                                  (not (.. @ref (contains (.. e -target)))))
                                                         (swap! state assoc :menu/show false)))])

(defn dropdown
  [display-name component-fn handle-click-outside]
  (let [ref (atom nil)] ;; <---
    (r/create-class
      {:display-name           display-name
       :component-did-mount    (fn [_this] (listen js/document "mousedown" handle-click-outside))
       :component-will-unmount (fn [_this] (unlisten js/document "mousedown" handle-click-outside))
       :reagent-render         (component-fn ref)})))


(defn menu-dropdown-component
  (fn [ref] ;; completely the same except trying to curry ref
    (fn [block state]
      (let [{:block/keys [uid] sidebar :page/sidebar} block
            {:menu/keys [show x y]} @state]
        (when show
          [:div (merge (use-style dropdown-style
                                  {:ref #(reset! ref %)})
                       {:style {:font-size "14px"
                                :position  "fixed"
                                :left      (str x "px")
                                :top       (str y "px")}})
           [:div (use-style menu-style)
            (if sidebar
              [button {:on-click #(dispatch [:page/remove-shortcut uid])}
               [:<>
                [:> mui-icons/BookmarkBorder]
                [:span "Remove Shortcut"]]]
              [button {:on-click #(dispatch [:page/add-shortcut uid])}
               [:<>
                [:> mui-icons/Bookmark]
                [:span "Add Shortcut"]]])
            [:hr (use-style menu-separator-style)]
            [button {:on-click #(do
                                  (navigate :pages)
                                  (dispatch [:page/delete uid]))}
             [:<> [:> mui-icons/Delete] [:span "Delete Page"]]]]])))))

(defn menu-dropdown
  [_block state]
  [dropdown "node-page-menu" menu-dropdown-component (fn [e]
                                                       (when (and (:menu/show @state)
                                                                  (not (.. @ref (contains (.. e -target)))))
                                                         (swap! state assoc :menu/show false)))])