Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

🐛 Fix incorrect use of forward-ref on input* control component

Browse source 
And in the derived input-tokens* component
This commit is contained in:
Andrey Antukh 2024-11-26 10:15:55 +01:00
parent 052b39d833
commit b31afcfb47
3 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/app/main/ui/ds/controls/input.cljs
View file

@ -9,6 +9,7 @@
[app.common.data.macros :as dm]
[app.main.style :as stl])
(:require
[app.common.data :as d]
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
@ -25,17 +26,25 @@
{::mf/props :obj
::mf/forward-ref true
::mf/schema schema:input}
[{:keys [icon class type external-ref] :rest props}]
(let [ref (or external-ref (mf/use-ref))
type (or type "text")
icon-class (stl/css-case :input true
:input-with-icon (some? icon))
props (mf/spread-props props {:class icon-class :ref ref :type type})
handle-icon-click (mf/use-fn (mf/deps ref)
(fn [_]
(let [input-node (mf/ref-val ref)]
(dom/select-node input-node)
(dom/focus! input-node))))]
[:> "span" {:class (dm/str class " " (stl/css :container))}
(when icon [:> icon* {:id icon :class (stl/css :icon) :on-click handle-icon-click}])
[:> "input" props]]))
[{:keys [icon class type] :rest props} ref]
(let [ref (or ref (mf/use-ref))
type (d/nilv type "text")
props (mf/spread-props props
:class (stl/css-case
:input true
:input-with-icon (some? icon))
:ref ref
:type type)
on-icon-click
(mf/use-fn
(mf/deps ref)
(fn [_event]
(let [input-node (mf/ref-val ref)]
(dom/select-node input-node)
(dom/focus! input-node))))]
[:> :span {:class (dm/str class " " (stl/css :container))}
(when (some? icon)
[:> icon* {:id icon :class (stl/css :icon) :on-click on-icon-click}])
[:> :input props]]))

13
frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs
View file

@ -25,19 +25,18 @@
{::mf/props :obj
::mf/forward-ref true
::mf/schema schema::input-tokens}
[{:keys [class label external-ref id error value children] :rest props}]
(let [ref (or external-ref (mf/use-ref))
[{:keys [class label id error value children] :rest props} ref]
(let [ref (or ref (mf/use-ref))
props (mf/spread-props props {:id id
:type "text"
:class (stl/css :input)
:aria-invalid error
:value value
:external-ref ref})]
[:div {:class (dm/str class " "
(stl/css-case :wrapper true
:input-error error))}
:ref ref})]
[:div {:class (dm/str class " " (stl/css-case :wrapper true
:input-error error))}
[:label {:for id :class (stl/css :label)} label]
[:div {:class (stl/css :input-wrapper)}
(when children
(when (some? children)
[:div {:class (stl/css :input-swatch)} children])
[:> input* props]]]))

2
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -390,7 +390,7 @@ Token names should only contain letters and digits separated by . characters.")}
:placeholder (tr "workspace.token.enter-token-value")
:label (tr "workspace.token.token-value")
:default-value @value-ref
:external-ref value-input-ref
:ref value-input-ref
:on-change on-update-value
:on-blur on-update-value}
(when color?