Skip to content

Commit

Permalink
[dropdown] add :height, :body-height & :body-width props
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Jul 25, 2024
1 parent 04dd834 commit 3ff11b2
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 195 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

> Committed but unreleased changes are put here, at the top. Older releases are detailed chronologically below.
## 2.21.14 (2024-07-25)

#### Added

- `dropdown` - `:height`, `:body-height` & `:body-width` props

## 2.21.13 (2024-07-23)

#### Added
Expand Down
23 changes: 20 additions & 3 deletions src/re_com/dropdown.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,16 @@
:required false
:type "integer | string"
:validate-fn number-or-string?}
{:description "height of the :body-wrapper part"
:name :body-height
:required false
:type "integer | string"
:validate-fn number-or-string?}
{:description "width of the :body-wrapper part"
:name :body-width
:required false
:type "integer | string"
:validate-fn number-or-string?}
{:description "height of the :body-wrapper part"
:name :height
:required false
Expand All @@ -165,6 +175,11 @@
:required false
:type "integer | string"
:validate-fn number-or-string?}
{:description "height of the :body-wrapper part"
:name :width
:required false
:type "integer | string"
:validate-fn number-or-string?}
{:description "min-width of the :anchor-wrapper and :body-wrapper parts"
:name :min-width
:required false
Expand Down Expand Up @@ -311,11 +326,12 @@
(fn dropdown-render
[& {:keys [disabled? on-change tab-index direction
anchor-height anchor-width
body-height body-width
model
label placeholder
anchor backdrop body body-header body-footer indicator
parts theme main-theme theme-vars base-theme
width]
width height]
:or {placeholder "Select an item"
model default-model
direction :toward-center}
Expand Down Expand Up @@ -349,9 +365,10 @@
:width (or width anchor-width)})
{:part ::anchor-wrapper
:exclude [:max-height :min-height]})
(theme/<-props args
(theme/<-props (merge args {:height (or height body-height)
:width (or width body-width)})
{:part ::body-wrapper
:include [:width :min-width
:include [:width :height :min-width
:min-height :max-height]})
(theme/<-props args
{:part ::wrapper
Expand Down
99 changes: 65 additions & 34 deletions src/re_demo/dropdown.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,77 @@
(: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]))
[re-demo.utils :refer [panel-title title2 title3 parts-table args-table status-text prop-slider]]
[re-com.util :refer [px]]
[reagent.core :as r]))

(def model (reagent/atom false))
(def model (r/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"
(let [width (r/atom 200)
height (r/atom 200)
min-width (r/atom 200)
max-width (r/atom 200)
max-height (r/atom 200)
min-height (r/atom 200)
body-width (r/atom 200)
anchor-width (r/atom 200)]
(fn []
[v-box :src (at) :size "auto" :gap "10px"
:children
[[v-box :src (at) :gap "10px" :width "450px"
[[panel-title "[dropdown ... ]"
"src/re_com/dropdown.cljs"
"src/re_demo/dropdown.cljs"]
[h-box :src (at) :gap "100px"
: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]]]))
[[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
:width (some-> @width px)
:height (some-> @height px)
:min-width (some-> @min-width px)
:max-width (some-> @max-width px)
:max-height (some-> @max-height px)
:min-height (some-> @min-height px)
:body-width (some-> @body-width px)
:anchor-width (some-> @anchor-width px)
:on-change #(reset! model %)}]
[v-box :src (at)
:gap "10px"
:style {:min-width "550px"
:padding "15px"
:border-top "1px solid #DDD"
:background-color "#f7f7f7"}
:children [[title3 "Interactive Parameters" {:margin-top "0"}]
[v-box :src (at)
:gap "20px"
:children [[prop-slider {:prop width :id :width :default 212 :default-on? false}]
[prop-slider {:prop height :id :height :default 212 :default-on? false}]
[prop-slider {:prop min-width :id :min-width :default 212 :default-on? false}]
[prop-slider {:prop max-width :id :max-width :default 212 :default-on? false}]
[prop-slider {:prop min-height :id :min-height :default 212 :default-on? false}]
[prop-slider {:prop max-height :id :max-height :default 212 :default-on? false}]
[prop-slider {:prop body-width :id :body-width :default 212 :default-on? false}]
[prop-slider {:prop anchor-width :id :anchor-width :default 212 :default-on? false}]]]]]]]]]
[parts-table "dropdown" dropdown-parts-desc]]])))

;; core holds a reference to panel, so need one level of indirection to get figwheel updates
(defn panel
Expand Down
Loading

0 comments on commit 3ff11b2

Please sign in to comment.