0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 14:39:45 -05:00

Return selected item map instead of value [*]

[*] Multiple tokens could have the same value
This commit is contained in:
Florian Schroedl 2024-05-17 10:15:22 +02:00
parent e69bfb8c54
commit ced325e009
2 changed files with 36 additions and 35 deletions

View file

@ -294,8 +294,7 @@
(mf/use-fn (mf/use-fn
(mf/deps ids change-radius border-radius-tokens) (mf/deps ids change-radius border-radius-tokens)
(fn [value] (fn [value]
(let [token (when (symbol? value) (let [token (when (map? value) value)
(get border-radius-tokens (str value)))
token-value (some-> token wtc/resolve-token-value)] token-value (some-> token wtc/resolve-token-value)]
(st/emit! (st/emit!
(change-radius (fn [shape] (change-radius (fn [shape]

View file

@ -48,28 +48,30 @@
(dom/stop-propagation event) (dom/stop-propagation event)
(swap! state* assoc :is-open? false)) (swap! state* assoc :is-open? false))
select-item labels-map (->> (map (fn [{:keys [label] :as item}]
(mf/use-fn [label item])
(mf/deps on-change on-blur) options)
(fn [event] (into {}))
(let [value (-> (dom/get-current-target event)
(dom/get-data "value")
(d/read-string))]
(swap! state* assoc :current-value value)
(when on-change (on-change value))
(when on-blur (on-blur)))))
as-key-value (fn [item] (if (map? item) [(:value item) (:label item)] [item item]))
labels-map (into {} (map as-key-value) options)
value->label (fn [value] (get labels-map value value))
set-value set-value
(fn [value] (fn [value]
(swap! state* assoc :current-value value) (swap! state* assoc :current-value value)
(when on-change (on-change value))) (when on-change (on-change value)))
;; TODO: why this method supposes that all editable select select-item
;; works with numbers? (mf/use-fn
(mf/deps on-change on-blur labels-map)
(fn [event]
(let [label (-> (dom/get-current-target event)
(dom/get-data "label")
(d/read-string)
(str))
{:keys [value] :as item} (get labels-map label)]
(swap! state* assoc
:current-value value
:current-item item)
(when on-change (on-change item))
(when on-blur (on-blur)))))
handle-change-input handle-change-input
(fn [event] (fn [event]
@ -163,13 +165,13 @@
[:div {:class (dm/str class " " (stl/css :editable-select)) [:div {:class (dm/str class " " (stl/css :editable-select))
:ref on-node-load} :ref on-node-load}
(if (= type "number") (if (= type "number")
[:> numeric-input* {:value (or (some-> current-value value->label) "") [:> numeric-input* {:value (or current-value "")
:className input-class :className input-class
:on-change set-value :on-change set-value
:on-focus handle-focus :on-focus handle-focus
:on-blur handle-blur :on-blur handle-blur
:placeholder placeholder}] :placeholder placeholder}]
[:input {:value (or (some-> current-value value->label) "") [:input {:value (or current-value "")
:class input-class :class input-class
:on-change handle-change-input :on-change handle-change-input
:on-key-down handle-key-down :on-key-down handle-key-down
@ -188,18 +190,18 @@
[:div {:class (stl/css :custom-select-dropdown) [:div {:class (stl/css :custom-select-dropdown)
:ref select-wrapper-ref} :ref select-wrapper-ref}
[:ul {:class (stl/css :custom-select-dropdown-list)} [:ul {:class (stl/css :custom-select-dropdown-list)}
(for [[index item] (map-indexed vector options)] (for [[index item] (d/enumerate options)]
(if (= :separator item) (cond
[:li {:class (stl/css :separator) (= :separator item) [:li {:class (stl/css :separator)
:key (dm/str element-id "-" index)}] :key (dm/str element-id "-" index)}]
(let [[value label] (as-key-value item)] :else (let [{:keys [value label]} item]
[:li [:li
{:key (str element-id "-" index) {:key (str element-id "-" index)
:class (stl/css-case :dropdown-element true :class (stl/css-case :dropdown-element true
:is-selected (= (dm/str value) current-value)) :is-selected (= (dm/str value) current-value))
:data-value value :data-label label
:on-click select-item} :on-click select-item}
[:span {:class (stl/css :label)} label] [:span {:class (stl/css :label)} label]
[:span {:class (stl/css :value)} value] [:span {:class (stl/css :value)} value]
[:span {:class (stl/css :check-icon)} [:span {:class (stl/css :check-icon)}
i/tick]])))]]]])) i/tick]])))]]]]))