Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-17 18:21:23 -05:00
Code Issues Activity

✨ Auto select input when editing layers and pages name

Browse source
This commit is contained in:
Andrés Moya 2020-06-15 11:22:28 +02:00 • committed by Andrey Antukh
parent 39364853b8
commit beb6048bf9
2 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs
View file

@ -51,6 +51,7 @@
(mf/defc layer-name
[{:keys [shape] :as props}]
(let [local (mf/use-state {})
edit-input-ref (mf/use-ref)
on-blur (fn [event]
(let [target (dom/event->target event)
parent (.-parentNode target)
@ -68,9 +69,18 @@
parent (.-parentNode parent)]
(set! (.-draggable parent) false))
(swap! local assoc :edition true))]
(mf/use-effect
(mf/deps (:edition @local))
#(when (:edition @local)
(let [edit-input (mf/ref-val edit-input-ref)]
(dom/select-text! edit-input))
nil))
(if (:edition @local)
[:input.element-name
{:type "text"
:ref edit-input-ref
:on-blur on-blur
:on-key-down on-key-down
:auto-focus true

9
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -28,6 +28,7 @@
(mf/defc page-item
[{:keys [page index deletable? selected?] :as props}]
(let [local (mf/use-state {})
edit-input-ref (mf/use-ref)
on-double-click
(fn [event]
@ -70,6 +71,13 @@
:index index
:name (:name page)})]
(mf/use-effect
(mf/deps (:edition @local))
#(when (:edition @local)
(let [edit-input (mf/ref-val edit-input-ref)]
(dom/select-text! edit-input))
nil))
[:li {:class (dom/classnames
:selected selected?
:dnd-over-top (= (:over dprops) :top)
@ -83,6 +91,7 @@
(if (:edition @local)
[:*
[:input.element-name {:type "text"
:ref edit-input-ref
:on-blur on-blur
:on-key-down on-key-down
:auto-focus true