Skip to content

Commit

Permalink
Refine the way themes apply to parts
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Jul 26, 2024
1 parent 3ff11b2 commit e779a08
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 78 deletions.
35 changes: 20 additions & 15 deletions src/re_com/dropdown.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,13 +227,12 @@
{:name :base-theme
:description "alpha"}]))

(defn anchor [{:keys [label placeholder state theme transition!]}]
[:span (theme/props {:state state :part ::anchor :transition! transition!} theme)
(defn anchor [{:keys [label placeholder style class attr transition!]}]
[:span (merge {:style style :class class} attr)
(or label placeholder)])

(defn backdrop [{:keys [state transition!]}]
(fn [{:keys [dropdown-open? state theme parts]}]
[:div (theme/props {:transition! transition! :state state :part ::backdrop} theme)]))
(defn backdrop [{:keys [attr class style state transition!]}]
[:div (merge {:style style :class class} attr)])

(defn nearest [x a b]
(if (< (Math/abs (- a x)) (Math/abs (- b x))) a b))
Expand Down Expand Up @@ -361,12 +360,16 @@
:exit (js/setTimeout (fn [] (reset! transitionable :out)) 50)))
theme (theme/defaults
args
{:user [(theme/<-props (merge args {:height anchor-height
:width (or width anchor-width)})
{:user [(theme/<-props (merge args
(when anchor-height {:height anchor-height})
(when width {:width width})
(when anchor-width {:width anchor-width}))
{:part ::anchor-wrapper
:exclude [:max-height :min-height]})
(theme/<-props (merge args {:height (or height body-height)
:width (or width body-width)})
(theme/<-props (merge args
(when height {:height height})
(when body-height {:height body-height})
(when body-width {:width body-width}))
{:part ::body-wrapper
:include [:width :height :min-width
:min-height :max-height]})
Expand All @@ -391,15 +394,17 @@
{:src (at)
:children
[(when (= :open (:openable state))
[u/part backdrop part-props re-com.dropdown/backdrop])
[u/part backdrop
(themed ::backdrop part-props)
:default re-com.dropdown/backdrop])
[h-box
(themed ::anchor-wrapper
{:src (at)
:attr {:ref anchor-ref!}
:children [[u/part anchor part-props re-com.dropdown/anchor]
:children [[u/part anchor (themed ::anchor part-props) :default re-com.dropdown/anchor]
[gap :size "1"]
[gap :size "5px"]
[u/part indicator part-props re-com.dropdown/indicator]]})]
[u/part indicator part-props :default re-com.dropdown/indicator]]})]
(when (= :open (:openable state))
[body-wrapper {:anchor-ref anchor-ref
:popover-ref popover-ref
Expand All @@ -408,9 +413,9 @@
:parts parts
:state state
:theme theme}
[u/part body-header part-props]
[u/part body part-props]
[u/part body-footer part-props]])]})])))))
[u/part body-header (themed ::body-header part-props)]
[u/part body (themed ::body part-props)]
[u/part body-footer (themed ::body-footer part-props)]])]})])))))

(defn- move-to-new-choice
"In a vector of maps (where each map has an :id), return the id of the choice offset posititions away
Expand Down
13 changes: 7 additions & 6 deletions src/re_com/error_modal.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,31 +134,32 @@
[:<>
(when action
[u/part heading
(themed ::sub-title-2 {:label action :level :level2})
(themed ::sub-title-2 {:label action :level :level2}) :default
text/title])
(when instructions
[text/p instructions])
(when what-happened
[:<>
[u/part heading
(themed ::sub-title-2 {:label what-happened-title :level :level3}) text/title]
(themed ::sub-title-2 {:label what-happened-title :level :level3}) :default text/title]
[u/part what-happened args]])

(when implications
[:<>
[u/part heading
(themed ::sub-title {:label implications-title :level :level3}) text/title]
[u/part implications args]])
(themed ::sub-title {:label implications-title :level :level3}) :default text/title]
[u/part implications args :default]])

(when what-to-do
[:<>
[u/part heading (themed ::sub-title {:label what-to-do-title :level :level3}) text/title]
[u/part heading (themed ::sub-title {:label what-to-do-title :level :level3}) :default text/title]
[u/part what-to-do args]])]

