mirror of
https://github.com/penpot/penpot.git
synced 2026-05-23 00:43:41 +00:00
62 lines
1.5 KiB
Clojure
62 lines
1.5 KiB
Clojure
(ns app.main.ui.modal
|
|
(:require
|
|
[cuerdas.core :as str]
|
|
[goog.events :as events]
|
|
[rumext.alpha :as mf]
|
|
[app.main.store :as st]
|
|
[app.main.ui.keyboard :as k]
|
|
[app.util.data :refer [classnames]]
|
|
[app.util.dom :as dom])
|
|
(:import goog.events.EventType))
|
|
|
|
(defonce state (atom nil))
|
|
|
|
(defn show!
|
|
[component props]
|
|
(reset! state {:component component :props props}))
|
|
|
|
(defn hide!
|
|
[]
|
|
(reset! state nil))
|
|
|
|
(defn- on-esc-clicked
|
|
[event]
|
|
(when (k/esc? event)
|
|
(reset! state nil)
|
|
(dom/stop-propagation event)))
|
|
|
|
(defn- on-parent-clicked
|
|
[event parent-ref]
|
|
(let [parent (mf/ref-val parent-ref)
|
|
current (dom/get-target event)]
|
|
;; (js/console.log current (.-className ^js current))
|
|
(when (and (dom/equals? (.-firstElementChild ^js parent) current)
|
|
(str/includes? (.-className ^js current) "modal-overlay"))
|
|
(dom/stop-propagation event)
|
|
(dom/prevent-default event)
|
|
(reset! state nil))))
|
|
|
|
(mf/defc modal-wrapper
|
|
[{:keys [component props]}]
|
|
|
|
(mf/use-effect
|
|
(fn []
|
|
(let [key (events/listen js/document EventType.KEYDOWN on-esc-clicked)]
|
|
#(events/unlistenByKey %))))
|
|
|
|
(let [ref (mf/use-ref nil)]
|
|
[:div.modal-wrapper
|
|
{:ref ref
|
|
:on-click #(on-parent-clicked % ref)}
|
|
[:& component props]]))
|
|
|
|
(mf/defc modal
|
|
[]
|
|
(when-let [{:keys [component props]} (mf/deref state)]
|
|
[:& modal-wrapper {:component component
|
|
:props props
|
|
:key (random-uuid)}]))
|
|
|
|
|
|
|