This commit is contained in:
Eva Marco 2025-11-06 11:30:15 +01:00
parent 6d82a01a37
commit 669b311769
4 changed files with 60 additions and 25 deletions

View File

@ -112,7 +112,7 @@
(reset! focused-id* nil)
(reset! is-open* false)
(when (fn? on-change)
(on-change id)))))
(on-change id event)))))
on-click
(mf/use-fn

View File

@ -69,7 +69,7 @@
handle-change-tab
(mf/use-fn
(mf/deps from on-change-section)
(fn [new-section]
(fn [new-section _e ]
(reset! section (keyword new-section))
(when on-change-section
(on-change-section (keyword new-section))
@ -89,7 +89,7 @@
handle-change-color-space
(mf/use-fn
(fn [color-space]
(fn [color-space _e]
(reset! color-space* color-space)))
color-spaces

View File

@ -490,7 +490,7 @@
switch-component
(mf/use-fn
(mf/deps shapes)
(fn [pos val]
(fn [pos val _e]
(if (= val mixed-label)
(reset! key* (uuid/next))
(let [error-msg (if (> (count shapes) 1)

View File

@ -11,6 +11,7 @@
[app.common.types.token :as cto]
[app.main.data.style-dictionary :as sd]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.controls.select :refer [select*]]
[app.main.ui.ds.foundations.assets.icon :as i]
@ -22,7 +23,34 @@
(mf/defc inset-type-select*
{::mf/private true}
[{:keys [default-value shadow-idx on-change]}]
[{:keys [default-value on-change]}]
(let [selected* (mf/use-state (or (str default-value) "false"))
selected (deref selected*)
on-change
(mf/use-fn
(mf/deps on-change selected)
(fn [value evento]
(.log js/console (clj->js value))
(.log js/console (clj->js evento))
(obj/set! evento "tokenValue" (if (= "true" value) true false))
(on-change evento)
(reset! selected* (str value))))
options
(mf/with-memo []
[{:id "false" :label "drop-shadow" :icon i/drop-shadow}
{:id "true" :label "inner-shadow" :icon i/inner-shadow}])]
[:div {:class (stl/css :input-row)}
[:> select* {:default-selected selected
:variant "ghost"
:options options
:on-change on-change}]]))
#_(mf/defc inset-type-select*
[{:keys [default-value shadow-idx label on-change]}]
(let [selected* (mf/use-state (or (str default-value) "false"))
selected (deref selected*)
@ -30,20 +58,26 @@
(mf/use-fn
(mf/deps on-change selected shadow-idx)
(fn [value e]
#_(obj/set! e "tokenValue" (if (= "true" value) true false))
(prn value)
;; (on-change e)
#_(reset! selected* value)))
options
(mf/with-memo []
[{:id "drop-shadow" :label "drop-shadow" :icon i/drop-shadow}
{:id "inner-shadow" :label "inner-shadow" :icon i/inner-shadow}])]
(.log js/console (clj->js value))
(.log js/console (clj->js e))
(obj/set! e "tokenValue" (if (= "true" value) true false))
(on-change e)
(reset! selected* (str value))))]
[:div {:class (stl/css :input-row)}
[:> select* {:default-selected selected
:variant "ghost"
:options options
:on-change on-change}]]))
[:div {:class (stl/css :inset-label)} label]
[:& radio-buttons {:selected selected
:on-change on-change
:name (str "inset-select-" shadow-idx)}
[:& radio-button {:value "false"
:title "false"
:icon "❌"
:id (str "inset-default-" shadow-idx)}]
[:& radio-button {:value "true"
:title "true"
:icon "✅"
:id (str "inset-false-" shadow-idx)}]]]))
(def ^:private shadow-inputs
#(d/ordered-map
@ -99,11 +133,12 @@
{::mf/private true}
[{:keys [default-value label placeholder shadow-idx input-type on-update-value on-external-update-value token-resolve-result errors-by-key shadow-color]}]
(let [color-input-ref (mf/use-ref)
on-change
(mf/use-fn
(mf/deps shadow-idx input-type on-update-value)
(fn [e]
(-> (obj/set! e "tokenTypeAtIndex" [shadow-idx input-type])
(fn [evento]
(-> (obj/set! evento "tokenTypeAtIndex" [shadow-idx input-type])
(on-update-value))))
on-external-update-value'
@ -129,7 +164,7 @@
:shadow-idx shadow-idx
:label label
:on-change on-change}]
:color
[:> shadow-color-picker-wrapper*
{:placeholder placeholder
@ -141,7 +176,7 @@
:token-resolve-result token-prop
:shadow-color (or shadow-color nil)
:data-testid (str "shadow-color-input-" shadow-idx)}]
[:div {:class (stl/css :input-row)
:data-testid (str "shadow-" (name input-type) "-input-" shadow-idx)}
[:> input-token*
@ -151,9 +186,9 @@
:default-value default-value
:on-change on-change
:slot-start (cond (= input-type :blur)
(mf/html [:span {:class (stl/css :shadow-prop-label)} "Blur"])
(= input-type :spread)
(mf/html [:span {:class (stl/css :shadow-prop-label)} "Spread"]))
(mf/html [:span {:class (stl/css :shadow-prop-label)} "Blur"])
(= input-type :spread)
(mf/html [:span {:class (stl/css :shadow-prop-label)} "Spread"]))
:token-resolve-result token-prop}]])))
(mf/defc shadow-input-fields*