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:
parent
e69bfb8c54
commit
ced325e009
2 changed files with 36 additions and 35 deletions
|
@ -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]
|
||||||
|
|
|
@ -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]])))]]]]))
|
||||||
|
|
Loading…
Add table
Reference in a new issue