Clojurians Log v2

another (slightly more complex) solution would be to write a small hook that that takes care of closing elements based on clicks, escape, or when a menu item is clicked etc). The hook can be added to a click-away-component that wraps whatever you want to close on outside/inside clicks. No need to touch the app-db this way. Something like this:

(ns app.components.generic.hooks.use-click-away
  (:require
    ["react" :refer [useEffect useRef]]))


(defn use-click-away
  "Hook-style utility. Returns a `ref` to attach to an element. Dispatches `close-event` on:
      - outside click,
      - Escape key,
      - internal click on element with `data-close-on-click`."
  [close-fn]
  (let [ref (useRef nil)]
    (useEffect
      (fn []
        (let [handle-click-away (fn [e]
                                  (when (and (.-current ref)
                                             (not (.contains (.-current ref) (.-target e)))
                                             (not (.closest (.-target e) ".modal")))
                                    (.stopPropagation e)
                                    (close-fn)))

              handle-escape (fn [e]
                              (when (= "Escape" (.-key e))
                                (.stopPropagation e)
                                (close-fn)))

              handle-inner-click (fn [e]
                                   (when (.hasAttribute (.-target e) "data-close-on-click")
                                     (.stopPropagation e)
                                     (close-fn)))]

          ;; Attach listeners
          (.addEventListener js/document "mousedown" handle-click-away)
          (.addEventListener js/document "keydown" handle-escape)
          (when (.-current ref)
            (.addEventListener (.-current ref) "click" handle-inner-click))

          ;; Cleanup
          (fn []
            (.removeEventListener js/document "mousedown" handle-click-away)
            (.removeEventListener js/document "keydown" handle-escape)
            (when (.-current ref)
              (.removeEventListener (.-current ref) "click" handle-inner-click)))))
      #js [(.-current ref)]) ; Only re-run effect if ref changes

    ;; Return ref to attach to DOM element
    ref))

"Right, but once I leave that event handler it's too late to mutate it.". You are right. I would just dereference the db-atom, like you are doing.

@alexander.vanelsas this is fascinating ! How does one attach this to an element?

You could also do it without hooks, using a react functional ref:

(defn my-component []
  (let [this-ref   (atom nil)
        reset-ref! #(reset! this-ref %)]
    (reagent/create-class
     {:component-did-mount    #(add-my-listeners! @this-ref)
      :component-will-unmount #(remove-my-listeners! @this-ref)
      :reagent-render
      (fn []
        [:div {:ref reset-ref!}])})))

@brjann one way to do it is to define a simple click-away-listener that uses the hook, and wrap it around the component that you need this behaviour for, something like this:

(ns app.components.generic.click-away-listener.views
  (:require
    [app.components.generic.hooks.use-click-away :refer [use-click-away]))


(defn click-away-listener
  "Wraps any UI component. Runs `close-fn` if user clicks outside, presses Escape, or if the Element has a `data-close-on-click` set to true (E.g. a menu-item)."
  [{:keys [close-fn child]}]
  (let [hook-ref (use-click-away close-fn)]
    [:div.click-away-listener {:ref hook-ref}
     child]))

You can then call it anywhere like this (pseudo code)

[:f> click-away-listener {:child [a div or component here that you want to close if clicked outside]
                                                                :close-fn #(dispatch [some event you need here to close the component)}]

The re-frame way would be to put the logic in the dispatch which receives the event. Purist would also put the event mutation in an :fx

Right, but once I leave that event handler it's too late to mutate it. I guess I could dispatch-sync a re-frame event that includes the DOM event and handle the mutation within re-frame that way.

Why does it have to be outside of rendering? Something is happening to make the navbar menu appear, can you install the listener at that point? That is the point where you could subscribe to navbar/should-close?

The coeffect handler that sticks the current app-db value in the re-frame event handler context simply dereferences the app-db ratom, so I guess it's not a big deal: https://github.com/day8/re-frame/blob/master/src/re_frame/cofx.cljc#L42

I prefer registering a single listener at startup time for simplicity's sake: I don't have to juggle whether or not that listener is active, it's just always there.

Thanks, Vincent. I’ve been reading this set of posts. Only half-way through. Valuable background, but so far, not “scratching my itch.” (Probably just me.)

Not sure if it is what you want, but maybe read https://day8.github.io/re-frame/re-frame/