Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-06 14:50:20 -05:00
Code Issues Activity

Dynamically pass props to input

Browse source
This commit is contained in:
Florian Schroedl 2024-05-29 08:50:50 +02:00
parent 464bdf3d9c
commit 384da8555d
2 changed files with 44 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -453,34 +453,34 @@
[:span {:class (stl/css :icon-text)} "W"]
[:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:no-validate true
:min 0.01
:class (stl/css :token-select)
:disabled disabled-width-sizing?
:input-class (stl/css :numeric-input)
:on-change on-width-change
:on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %))
:options width-options
:position :left
:type "number"
:value (:width values)}]]
:value (:width values)
:input-props {:type "number"
:no-validate true
:input-class (stl/css :numeric-input)
:min 0.01}}]]
[:div {:class (stl/css-case :height true
:disabled disabled-height-sizing?)
:title (tr "workspace.options.height")}
[:span {:class (stl/css :icon-text)} "H"]
[:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:no-validate true
:min 0.01
:class (stl/css :token-select)
:disabled disabled-height-sizing?
:input-class (stl/css :numeric-input)
:on-change on-height-change
:on-token-remove #(on-height-change (wtc/maybe-resolve-token-value %))
:options height-options
:position :right
:type "number"
:value (:height values)}]]
:value (:height values)
:input-props {:type "number"
:no-validate true
:class (stl/css :numeric-input)
:min 0.01}}]]
[:button {:class (stl/css-case
:lock-size-btn true
:selected (true? proportion-lock)
@ -539,15 +539,15 @@
[:span {:class (stl/css :icon)} i/corner-radius]
[:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:min 0
:class (stl/css :token-select)
:input-class (stl/css :numeric-input)
:on-change on-radius-1-change
:on-token-remove on-border-radius-token-unapply
:options border-radius-options
:position :right
:type "number"
:value (:rx values)}]]
:value (:rx values)
:input-props {:type "number"
:class (stl/css :numeric-input)
:min 0}}]]
@radius-multi?
[:div {:class (stl/css :radius-1)

53
frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
View file

@ -62,8 +62,10 @@
[:span {:class (stl/css :check-icon)} i/tick]])))]]])
(mf/defc editable-select
[{:keys [value type options class on-change placeholder on-blur input-class on-token-remove position] :as params}]
(let [state* (mf/use-state {:id (uuid/next)
[{:keys [value options class on-change placeholder on-blur on-token-remove position input-props] :as params}]
(let [{:keys [type]} input-props
input-class (:class input-props)
state* (mf/use-state {:id (uuid/next)
:is-open? false
:current-value value
:token-value nil
@ -153,6 +155,7 @@
no-text-selected? (str/empty? (.toString (js/document.getSelection)))
delete-token? (and backspace? caret-at-beginning? no-text-selected?)
replace-token-with-value? (and enter? (seq (str/trim value)))]
(js/console.log "key-down" token delete-token?)
(cond
delete-token? (do
(dom/prevent-default event)
@ -218,27 +221,31 @@
:class (stl/css :token-pill)}
value])
(cond
token [:input {:value (or (:token-value state) "")
:class input-class
:on-change handle-token-change-input
:on-key-down handle-key-down
:on-focus handle-focus
:on-blur handle-blur}]
(= type "number") [:> numeric-input* {:autoFocus refocus?
:value (or current-value "")
:className input-class
:on-change set-value
:on-focus handle-focus
:on-blur handle-blur
:placeholder placeholder}]
:else [:input {:value (or current-value "")
:class input-class
:on-change handle-change-input
:on-key-down handle-key-down
:on-focus handle-focus
:on-blur handle-blur
:placeholder placeholder
:type type}])
token [:& :input (merge input-props
{:value (or (:token-value state) "")
:type "text"
:class input-class
:onChange handle-token-change-input
:onKeyDown handle-key-down
:onFocus handle-focus
:onBlur handle-blur})]
(= type "number") [:& numeric-input* (merge input-props
{:autoFocus refocus?
:value (or current-value "")
:className input-class
:onChange set-value
:onFocus handle-focus
:onBlur handle-blur
:placeholder placeholder})]
:else [:& :input (merge input-props
{:value (or current-value "")
:class input-class
:onChange handle-change-input
:onKeyDown handle-key-down
:onFocus handle-focus
:onBlur handle-blur
:placeholder placeholder
:type type})])
(when (seq options)
[:span {:class (stl/css :dropdown-button)