3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-05 02:01:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Allow to rename a component in the library

Browse source
This commit is contained in:
Andrés Moya 2020-10-02 10:26:36 +02:00 • committed by Alonso Torres
parent fd1f42dc94
commit 1823ecda40
5 changed files with 104 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/app/main/ui/components/editable_label.cljs
View file

@ -17,35 +17,43 @@
[app.util.data :refer [classnames]]))
(mf/defc editable-label
[{:keys [ value on-change on-cancel edit readonly class-name]}]
[{:keys [value on-change on-cancel editing? disable-dbl-click? class-name]}]
(let [input (mf/use-ref nil)
state (mf/use-state (:editing false))
is-editing (or edit (:editing @state))
is-editing (:editing @state)
start-editing (fn []
(swap! state assoc :editing true)
(timers/schedule 100 #(dom/focus! (mf/ref-val input))))
stop-editing (fn [] (swap! state assoc :editing false))
accept-editing (fn []
(when (:editing @state)
(let [value (-> (mf/ref-val input) dom/get-value)]
(on-change value)
(stop-editing))))
cancel-editing (fn []
(stop-editing)
(when on-cancel (on-cancel)))
on-dbl-click (fn [e] (when (not readonly) (start-editing)))
on-dbl-click (fn [e] (when (not disable-dbl-click?) (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))))
]
(accept-editing)))]
(mf/use-effect
(mf/deps editing?)
(fn []
(when (and editing? (not (:editing @state)))
(start-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}]
:on-key-up on-key-up
:on-blur cancel-editing}]
[:span.editable-label-close {:on-click cancel-editing} i/close]]
[:span.editable-label {:class class-name
:on-double-click on-dbl-click} value]
)))
:on-double-click on-dbl-click} value])))