Add groups select

This commit is contained in:
Florian Schroedl 2024-09-10 15:37:01 +02:00
parent df16d0c222
commit 21f42021d8

View file

@ -130,6 +130,7 @@
on-change-field (fn [field] on-change-field (fn [field]
(fn [e] (fn [e]
(swap! theme-state (fn [st] (assoc-in st field (dom/get-target-val e)))))) (swap! theme-state (fn [st] (assoc-in st field (dom/get-target-val e))))))
group-input-ref (mf/use-ref)
on-update-group (on-change-field [:theme :group]) on-update-group (on-change-field [:theme :group])
on-update-name (on-change-field [:theme :name]) on-update-name (on-change-field [:theme :name])
on-save-form (mf/use-callback on-save-form (mf/use-callback
@ -154,25 +155,29 @@
:on-click on-back} :on-click on-back}
chevron-icon "Back"]] chevron-icon "Back"]]
[:div {:class (stl/css :edit-theme-inputs-wrapper)} [:div {:class (stl/css :edit-theme-inputs-wrapper)}
(when dropdown-open? [:div {:class (stl/css :group-input-wrapper)}
[:& wtco/dropdown-select {:id ::groups-dropdown (when dropdown-open?
:shortcuts-key ::groups-dropdown [:& wtco/dropdown-select {:id ::groups-dropdown
:options (map (fn [group] :shortcuts-key ::groups-dropdown
{:label group :options (map (fn [group]
:value group}) {:label group
theme-groups) :value group})
:on-select #(on-update-group (:value %)) theme-groups)
:on-close on-close-dropdown}]) :on-select (fn [{:keys [value]}]
[:& labeled-input {:label "Group" (set! (.-value (mf/ref-val group-input-ref)) value)
:input-props {:default-value (:group theme) (swap! theme-state assoc-in [:theme :group] value))
:on-change on-update-group} :on-close on-close-dropdown}])
:render-right (mf/fnc [] [:& labeled-input {:label "Group"
[:button {:class (stl/css :group-drop-down-button) :input-props {:ref group-input-ref
:type "button" :default-value (:group theme)
:on-click (fn [e] :on-change on-update-group}
(dom/stop-propagation e) :render-right (mf/fnc []
(on-toggle-dropdown))} [:button {:class (stl/css :group-drop-down-button)
i/arrow])}] :type "button"
:on-click (fn [e]
(dom/stop-propagation e)
(on-toggle-dropdown))}
i/arrow])}]]
[:& labeled-input {:label "Theme" [:& labeled-input {:label "Theme"
:input-props {:default-value (:name theme) :input-props {:default-value (:name theme)
:on-change on-update-name}}]] :on-change on-update-name}}]]