From 5a40c6fafd7a1b59007611f5e871d34745ed44f7 Mon Sep 17 00:00:00 2001 From: katauber Date: Tue, 18 Jan 2022 11:19:44 +0100 Subject: [PATCH] Add visibility of active dropdown item (#25) --- src/cljs/metafacture_playground/db.cljs | 7 +++- src/cljs/metafacture_playground/events.cljs | 19 +++++++-- src/cljs/metafacture_playground/subs.cljs | 10 +++++ src/cljs/metafacture_playground/views.cljs | 39 +++++++++++-------- .../event_handler_test.cljs | 13 ++++--- 5 files changed, 61 insertions(+), 27 deletions(-) diff --git a/src/cljs/metafacture_playground/db.cljs b/src/cljs/metafacture_playground/db.cljs index a16224e..0045b88 100644 --- a/src/cljs/metafacture_playground/db.cljs +++ b/src/cljs/metafacture_playground/db.cljs @@ -24,7 +24,9 @@ :details nil :show-details? false :type nil} - :ui {:height nil}}) + :ui {:height nil + :dropdown {:active-item nil + :open? false}}}) (defn- parseBoolean [val] (if (= val "true") @@ -53,4 +55,5 @@ :content str} :message {:content str :type keyword} - :ui {:height parseBoolean}}) + :ui {:height parseBoolean + :dropdown {:active-item str}}}) diff --git a/src/cljs/metafacture_playground/events.cljs b/src/cljs/metafacture_playground/events.cljs index 46c6b02..667adfd 100644 --- a/src/cljs/metafacture_playground/events.cljs +++ b/src/cljs/metafacture_playground/events.cljs @@ -157,15 +157,28 @@ ::edit-input-value edit-value) +(defn open-dropdown + [{db :db} [_ status]] + {:db (assoc-in db [:ui :dropdown :open?] status)}) + +(re-frame/reg-event-fx + ::open-dropdown + open-dropdown) + (defn load-sample - [{db :db} [_ sample]] - {:db (assoc db :result nil) + [{db :db} [_ dropdown-value sample]] + {:db (-> db + (assoc :result nil) + (assoc-in [:ui :dropdown :active-item] dropdown-value)) :dispatch-n (conj (mapv (fn [editor] [::edit-input-value editor (get sample editor "")]) [:data :flux :fix :morph]) - [::switch-editor (:active-editor sample)])}) + [::switch-editor (:active-editor sample)]) + :storage/set {:session? true + :name (->storage-key [:ui :dropdown :active-item]) + :value dropdown-value}}) (re-frame/reg-event-fx ::load-sample diff --git a/src/cljs/metafacture_playground/subs.cljs b/src/cljs/metafacture_playground/subs.cljs index 9041988..d55a4bf 100644 --- a/src/cljs/metafacture_playground/subs.cljs +++ b/src/cljs/metafacture_playground/subs.cljs @@ -21,6 +21,16 @@ (fn [db _] (get-in db [:message :show-details?]))) +(re-frame/reg-sub + ::dropdown-active-item + (fn [db _] + (get-in db [:ui :dropdown :active-item]))) + +(re-frame/reg-sub + ::dropdown-open? + (fn [db _] + (get-in db [:ui :dropdown :open?]))) + (defn- display-name [str] (clj-str/replace str "_" " ")) diff --git a/src/cljs/metafacture_playground/views.cljs b/src/cljs/metafacture_playground/views.cljs index b4106b4..d126582 100644 --- a/src/cljs/metafacture_playground/views.cljs +++ b/src/cljs/metafacture_playground/views.cljs @@ -45,8 +45,6 @@ (def menu (component "Menu")) (def menu-item (component "Menu" "Item")) (def dropdown (component "Dropdown")) -(def dropdown-menu (component "Dropdown" "Menu")) -(def dropdown-item (component "Dropdown" "Item")) ;;; Using monaco editor react component @@ -184,21 +182,28 @@ (defn examples-dropdown [] [:> button-group {:color color - :basic true} - [:> dropdown - {:className "icon" - :button true - :icon "code" - :labeled true - :text "Load example"} - [:> dropdown-menu - (for [[k {:keys [display-name value]}] @(re-frame/subscribe [::subs/examples])] - ^{:key k} - [:> dropdown-item - {:key k - :text display-name - :value display-name - :on-click #(re-frame/dispatch [::events/load-sample value])}])]]]) + :basic true} + (let [dropdown-value (re-frame/subscribe [::subs/dropdown-active-item]) + dropdown-open? (re-frame/subscribe [::subs/dropdown-open?])] + [:> dropdown + {:className "icon" + :button true + :labeled true + :search true + :placeholder "Load example" + :value (or @dropdown-value "") + :open @dropdown-open? + :options (mapv + (fn [[k {:keys [display-name value]}]] + {:key k + :text display-name + :value display-name + :active (= display-name @dropdown-value) + :selected (= display-name @dropdown-value) + :onClick #(re-frame/dispatch [::events/load-sample display-name value])}) + @(re-frame/subscribe [::subs/examples])) + :on-blur #(re-frame/dispatch [::events/open-dropdown false]) + :on-click #(re-frame/dispatch [::events/open-dropdown (not @dropdown-open?)])}])]) (defn process-button [] (let [data (re-frame/subscribe [::subs/field-value :data]) diff --git a/test/cljs/metafacture_playground/event_handler_test.cljs b/test/cljs/metafacture_playground/event_handler_test.cljs index 6a7a6d6..a121c8e 100644 --- a/test/cljs/metafacture_playground/event_handler_test.cljs +++ b/test/cljs/metafacture_playground/event_handler_test.cljs @@ -80,13 +80,16 @@ (deftest load-sample-test (testing "Test loading sample" (rf-test/run-test-sync - (re-frame/dispatch [::events/load-sample sample-data]) - (and (= (is @(re-frame/subscribe [::subs/field-value :data]) + (re-frame/dispatch [::events/load-sample "sample data" sample-data]) + (and (is (= @(re-frame/subscribe [::subs/field-value :data]) (:data sample-data))) - (= (is @(re-frame/subscribe [::subs/field-value :flux]) + (is (= @(re-frame/subscribe [::subs/field-value :flux]) (:flux sample-data))) - (= (is @(re-frame/subscribe [::subs/field-value :fix]) - (:fix sample-data))))))) + (is (= @(re-frame/subscribe [::subs/field-value :fix]) + (:fix sample-data))) + (is (not @(re-frame/subscribe [::subs/dropdown-open?]))) + (is (= @(re-frame/subscribe [::subs/dropdown-active-item]) + "sample data")))))) (deftest clear-all-test