[dropdown] Add polish & documentation

Author: kimo-k

.cljfmt.edn

@@ -1,2 +1,3 @@
-{:extra-indents {re-com.theme/apply [[:inner 0]]
-                 themed             [[:inner 0]]}}
+{:extra-indents {re-com.theme/apply   [[:inner 0]]
+                 themed               [[:inner 0]]
+                 re-com.theme/<-props [[:inner 0]]}}

src/re_com/dropdown.cljs

@@ -1,5 +1,5 @@
 (ns re-com.theme
-  (:refer-clojure :exclude [apply])
+  (:refer-clojure :exclude [apply merge])
   (:require
    [reagent.core :as r]
    [re-com.theme.util :as tu]
@@ -28,19 +28,21 @@
   (let [result (theme props ctx)]
     (if (vector? result) result [result ctx])))
 
+(defn merge [a {:keys [base main user main-variables user-variables base-variables] :as b}]
+  (cond-> a
+    base-variables (assoc  :base-variables      base-variables)
+    main-variables (assoc  :main-variables      main-variables)
+    user-variables (update :user-variables conj user-variables)
+    base           (assoc  :base                base)
+    main           (assoc  :main                main)
+    user           (update :user           conj user)))
+
 (defn apply
   ([props ctx themes]
    (->>
     (if-not (map? themes)
       (update @registry :user conj themes)
-      (let [{:keys [base main user main-variables user-variables base-variables]} themes]
-        (cond-> @registry
-          base-variables (assoc  :base-variables      base-variables)
-          main-variables (assoc  :main-variables      main-variables)
-          user-variables (update :user-variables conj user-variables)
-          base           (assoc  :base                base)
-          main           (assoc  :main                main)
-          user           (update :user           conj user))))
+      (merge @registry themes))
     named->vec
     flatten
     (remove nil?)
@@ -49,3 +51,27 @@
 
 (defn props [ctx themes]
   (apply {} ctx themes))
+
+(defn remove-keys [m ks]
+  (select-keys m (remove (set ks) (keys m))))
+
+(defn <-props [outer-props
+               & {:keys [part exclude include]
+                  :or   {include [:style :attr :class
+                                  :width :min-width :max-width
+                                  :height :min-height :max-height]
+                         exclude []}}]
+  (fn [props ctx _]
+    (let [outer-style-keys [:width  :min-width :max-width
+                            :height :max-height :min-width :min-height]
+          outer-attr-keys  [:tab-index]
+          outer-props      (cond-> outer-props
+                             (seq include) (select-keys include)
+                             (seq exclude) (remove-keys exclude))]
+      (cond-> props
+        (= part (:part ctx))
+        (-> (merge-props (remove-keys outer-props (concat outer-style-keys outer-attr-keys)))
+            (update :style clojure.core/merge
+                    (select-keys outer-props outer-style-keys))
+            (update :attr clojure.core/merge
+                    (select-keys outer-props outer-attr-keys)))))))

src/re_com/theme.cljs

@@ -1,6 +1,7 @@
 (ns re-com.theme.default
   (:require
    [clojure.string :as str]
+   [re-com.util :as ru :refer [px]]
    [re-com.theme.util :refer [merge-props]]
    [re-com.dropdown :as-alias dropdown]
    [re-com.nested-grid :as-alias nested-grid]
@@ -68,6 +69,7 @@
 
          ::dropdown/anchor-wrapper
          {:attr  {:tab-index (or (:tab-index state) 0)
+                  :on-click  #(transition! :toggle)
                   :on-blur   #(do (transition! :blur)
                                   (transition! :exit))}
           :style {:outline        (when (and (= :focused (:focusable state))
@@ -96,9 +98,13 @@
                                            :open 99998 nil)}}
 
          ::dropdown/body-wrapper
-         {:style {:position   "absolute"
+         {:ref   (:ref state)
+          :style {:position   "absolute"
+                  :top        (px (:top state))
+                  :left       (px (:left state))
                   :overflow-y "auto"
-                  :overflow-x "visible"}}
+                  :overflow-x "visible"
+                  :z-index    99999}}
 
          ::nested-grid/cell-grid-container
          {:style {:position        "relative"
@@ -166,7 +172,7 @@
                     :color            (:neutral $)
                     :height           md-2
                     :line-height      md-2
-                    :padding          "0 0 0 8px"
+                    :padding          "0 8px 0 8px"
                     :text-decoration  "none"
                     :white-space      "nowrap"
                     :transition       "border 0.2s box-shadow 0.2s"}})
@@ -253,7 +259,7 @@
                   :text-overflow    "ellipsis"}}
 
          ::tree-select/dropdown-anchor
-         {:style {:padding  "0 8px 0 0"
+         {:style {:padding  "0 0 0 0"
                   :overflow "hidden"
                   :color    foreground
                   :cursor   (if (-> state :enable (= :disabled))

src/re_com/theme/default.cljs

@@ -11,12 +11,15 @@
       (every? vector? ms) (reduce into ms)
       :else (last ms))))
 
+(merge-props {:class "a" :style {:b 1}}
+             {:class "x" :style {:width 2} :width 200 :ref :REF})
+
 (defn parts [part->props]
-      (fn [props {:keys [part]}]
-          (if-let [v (or (get part->props part)
-                         (get part->props (keyword (name part))))]
-                  (merge-props props v)
-                  props)))
+  (fn [props {:keys [part]}]
+    (if-let [v (or (get part->props part)
+                   (get part->props (keyword (name part))))]
+      (merge-props props v)
+      props)))
 
 (defn args [{:keys [attr class style]}]
   (fn [props _]

src/re_com/theme/util.cljs

@@ -32,6 +32,7 @@
             [re-demo.hyperlink             :as    hyperlink]
             [re-demo.hyperlink-href        :as    hyperlink-href]
             [re-demo.dropdowns             :as    dropdowns]
+            [re-demo.dropdown              :as    dropdown]
             [re-demo.alert-box             :as    alert-box]
             [re-demo.alert-list            :as    alert-list]
             [re-demo.tabs                  :as    tabs]
@@ -85,13 +86,14 @@
    {:id :time                   :level :minor :label "Input Time"         :panel input-time/panel}
 
    {:id :selection              :level :major :label "Selection"}
-   {:id :dropdown               :level :minor :label "Dropdown"           :panel dropdowns/panel}
+   {:id :single-dropdown        :level :minor :label "Dropdown"           :panel dropdowns/panel}
    {:id :lists                  :level :minor :label "Selection List"     :panel selection-list/panel}
    {:id :multi-select           :level :minor :label "Multi-select List"  :panel multi-select/panel}
    {:id :tag-dropdown           :level :minor :label "Tag Dropdown"       :panel tag-dropdown/panel}
    {:id :tree-select            :level :minor :label "Tree-select"        :panel tree-select/panel}
    {:id :tabs                   :level :minor :label "Tabs"               :panel tabs/panel}
    {:id :typeahead              :level :minor :label "Typeahead"          :panel typeahead/panel}
+   {:id :generic-dropdown        :level :minor :label "Generic Dropdown"   :panel dropdown/panel}
 
    {:id :tables                 :level :major :label "Tables"}
    {:id :simple-v-table         :level :minor :label "Simple V-table"     :panel simple-v-table/panel}

src/re_demo/core.cljs

@@ -0,0 +1,51 @@
+(ns re-demo.dropdown
+  (:require-macros
+   [re-com.core     :refer []])
+  (:require
+   [re-com.core     :refer [at h-box v-box single-dropdown label hyperlink-href p p-span]]
+   [re-com.dropdown :refer [dropdown-parts-desc dropdown-args-desc dropdown]]
+   [re-demo.utils   :refer [panel-title title2 parts-table args-table status-text]]
+   [reagent.core    :as    reagent]))
+
+(def model (reagent/atom false))
+
+(defn panel*
+  []
+  (fn []
+    [v-box :src (at) :size "auto" :gap "10px"
+     :children
+     [[panel-title "[dropdown ... ]"
+       "src/re_com/dropdown.cljs"
+       "src/re_demo/dropdown.cljs"]
+      [h-box :src (at) :gap "100px"
+       :children
+       [[v-box :src (at) :gap "10px" :width "450px"
+         :children
+         [[title2 "Notes"]
+          [status-text "Alpha" {:color "red"}]
+          [p-span "A generic dropdown component. You pass in your own components for "
+           [:code ":anchor"] " and " [:code ":body"] "."]
+          [p-span [:code ":dropdown"] " provides: "]
+          [:ul
+           [:li "state management (" [:span {:style {:color "red"}} "alpha!"] ") for opening and closing"]
+           [:li "dynamically positioned container elements"]]
+          [args-table dropdown-args-desc]]]
+        [v-box :src (at) :width "700px" :gap "10px"
+         :children
+         [[title2 "Demo"]
+          [dropdown
+           {:anchor     (fn [{:keys [state]}]
+                          [:div "I am " (:openable state) " ;)"])
+            #_#_:parts      {:backdrop {:style {:background-color "blue"}}}
+            :body       [:div "Hello World!"]
+            :model      model
+            :min-width  "300px"
+            :max-height "300px"
+            :min-height "200px"
+            :on-change  #(reset! model %)}]]]]]
+      [parts-table "dropdown" dropdown-parts-desc]]]))
+
+;; core holds a reference to panel, so need one level of indirection to get figwheel updates
+(defn panel
+  []
+  [panel*])