add switcher component

Author: kernelp4nic

project.clj

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

resources/public/examples/basic/index.html

@@ -21,7 +21,6 @@
         <meta name="theme-color" content="#ffffff">
 
         <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
         <link href="css/datepicker.css" rel="stylesheet">
         <link href="css/om-widgets-base.css" rel="stylesheet">
 

src/examples/basic/core.cljs

@@ -1,11 +1,7 @@
 (ns examples.basic.core
   (:require [om.core :as om :include-macros true]
-            [om.dom :as dom :include-macros true]
-            [om-widgets.layouts :as layout :include-macros true]
             [om-widgets.core :as w]
-            [om-widgets.navbar :as navbar]
-            [sablono.core :as html :refer-macros [html]]
-            [om-widgets.grid :refer [row-builder]]
+            [sablono.core  :refer-macros [html]]
             [examples.basic.state-example :as state]
             [examples.basic.tab-example :refer [tab-example]]
             [examples.basic.form-example :refer [form-example]]

src/examples/basic/form_example.cljs

@@ -14,10 +14,11 @@
     om/IRenderState
     (render-state [this state]
       (html
-        [:div.panel.panel-default
-         [:div.panel-heading "Form"]
-         [:div.panel-body
-           [:form
+        [:div.panel.sdsdpanel-default
+         [:div.sdpanel-body.row
+          [:div.form-group.col-lg-3]
+          [:form.col-lg-6
+
             [:div.form-group
              [:label "Name"]
              (w/textinput app :name {:input-class "form-control"
@@ -110,6 +111,12 @@
                                           :checked-value true
                                           :unchecked-value false})]
 
+            [:div.form-group
+             [:label "Switcher"]
+             [:br]
+             (w/switcher app :some-switch {:options [{:value 1 :text "1"}
+                                                     {:value 2 :text "2"}
+                                                     {:value 3 :text "3"}]})]
 
             [:div.form-group
              [:label "Checks - Toggle values on Sets"]

src/om_widgets/core.cljs

@@ -1,7 +1,5 @@
 (ns om-widgets.core
-  (:require [om.core :as om :include-macros true]
-            [om.dom :as dom :include-macros true]
-            [om-widgets.textinput]
+  (:require [om-widgets.textinput]
             [om-widgets.checkbox]
             [om-widgets.dropdown]
             [om-widgets.navbar]
@@ -15,6 +13,7 @@
             [om-widgets.page-switcher]
             [om-widgets.popover]
             [om-widgets.slider]
+            [om-widgets.switcher]
             [om-widgets.editable-list-view]
             [om-widgets.utils]))
 
@@ -25,6 +24,7 @@
 (def datepicker om-widgets.datepicker/datepicker)
 (def radiobutton om-widgets.radiobutton/radiobutton)
 (def radiobutton-group om-widgets.radiobutton/radiobutton-group)
+(def switcher om-widgets.switcher/switch)
 (def combobox om-widgets.combobox/combobox)
 (def button om-widgets.button/button)
 (def grid om-widgets.grid/grid)

src/om_widgets/switcher.cljs

@@ -0,0 +1,62 @@
+(ns om-widgets.switcher
+  (:require [om.core :as om :include-macros true]
+            [om.dom :as dom :include-macros true]
+            [schema.core :as s :include-macros true]
+            [sablono.core :as html :refer-macros [html]]
+            [cljs.core.async :refer [put! chan <! alts! timeout close!]]
+            [om-widgets.utils :as utils]))
+
+
+(defn- build-label-class [cursor cursor-path value]
+  (str "btn btn-default" (when (= (get-in cursor [cursor-path]) value) " active")))
+
+(defn item
+  [cursor owner]
+  (reify
+    om/IRenderState
+    (render-state
+      [this {:keys [value text cursor-path channel] :as state}]
+      (html
+        [:label {:class (build-label-class cursor cursor-path value)}
+         [:input {:type "radio"
+                  :key text
+                  :onChange (fn [e]
+                              (when channel
+                                (put! channel value))
+                              (om/update! cursor cursor-path value))}
+          text]]))))
+
+(defn switcher
+  [cursor owner]
+  (reify
+    om/IRenderState
+    (render-state
+      [this {:keys [options cursor-path channel classes] :as state}]
+      (html
+        (utils/make-childs [:div {:class ["btn-group" (or classes "")]
+                                  :data-toggle "buttons"}]
+                           (map #(om/build item
+                                           cursor
+                                           {:state {:value (:value %)
+                                                    :text (:text %)
+                                                    :channel channel
+                                                    :cursor-path cursor-path}})
+                                options))))))
+
+;; ---------------------------------------------------------------------
+;; Schema
+
+(def OptionsSchema
+  [{:value s/Any
+    :text s/Str}])
+
+;; ---------------------------------------------------------------------
+;; Public
+
+(defn switch
+  [cursor cursor-path {:keys [options channel classes]}]
+  (s/validate OptionsSchema options)
+  (om/build switcher cursor {:state {:cursor-path cursor-path
+                                     :options options
+                                     :classes classes
+                                     :channel channel}}))