3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-16 20:21:38 +02:00
Code Issues Projects Releases Packages Wiki 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
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"] [:span {:class (stl/css :icon-text)} "W"]
[:& editable-select [:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:no-validate true
:min 0.01
:class (stl/css :token-select) :class (stl/css :token-select)
:disabled disabled-width-sizing? :disabled disabled-width-sizing?
:input-class (stl/css :numeric-input)
:on-change on-width-change :on-change on-width-change
:on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %)) :on-token-remove #(on-width-change (wtc/maybe-resolve-token-value %))
:options width-options :options width-options
:position :left :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 [:div {:class (stl/css-case :height true
:disabled disabled-height-sizing?) :disabled disabled-height-sizing?)
:title (tr "workspace.options.height")} :title (tr "workspace.options.height")}
[:span {:class (stl/css :icon-text)} "H"] [:span {:class (stl/css :icon-text)} "H"]
[:& editable-select [:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:no-validate true
:min 0.01
:class (stl/css :token-select) :class (stl/css :token-select)
:disabled disabled-height-sizing? :disabled disabled-height-sizing?
:input-class (stl/css :numeric-input)
:on-change on-height-change :on-change on-height-change
:on-token-remove #(on-height-change (wtc/maybe-resolve-token-value %)) :on-token-remove #(on-height-change (wtc/maybe-resolve-token-value %))
:options height-options :options height-options
:position :right :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 [:button {:class (stl/css-case
:lock-size-btn true :lock-size-btn true
:selected (true? proportion-lock) :selected (true? proportion-lock)
@ -539,15 +539,15 @@
[:span {:class (stl/css :icon)} i/corner-radius] [:span {:class (stl/css :icon)} i/corner-radius]
[:& editable-select [:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:min 0
:class (stl/css :token-select) :class (stl/css :token-select)
:input-class (stl/css :numeric-input)
:on-change on-radius-1-change :on-change on-radius-1-change
:on-token-remove on-border-radius-token-unapply :on-token-remove on-border-radius-token-unapply
:options border-radius-options :options border-radius-options
:position :right :position :right
:type "number" :value (:rx values)
:value (:rx values)}]] :input-props {:type "number"
:class (stl/css :numeric-input)
:min 0}}]]
@radius-multi? @radius-multi?
[:div {:class (stl/css :radius-1) [:div {:class (stl/css :radius-1)

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

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