From 669b311769e99af9360cc4b8bb00e878916d1dec Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 6 Nov 2025 11:30:15 +0100 Subject: [PATCH] wip --- .../src/app/main/ui/ds/controls/select.cljs | 2 +- .../app/main/ui/inspect/right_sidebar.cljs | 4 +- .../sidebar/options/menus/component.cljs | 2 +- .../tokens/management/create/shadow.cljs | 77 ++++++++++++++----- 4 files changed, 60 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/main/ui/ds/controls/select.cljs b/frontend/src/app/main/ui/ds/controls/select.cljs index a8572dd8b9..63436a7a6f 100644 --- a/frontend/src/app/main/ui/ds/controls/select.cljs +++ b/frontend/src/app/main/ui/ds/controls/select.cljs @@ -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 diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/inspect/right_sidebar.cljs index 902adebb99..499f748782 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.cljs +++ b/frontend/src/app/main/ui/inspect/right_sidebar.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index 9ec3d75dc6..5e6f6c3ba5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs index fa39c35b3d..c6f97eeaf4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/create/shadow.cljs @@ -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*