Skip to content

Commit 9249a83

Browse files
kimo-kkimo-k
committed
[dropdown] Add polish & documentation
1 parent 111871c commit 9249a83

File tree

7 files changed

+344
-105
lines changed

7 files changed

+344
-105
lines changed

‎.cljfmt.edn‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
{:extra-indents {re-com.theme/apply [[:inner 0]]
2-
themed [[:inner 0]]}}
1+
{:extra-indents {re-com.theme/apply [[:inner 0]]
2+
themed [[:inner 0]]
3+
re-com.theme/<-props [[:inner 0]]}}

‎src/re_com/dropdown.cljs‎

Lines changed: 234 additions & 84 deletions
Large diffs are not rendered by default.

‎src/re_com/theme.cljs‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
(ns re-com.theme
2-
(:refer-clojure :exclude [apply])
2+
(:refer-clojure :exclude [apply merge])
33
(:require
44
[reagent.core :as r]
55
[re-com.theme.util :as tu]
@@ -28,19 +28,21 @@
2828
(let [result (theme props ctx)]
2929
(if (vector? result) result [result ctx])))
3030

31+
(defn merge [a {:keys [base main user main-variables user-variables base-variables] :as b}]
32+
(cond-> a
33+
base-variables (assoc :base-variables base-variables)
34+
main-variables (assoc :main-variables main-variables)
35+
user-variables (update :user-variables conj user-variables)
36+
base (assoc :base base)
37+
main (assoc :main main)
38+
user (update :user conj user)))
39+
3140
(defn apply
3241
([props ctx themes]
3342
(->>
3443
(if-not (map? themes)
3544
(update @registry :user conj themes)
36-
(let [{:keys [base main user main-variables user-variables base-variables]} themes]
37-
(cond-> @registry
38-
base-variables (assoc :base-variables base-variables)
39-
main-variables (assoc :main-variables main-variables)
40-
user-variables (update :user-variables conj user-variables)
41-
base (assoc :base base)
42-
main (assoc :main main)
43-
user (update :user conj user))))
45+
(merge @registry themes))
4446
named->vec
4547
flatten
4648
(remove nil?)
@@ -49,3 +51,27 @@
4951

5052
(defn props [ctx themes]
5153
(apply {} ctx themes))
54+
55+
(defn remove-keys [m ks]
56+
(select-keys m (remove (set ks) (keys m))))
57+
58+
(defn <-props [outer-props
59+
& {:keys [part exclude include]
60+
:or {include [:style :attr :class
61+
:width :min-width :max-width
62+
:height :min-height :max-height]
63+
exclude []}}]
64+
(fn [props ctx _]
65+
(let [outer-style-keys [:width :min-width :max-width
66+
:height :max-height :min-width :min-height]
67+
outer-attr-keys [:tab-index]
68+
outer-props (cond-> outer-props
69+
(seq include) (select-keys include)
70+
(seq exclude) (remove-keys exclude))]
71+
(cond-> props
72+
(= part (:part ctx))
73+
(-> (merge-props (remove-keys outer-props (concat outer-style-keys outer-attr-keys)))
74+
(update :style clojure.core/merge
75+
(select-keys outer-props outer-style-keys))
76+
(update :attr clojure.core/merge
77+
(select-keys outer-props outer-attr-keys)))))))

‎src/re_com/theme/default.cljs‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
(ns re-com.theme.default
22
(:require
33
[clojure.string :as str]
4+
[re-com.util :as ru :refer [px]]
45
[re-com.theme.util :refer [merge-props]]
56
[re-com.dropdown :as-alias dropdown]
67
[re-com.nested-grid :as-alias nested-grid]
@@ -68,6 +69,7 @@
6869

6970
::dropdown/anchor-wrapper
7071
{:attr {:tab-index (or (:tab-index state) 0)
72+
:on-click #(transition! :toggle)
7173
:on-blur #(do (transition! :blur)
7274
(transition! :exit))}
7375
:style {:outline (when (and (= :focused (:focusable state))
@@ -96,9 +98,13 @@
9698
:open 99998 nil)}}
9799

98100
::dropdown/body-wrapper
99-
{:style {:position "absolute"
101+
{:ref (:ref state)
102+
:style {:position "absolute"
103+
:top (px (:top state))
104+
:left (px (:left state))
100105
:overflow-y "auto"
101-
:overflow-x "visible"}}
106+
:overflow-x "visible"
107+
:z-index 99999}}
102108

103109
::nested-grid/cell-grid-container
104110
{:style {:position "relative"
@@ -166,7 +172,7 @@
166172
:color (:neutral $)
167173
:height md-2
168174
:line-height md-2
169-
:padding "0 0 0 8px"
175+
:padding "0 8px 0 8px"
170176
:text-decoration "none"
171177
:white-space "nowrap"
172178
:transition "border 0.2s box-shadow 0.2s"}})
@@ -253,7 +259,7 @@
253259
:text-overflow "ellipsis"}}
254260

255261
::tree-select/dropdown-anchor
256-
{:style {:padding "0 8px 0 0"
262+
{:style {:padding "0 0 0 0"
257263
:overflow "hidden"
258264
:color foreground
259265
:cursor (if (-> state :enable (= :disabled))

‎src/re_com/theme/util.cljs‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@
1111
(every? vector? ms) (reduce into ms)
1212
:else (last ms))))
1313

14+
(merge-props {:class "a" :style {:b 1}}
15+
{:class "x" :style {:width 2} :width 200 :ref :REF})
16+
1417
(defn parts [part->props]
15-
(fn [props {:keys [part]}]
16-
(if-let [v (or (get part->props part)
17-
(get part->props (keyword (name part))))]
18-
(merge-props props v)
19-
props)))
18+
(fn [props {:keys [part]}]
19+
(if-let [v (or (get part->props part)
20+
(get part->props (keyword (name part))))]
21+
(merge-props props v)
22+
props)))
2023

2124
(defn args [{:keys [attr class style]}]
2225
(fn [props _]

‎src/re_demo/core.cljs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
[re-demo.hyperlink :as hyperlink]
3333
[re-demo.hyperlink-href :as hyperlink-href]
3434
[re-demo.dropdowns :as dropdowns]
35+
[re-demo.dropdown :as dropdown]
3536
[re-demo.alert-box :as alert-box]
3637
[re-demo.alert-list :as alert-list]
3738
[re-demo.tabs :as tabs]
@@ -85,13 +86,14 @@
8586
{:id :time :level :minor :label "Input Time" :panel input-time/panel}
8687

8788
{:id :selection :level :major :label "Selection"}
88-
{:id :dropdown :level :minor :label "Dropdown" :panel dropdowns/panel}
89+
{:id :single-dropdown :level :minor :label "Dropdown" :panel dropdowns/panel}
8990
{:id :lists :level :minor :label "Selection List" :panel selection-list/panel}
9091
{:id :multi-select :level :minor :label "Multi-select List" :panel multi-select/panel}
9192
{:id :tag-dropdown :level :minor :label "Tag Dropdown" :panel tag-dropdown/panel}
9293
{:id :tree-select :level :minor :label "Tree-select" :panel tree-select/panel}
9394
{:id :tabs :level :minor :label "Tabs" :panel tabs/panel}
9495
{:id :typeahead :level :minor :label "Typeahead" :panel typeahead/panel}
96+
{:id :generic-dropdown :level :minor :label "Generic Dropdown" :panel dropdown/panel}
9597

9698
{:id :tables :level :major :label "Tables"}
9799
{:id :simple-v-table :level :minor :label "Simple V-table" :panel simple-v-table/panel}

‎src/re_demo/dropdown.cljs‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
(ns re-demo.dropdown
2+
(:require-macros
3+
[re-com.core :refer []])
4+
(:require
5+
[re-com.core :refer [at h-box v-box single-dropdown label hyperlink-href p p-span]]
6+
[re-com.dropdown :refer [dropdown-parts-desc dropdown-args-desc dropdown]]
7+
[re-demo.utils :refer [panel-title title2 parts-table args-table status-text]]
8+
[reagent.core :as reagent]))
9+
10+
(def model (reagent/atom false))
11+
12+
(defn panel*
13+
[]
14+
(fn []
15+
[v-box :src (at) :size "auto" :gap "10px"
16+
:children
17+
[[panel-title "[dropdown ... ]"
18+
"src/re_com/dropdown.cljs"
19+
"src/re_demo/dropdown.cljs"]
20+
[h-box :src (at) :gap "100px"
21+
:children
22+
[[v-box :src (at) :gap "10px" :width "450px"
23+
:children
24+
[[title2 "Notes"]
25+
[status-text "Alpha" {:color "red"}]
26+
[p-span "A generic dropdown component. You pass in your own components for "
27+
[:code ":anchor"] " and " [:code ":body"] "."]
28+
[p-span [:code ":dropdown"] " provides: "]
29+
[:ul
30+
[:li "state management (" [:span {:style {:color "red"}} "alpha!"] ") for opening and closing"]
31+
[:li "dynamically positioned container elements"]]
32+
[args-table dropdown-args-desc]]]
33+
[v-box :src (at) :width "700px" :gap "10px"
34+
:children
35+
[[title2 "Demo"]
36+
[dropdown
37+
{:anchor (fn [{:keys [state]}]
38+
[:div "I am " (:openable state) " ;)"])
39+
#_#_:parts {:backdrop {:style {:background-color "blue"}}}
40+
:body [:div "Hello World!"]
41+
:model model
42+
:min-width "300px"
43+
:max-height "300px"
44+
:min-height "200px"
45+
:on-change #(reset! model %)}]]]]]
46+
[parts-table "dropdown" dropdown-parts-desc]]]))
47+
48+
;; core holds a reference to panel, so need one level of indirection to get figwheel updates
49+
(defn panel
50+
[]
51+
[panel*])

0 commit comments

Comments
 (0)