mirror of
https://github.com/penpot/penpot.git
synced 2025-03-17 18:21:23 -05:00
✨ Auto select input when editing layers and pages name
This commit is contained in:
parent
39364853b8
commit
beb6048bf9
2 changed files with 19 additions and 0 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue