Add visibility of active dropdown item (#25)

metafacture · Jan 18, 2022 · 5a40c6f · 5a40c6f
1 parent 38c1eeb
commit 5a40c6f
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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