mirror of
https://github.com/penpot/penpot.git
synced 2025-07-29 07:57:14 +02:00
feat(frontend): minor refactor on login and project create form
This commit is contained in:
parent
321c8d14e1
commit
c2815d15ed
9 changed files with 257 additions and 238 deletions
|
@ -1,15 +1,16 @@
|
|||
(ns uxbox.main.ui.lightbox
|
||||
(:require [lentes.core :as l]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.ui.keyboard :as k]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[goog.events :as events])
|
||||
(:require
|
||||
[goog.events :as events]
|
||||
[lentes.core :as l]
|
||||
[rumext.core :as mx]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.keyboard :as k]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
;; --- Lentes
|
||||
;; --- Refs
|
||||
|
||||
(def ^:private lightbox-ref
|
||||
(-> (l/key :lightbox)
|
||||
|
@ -28,34 +29,33 @@
|
|||
|
||||
(defn- on-out-clicked
|
||||
[own event]
|
||||
(let [parent (mx/ref-node own "parent")
|
||||
(let [parent (mx/ref-node (::parent own))
|
||||
current (dom/get-target event)]
|
||||
(when (dom/equals? parent current)
|
||||
(udl/close!))))
|
||||
(st/emit! (udl/hide-lightbox)))))
|
||||
|
||||
(defn- lightbox-init
|
||||
[own]
|
||||
(let [key (events/listen js/document
|
||||
EventType.KEYDOWN
|
||||
on-esc-clicked)]
|
||||
(assoc own ::key key)))
|
||||
(mx/def lightbox
|
||||
:mixins #{mx/reactive}
|
||||
|
||||
(defn- lightbox-will-umount
|
||||
[own]
|
||||
(events/unlistenByKey (::key own))
|
||||
(dissoc own ::key))
|
||||
:init
|
||||
(fn [own props]
|
||||
(let [key (events/listen js/document EventType.KEYDOWN on-esc-clicked)]
|
||||
(assoc own
|
||||
::key-listener key
|
||||
::parent (mx/create-ref))))
|
||||
|
||||
(mx/defcs lightbox
|
||||
{:mixins [mx/reactive]
|
||||
:init lightbox-init
|
||||
:will-unmount lightbox-will-umount}
|
||||
[own]
|
||||
(let [data (mx/react lightbox-ref)
|
||||
classes (classnames
|
||||
:hide (nil? data)
|
||||
:transparent (:transparent? data))]
|
||||
[:div.lightbox
|
||||
{:class classes
|
||||
:ref "parent"
|
||||
:on-click (partial on-out-clicked own)}
|
||||
(render-lightbox data)]))
|
||||
:will-unmount
|
||||
(fn [own]
|
||||
(events/unlistenByKey (::key-listener own))
|
||||
(dissoc own ::key-listener))
|
||||
|
||||
:render
|
||||
(fn [own props]
|
||||
(let [data (mx/react lightbox-ref)
|
||||
classes (classnames
|
||||
:hide (nil? data)
|
||||
:transparent (:transparent? data))]
|
||||
[:div.lightbox {:class classes
|
||||
:ref (::parent own)
|
||||
:on-click (partial on-out-clicked own)}
|
||||
(render-lightbox data)])))
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue