navbar item, custom html support

Author: kernelp4nic

project.clj

@@ -1,4 +1,4 @@
-(defproject org.clojars.intception/om-widgets "0.3.34"
+(defproject org.clojars.intception/om-widgets "0.3.35"
   :description "Widgets for OM/React"
   :url "https://github.com/orgs/intception/"
   :license {:name "Eclipse Public License"

src/examples/basic/state_example.cljs

@@ -1,5 +1,5 @@
-(ns examples.basic.state-example)
-
+(ns examples.basic.state-example
+  (:require [sablono.core :as html :refer-macros [html]]))
 
 (def app-state
   (atom
@@ -55,7 +55,17 @@
                              :badge 6
                              :text "Inbox"}]}]
                   [{:text "Editable list"
-                    :id :editable-list}]]
+                    :id :editable-list}]
+                  [{:text (fn [] (html [:label "Current user"]))
+                    :className "profile-user"
+                    :id :profile
+                    :right-position true
+                    :items [{:id :profile
+                             :type :entry
+                             :text "Profile"}
+                            {:id :logout
+                             :type :entry
+                             :text "Logout"}]}]]
      :datepicker {:inline #inst "1991-01-25"
                   :input-group-left #inst "1991-01-25"
                   :input-group-right #inst "1991-01-25"

src/om_widgets/dropdown.cljs

@@ -1,10 +1,12 @@
 (ns om-widgets.dropdown
-  (:require-macros [cljs.core.async.macros :refer [go go-loop]])
+  (:require-macros [cljs.core.async.macros :refer [go go-loop]]
+                   [pallet.thread-expr :as th])
   (:require [schema.core :as s :include-macros true]
             [om.core :as om :include-macros true]
             [om-widgets.utils :as u]
             [cljs.core.async :refer [put! chan <! alts! timeout close!]]
-            [sablono.core :as html :refer-macros [html]]))
+            [sablono.core :as html :refer-macros [html]]
+            [pallet.thread-expr :as th]))
 
 
 ;; TODO support headings: <li class="dropdown-header">Nav header</li>
@@ -51,10 +53,11 @@
 ;; Dropdown containers
 
 (defn- build-dropdown-js-options
-  [{:keys [size opened channel] :as state}]
+  [{:keys [size opened channel className] :as state}]
   {:class ["om-widgets-dropdown dropdown btn-group"
            (str "btn-group-" (name (or size :md)))
-           (when opened " open")]
+           (when opened " open")
+           (when className className)]
    ;; tab index is set to 0 to force focus on the container,
    ;; this way, the onBlur event will be called when the user
    ;; clicks outside and we can close the dropdown.
@@ -111,11 +114,16 @@
     (render-state [_ {:keys [title items icon badge channel] :as state}]
       (html
         [:li (build-dropdown-js-options state)
-         [:a {:class "dropdown-toggle" :title title}
+         [:a (-> {:class "dropdown-toggle"}
+                 (th/when-> (string? title)
+                   (merge {:title title})))
           (when icon [:span {:class (u/glyph icon)}])
-          [:span title]
-          (when badge [:span.badge badge])
-          [:span {:class "caret"}]]
+          (if (fn? title)
+            (title)
+            [:div
+             [:span title]
+             [:span {:class "caret"}]])
+          (when badge [:span.badge badge])]
          (om/build dropdown-menu cursor {:state {:channel channel
                                                  :items items}})]))))
 
@@ -143,7 +151,9 @@
              [:button {:class "btn btn-default dropdown-toggle"
                        :type "button"}
               (when icon [:span {:class (u/glyph icon)}])
-              [:span title]
+              (if (fn? title)
+                (title)
+                [:span title])
               (when badge [:span.badge badge])
               [:span {:class "caret"}]])
            (om/build dropdown-menu cursor {:state {:channel channel
@@ -168,7 +178,7 @@
 
 (def DropdownSchema
   {:items [(s/either EntrySchema DividerSchema)]
-   :title s/Str
+   :title (s/either s/Str (s/pred fn?))
    (s/optional-key :id) (s/either s/Keyword s/Str s/Int)
    (s/optional-key :korks) (s/either s/Any [s/Any])
    (s/optional-key :icon) s/Any

src/om_widgets/navbar.cljs

@@ -28,9 +28,9 @@
     om/IRenderState
     (render-state [_ {:keys [channel on-selection active-path]}]
       (html
-        [:li {:class (when (= (get-in cursor [active-path])
-                              (:id entry))
-                       "active")}
+        [:li {:class [(when (= (get-in cursor [active-path])
+                               (:id entry))
+                        "active")]}
 
          (if (:items entry)
            (dropdown cursor (->> {:id (:id entry)
@@ -41,23 +41,27 @@
                                                   (on-selection v)
                                                   (when (om/get-state owner :collapsed?)
                                                     (put! channel :toggle-menu)))
-                                  :items (:items entry)}))
+                                  :items (:items entry)}
+                                 (th/when->> (:className entry)
+                                   (merge {:className (:className entry)}))))
            [:a (->> {}
                     (th/when->> (:className entry)
-                                (merge {:className (:className entry)}))
+                      (merge {:className (:className entry)}))
                     (th/when->> (:url entry)
-                                (merge {:href (:url entry)}))
+                      (merge {:href (:url entry)}))
                     (th/when->> on-selection
-                                (merge {:onClick (fn [e]
-                                                   (on-selection (:id @entry))
-                                                   (when (om/get-state owner :collapsed?)
-                                                     (put! channel :toggle-menu)))})))
+                      (merge {:onClick (fn [e]
+                                         (on-selection (:id @entry))
+                                         (when (om/get-state owner :collapsed?)
+                                           (put! channel :toggle-menu)))})))
 
             (when (or (:iconClassName entry) (:icon entry))
               [:span {:class (or (:iconClassName entry)
                                  (u/glyph (:icon entry)))}])
 
-            [:span (:text entry)]
+            (if (fn? (:text entry))
+              ((:text entry))
+              [:span (:text entry)])
 
             (when (:badge entry)
               [:span.badge (:badge entry)])])]))))
@@ -166,7 +170,7 @@
 ;; Schema
 
 (def NavbarEntry
-  {:text s/Str
+  {:text (s/either s/Str (s/pred fn?))
    :id s/Keyword
    (s/optional-key :right-position) s/Bool
    (s/optional-key :url) s/Str
@@ -175,9 +179,10 @@
    (s/optional-key :icon) (s/either s/Keyword s/Str)})
 
 (def NavbarDropdownEntry
-  {:text s/Str
+  {:text (s/either s/Str (s/pred fn?))
    :id s/Keyword
    :items [(s/either EntrySchema DividerSchema)]
+   (s/optional-key :className) s/Str
    (s/optional-key :icon) (s/either s/Keyword s/Str)
    (s/optional-key :iconClassName) s/Str
    (s/optional-key :badge) (s/either s/Int s/Str)