(when (or details error context)
[:<>
[u/part heading
(themed ::sub-title {:label details-title :level :level4}) [:strong {:style {:font-size "12px"}} details-title]]
(themed ::sub-title {:label details-title :level :level4})
:default [:strong {:style {:font-size "12px"}} details-title]]
[u/part details args]
[u/part error (themed ::error args)]
[u/part context (themed ::context args)]])
Expand Down
16 changes: 8 additions & 8 deletions src/re_com/nested_grid.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,7 +413,7 @@
(-> {:style {:grid-column (path->grid-line-name column-path)
:grid-row (path->grid-line-name row-path)}}
(theme/apply {:state {:edge edge} :part ::cell-wrapper} theme))
[u/part cell props cell-part]]))
[u/part cell props :default cell-part]]))

(defn header-label [{:keys [path]}]
(let [header (last path)]
Expand Down Expand Up @@ -441,7 +441,7 @@
:position "relative"}}
[:div (theme/apply {} {:state {:edge edge} :part ::column-header-wrapper}
theme)
[u/part column-header props column-header-part]]
[u/part column-header props :default column-header-part]]
(when (and resize-columns? show?)
[resize-button (merge props {:dimension :column
:path column-path})])])
Expand All @@ -465,7 +465,7 @@
[:div (theme/apply {}
{:state {:edge edge} :part ::row-header-wrapper}
theme)
[u/part row-header props row-header-part]]
[u/part row-header props :default row-header-part]]
(when (and resize-rows? show?)
[resize-button (merge props {:dimension :row
:path row-path})])])
Expand Down Expand Up @@ -560,7 +560,7 @@
:grid-row (inc y)}}
(theme/apply {:state {:edge edge} :part ::header-spacer} theme))]
[:div props
[u/part header-spacer props header-spacer-part]]))
[u/part header-spacer props :default header-spacer-part]]))

(defn scroll-container [{:keys [scroll-top scroll-left width height style]} child]
[:div {:style (merge {:max-height height
Expand Down Expand Up @@ -846,7 +846,7 @@
(section-left? path) (conj :column-section-left)
(section-right? path) (conj :column-section-right))}]]
^{:key [::column (or path (gensym))]}
[u/part column-header-wrapper props column-header-wrapper-part]))
[u/part column-header-wrapper props :default column-header-wrapper-part]))
row-header-cells (doall
(for [path row-paths
:let [props {:row-path path
Expand All @@ -868,7 +868,7 @@
(root-level? path row-paths) (conj :left)
(leaf-level? path row-paths) (conj :right))}]]
^{:key [::row (or path (gensym))]}
[u/part row-header-wrapper props row-header-wrapper-part]))
[u/part row-header-wrapper props :default row-header-wrapper-part]))
header-spacer-cells (for [y (range column-depth)
x (range row-depth)
:let [props {:theme theme
Expand All @@ -881,7 +881,7 @@
(= y (dec column-depth)) (conj :bottom)
(= x (dec row-depth)) (conj :right))}]]
^{:key [::header-spacer x y]}
[u/part header-spacer-wrapper props header-spacer-wrapper-part])
[u/part header-spacer-wrapper props :default header-spacer-wrapper-part])
cells (doall
(for [row-path showing-row-paths]
(doall
Expand All @@ -900,7 +900,7 @@
(when cell-value
{:cell-value cell-value}))]]
^{:key [::cell-wrapper (or [column-path row-path] (gensym))]}
[u/part cell-wrapper props cell-wrapper-part]))))
[u/part cell-wrapper props :default cell-wrapper-part]))))
zebra-stripes (for [i (filter even? (range 1 (inc (count row-paths))))]
^{:key [::zebra-stripe i]}
[:div
Expand Down
29 changes: 15 additions & 14 deletions src/re_com/theme/default.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,25 +91,25 @@
(str sm-2 " auto #ddd"))
:outline-offset (str "-" sm-2)
:position "relative"
#_#_:display "block"
#_#_:display "block"
:overflow "hidden"
:user-select "none"
#_#_:width "100%"
#_#_:width "100%"
:z-index (case (:openable state)
:open 20 nil)}}

