diff --git a/src/re_com/alert.cljs b/src/re_com/alert.cljs index fd2b7e0c..2b345cb8 100644 --- a/src/re_com/alert.cljs +++ b/src/re_com/alert.cljs @@ -7,9 +7,10 @@ [re-com.close-button :refer [close-button]] [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value]] [re-com.validate :refer [string-or-hiccup? alert-type? alert-types-list - vector-of-maps? css-style? html-attr? parts?] :refer-macros [validate-args-macro]])) + vector-of-maps? css-style? css-class? html-attr? parts?] :refer-macros [validate-args-macro]])) ;;-------------------------------------------------------------------------------------------------- ;; Component: alert @@ -36,7 +37,7 @@ {:name :padding :required false :default "15px" :type "string" :validate-fn string? :description "padding surounding the alert"} {:name :closeable? :required false :default false :type "boolean" :description [:span "if true, render a close button. " [:code ":on-close"] " should be supplied"]} {:name :on-close :required false :type ":id -> nil" :validate-fn fn? :description [:span "called when the user clicks the close 'X' button. Passed the " [:code ":id"] " of the alert to close"]} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? alert-box-parts) :description "See Parts section below."} @@ -63,7 +64,7 @@ :warning "alert-warning" :danger "alert-danger"})] [:div - (merge {:class (str "rc-alert alert fade in " alert-class " " class) + (merge {:class (theme/merge-class "rc-alert" "alert" "fade in" "alert-class" class) :style (merge (flex-child-style "none") {:padding padding} style)} @@ -80,7 +81,7 @@ :attr (get-in parts [:heading :attr] {}) :children [[:h4 (merge - {:class (str "rc-alert-h4 " (get-in parts [:h4 :class])) + {:class (theme/merge-class "rc-alert-h4" (get-in parts [:h4 :class])) :style (merge {:margin-bottom "0px"} (get-in parts [:h4 :style]))} (get-in parts [:h4 :attr])) ;; Override h4 @@ -125,7 +126,7 @@ {:name :border-style :required false :default "1px solid lightgrey" :type "string" :validate-fn string? :description "CSS border style surrounding the list"} {:name :alert-class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to each alert-box component)"} {:name :alert-style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles (applies to each alert-box component)"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? alert-list-parts) :description "See Parts section below."} diff --git a/src/re_com/box.cljs b/src/re_com/box.cljs index 94b88363..7859b46f 100644 --- a/src/re_com/box.cljs +++ b/src/re_com/box.cljs @@ -370,7 +370,7 @@ {:name :align-self :required false :type "keyword" :validate-fn align-style? :description [:span "equivalent to CSS style " [:span.bold "align-self"] "." [:br] "Used when a child must override the parent's align-items setting."]} {:name :margin :required false :type "string" :validate-fn string? :description "a CSS margin style"} {:name :padding :required false :type "string" :validate-fn string? :description "a CSS padding style"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]} {:name :src :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging. Source code coordinates map containing keys" [:code ":file"] "and" [:code ":line"] ". See 'Debugging'."]} diff --git a/src/re_com/buttons.cljs b/src/re_com/buttons.cljs index 45573877..c6fc2dba 100644 --- a/src/re_com/buttons.cljs +++ b/src/re_com/buttons.cljs @@ -2,11 +2,13 @@ (:require-macros [re-com.core :refer [handler-fn at reflect-current-component]]) (:require + [re-com.theme :as theme] [re-com.util :refer [deref-or-value px]] [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] [re-com.validate :refer [position? position-options-list button-size? button-sizes-list - string-or-hiccup? css-style? html-attr? string-or-atom? parts?] :refer-macros [validate-args-macro]] + string-or-hiccup? css-class? css-style? html-attr? string-or-atom? parts?] + :refer-macros [validate-args-macro]] [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style]] [reagent.core :as reagent])) @@ -32,7 +34,7 @@ {:name :tooltip :required false :type "string | hiccup" :validate-fn string-or-hiccup? :description "what to show in the tooltip"} {:name :tooltip-position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :disabled? :required false :default false :type "boolean | atom" :description "if true, the user can't click the button"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles (applies to the button, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the button, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? button-parts) :description "See Parts section below."} @@ -112,7 +114,7 @@ {:name :tooltip-position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :emphasise? :required false :default false :type "boolean" :description "if true, use emphasised styling so the button really stands out"} {:name :disabled? :required false :default false :type "boolean" :description "if true, the user can't click the button"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the button, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the button, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? md-circle-icon-button-parts) :description "See Parts section below."} @@ -154,7 +156,11 @@ attr) [:i (merge - {:class (str "zmdi zmdi-hc-fw-rc " md-icon-name " rc-md-circle-icon-button-icon " (get-in parts [:icon :class])) + {:class (theme/merge-class "zmdi" + "zmdi-hc-fw-rc" + md-icon-name + "rc-md-circle-icon-button-icon" + (get-in parts [:icon :class])) :style (get-in parts [:icon :style] {})} (get-in parts [:icon :attr]))]]] [box @@ -200,7 +206,7 @@ {:name :tooltip-position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :emphasise? :required false :default false :type "boolean" :description "if true, use emphasised styling so the button really stands out"} {:name :disabled? :required false :default false :type "boolean" :description "if true, the user can't click the button"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the button, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the button, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? md-icon-button-parts) :description "See Parts section below."} @@ -242,7 +248,11 @@ attr) [:i (merge - {:class (str "zmdi zmdi-hc-fw-rc " md-icon-name " rc-md-icon-button-icon " (get-in parts [:icon :class])) + {:class (theme/merge-class "zmdi" + "zmdi-hc-fw-rc" + "md-icon-name" + "rc-md-icon-button-icon" + (get-in parts [:icon :class])) :style (get-in parts [:icon :style] {})} (get-in parts [:icon :attr]))]]] [box @@ -284,7 +294,7 @@ {:name :position :required false :default :right-below :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :width :required false :default "250px" :type "string" :validate-fn string? :description "width in px"} {:name :disabled? :required false :default false :type "boolean" :description "if true, the user can't click the button"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the button, not the popover wrapper)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the button, not the popover wrapper)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the button, not the popover wrapper)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the button, not the popover wrapper)"]} {:name :parts :required false :type "map" :validate-fn (parts? info-button-parts) :description "See Parts section below."} @@ -360,7 +370,7 @@ {:name :tooltip :required false :type "string | hiccup" :validate-fn string-or-hiccup? :description "what to show in the tooltip"} {:name :tooltip-position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :disabled? :required false :default false :type "boolean" :description "if true, the user can't click the button"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the button, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the button, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? row-button-parts) :description "See Parts section below."} @@ -396,7 +406,11 @@ attr) [:i (merge - {:class (str "zmdi zmdi-hc-fw-rc " md-icon-name " rc-row-button-icon " (get-in parts [:icon :class])) + {:class (theme/merge-class "zmdi" + "zmdi-hc-fw-rc" + md-icon-name + " rc-row-button-icon" + (get-in parts [:icon :class])) :style (get-in parts [:icon :style] {})} (get-in parts [:icon :attr]))]]] [box @@ -440,7 +454,7 @@ {:name :tooltip :required false :type "string | hiccup" :validate-fn string-or-hiccup? :description "what to show in the tooltip"} {:name :tooltip-position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :disabled? :required false :default false :type "boolean | r/atom" :description "if true, the user can't click the button"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the hyperlink, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the hyperlink, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the hyperlink, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the hyperlink, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? hyperlink-parts) :description "See Parts section below."} @@ -464,7 +478,8 @@ the-button [box :src (at) :align :start - :class (str "rc-hyperlink-container " (get-in parts [:container :class])) + :class (theme/merge-class "rc-hyperlink-container" + (get-in parts [:container :class])) :child [:a (merge {:class (str "noselect rc-hyperlink " class) @@ -523,7 +538,7 @@ {:name :tooltip :required false :type "string | hiccup" :validate-fn string-or-hiccup? :description "what to show in the tooltip"} {:name :tooltip-position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :disabled? :required false :default false :type "boolean | r/atom" :description "if true, the user can't click the button"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the hyperlink, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the hyperlink, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the hyperlink, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the hyperlink, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? hyperlink-href-parts) :description "See Parts section below."} diff --git a/src/re_com/checkbox.cljs b/src/re_com/checkbox.cljs index 4d860029..01c12b7a 100644 --- a/src/re_com/checkbox.cljs +++ b/src/re_com/checkbox.cljs @@ -8,7 +8,7 @@ [re-com.util :refer [deref-or-value px]] [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] - [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? parts? + [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? css-class? html-attr? parts? number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list]] [reagent.core :as reagent])) @@ -34,7 +34,7 @@ {:name :disabled? :required false :default false :type "boolean | r/atom" :description "if true, user interaction is disabled"} {:name :label-class :required false :type "string" :validate-fn string? :description "CSS class names (applies to the label)"} {:name :label-style :required false :type "CSS style map" :validate-fn css-style? :description "CSS style map (applies to the label)"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the checkbox, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the checkbox, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS style map (applies to the checkbox, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the checkbox, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? checkbox-parts) :description "See Parts section below."} @@ -78,4 +78,4 @@ :cursor cursor} label-style) :on-click (handler-fn (callback-fn))} - label])]]))) \ No newline at end of file + label])]]))) diff --git a/src/re_com/close_button.cljs b/src/re_com/close_button.cljs index 75bf01a0..1987b79e 100644 --- a/src/re_com/close_button.cljs +++ b/src/re_com/close_button.cljs @@ -4,8 +4,9 @@ (:require [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value px]] - [re-com.validate :refer [string-or-hiccup? css-style? html-attr? parts?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [string-or-hiccup? css-style? css-class? html-attr? parts?] :refer-macros [validate-args-macro]] [re-com.box :refer [box]] [reagent.core :as reagent])) @@ -29,7 +30,7 @@ {:name :top-offset :required false :type "number" :validate-fn number? :description "offset the 'x' button text up or down from it's default position in the containing div (can be positive or negative)"} {:name :left-offset :required false :type "number" :validate-fn number? :description "offset the 'x' button text left or right from it's default position in the containing div (can be positive or negative)"} {:name :disabled? :required false :default false :type "boolean | r/atom" :description "if true, the user can't click the button"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the button, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles (applies to the button, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the button, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? #{:wrapper :icon}) :description "See Parts section below."} @@ -78,6 +79,11 @@ attr) :child [:i (merge - {:class (str "rc-close-button-icon zmdi zmdi-hc-fw-rc zmdi zmdi-close " (get-in parts [:icon :class])) + {:class (theme/merge-class "rc-close-button-icon" + "zmdi" + "zmdi-hc-fw-rc" + "zmdi" + "zmdi-close" + (get-in parts [:icon :class])) :style (get-in parts [:icon :style] {})} (get-in parts [:icon :attr]))]]]))))) diff --git a/src/re_com/datepicker.cljs b/src/re_com/datepicker.cljs index 9b1a8a02..d188b991 100644 --- a/src/re_com/datepicker.cljs +++ b/src/re_com/datepicker.cljs @@ -5,10 +5,11 @@ [reagent.core :as reagent] [cljs-time.core :as cljs-time] [re-com.config :refer [include-args-desc?]] - [re-com.validate :refer [date-like? css-style? html-attr? parts? position? position-options-list] :refer-macros [validate-args-macro]] + [re-com.validate :refer [date-like? css-style? css-class? html-attr? parts? position? position-options-list] :refer-macros [validate-args-macro]] [cljs-time.predicates :refer [sunday?]] [cljs-time.format :refer [parse unparse formatters formatter]] [re-com.box :refer [border gap box line h-box flex-child-style]] + [re-com.theme :as theme] [re-com.util :as u :refer [deref-or-value now->utc]] [re-com.popover :refer [popover-anchor-wrapper popover-content-wrapper]] [clojure.string :as string]) @@ -178,7 +179,7 @@ :border (when hide-border? "none") :child [:div (merge - {:class (str "datepicker noselect rc-datepicker " class) + {:class (theme/merge-class "datepicker" "noselect" "rc-datepicker" class) ;; override inherited body larger 14px font-size ;; override position from css because we are inline :style (merge {:font-size "13px" @@ -372,7 +373,9 @@ (for [day (rotate start-of-week (or (when days (to-days-vector days)) days-vector))] [:th (merge - {:class (str "rc-datepicker-day rc-datepicker-day-" (string/lower-case (:name day)) " " (get-in parts [:day :class])) + {:class (theme/merge-class "rc-datepicker-day" + (str "rc-datepicker-day-" (string/lower-case (:name day))) + (get-in parts [:day :class])) :style (get-in parts [:day :style] {})} (get-in parts [:day :attr])) (str (:name day))])))) @@ -383,7 +386,8 @@ (let [template-row (if show-weeks? [:tr [:th]] [:tr])] [:thead (merge - {:class (str "rc-datepicker-header " (get-in parts [:header :class])) + {:class (theme/merge-class "rc-datepicker-header " + (get-in parts [:header :class])) :style (get-in parts [:header :style] {})} (get-in parts [:header :attr])) (conj template-row @@ -468,7 +472,8 @@ current-start (previous (is-day-pred start-of-week) display-month)] (into [:tbody (merge - {:class (str "rc-datepicker-dates " (get-in parts [:dates :class])) + {:class (theme/merge-class "rc-datepicker-dates" + (get-in parts [:dates :class])) :style (get-in parts [:dates :style])} (get-in parts [:dates :attr]))] (->> (range 6) @@ -543,7 +548,7 @@ {:name :hide-border? :required false :default false :type "boolean" :description "when true, the border is not displayed"} {:name :i18n :required false :type "map" :description [:span "internationalization map with optional keys " [:code ":days"] " and " [:code ":months"] " (both vectors of strings)"]} {:name :date-cell :type "part" :description "Optional part to use for each date cell. Should be implemented using [:td]."} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer border div, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer border div, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the outer border div, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] " allowed (applies to the outer border div, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? datepicker-parts) :description "See Parts section below."} @@ -576,7 +581,9 @@ [main-div-with [:table (merge - {:class (str "table-condensed rc-datepicker-table " (get-in parts [:table :class])) + {:class (theme/merge-class "table-condensed" + "rc-datepicker-table" + (get-in parts [:table :class])) :style (get-in parts [:table :style])} (get-in parts [:table :attr])) [table-thead display-month configuration disabled? parts] @@ -620,7 +627,10 @@ goog? (.format (DateTimeFormat. (if (seq format) format date-format-str)) (deref-or-value model)) :else (unparse (if (seq format) (formatter format) date-format) (deref-or-value model)))] [:span - {:class (str "dropdown-button activator input-group-addon" (when (deref-or-value disabled?) " dropdown-button-disabled")) + {:class (theme/merge-class "dropdown-button activator" + "input-group-addon" + (when (deref-or-value disabled?) + "dropdown-button-disabled")) :style {:padding "3px 0px 0px 0px"}} [:i.zmdi.zmdi-apps {:style {:font-size "24px"}}]]]]]) diff --git a/src/re_com/daterange.cljs b/src/re_com/daterange.cljs index 0433a909..38439f87 100644 --- a/src/re_com/daterange.cljs +++ b/src/re_com/daterange.cljs @@ -7,7 +7,8 @@ [re-com.config :refer [include-args-desc?]] [re-com.box :refer [line border flex-child-style]] [re-com.core :refer [at v-box h-box box popover-anchor-wrapper popover-content-wrapper]] - [re-com.validate :refer [date-like? css-style? html-attr? parts?] :refer-macros [validate-args-macro]] + [re-com.validate :refer [date-like? css-style? css-class? html-attr? parts?] :refer-macros [validate-args-macro]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value now->utc]] [cljs-time.format :refer [parse unparse formatter]] [cljs-time.core :as cljs-time] @@ -80,7 +81,8 @@ (defn- prev-year-nav [current-month-atom parts] (let [prev-year (dec-year (deref-or-value current-month-atom))] [box :src (at) - :class (str "rc-daterange-nav-button " (get-in parts [:prev-year :class])) + :class (theme/merge-class "rc-daterange-nav-button" + (get-in parts [:prev-year :class])) :style (get-in parts [:prev-year :style]) :attr (merge {:on-click #(reset! current-month-atom prev-year)} @@ -90,7 +92,8 @@ (defn- prev-month-nav [current-month-atom parts] (let [prev-month (dec-month (deref-or-value current-month-atom))] [box :src (at) - :class (str "rc-daterange-nav-button " (get-in parts [:prev-month :class])) + :class (theme/merge-class "rc-daterange-nav-button" + (get-in parts [:prev-month :class])) :style (get-in parts [:prev-month :style]) :attr (merge {:on-click #(reset! current-month-atom prev-month)} @@ -100,7 +103,8 @@ (defn- next-year-nav [current-month-atom parts] (let [next-year (plus-year (deref-or-value current-month-atom))] [box :src (at) - :class (str "rc-daterange-nav-button " (get-in parts [:next-year :class])) + :class (theme/merge-class "rc-daterange-nav-button" + (get-in parts [:next-year :class])) :style (get-in parts [:next-year :style]) :attr (merge {:on-click #(reset! current-month-atom next-year)} @@ -110,7 +114,8 @@ (defn- next-month-nav [current-month-atom parts] (let [next-month (plus-month (deref-or-value current-month-atom))] [box :src (at) - :class (str "rc-daterange-nav-button " (get-in parts [:next-month :class])) + :class (theme/merge-class "rc-daterange-nav-button" + (get-in parts [:next-month :class])) :style (get-in parts [:next-month :stlye]) :attr (merge {:on-click #(reset! current-month-atom next-month)} @@ -120,7 +125,8 @@ (defn- prev-nav [current-month-atom parts i18n] [h-box :src (at) :align-self :stretch - :class (str "rc-daterange-prev-nav" (get-in parts [:prev-nav :class])) + :class (theme/merge-class "rc-daterange-prev-nav" + (get-in parts [:prev-nav :class])) :style (get-in parts [:prev-nav :style]) :attr (get-in parts [:prev-nav :attr]) :children [[prev-year-nav current-month-atom parts] @@ -131,7 +137,8 @@ :justify :center :children [[box :src (at) - :class (str "rc-daterange-month-title" (get-in parts [:month-title :class])) + :class (theme/merge-class "rc-daterange-month-title" + (get-in parts [:month-title :class])) :style (get-in parts [:month-title :style]) :attr (get-in parts [:month-title :attr]) :child (month-label (deref-or-value current-month-atom) i18n)]]] @@ -139,7 +146,8 @@ :align-self :end :justify :end :width "49px" - :class (str "rc-daterange-year-title " (get-in parts [:year-title :class])) + :class (theme/merge-class "rc-daterange-year-title" + (get-in parts [:year-title :class])) :style (get-in parts [:year-title :style]) :attr (get-in parts [:year-title :attr]) :child (str (unparse (formatter "YYYY") (deref-or-value current-month-atom)))]]]) @@ -147,14 +155,16 @@ (defn- next-nav [current-month-atom parts i18n] [h-box :src (at) :align-self :stretch - :class (str "rc-daterange-next-nav" (get-in parts [:next-nav :class])) + :class (theme/merge-class "rc-daterange-next-nav" + (get-in parts [:next-nav :class])) :style (get-in parts [:next-nav :style]) :attr (get-in parts [:next-nav :attr]) :children [[box :align-self :end :justify :start :width "49px" - :class (str "rc-daterange-year-title " (get-in parts [:year-title :class])) + :class (theme/merge-class "rc-daterange-year-title" + (get-in parts [:year-title :class])) :style (get-in parts [:year-title :style]) :attr (get-in parts [:year-title :attr]) :child (str (unparse (formatter "YYYY") (plus-month (deref-or-value current-month-atom))))] @@ -163,7 +173,8 @@ :justify :center :children [[box :src (at) - :class (str "rc-daterange-month-title " (get-in parts [:month-title :class])) + :class (theme/merge-class "rc-daterange-month-title" + (get-in parts [:month-title :class])) :style (get-in parts [:month-title :style]) :attr (get-in parts [:month-title :attr]) :child (month-label (plus-month (deref-or-value current-month-atom)) i18n)]]] @@ -182,7 +193,9 @@ :class "rc-daterange-wrapper" :children [[border :src (at) - :class (str "rc-daterange-border noselect" (get-in parts [:border :class])) + :class (theme/merge-class "rc-daterange-border" + "noselect" + (get-in parts [:border :class])) :style (get-in parts [:border :style]) :attr (get-in parts [:border :attr]) :radius "5px" @@ -279,7 +292,9 @@ (str (cljs-time/day day)))))))) (defn week-td [week-number] - [:td {:class (str "daterange-td-basic " "daterange-week")} week-number]) + [:td {:class (theme/merge-class "daterange-td-basic" + "daterange-week")} + week-number]) (defn week-of-year-calc [days-list] (cljs-time/week-number-of-year (last days-list))) @@ -328,7 +343,8 @@ days-vec) add-parts (fn [[td day-string]] (vector td - (merge {:class (str "daterange-day-title" (get-in parts [:day-title :class])) + (merge {:class (theme/merge-class "daterange-day-title" + (get-in parts [:day-title :class])) :style (get-in parts [:day-title :style])} (get-in parts [:day-title :attr])) day-string)) @@ -342,7 +358,8 @@ with-weekdays-row (into [:tbody table-row-weekdays]) with-dates (into with-weekdays-row date-rows)] [:table - (merge {:class (str "rc-daterange-table" (get-in parts [:table :class])) + (merge {:class (theme/merge-class "rc-daterange-table" + (get-in parts [:table :class])) :style (get-in parts [:table :style])} (get-in parts [:table :attr])) with-dates])) @@ -559,7 +576,7 @@ {:name :class, :required false, :type "string", - :validate-fn string?, + :validate-fn css-class?, :description "CSS class names, space separated (applies to the outer border div, not the wrapping div)"} {:name :style, diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 3817981c..fa7c113e 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -7,7 +7,7 @@ [re-com.theme :as theme] [re-com.util :as u :refer [deref-or-value position-for-id item-for-id ->v]] [re-com.box :refer [align-style flex-child-style v-box h-box box gap]] - [re-com.validate :refer [vector-of-maps? css-style? html-attr? parts? number-or-string? log-warning + [re-com.validate :refer [vector-of-maps? css-style? css-class? html-attr? parts? number-or-string? log-warning string-or-hiccup? position? position-options-list part?] :refer-macros [validate-args-macro]] [re-com.popover :refer [popover-tooltip]] [clojure.string :as string] @@ -839,7 +839,7 @@ {:name :repeat-change? :required false :default false :type "boolean" :description [:span "repeat " [:code ":on-change"] " events if an already selected item is selected again"]} {:name :i18n :required false :type "map" :description [:span "internationalization map with optional keys " [:code ":loading"] ", " [:code ":no-results"] " and " [:code ":no-results-match"]]} {:name :on-drop :required false :type "() -> nil" :validate-fn fn? :description "called when the dropdown part is displayed"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? single-dropdown-parts) :description "See Parts section below."} @@ -1043,12 +1043,17 @@ filter-box? drop-showing? title? disabled? parts] dropdown [:div (merge - {:class (str "rc-dropdown chosen-container " - (if free-text? "chosen-container-multi " "chosen-container-single ") - "noselect " - (when (or @drop-showing? @free-text-focused?) "chosen-container-active ") - (when @drop-showing? "chosen-with-drop ") - class) ;; Prevent user text selection + {:class (theme/merge-class "rc-dropdown" + "chosen-container" + (if free-text? + "chosen-container-multi" + "chosen-container-single") + "noselect" + (when (or @drop-showing? @free-text-focused?) + "chosen-container-active") + (when @drop-showing? + "chosen-with-drop") + class) ;; Prevent user text selection :style (merge (flex-child-style (if width "0 0 auto" "auto")) #_(align-style :align-self :start) {:width width} @@ -1062,7 +1067,9 @@ (when (and @drop-showing? (not disabled?)) [:div (merge - {:class (str "chosen-drop rc-dropdown-chosen-drop " (get-in parts [:chosen-drop :class])) + {:class (theme/merge-class "chosen-drop" + "rc-dropdown-chosen-drop" + (get-in parts [:chosen-drop :class])) :style (merge (when (deref-or-value drop-above?) {:transform (gstring/format "translate3d(0px, -%ipx, 0px)" (+ top-height @drop-height -2))}) (get-in parts [:chosen-drop :style])) @@ -1073,7 +1080,9 @@ [filter-text-box filter-box? filter-text key-handler drop-showing? #(set-filter-text % args true) filter-placeholder]) [:ul (merge - {:class (str "chosen-results rc-dropdown-chosen-results " (get-in parts [:chosen-results :class])) + {:class (theme/merge-class "chosen-results" + "rc-dropdown-chosen-results" + (get-in parts [:chosen-results :class])) :style (merge (when max-height {:max-height max-height}) (get-in parts [:chosen-results :style]))} (get-in parts [:chosen-results :attr])) @@ -1081,14 +1090,18 @@ (and choices-fn? (:loading? @choices-state)) [:li (merge - {:class (str "loading rc-dropdown-choices-loading " (get-in parts [:choices-loading :class])) + {:class (theme/merge-class "loading" + "rc-dropdown-choices-loading" + (get-in parts [:choices-loading :class])) :style (get-in parts [:choices-loading :style] {})} (get-in parts [:choices-loading :attr])) (get i18n :loading "Loading...")] (and choices-fn? (:error @choices-state)) [:li (merge - {:class (str "error rc-dropdown-choices-error " (get-in parts [:choices-error :class])) + {:class (theme/merge-class "error" + "rc-dropdown-choices-error" + (get-in parts [:choices-error :class])) :style (get-in parts [:choices-error :style] {})} (get-in parts [:choices-error :attr])) (:error @choices-state)] diff --git a/src/re_com/input_text.cljs b/src/re_com/input_text.cljs index 45f51440..648603e5 100644 --- a/src/re_com/input_text.cljs +++ b/src/re_com/input_text.cljs @@ -5,11 +5,12 @@ (:require [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value px]] [re-com.popover :refer [popover-tooltip]] [re-com.throbber :refer [throbber]] [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] - [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? parts? + [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? css-class? html-attr? parts? number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list]] [reagent.core :as reagent])) @@ -42,7 +43,7 @@ {:name :on-alter :required false :type "string -> string" :validate-fn fn? :description "called with the new value to alter it immediately"} {:name :validation-regex :required false :type "regex" :validate-fn regex? :description "user input is only accepted if it would result in a string that matches this regular expression"} {:name :disabled? :required false :default false :type "boolean | r/atom" :description "if true, the user can't interact (input anything)"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the textbox, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the textbox, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the textbox, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the textbox, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? input-text-parts) :description "See Parts section below."} @@ -107,14 +108,15 @@ :width (if width width "250px") :children [[:div (merge - {:class (str "rc-input-text-inner " ;; form-group - (case status - :success "has-success " - :warning "has-warning " - :error "has-error " - "") - (when (and status status-icon?) "has-feedback ") - (get-in parts [:inner :class])) + {:class (theme/merge-class "rc-input-text-inner" ;; form-group + (case status + :success "has-success" + :warning "has-warning" + :error "has-error" + "") + (when (and status status-icon?) + "has-feedback ") + (get-in parts [:inner :class])) :style (merge (flex-child-style "auto") (get-in parts [:inner :style]))} (get-in parts [:inner :attr])) @@ -190,7 +192,10 @@ :src (at) :size :regular :class "smaller"] - [:i {:class (str "zmdi zmdi-hc-fw " icon-class " form-control-feedback") + [:i {:class (theme/merge-class "zmdi" + "zmdi-hc-fw" + icon-class + "form-control-feedback") :style (merge (flex-child-style "none") (align-style :align-self :center) {:position "static" diff --git a/src/re_com/input_time.cljs b/src/re_com/input_time.cljs index d228daf9..8326542e 100644 --- a/src/re_com/input_time.cljs +++ b/src/re_com/input_time.cljs @@ -6,7 +6,8 @@ [reagent.core :as reagent] [re-com.config :refer [include-args-desc?]] [re-com.debug :as debug :refer [->attr]] - [re-com.validate :refer [css-style? html-attr? parts? number-or-string?]] + [re-com.theme :as theme] + [re-com.validate :refer [css-style? css-class? html-attr? parts? number-or-string?]] [re-com.text :refer [label]] [re-com.box :refer [h-box gap]] [re-com.util :refer [pad-zero-number deref-or-value]])) @@ -161,7 +162,7 @@ {:name :hide-border? :required false :default false :type "boolean" :description "when true, input filed is displayed without a border"} {:name :width :required false :type "string" :validate-fn string? :description "standard CSS width setting for width of the input box (excluding the icon if present)"} {:name :height :required false :type "string" :validate-fn string? :description "standard CSS height setting"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the textbox, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the textbox, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS style. e.g. {:color \"red\" :width \"50px\"} (applies to the textbox, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the textbox, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? input-time-parts) :description "See Parts section below."} @@ -219,12 +220,18 @@ ;; Leaving time-icon class (below) for backwards compatibility only. [:div (merge - {:class (str "time-icon rc-time-icon-container " (get-in parts [:time-icon-container :class])) + {:class (theme/merge-class "time-icon" + "rc-time-icon-container" + (get-in parts [:time-icon-container :class])) :style (get-in parts [:time-icon-container :style] {})} (get-in parts [:time-icon-container :attr])) [:i (merge - {:class (str "zmdi zmdi-hc-fw-rc zmdi-time rc-time-icon " (get-in parts [:time-icon :class])) + {:class (theme/merge-class "zmdi" + "zmdi-hc-fw-rc" + "zmdi-time" + "rc-time-icon" + (get-in parts [:time-icon :class])) :style (merge {:position "static" :margin "auto"} (get-in parts [:time-icon :style]))} diff --git a/src/re_com/modal_panel.cljs b/src/re_com/modal_panel.cljs index fb5c04f7..331f3fef 100644 --- a/src/re_com/modal_panel.cljs +++ b/src/re_com/modal_panel.cljs @@ -6,7 +6,7 @@ [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] [re-com.theme :as theme] - [re-com.validate :refer [string-or-hiccup? number-or-string? css-style? html-attr? parts?]])) + [re-com.validate :refer [string-or-hiccup? number-or-string? css-style? css-class? html-attr? parts?]])) ;; ------------------------------------------------------------------------------------ ;; modal-panel @@ -29,7 +29,7 @@ {:name :backdrop-color :required false :default "black" :type "string" :validate-fn string? :description "CSS color of backdrop"} {:name :backdrop-opacity :required false :default 0.6 :type "double | string" :validate-fn number-or-string? :description [:span "opacity of backdrop from:" [:br] "0.0 (transparent) to 1.0 (opaque)"]} {:name :backdrop-on-click :required false :default nil :type "-> nil" :validate-fn fn? :description "a function which takes no params and returns nothing. Called when the backdrop is clicked"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? modal-panel-parts) :description "See Parts section below."} @@ -47,7 +47,9 @@ (or (validate-args-macro modal-panel-args-desc args) [:div ;; Containing div - (merge {:class (str "display-flex rc-modal-panel " class) + (merge {:class (theme/merge-class "display-flex" + "rc-modal-panel" + class) :style (merge {:position "fixed" :left "0px" :top "0px" @@ -73,7 +75,8 @@ (get-in parts [:backdrop :attr]))] [:div ;; Child container (merge - {:class (str "rc-modal-panel-child-container " (get-in parts [:child-container :class])) + {:class (theme/merge-class "rc-modal-panel-child-container" + (get-in parts [:child-container :class])) :style (merge {:margin "auto" :z-index 2} (get-in parts [:child-container :style]) diff --git a/src/re_com/multi_select.cljs b/src/re_com/multi_select.cljs index 8238ab97..a435d67b 100644 --- a/src/re_com/multi_select.cljs +++ b/src/re_com/multi_select.cljs @@ -13,8 +13,9 @@ [re-com.text :as text] [re-com.buttons :as buttons] [re-com.close-button :as close-button] + [re-com.theme :as theme] [re-com.util :as rc.util :refer [deref-or-value]] - [re-com.validate :as validate :refer [string-or-hiccup? parts?]] + [re-com.validate :as validate :refer [string-or-hiccup? parts? css-class?]] [reagent.core :as reagent])) (defn items-with-group-headings @@ -249,7 +250,7 @@ {:name :height :required false :type "string" :validate-fn string? :description "the specific height of the component"} {:name :max-height :required false :type "string" :validate-fn string? :description "the maximum height of the component"} {:name :tab-index :required false :type "integer | string" :validate-fn validate/number-or-string? :description "component's tabindex. A value of -1 removes from the tab order"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated"} {:name :style :required false :type "CSS style map" :validate-fn validate/css-style? :description "CSS styles to add or override"} {:name :attr :required false :type "HTML attr map" :validate-fn validate/html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed"]} {:name :parts :required false :type "map" :validate-fn (parts? multi-select-parts) :description "See Parts section below."} @@ -410,7 +411,11 @@ (reset! *current-selection-id nil))] [:div (merge - {:class (str "rc-multi-select noselect chosen-container chosen-container-single " class) + {:class (theme/merge-class "rc-multi-select" + "noselect" + "chosen-container" + "chosen-container-single" + class) :style (merge (box/flex-child-style (if width "0 0 auto" "auto")) (box/align-style :align-self :start) {:overflow "hidden" @@ -443,7 +448,8 @@ :justify :between :children [[:span (merge - {:class (str "rc-multi-select-left-label " (get-in parts [:left-label :class])) + {:class (theme/merge-class "rc-multi-select-left-label" + (get-in parts [:left-label :class])) :style (merge {:font-size "small" :font-weight "bold"} (get-in parts [:left-label :style]))} @@ -451,7 +457,8 @@ left-label] [:span (merge - {:class (str "rc-multi-select-left-label-item-count " (get-in parts [:left-label-item-count :class])) + {:class (theme/merge-class "rc-multi-select-left-label-item-count" + (get-in parts [:left-label-item-count :class])) :style (merge {:font-size "smaller"} (get-in parts [:left-label-item-count :style]))} (get-in parts [:left-label-item-count :attr])) @@ -488,7 +495,8 @@ :style {:font-size "smaller"}] [text/label :src (at) - :class (str "rc-multi-select-left-filter-result-count " (get-in parts [:left-filter-result-count :class])) + :class (theme/merge-class "rc-multi-select-left-filter-result-count" + (get-in parts [:left-filter-result-count :class])) :style (merge {:font-size "smaller"} (get-in parts [:left-filter-result-count :style])) :attr (get-in parts [:left-filter-result-count :attr]) @@ -502,7 +510,8 @@ :justify :between :children [[box/box :src (at) - :class (str "rc-multi-select-middle-spacer " (get-in parts [:middle-spacer :class])) + :class (theme/merge-class "rc-multi-select-middle-spacer" + (get-in parts [:middle-spacer :class])) :style (get-in parts [:middle-spacer :style]) :attr (get-in parts [:middle-spacer :attr]) :size "0 1 22px" ;; 22 = (+ 18 4) - height of the top components @@ -517,7 +526,7 @@ :src (at) :class (str "rc-multi-select-include-all-button " (get-in parts [:include-all-button :class])) :label [:span - [:i {:class (str "zmdi zmdi-hc-fw-rc zmdi-fast-forward")}] + [:i {:class (theme/merge-class "zmdi" "zmdi-hc-fw-rc" "zmdi-fast-forward")}] [:span {:style {:position "relative" :top "-1px"}} (str " include " (if (string/blank? @*filter-choices-text) potential-count (count filtered-choices)))]] @@ -530,7 +539,7 @@ :src (at) :class (str "rc-multi-select-include-selected-button " (get-in parts [:include-selected-button :class])) :label [:span - [:i {:class (str "zmdi zmdi-hc-fw-rc zmdi-play")}] + [:i {:class (theme/merge-class "zmdi" "zmdi-hc-fw-rc" "zmdi-play")}] [:span {:style {:position "relative" :top "-1px"}} (str " include " (when @*choice-group-heading-selected? @@ -546,7 +555,7 @@ :src (at) :class (str "rc-multi-select-exclude-selected-button " (get-in parts [:exclude-selected-button :class])) :label [:span - [:i {:class (str "zmdi zmdi-hc-fw-rc zmdi-play zmdi-hc-rotate-180")}] + [:i {:class (theme/merge-class "zmdi" "zmdi-hc-fw-rc" "zmdi-play" "zmdi-hc-rotate-180")}] [:span {:style {:position "relative" :top "-1px"}} (str " exclude " (when @*selection-group-heading-selected? @@ -562,7 +571,7 @@ :src (at) :class (str "rc-multi-select-exclude-all-button " (get-in parts [:exclude-all-button :class])) :label [:span - [:i {:class (str "zmdi zmdi-hc-fw-rc zmdi-fast-rewind")}] + [:i {:class (theme/merge-class "zmdi" "zmdi-hc-fw-rc" "zmdi-fast-rewind")}] [:span {:style {:position "relative" :top "-1px"}} (str " exclude " (if (string/blank? @*filter-selections-text) chosen-count (count filtered-selections)))]] @@ -588,7 +597,8 @@ [text/label :src (at) :label @*warning-message - :class (str "rc-multi-select-warning-message " (get-in parts [:warning-message :class])) + :class (theme/merge-class "rc-multi-select-warning-message" + (get-in parts [:warning-message :class])) :style (when @*warning-message (merge {:color "white" @@ -614,7 +624,8 @@ :justify :between :children [[:span (merge - {:class (str "rc-multi-select-right-label " (get-in parts [:right-label :class])) + {:class (theme/merge-class "rc-multi-select-right-label" + (get-in parts [:right-label :class])) :style (merge {:font-size "small" :font-weight "bold"} (get-in parts [:right-label :style]))} @@ -622,7 +633,8 @@ right-label] [:span (merge - {:class (str "rc-multi-select-right-label-item-count " (get-in parts [:right-label-item-count :class])) + {:class (theme/merge-class "rc-multi-select-right-label-item-count" + (get-in parts [:right-label-item-count :class])) :style (merge {:font-size "smaller"} (get-in parts [:right-label-item-count :style]))} (get-in parts [:right-label-item-count :attr])) @@ -662,6 +674,7 @@ [text/label :src (at) :label [:span "Found " (rc.util/pluralize (count filtered-selections) "match" "matches") " containing " [:strong @*filter-selections-text]] - :class (str "rc-multi-select-right-filter-result-count " (get-in parts [:right-filter-result-count :class])) + :class (theme/merge-class "rc-multi-select-right-filter-result-count" + (get-in parts [:right-filter-result-count :class])) :style (merge {:font-size "smaller"} (get-in parts [:right-filter-result-count :style])) :attr (get-in parts [:right-filter-result-count :attr])])])]]]]])))))) diff --git a/src/re_com/nested_grid.cljs b/src/re_com/nested_grid.cljs index f4a04355..b4b613b8 100644 --- a/src/re_com/nested_grid.cljs +++ b/src/re_com/nested_grid.cljs @@ -7,7 +7,7 @@ [reagent.core :as r] [re-com.debug :as debug] [re-com.config :as config :refer [include-args-desc?]] - [re-com.validate :refer [vector-atom? ifn-or-nil? map-atom? parts? part?]] + [re-com.validate :refer [vector-atom? ifn-or-nil? map-atom? parts? part? css-class?]] [re-com.theme :as theme] [re-com.box :as box] [re-com.buttons :as buttons])) diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index eeffd422..74de679e 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -5,11 +5,12 @@ (:require [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] + [re-com.theme :as theme] [re-com.util :refer [get-element-by-id px deref-or-value sum-scroll-offsets]] [re-com.box :refer [box h-box v-box flex-child-style flex-flow-style align-style]] [re-com.close-button :refer [close-button]] [re-com.validate :refer [position? position-options-list popover-status-type? popover-status-types-list number-or-string? - string-or-hiccup? string-or-atom? vector-of-maps? css-style? html-attr? parts?]] + string-or-hiccup? string-or-atom? vector-of-maps? css-style? html-attr? parts? css-class?]] [clojure.string :as string] [react :as react] [reagent.core :as reagent] @@ -91,7 +92,9 @@ :below (str (point 0 arrow-length) (point half-arrow-width 0) (point arrow-width arrow-length))}] [:svg (merge - {:class (str "popover-arrow rc-popover-arrow " (get-in parts [:arrow :class] "")) + {:class (theme/merge-class "popover-arrow" + "rc-popover-arrow" + (get-in parts [:arrow :class] "")) :style (merge {:position "absolute" (case orientation ;; Connect arrow to edge of popover :left :right @@ -131,7 +134,7 @@ (when include-args-desc? [{:name :opacity :required false :default 0.0 :type "double | string" :validate-fn number-or-string? :description [:span "opacity of backdrop from:" [:br] "0.0 (transparent) to 1.0 (opaque)"]} {:name :on-click :required false :type "-> nil" :validate-fn fn? :description "a function which takes no params and returns nothing. Called when the backdrop is clicked"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :src :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging. Source code coordinates map containing keys" [:code ":file"] "and" [:code ":line"] ". See 'Debugging'."]} @@ -178,7 +181,7 @@ {:name :title :required false :type "string | hiccup" :validate-fn string-or-hiccup? :description "describes the title of the popover. Default font size is 18px to make it stand out"} {:name :close-button? :required false :default true :type "boolean" :description "when true, displays the close button"} {:name :close-callback :required false :type "-> nil" :validate-fn fn? :description [:span "a function which takes no params and returns nothing. Called when the close button is pressed. Not required if " [:code ":showing?"] " atom passed in OR " [:code ":close-button?"] " is set to false"]} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? popover-title-parts) :description "See Parts section below."} @@ -195,7 +198,7 @@ (let [close-button? (if (nil? close-button?) true close-button?)] [:h3 (merge - {:class (str "popover-title rc-popover-title " class) + {:class (theme/merge-class "popover-title" "rc-popover-title" class) :style (merge (flex-child-style "inherit") {:font-size "18px"} style)} @@ -285,7 +288,7 @@ {:name :margin-top :required false :type "string" :validate-fn string? :description "a CSS style describing the vertical offset from anchor after position"} {:name :tooltip-style? :required false :default false :type "boolean" :description "setup popover styles for a tooltip"} {:name :title :required false :type "string | markup" :description "describes a title"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? popover-border-parts) :description "See Parts section below."} @@ -343,7 +346,7 @@ (let [[orientation grey-arrow?] (calc-metrics @position)] [:div.popover.fade.in (merge - {:class (str "rc-popover-border " class) + {:class (theme/merge-class "rc-popover-border" class) :id pop-id :style (merge (if @rendered-once (when pop-id (calc-popover-pos orientation @p-width @p-height @pop-offset arrow-length arrow-gap)) @@ -383,7 +386,9 @@ (when title title) (into [:div (merge - {:class (str "popover-content rc-popover-content " (get-in parts [:content :class] "")) + {:class (theme/merge-class "popover-content" + "rc-popover-content" + (get-in parts [:content :class] "")) :style (merge {:padding padding} (get-in parts [:content :style]))} (get-in parts [:content :attr]))] children)])))})))) @@ -424,7 +429,7 @@ {:name :arrow-width :required false :default 22 :type "integer | string" :validate-fn number-or-string? :description "the width in pixels of arrow base"} {:name :arrow-gap :required false :default -1 :type "integer" :validate-fn number? :description "px gap between the anchor and the arrow tip. Positive numbers push the popover away from the anchor"} {:name :padding :required false :type "string" :validate-fn string? :description "a CSS style which overrides the inner padding of the popover"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? #{:backdrop :border :title}) :description "See Parts section below."} @@ -474,7 +479,9 @@ (do @position-injected ;; Dereference this atom. Although nothing here needs its value explicitly, the calculation of left-offset and top-offset are affected by it for :no-clip? true [:div - (merge {:class (str "popover-content-wrapper rc-popover-content-wrapper " class) + (merge {:class (theme/merge-class "popover-content-wrapper" + "rc-popover-content-wrapper" + class) :style (merge (flex-child-style "inherit") (when no-clip? {:position "fixed" :left (px @left-offset) @@ -539,7 +546,7 @@ {:name :position :required true :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} {:name :anchor :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "the component the popover is attached to"} {:name :popover :required true :type "string | hiccup" :validate-fn string-or-hiccup? :description "the popover body component"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? popover-anchor-wrapper-parts) :description "See Parts section below."} @@ -571,13 +578,17 @@ place-anchor-before? (case orientation (:left :above) false true) flex-flow (case orientation (:left :right) "row" "column")] [:div - (merge {:class (str "rc-popover-anchor-wrapper display-inline-flex " class) + (merge {:class (theme/merge-class "rc-popover-anchor-wrapper" + "display-inline-flex" + class) :style (merge (flex-child-style "inherit") style)} (->attr args) attr) [:div ;; Wrapper around the anchor and the "point" - {:class (str "display-inline-flex rc-point-wrapper " (get-in parts [:point-wrapper :class] "")) + {:class (theme/merge-class "display-inline-flex" + "rc-point-wrapper" + (get-in parts [:point-wrapper :class] "")) :style (merge (flex-child-style "auto") (flex-flow-style flex-flow) (align-style :align-items :center) @@ -586,7 +597,9 @@ (when place-anchor-before? anchor) (when (deref-or-value showing?) [:div ;; The "point" that connects the anchor to the popover - {:class (str "display-inline-flex rc-popover-point " (get-in parts [:point :class] "")) + {:class (theme/merge-class "display-inline-flex" + "rc-popover-point" + (get-in parts [:point :class] "")) :style (merge (flex-child-style "auto") {:position "relative" :z-index 4} @@ -628,7 +641,7 @@ {:name :info-color :required false :default "#333333" :type "string" :validate-fn string? :description "default fill color for the info status."} {:name :success-color :required false :default "#13C200" :type "string" :validate-fn string? :description "default fill color for the success status."} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to popover-anchor-wrapper component)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to popover-anchor-wrapper component)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency (applies to popover-anchor-wrapper component)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to popover-anchor-wrapper component)"]} {:name :parts :required false :type "map" :validate-fn (parts? popover-tooltip-parts) :description "See Parts section below."} diff --git a/src/re_com/progress_bar.cljs b/src/re_com/progress_bar.cljs index 070a438d..d4093cee 100644 --- a/src/re_com/progress_bar.cljs +++ b/src/re_com/progress_bar.cljs @@ -5,11 +5,12 @@ (:require [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value px]] [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? parts? - number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list]])) + number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list css-class?]])) ;; ------------------------------------------------------------------------------------ ;; Component: progress-bar @@ -32,7 +33,7 @@ {:name :width :required false :default "100%" :type "string" :validate-fn string? :description "a CSS width"} {:name :striped? :required false :default false :type "boolean" :description "when true, the progress section is a set of animated stripes"} {:name :bar-class :required false :type "string" :validate-fn string? :description "CSS class name(s) for the actual progress bar itself, space separated"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the progress-bar, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the progress-bar, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the progress-bar, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the progress-bar, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? progress-bar-parts) :description "See Parts section below."} @@ -56,13 +57,19 @@ :align :start :child [:div (merge - {:class (str "progress rc-progress-bar " class) + {:class (theme/merge-class "progress" "rc-progress-bar" class) :style (merge (flex-child-style "none") {:width width} style)} attr) [:div - {:class (str "progress-bar " (when striped? "progress-bar-striped active rc-progress-bar-portion ") bar-class) + {:class (let [striped? true bar-class "hi"] + (theme/merge-class "progress-bar" + (when striped? + ["progress-bar-striped" + "active" + "rc-progress-bar-portion"]) + bar-class)) :role "progressbar" :style {:width (str model "%") :transition "none"}} ;; Default BS transitions cause the progress bar to lag behind diff --git a/src/re_com/radio_button.cljs b/src/re_com/radio_button.cljs index ca0269ba..52054384 100644 --- a/src/re_com/radio_button.cljs +++ b/src/re_com/radio_button.cljs @@ -9,7 +9,7 @@ [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? parts? - number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list]])) + number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list css-class?]])) ;; ------------------------------------------------------------------------------------ ;; Component: radio-button @@ -35,7 +35,7 @@ {:name :disabled? :required false :default false :type "boolean | r/atom" :description "if true, the user can't click the radio button"} {:name :label-class :required false :type "string" :validate-fn string? :description "CSS class names (applies to the label)"} {:name :label-style :required false :type "CSS style map" :validate-fn css-style? :description "CSS style map (applies to the label)"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the radio-button, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the radio-button, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS style map (applies to the radio-button, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the radio-button, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? radio-button-parts) :description "See Parts section below."} diff --git a/src/re_com/selection_list.cljs b/src/re_com/selection_list.cljs index bd1cf3e1..14998dbf 100644 --- a/src/re_com/selection_list.cljs +++ b/src/re_com/selection_list.cljs @@ -9,7 +9,8 @@ [re-com.checkbox :refer [checkbox]] [re-com.radio-button :refer [radio-button]] [re-com.box :refer [box border h-box v-box]] - [re-com.validate :refer [vector-of-maps? string-or-atom? set-or-atom? css-style? html-attr? parts?]] + [re-com.validate :refer [vector-of-maps? string-or-atom? set-or-atom? css-style? html-attr? parts? css-class?]] + [re-com.theme :as theme] [re-com.util :refer [fmap deref-or-value]])) ;; ---------------------------------------------------------------------------- @@ -33,7 +34,10 @@ ;;TODO: Do we really need an anchor now that bootstrap styles not realy being used ? (let [item-id (id-fn item)] [box - :class (str "list-group-item compact rc-selection-list-group-item " (get-in parts [:list-group-item :class])) + :class (theme/merge-class "list-group-item" + "compact" + "rc-selection-list-group-item" + (get-in parts [:list-group-item :class])) :style (get-in parts [:list-group-item :style] {}) :attr (merge {:on-click (handler-fn @@ -64,7 +68,10 @@ [item id-fn selections on-change disabled? label-fn required? as-exclusions? parts] (let [item-id (id-fn item)] [box - :class (str "list-group-item compact rc-selection-list-group-item " (get-in parts [:list-group-item :class])) + :class (theme/merge-class "list-group-item" + "compact" + "rc-selection-list-group-item" + (get-in parts [:list-group-item :class])) :style (get-in parts [:list-group-item :style] {}) :attr (merge {:on-click (handler-fn (when-not disabled? ;; prevents on-change from firing if unselect is disabled (required?) @@ -135,7 +142,7 @@ {:name :disabled? :required false :default false :type "boolean | r/atom" :description "when true, the time input will be disabled. Can be atom or value"} {:name :hide-border? :required false :default false :type "boolean | r/atom" :description "when true, the list will be displayed without a border"} {:name :item-renderer :required false :type "choice, id-fn, selected, on-change, disabled?, label-fn, required?, as-exclusions? -> hiccup | r/atom" :validate-fn fn? :description "a function which takes no params and returns nothing. Called for each element during setup, the returned component renders the element, responds to clicks etc."} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? selection-list-parts) :description "See Parts section below."} @@ -194,7 +201,10 @@ :border (when hide-border? "none") :child (into [:div (merge - {:class (str "list-group noselect rc-selection-list-group " (get-in parts [:list-group :class])) + {:class (theme/merge-class "list-group" + "noselect" + "rc-selection-list-group" + (get-in parts [:list-group :class])) :style (merge list-style bounds diff --git a/src/re_com/simple_v_table.cljs b/src/re_com/simple_v_table.cljs index db9249d0..16647c4f 100644 --- a/src/re_com/simple_v_table.cljs +++ b/src/re_com/simple_v_table.cljs @@ -10,7 +10,7 @@ [re-com.util :as u :refer [px deref-or-value assoc-in-if-empty ->v position-for-id item-for-id remove-id-item clipboard-write! table->tsv]] [re-com.text :refer [label]] [re-com.theme :as theme] - [re-com.validate :refer [vector-of-maps? vector-atom? parts?]] + [re-com.validate :refer [vector-of-maps? vector-atom? parts? css-class?]] [re-com.v-table :as v-table])) (def default-sort-criterion {:keyfn :label :order :asc}) @@ -139,7 +139,8 @@ [row {:keys [id width height align vertical-align row-label-fn] :as column} cell-style parts] [:div (merge - {:class (str "rc-simple-v-table-row-item " (get-in parts [:simple-row-item :class])) + {:class (theme/merge-class "rc-simple-v-table-row-item" + (get-in parts [:simple-row-item :class])) :style (merge {:display "inline-block" :padding (str "0px " "12px") :width (px width) @@ -349,7 +350,7 @@ {:name :class, :required false, :type "string", - :validate-fn string?, + :validate-fn css-class?, :description "CSS class names, space separated (applies to the outer container)."} {:name :parts, @@ -539,7 +540,9 @@ :children [header-label (when sort-by [h-box - :class (str "rc-simple-v-table-column-header-sort-label " (when current-order "rc-simple-v-table-column-header-sort-active")) + :class (theme/merge-class "rc-simple-v-table-column-header-sort-label" + (when current-order + "rc-simple-v-table-column-header-sort-active")) :min-width "35px" :style (when current-order {:opacity 0.3}) :justify :center diff --git a/src/re_com/slider.cljs b/src/re_com/slider.cljs index 8ebfc20f..5c5d80ea 100644 --- a/src/re_com/slider.cljs +++ b/src/re_com/slider.cljs @@ -9,7 +9,7 @@ [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? parts? - number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list]])) + number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list css-class?]])) ;; ------------------------------------------------------------------------------------ ;; Component: slider @@ -33,7 +33,7 @@ {:name :step :required false :default 1 :type "double | string | r/atom" :validate-fn number-or-string? :description "step value between min and max"} {:name :width :required false :default "400px" :type "string" :validate-fn string? :description "standard CSS width setting for the slider"} {:name :disabled? :required false :default false :type "boolean | r/atom" :description "if true, the user can't change the slider"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the slider, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the slider, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the slider, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the slider, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? slider-parts) :description "See Parts section below."} @@ -77,4 +77,4 @@ :value model :disabled disabled? :on-change (handler-fn (on-change (js/Number (-> event .-target .-value))))} - attr)]]))) \ No newline at end of file + attr)]]))) diff --git a/src/re_com/splits.cljs b/src/re_com/splits.cljs index d1bffdde..9b0d3f93 100644 --- a/src/re_com/splits.cljs +++ b/src/re_com/splits.cljs @@ -6,7 +6,8 @@ [re-com.debug :refer [->attr]] [re-com.util :refer [get-element-by-id sum-scroll-offsets]] [re-com.box :refer [flex-child-style flex-flow-style]] - [re-com.validate :refer [string-or-hiccup? number-or-string? html-attr? css-style? parts?] :refer-macros [validate-args-macro]] + [re-com.theme :as theme] + [re-com.validate :refer [string-or-hiccup? number-or-string? html-attr? css-style? parts? css-class?] :refer-macros [validate-args-macro]] [reagent.core :as reagent])) (defn drag-handle @@ -24,7 +25,8 @@ flex-flow (str (if vertical? "row" "column") " nowrap")] [:div (merge - {:class (str "rc-" (if vertical? "v" "h") "-split-handle display-flex " (get-in parts [:handle :class])) + {:class (theme/merge-class (str "rc-" (if vertical? "v" "h") "-split-handle display-flex ") + (get-in parts [:handle :class])) :style (merge (flex-flow-style flex-flow) {:width (if vertical? width length) :height (if vertical? length width) @@ -33,7 +35,8 @@ (get-in parts [:handle :attr])) [:div (merge - {:class (str "rc-" (if vertical? "v" "h") "-split-handle-bar-1 " (get-in parts [:handle-bar-1 :class])) + {:class (theme/merge-class (str "rc-" (if vertical? "v" "h") "-split-handle-bar-1") + (get-in parts [:handle-bar-1 :class])) :style (merge (if vertical? {:width pos1 :height length :border-right border} @@ -42,7 +45,8 @@ (get-in parts [:handle-bar-1 :attr]))] [:div (merge - {:class (str "rc-" (if vertical? "v" "h") "-split-handle-bar-2 " (get-in parts [:handle-bar-2 :class])) + {:class (theme/merge-class (str "rc-" (if vertical? "v" "h") "-split-handle-bar-2") + (get-in parts [:handle-bar-2 :class])) :style (merge (if vertical? {:width pos2 :height length :border-right border} @@ -87,7 +91,7 @@ {:name :on-split-change :required false :type "double -> nil" :validate-fn fn? :description [:span "called when the user moves the splitter bar (on mouse up, not on each mouse move). Given the new " [:code ":panel-1"] " percentage split"]} {:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"} {:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the outer container)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? hv-split-parts) :description "See Parts section below."} @@ -137,7 +141,7 @@ mouseout-split #(reset! over? false) make-container-attrs (fn [class style attr in-drag?] - (merge {:class (str "rc-h-split display-flex " class) + (merge {:class (theme/merge-class "rc-h-split" "display-flex" class) :id container-id :style (merge (flex-child-style size) (flex-flow-style "row nowrap") @@ -154,7 +158,7 @@ make-panel-attrs (fn [class style attr in-drag? percentage] (merge - {:class (str "display-flex " class) + {:class (theme/merge-class "display-flex" class) :style (merge (flex-child-style (if split-is-px? (if (pos? percentage) (str "0 0 " percentage "px") ;; flex for panel-1 @@ -248,7 +252,7 @@ mouseout-split #(reset! over? false) make-container-attrs (fn [class style attr in-drag?] - (merge {:class (str "rc-v-split display-flex " class) + (merge {:class (theme/merge-class "rc-v-split" "display-flex" class) :id container-id :style (merge (flex-child-style size) (flex-flow-style "column nowrap") @@ -265,7 +269,7 @@ make-panel-attrs (fn [class style attr in-drag? percentage] (merge - {:class (str "display-flex " class) + {:class (theme/merge-class "display-flex" class) :style (merge (flex-child-style (if split-is-px? (if (pos? percentage) (str "0 0 " percentage "px") ;; flex for panel-1 diff --git a/src/re_com/tabs.cljs b/src/re_com/tabs.cljs index 74465162..028e36d9 100644 --- a/src/re_com/tabs.cljs +++ b/src/re_com/tabs.cljs @@ -5,10 +5,11 @@ (:require [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value]] [re-com.box :refer [flex-child-style]] [re-com.validate :refer [css-style? html-attr? parts? vector-of-maps? - position? position-options-list]] + position? position-options-list css-class?]] [re-com.popover :refer [popover-tooltip]] [reagent.core :as reagent])) @@ -36,7 +37,7 @@ {:name :on-change :required true :type "unique-id -> nil" :validate-fn fn? :description "called when user alters the selection. Passed the unique identifier of the selection"} {:name :id-fn :required false :default :id :type "tab -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":tabs"] ", returns its unique identifier (aka id)"]} {:name :label-fn :required false :default :label :type "tab -> string | hiccup" :validate-fn ifn? :description [:span "given an element of " [:code ":tabs"] ", returns its displayable label"]} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the outer container)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description [:span "CSS styles to add or override (aplies to " [:span.bold "each individual tab"] " rather than the container)"]} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the outer container)"]} {:name :parts :required false :type "map" :validate-fn (parts? horizontal-tabs-parts) :description "See Parts section below."} @@ -54,7 +55,7 @@ disabled? (deref-or-value disabled?) _ (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")] [:ul - (merge {:class (str "nav nav-tabs noselect rc-tabs " class) + (merge {:class (theme/merge-class "nav" "nav-tabs" "noselect" "rc-tabs" class) :style (merge (flex-child-style "none") (get-in parts [:wrapper :style]))} (->attr args) @@ -66,9 +67,9 @@ selected? (= id current)] ;; must use current instead of @model to avoid reagent warnings [:li (merge - {:class (str (when disabled? "disabled ") - (when selected? "active rc-tab ") - (get-in parts [:tab :class])) + {:class (theme/merge-class (when disabled? "disabled") + (when selected? ["active" "rc-tab"]) + (get-in parts [:tab :class])) :style (get-in parts [:tab :style]) :key (str id)} (get-in parts [:tab :attr])) @@ -118,7 +119,11 @@ _ (assert (or (not validate?) (not-empty (filter #(= current (id-fn %)) tabs))) "model not found in tabs vector")] (into [:div (merge - {:class (str "noselect btn-group" (when vertical? "-vertical") " rc-tabs " class) + {:class (theme/merge-class "noselect" + "btn-group" + (when vertical? "-vertical") + "rc-tabs " + class) :style (merge (flex-child-style "none") (get-in parts [:wrapper :style]))} (->attr args) @@ -237,7 +242,12 @@ _ (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")] [:ul (merge - {:class (str "rc-tabs noselect nav nav-pills" (when vertical? " nav-stacked") " " class) + {:class (theme/merge-class "rc-tabs" + "noselect" + "nav" + "nav-pills" + (when vertical? " nav-stacked") + class) :style (merge (flex-child-style "none") (get-in parts [:wrapper :style])) :role "tabslist"} @@ -250,10 +260,10 @@ selected? (= id current)] ;; must use 'current' instead of @model to avoid reagent warnings [:li (merge - {:class (str "rc-tabs-pill " - (when disabled? "disabled ") - (when selected? "active ") - (get-in parts [:tab :class])) + {:class (theme/merge-class "rc-tabs-pill" + (when disabled? "disabled") + (when selected? "active") + (get-in parts [:tab :class])) :style (get-in parts [:tab :style]) :key (str id)} (get-in parts [:tab :attr])) diff --git a/src/re_com/tag_dropdown.cljs b/src/re_com/tag_dropdown.cljs index bb4db481..b6221d94 100644 --- a/src/re_com/tag_dropdown.cljs +++ b/src/re_com/tag_dropdown.cljs @@ -8,8 +8,9 @@ [reagent.core :as reagent] [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value px-n assoc-in-if-empty]] - [re-com.validate :as validate :refer [parts?]] + [re-com.validate :as validate :refer [parts? css-class?]] [re-com.box :refer [box h-box v-box gap]] [re-com.checkbox :refer [checkbox]] [re-com.selection-list :as selection-list] @@ -65,7 +66,7 @@ :padding "0px 4px" :margin (px-n 2 (if placeholder? 0 6) 2 0) - :class (str "noselect rc-text-tag " class) + :class (theme/merge-class "noselect" "rc-text-tag" class) :style (merge {:color "white" :background-color (:background-color tag-data) @@ -290,4 +291,4 @@ :no-clip? true :on-cancel #(reset! showing? false) :padding "19px 19px" - :body tag-list-body]])))))) \ No newline at end of file + :body tag-list-body]])))))) diff --git a/src/re_com/text.cljs b/src/re_com/text.cljs index 25d88dd4..ff32a4d5 100644 --- a/src/re_com/text.cljs +++ b/src/re_com/text.cljs @@ -8,7 +8,7 @@ [re-com.box :refer [v-box box line flex-child-style]] [re-com.theme :as theme] [re-com.util :refer [deep-merge]] - [re-com.validate :refer [title-levels-list title-level-type? css-style? html-attr? parts? string-or-hiccup?]])) + [re-com.validate :refer [title-levels-list title-level-type? css-style? html-attr? parts? string-or-hiccup? css-class?]])) ;; ------------------------------------------------------------------------------------ ;; Component: label @@ -28,7 +28,7 @@ [{:name :label :required true :type "anything" :description "text or hiccup or whatever to display"} {:name :on-click :required false :type "-> nil" :validate-fn fn? :description "a function which takes no params and returns nothing. Called when the label is clicked"} {:name :width :required false :type "string" :validate-fn string? :description "a CSS width"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the label, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the label, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "additional CSS styles (applies to the label, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the label, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? label-parts) :description "See Parts section below."} @@ -51,7 +51,7 @@ :align :start :child [:span (merge - {:class (str "rc-label " class) + {:class (theme/merge-class "rc-label" class) :style (merge (flex-child-style "none") style)} (when on-click @@ -80,7 +80,7 @@ {:name :underline? :required false :default false :type "boolean" :description "if true, the title is underlined"} {:name :margin-top :required false :default "0.4em" :type "string" :validate-fn string? :description "CSS size for space above the title"} {:name :margin-bottom :required false :default "0.1em" :type "string" :validate-fn string? :description "CSS size for space below the title"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the title, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the title, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the title, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the title, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? title-parts) :description "See Parts section below."} @@ -110,7 +110,7 @@ :attr (get-in parts [:wrapper :attr]) :children [[:span (themed ::title-label - (merge {:class (str "display-flex rc-title " preset-class " " class) + (merge {:class (theme/merge-class "display-flex" "rc-title" preset-class class) :style (merge (flex-child-style "none") {:margin-top margin-top} {:line-height 1} ;; so that the margins are correct @@ -121,7 +121,8 @@ (when underline? [line :src (at) :size "1px" - :class (str "rc-title-underline " (get-in parts [:underline :class])) + :class (theme/merge-class "rc-title-underline" + (get-in parts [:underline :class])) :style (merge {:margin-bottom margin-bottom} (get-in parts [:underline :style])) :attr (get-in parts [:underline :attr])])]})]))) diff --git a/src/re_com/theme/util.cljs b/src/re_com/theme/util.cljs index 7e3379ad..0ad9061a 100644 --- a/src/re_com/theme/util.cljs +++ b/src/re_com/theme/util.cljs @@ -26,10 +26,7 @@ style (assoc :style (merge (:style acc) style))))) -(defn merge-class [x & classes] - (if-not (seq classes) - x - (into (or (->v (flatten x)) []) - (flatten classes)))) +(defn merge-class [& classes] + (vec (filter some? (flatten classes)))) (defn merge-props [& ms] (reduce rf {} ms)) diff --git a/src/re_com/throbber.cljs b/src/re_com/throbber.cljs index c736311c..2df9caab 100644 --- a/src/re_com/throbber.cljs +++ b/src/re_com/throbber.cljs @@ -5,11 +5,12 @@ (:require [re-com.config :refer [include-args-desc?]] [re-com.debug :refer [->attr]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value px]] [re-com.popover :refer [popover-tooltip]] [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? parts? - number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list]])) + number-or-string? string-or-atom? nillable-string-or-atom? throbber-size? throbber-sizes-list css-class?]])) ;; ------------------------------------------------------------------------------------ ;; Component: throbber @@ -29,7 +30,7 @@ (when include-args-desc? [{:name :size :required false :default :regular :type "keyword" :validate-fn throbber-size? :description [:span "one of " throbber-sizes-list]} {:name :color :required false :default "#999" :type "string" :validate-fn string? :description "CSS color"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the throbber, not the wrapping div)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the throbber, not the wrapping div)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the throbber, not the wrapping div)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to the throbber, not the wrapping div)"]} {:name :parts :required false :type "map" :validate-fn (parts? throbber-parts) :description "See Parts section below."} @@ -44,7 +45,8 @@ (let [seg (fn [] [:li (merge - {:class (str "rc-throbber-segment " (get-in parts [:segment :class])) + {:class (theme/merge-class "rc-throbber-segment" + (get-in parts [:segment :class])) :style (merge (when color {:background-color color}) (get-in parts [:segment :style]))} @@ -57,14 +59,14 @@ :attr (get-in parts [:wrapper :attr]) :align :start :child [:ul - (merge {:class (str "loader rc-throbber " - (case size :regular "" - :smaller "smaller " - :small "small " - :large "large " - "") - class) + (merge {:class (theme/merge-class "loader rc-throbber" + (case size + :smaller "smaller" + :small "small" + :large "large" + nil) + class) :style style} attr) [seg] [seg] [seg] [seg] - [seg] [seg] [seg] [seg]]]))) ;; Each :li element in [seg] represents one of the eight circles in the throbber \ No newline at end of file + [seg] [seg] [seg] [seg]]]))) ;; Each :li element in [seg] represents one of the eight circles in the throbber diff --git a/src/re_com/tree_select.cljs b/src/re_com/tree_select.cljs index 5356f30f..b38a2067 100644 --- a/src/re_com/tree_select.cljs +++ b/src/re_com/tree_select.cljs @@ -10,7 +10,7 @@ [re-com.util :refer [deref-or-value remove-id-item ->v] :as u] [re-com.box :refer [h-box v-box box gap]] [re-com.checkbox :refer [checkbox]] - [re-com.validate :as validate :refer [css-style? html-attr? parts? part?] :refer-macros [validate-args-macro]] + [re-com.validate :as validate :refer [css-style? html-attr? parts? part? css-class?] :refer-macros [validate-args-macro]] [re-com.theme :as theme])) (def tree-select-dropdown-parts-desc @@ -200,7 +200,7 @@ {:name :class :required false :type "string | vector" - :validate-fn string? + :validate-fn css-class? :description "CSS class string, or vector of class strings (applies to the outer container)."} {:name :style :required false @@ -298,7 +298,7 @@ [box :src (at) :style (into {:visibility "hidden"} (get-in parts [:offset :style])) - :class (str "rc-tree-select-offset " (get-in parts [:offset :class])) + :class (theme/merge-class "rc-tree-select-offset " (get-in parts [:offset :class])) :attr (get-in parts [:offset :attr]) :child (apply str (repeat level "⯈"))]) @@ -312,7 +312,8 @@ [[checkbox :src (at) :style (get-in parts [:checkbox :style]) - :class (str "rc-tree-select-choice " (get-in parts [:checkbox :class])) + :class (theme/merge-class "rc-tree-select-choice" + (get-in parts [:checkbox :class])) :attr (into attr (get-in parts [:checkbox :attr])) :model checked? :on-change toggle! @@ -340,7 +341,8 @@ [h-box :src (at) :style (get-in parts [:group :style]) - :class (str "rc-tree-select-group " (get-in parts [:group :class])) + :class (theme/merge-class "rc-tree-select-group" + (get-in parts [:group :class])) :attr (get-in parts [:group :attr]) :children [" " @@ -366,7 +368,8 @@ :justify :center :attr (into {:on-click hide-show!} (get-in parts [:expander :attr])) :style (into {:cursor "pointer" :height "100%"} (get-in parts [:expander :style])) - :class (str "rc-tree-select-expander " (get-in parts [:expander :class])) + :class (theme/merge-class "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 :default re-com.tree-select/group-item] diff --git a/src/re_com/typeahead.cljs b/src/re_com/typeahead.cljs index 555f7598..4fa35728 100644 --- a/src/re_com/typeahead.cljs +++ b/src/re_com/typeahead.cljs @@ -9,11 +9,12 @@ [re-com.debug :refer [->attr]] [re-com.throbber :refer [throbber]] [re-com.input-text :refer [input-text]] + [re-com.theme :as theme] [re-com.util :refer [deref-or-value px]] [re-com.popover :refer [popover-tooltip]] ;; need? [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] ;; need? [re-com.validate :refer [input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? parts? number-or-string? - string-or-atom? throbber-size? throbber-sizes-list]] + string-or-atom? throbber-size? throbber-sizes-list css-class?]] [reagent.core :as reagent] [goog.events.KeyCodes])) @@ -251,7 +252,7 @@ {:name :width :required false :default "250px" :type "string" :validate-fn string? :description "standard CSS width setting for this input"} {:name :height :required false :type "string" :validate-fn string? :description "standard CSS height setting for this input"} {:name :disabled? :required false :default false :type "boolean | r/atom" :description "if true, the user can't interact (input anything)"} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (applies to the textbox)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (applies to the textbox)"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (applies to the textbox)"} {:name :attr :required false :type "HTML attr map" :validate-fn html-attr? :description [:span "HTML attributes, like " [:code ":on-mouse-move"] [:br] "No " [:code ":class"] " or " [:code ":style"] "allowed (applies to " [:span.bold "the outer container"] ", rather than the textbox)"]} {:name :parts :required false :type "map" :validate-fn (parts? #{:suggestions-container :suggestion :throbber}) :description "See Parts section below."} @@ -320,7 +321,8 @@ :child [throbber :src (at) :size :small - :class (str "rc-typeahead-throbber " (get-in parts [:throbber :class]))]]) + :class (theme/merge-class "rc-typeahead-throbber" + (get-in parts [:throbber :class]))]]) (for [[i s] (map vector (range) suggestions) :let [selected? (= suggestion-active-index i)]] ^{:key i} @@ -329,9 +331,9 @@ :child (if render-suggestion (render-suggestion s) s) - :class (str "rc-typeahead-suggestion" - (when selected? " active") - (get-in parts [:suggestion :class])) + :class (theme/merge-class "rc-typeahead-suggestion" + (when selected? " active") + (get-in parts [:suggestion :class])) :attr {:on-mouse-over #(swap! state-atom activate-suggestion-by-index i) :on-mouse-down #(do (.preventDefault %) (swap! state-atom choose-suggestion-by-index i))}])]]])]])))))) diff --git a/src/re_com/v_table.cljs b/src/re_com/v_table.cljs index ac506a10..c02f6372 100644 --- a/src/re_com/v_table.cljs +++ b/src/re_com/v_table.cljs @@ -8,8 +8,9 @@ [re-com.config :refer [debug? include-args-desc?]] [re-com.debug :as debug :refer [->attr]] [re-com.box :as box] + [re-com.theme :as theme] [re-com.util :as util :refer [deref-or-value px-n]] - [re-com.validate :refer [vector-atom? ifn-or-nil? map-atom? parts?]] + [re-com.validate :refer [vector-atom? ifn-or-nil? map-atom? parts? css-class?]] [re-com.dmm-tracker :refer [make-dmm-tracker captureMouseMoves]])) ;; The public API for this component is called table (see last component in this file) @@ -251,7 +252,7 @@ [column-header-renderer scroll-x class style attr] [box/box :src (at) - :class (str "rc-v-table-column-header-content rc-v-table-content " class) + :class (theme/merge-class "rc-v-table-column-header-content" "rc-v-table-content" class) :style (merge {:margin-left (px scroll-x :negative)} style) :attr attr @@ -355,7 +356,7 @@ [column-footer-renderer scroll-x class style attr] [box/box :src (at) - :class (str "rc-v-table-column-footer-content rc-v-table-content " class) + :class (theme/merge-class "rc-v-table-column-footer-content" "rc-v-table-content" class) :style (merge {:margin-left (px scroll-x :negative)} style) :attr attr @@ -523,7 +524,7 @@ {:name :remove-empty-row-space? :required false :default true :type "boolean" :description "If true, removes whitespace between the last row and the horizontal scrollbar. Useful for tables without many rows where otherwise there would be a big gap between the last row and the horizontal scrollbar at the bottom of the available space."} - {:name :class :required false :type "string" :validate-fn string? :description "CSS class names, space separated (these are applied to the table's outer container)"} + {:name :class :required false :type "string" :validate-fn css-class? :description "CSS class names, space separated (these are applied to the table's outer container)"} {:name :parts :required false :type "map" :validate-fn (parts? v-table-parts) :description "See Parts section below."} {:name :src :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging. Source code coordinates map containing keys" [:code ":file"] "and" [:code ":line"] ". See 'Debugging'."]} {:name :debug-as :required false :type "map" :validate-fn map? :description [:span "Used in dev builds to assist with debugging, when one component is used implement another component, and we want the implementation component to masquerade as the original component in debug output, such as component stacks. A map optionally containing keys" [:code ":component"] "and" [:code ":args"] "."]}])) @@ -896,7 +897,7 @@ (- @sel-content-x-start @scroll-x width))] [:div (merge - {:class (str "rc-v-table-selection " class) + {:class (theme/merge-class "rc-v-table-selection" class) :style (merge {:position "absolute" :z-index 1 :top (px top) diff --git a/src/re_demo/datepicker.cljs b/src/re_demo/datepicker.cljs index dd9ef47d..1b46fc66 100644 --- a/src/re_demo/datepicker.cljs +++ b/src/re_demo/datepicker.cljs @@ -10,7 +10,7 @@ [cljs-time.format :refer [formatter unparse]] [re-com.core :refer [at h-box v-box box gap single-dropdown datepicker datepicker-dropdown checkbox label title p button md-icon-button]] [re-com.datepicker :refer [iso8601->date datepicker-parts-desc datepicker-dropdown-args-desc]] - [re-com.validate :refer [date-like?]] + [re-com.validate :refer [date-like? css-class?]] [re-com.util :refer [now->utc px]] [re-demo.utils :refer [panel-title title2 title3 parts-table args-table github-hyperlink status-text]]) (:import diff --git a/src/re_demo/daterange.cljs b/src/re_demo/daterange.cljs index bc12722e..d70d2dcd 100644 --- a/src/re_demo/daterange.cljs +++ b/src/re_demo/daterange.cljs @@ -11,7 +11,7 @@ [re-com.core :refer [at h-box v-box box gap single-dropdown datepicker datepicker-dropdown checkbox label title p button md-icon-button checkbox]] [re-com.datepicker :refer [iso8601->date datepicker-parts-desc datepicker-dropdown-args-desc]] [re-com.daterange :refer [daterange daterange-args-desc daterange-parts-desc daterange-dropdown-args-desc daterange-dropdown]] ;; TODO [GR-REMOVE] Removed unused `:as daterange` - [re-com.validate :refer [date-like?]] + [re-com.validate :refer [date-like? css-class?]] [re-com.util :refer [now->utc px]] [cljs-time.core :as cljs-time] [re-demo.utils :refer [panel-title title2 title3 parts-table args-table github-hyperlink status-text]]) diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index b26243d9..6df77267 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -7,7 +7,7 @@ [re-com.box :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc flex-child-style]] [re-com.util :refer [px]] [re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text]] - [re-com.validate :refer [string-or-hiccup? alert-type? vector-of-maps?]] + [re-com.validate :refer [string-or-hiccup? alert-type? vector-of-maps? css-class?]] [reagent.core :as reagent] [reagent.ratom :refer-macros [reaction]]))