Merge pull request #199 from PawelStroinski/tabs

Add tooltip to horizontal-bar-tabs & :validate?

src/re_com/tabs.cljs

@@ -2,22 +2,28 @@
  (:require-macros [re-com.core :refer [handler-fn]])
  (:require [re-com.util :refer [deref-or-value]]
  [re-com.box :refer [flex-child-style]]
- [re-com.validate :refer [css-style? html-attr? vector-of-maps?] :refer-macros [validate-args-macro]]))
+ [re-com.validate :refer [css-style? html-attr? vector-of-maps?
+ position? position-options-list] :refer-macros [validate-args-macro]]
+ [re-com.popover :refer [popover-tooltip]]
+ [reagent.core :as reagent]))
 
 
 ;;--------------------------------------------------------------------------------------------------
 ;; Component: horizontal-tabs
 ;;--------------------------------------------------------------------------------------------------
 
 (def tabs-args-desc
- [{:name :model :required true :type "unique-id | atom" :description "the unique identifier of the currently selected tab"}
- {:name :tabs :required true :type "vector of tabs | atom" :validate-fn vector-of-maps? :description "one element in the vector for each tab. Typically, each element is a map with :id and :label keys"}
- {: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 :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 :model :required true :type "unique-id | atom" :description "the unique identifier of the currently selected tab"}
+ {:name :tabs :required true :type "vector of tabs | atom" :validate-fn vector-of-maps? :description "one element in the vector for each tab. Typically, each element is a map with :id and :label keys"}
+ {: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 :tooltip-fn :required false :default :tooltip :type "tab -> string | hiccup" :validate-fn ifn? :description [:span "[horizontal-bar-tabs only] given an element of " [:code ":tabs"] ", returns its tooltip"]}
+ {:name :tooltip-position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "[horizontal-bar-tabs only] relative to this anchor. One of " position-options-list]}
+ {:name :class :required false :type "string" :validate-fn string? :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 :validate? :required false :default true :type "boolean" :description [:span "[horizontal-bar-tabs & vertical-bar-tabs only] validate " [:code ":model"] " against " [:code ":tabs"]]}])
 
 (defn horizontal-tabs
  [& {:keys [model tabs on-change id-fn label-fn class style attr]
@@ -50,45 +56,62 @@
 ;;--------------------------------------------------------------------------------------------------
 
 (defn- bar-tabs
- [& {:keys [model tabs on-change id-fn label-fn vertical? class style attr]}]
- (let [current (deref-or-value model)
- tabs (deref-or-value tabs)
- _ (assert (not-empty (filter #(= current (id-fn %)) tabs)) "model not found in tabs vector")]
- [:div
- (merge {:class (str "rc-tabs noselect btn-group" (if vertical? "-vertical") " " class)
- :style (flex-child-style "none")}
- attr)
- (for [t tabs]
- (let [id (id-fn t)
- label (label-fn t)
- selected? (= id current)] ;; must use current instead of @model to avoid reagent warnings
- [:button
- {:type "button"
- :key (str id)
- :class (str "btn btn-default " (if selected? "active"))
- :style style
- :on-click (when on-change (handler-fn (on-change id)))}
- label]))]))
+ [& {:keys [model tabs on-change id-fn label-fn tooltip-fn tooltip-position vertical? class style attr validate?]}]
+ (let [showing (reagent/atom nil)]
+ (fn [& {:keys [model tabs]}]
+ (let [current (deref-or-value model)
+ tabs (deref-or-value tabs)
+ _ (assert (or (not validate?) (not-empty (filter #(= current (id-fn %)) tabs))) "model not found in tabs vector")]
+ (into [:div
+ (merge {:class (str "rc-tabs noselect btn-group" (if vertical? "-vertical") " " class)
+ :style (flex-child-style "none")}
+ attr)]
+ (for [t tabs]
+ (let [id (id-fn t)
+ label (label-fn t)
+ tooltip (when tooltip-fn (tooltip-fn t))
+ selected? (= id current)
+ the-button [:button
+ (merge
+ {:type "button"
+ :key (str id)
+ :class (str "btn btn-default " (if selected? "active"))
+ :style style
+ :on-click (when on-change (handler-fn (on-change id)))}
+ (when tooltip
+ {:on-mouse-over (handler-fn (reset! showing id))
+ :on-mouse-out (handler-fn (swap! showing #(when-not (= id %) %)))}))
+ label]]
+ (if tooltip
+ [popover-tooltip
+ :label tooltip
+ :position (or tooltip-position :below-center)
+ :showing? (reagent/track #(= id @showing))
+ :anchor the-button]
+ the-button))))))))
 
 
 (defn horizontal-bar-tabs
- [& {:keys [model tabs on-change id-fn label-fn class style attr]
- :or {id-fn :id label-fn :label}
+ [& {:keys [model tabs on-change id-fn label-fn tooltip-fn tooltip-position class style attr validate?]
+ :or {id-fn :id label-fn :label tooltip-fn :tooltip}
  :as args}]
  {:pre [(validate-args-macro tabs-args-desc args "tabs")]}
  (bar-tabs
- :model model
- :tabs tabs
- :on-change on-change
- :id-fn id-fn
- :label-fn label-fn
- :vertical? false
- :class class
- :style style
- :attr attr))
+ :model model
+ :tabs tabs
+ :on-change on-change
+ :id-fn id-fn
+ :label-fn label-fn
+ :tooltip-fn tooltip-fn
+ :tooltip-position tooltip-position
+ :vertical? false
+ :class class
+ :style style
+ :attr attr
+ :validate? validate?))
 
 (defn vertical-bar-tabs
- [& {:keys [model tabs on-change id-fn label-fn class style attr]
+ [& {:keys [model tabs on-change id-fn label-fn class style attr validate?]
  :or {id-fn :id label-fn :label}
  :as args}]
  {:pre [(validate-args-macro tabs-args-desc args "tabs")]}
@@ -101,7 +124,8 @@
  :vertical? true
  :class class
  :style style
- :attr attr))
+ :attr attr
+ :validate? validate?))
 
 
 ;;--------------------------------------------------------------------------------------------------

src/re_demo/tabs.cljs

@@ -10,7 +10,8 @@
 
 (def demos [{:id 1 :label "Tab Styles"}
  {:id 2 :label "Persistent Tab Selection"}
- {:id 3 :label "Dynamic Tabs"}])
+ {:id 3 :label "Dynamic Tabs"}
+ {:id 4 :label "Tooltips"}])
 
 
 ;; Define some tabs.
@@ -144,6 +145,22 @@
  new-tab {:id (keyword c) :label c}]
  (swap! tab-defs conj new-tab)))]]]]])))
 
+
+(defn tooltips-demo
+ []
+ (let [tab-defs [{:id ::1 :label "Left Tab" :tooltip "This is the first tooltip..."}
+ {:id ::2 :label "Middle Tab" :tooltip "This is the second tooltip..."}
+ {:id ::3 :label "Right Tab" :tooltip "This is the third and the final tooltip!"}]
+ selected-tab-id (reagent/atom (:id (first tab-defs)))]
+ (fn []
+ [v-box
+ :gap "20px"
+ :children [[p "Hover over a tab to see a tooltip."]
+ [horizontal-bar-tabs
+ :model selected-tab-id
+ :tabs tab-defs
+ :on-change #(reset! selected-tab-id %)]]])))
+
 (defn panel2
  []
  (let [selected-demo-id (reagent/atom 1)]
@@ -186,7 +203,8 @@
  (case @selected-demo-id
  1 [tab-styles-demo]
  2 [remembers-demo]
- 3 [adding-tabs-demo])]]]]]]]])))
+ 3 [adding-tabs-demo]
+ 4 [tooltips-demo])]]]]]]]])))
 
 
 ;; core holds a reference to panel, so need one level of indirection to get figwheel updates