::dropdown/backdrop
{:class "noselect"
:on-click #(do (transition! :close)
(transition! :blur))
:style {:position "fixed"
:left "0px"
:top "0px"
:width "100%"
:height "100%"
#_#_:pointer-events "none"
:z-index (case (:openable state)
:open 10 nil)}}
{:class "noselect"
:attr {:on-click #(do (transition! :close)
(transition! :blur))}
:style {:position "fixed"
:left "0px"
:top "0px"
:width "100%"
:height "100%"
#_#_:pointer-events "none"
:z-index (case (:openable state)
:open 10 nil)}}

::dropdown/body-wrapper
{:ref (:ref state)
Expand Down Expand Up @@ -176,7 +176,8 @@
::dropdown/anchor-wrapper
(let [open? (= :open (:openable state))
closed? (= :closed (:openable state))]
{:style {:background-color (:white $)
{:align :center
:style {:background-color (:white $)
:background-clip "padding-box"
:border (str "1px solid "
(cond
Expand Down
37 changes: 19 additions & 18 deletions src/re_com/tree_select.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,7 @@
:children
(into
(vec (repeat level [gap :size "10px"]))
[[u/part choice props re-com.tree-select/choice]
[[u/part choice props :default re-com.tree-select/choice]
[gap :size "1"]
(when (and show-only-button? @hover?) [solo-button props])])]))))

Expand Down Expand Up @@ -361,7 +361,7 @@
:class (str "rc-tree-select-expander " (get-in parts [:expander :class]))
:child
[u/triangle {:direction (if open? :down :right)}]]
[u/part re-com.tree-select/group-item props re-com.tree-select/group-item]
[u/part re-com.tree-select/group-item props :default re-com.tree-select/group-item]
[gap :size "1"]
(when (and show-only-button? @hover?) [solo-button props])])]))))

Expand Down Expand Up @@ -614,23 +614,24 @@
:group-label-fn group-label-fn})
on-reset (or on-reset (handler-fn (on-change #{} (deref-or-value expanded-groups))))]
[dd/dropdown

(themed ::dropdown
{:label (if label
[u/part label {:model (deref-or-value model)
:state state
:placeholder placeholder
:label-fn label-fn
:group-label-fn group-label-fn
:labelable-items labelable-items
:id-fn id-fn}]
(when anchor-label
[:span {:title (alt-text-fn {:items labelable-items
:label-fn label-fn
:group-label-fn group-label-fn})
:style {:white-space "nowrap"
:overflow "hidden"
:text-overflow "ellipsis"}}
anchor-label]))
{:label (cond label
[u/part label {:model (deref-or-value model)
:state state
:placeholder placeholder
:label-fn label-fn
:group-label-fn group-label-fn
:labelable-items labelable-items
:id-fn id-fn}]
anchor-label
[:span {:title (alt-text-fn {:items labelable-items
:label-fn label-fn
:group-label-fn group-label-fn})
:style {:white-space "nowrap"
:overflow "hidden"
:text-overflow "ellipsis"}}
anchor-label])
:placeholder placeholder
:indicator (fn [props]
[h-box
Expand Down
4 changes: 2 additions & 2 deletions src/re_com/util.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,12 +241,12 @@

(def hiccup? vector?)

(defn part [x props & [default]]
(defn part [x props & {:keys [default]}]
(cond
(string? x) x
(hiccup? x) x
(ifn? x) [x props]
default (part default props)
default [part default props]
:else nil))

(defn themed-part [x props & [default]]
Expand Down
30 changes: 16 additions & 14 deletions src/re_demo/dropdown.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,20 +43,22 @@
: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 %)}]
(merge
{#_:anchor #_(fn [{:keys [state label] :as props}]
(str "the " label " is " (:openable state) " ;)"))
#_#_:parts {:backdrop {:style {:background-color "blue"}}}
:label "dropdown"
:body [:div "Hello World!"]
:model model
:width (some-> @width px)}
(when @height {:height (px @height)})
{: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"
Expand Down
2 changes: 1 addition & 1 deletion src/re_demo/tree_select.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@
:on-change (fn [] (swap! choice-disabled-fn
(fn [x]
(if x nil #(contains? (set (:group %)) :australia)))))]]]
[prop-slider {:prop width :id :width :default 212 :default-on? false}]
[prop-slider {:prop width :id :width :default 212 :default-on? true}]
[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}]
Expand Down

0 comments on commit e779a08

Please sign in to comment.