feat(frontend): minor refactor on login and project create form

This commit is contained in:
Andrey Antukh 2019-07-18 14:27:42 +02:00
parent 321c8d14e1
commit c2815d15ed
9 changed files with 257 additions and 238 deletions

View file

@ -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)])))