mirror of
https://github.com/penpot/penpot.git
synced 2025-05-10 06:46:39 +02:00
41 lines
1.6 KiB
Clojure
41 lines
1.6 KiB
Clojure
(ns uxbox.main.ui.components.editable-label
|
|
(:require
|
|
[rumext.alpha :as mf]
|
|
[uxbox.builtins.icons :as i]
|
|
[uxbox.main.ui.keyboard :as kbd]
|
|
[uxbox.util.dom :as dom]
|
|
[uxbox.util.data :refer [classnames]]))
|
|
|
|
(mf/defc editable-label
|
|
[{:keys [ value on-change on-cancel edit readonly class-name]}]
|
|
(let [input (mf/use-ref nil)
|
|
state (mf/use-state (:editing false))
|
|
is-editing (or edit (:editing @state))
|
|
start-editing (fn []
|
|
(swap! state assoc :editing true)
|
|
(dom/timeout 100 #(dom/focus! (mf/ref-node input))))
|
|
stop-editing (fn [] (swap! state assoc :editing false))
|
|
cancel-editing (fn []
|
|
(stop-editing)
|
|
(when on-cancel (on-cancel)))
|
|
on-dbl-click (fn [e] (when (not readonly) (start-editing)))
|
|
on-key-up (fn [e]
|
|
(cond
|
|
(kbd/esc? e)
|
|
(cancel-editing)
|
|
|
|
(kbd/enter? e)
|
|
(let [value (-> e dom/get-target dom/get-value)]
|
|
(on-change value)
|
|
(stop-editing))))
|
|
]
|
|
|
|
(if is-editing
|
|
[:div.editable-label {:class class-name}
|
|
[:input.editable-label-input {:ref input
|
|
:default-value value
|
|
:on-key-down on-key-up}]
|
|
[:span.editable-label-close {:on-click cancel-editing} i/close]]
|
|
[:span.editable-label {:class class-name
|
|
:on-double-click on-dbl-click} value]
|
|
)))
|