From a2db0a9f4c1c7e3a10a6a8e321fc9288dc8404f0 Mon Sep 17 00:00:00 2001 From: Rohit Aggarwal Date: Mon, 20 Jul 2015 12:32:43 +0100 Subject: [PATCH 1/2] Added ability for the current selection of a dropdown list to have a title attribute so that it can be shown on mouse over. --- src/re_com/dropdown.cljs | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 8769ee1f..517bdd4e 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -160,8 +160,11 @@ [] (let [ignore-click (atom false)] (fn - [internal-model choices id-fn label-fn tab-index placeholder dropdown-click key-handler filter-box? drop-showing?] - (let [_ (reagent/set-state (reagent/current-component) {:filter-box? filter-box?})] + [internal-model choices id-fn label-fn tab-index placeholder dropdown-click key-handler filter-box? drop-showing? title?] + (let [_ (reagent/set-state (reagent/current-component) {:filter-box? filter-box?}) + text (if @internal-model + (label-fn (item-for-id @internal-model choices :id-fn id-fn)) + placeholder)] [:a.chosen-single.chosen-default {:href "javascript:" ;; Required to make this anchor appear in the tab order :tab-index (when tab-index tab-index) @@ -176,12 +179,10 @@ (key-handler event) (when (= (.-which event) 13) ;; Pressing enter on an anchor also triggers click event, which we don't want (reset! ignore-click true))) ;; TODO: Hmmm, have a look at calling preventDefault (and stopProp?) and removing the ignore-click stuff - } - [:span - (if @internal-model - (label-fn (item-for-id @internal-model choices :id-fn id-fn)) - placeholder)] + [:span (when title? + {:title text}) + text] [:div [:b]]])))) ;; This odd bit of markup produces the visual arrow on the right @@ -200,6 +201,7 @@ {:name :filter-box? :required false :default false :type "boolean" :description "if true, a filter text field is placed at the top of the dropdown"} {:name :regex-filter? :required false :default false :type "boolean | atom" :description "if true, the filter text field will support JavaScript regular expressions. If false, just plain text"} {:name :placeholder :required false :type "string" :validate-fn string? :description "background text when no selection"} + {:name :title? :required false :default false :type "boolean" :description "if true, it displays the title for the selected dropdown"} {:name :width :required false :default "100%" :type "string" :validate-fn string? :description "the CSS width. e.g.: \"500px\" or \"20em\""} {:name :max-height :required false :default "240px" :type "string" :validate-fn string? :description "the maximum height of the dropdown part"} {:name :tab-index :required false :type "integer | string" :validate-fn number-or-string? :description "component's tabindex. A value of -1 removes from order"} @@ -219,7 +221,7 @@ internal-model (reagent/atom @external-model) ;; Create a new atom from the model to be used internally drop-showing? (reagent/atom false) filter-text (reagent/atom "")] - (fn [& {:keys [choices model on-change disabled? filter-box? regex-filter? placeholder width max-height tab-index id-fn label-fn group-fn class style attr] + (fn [& {:keys [choices model on-change disabled? filter-box? regex-filter? placeholder width max-height tab-index id-fn label-fn group-fn class style attr title?] :or {id-fn :id label-fn :label group-fn :group} :as args}] {:pre [(validate-args-macro single-dropdown-args-desc args "single-dropdown")]} @@ -297,7 +299,7 @@ {:width (when width width)} style)} attr) ;; Prevent user text selection - [dropdown-top internal-model choices id-fn label-fn tab-index placeholder dropdown-click key-handler filter-box? drop-showing?] + [dropdown-top internal-model choices id-fn label-fn tab-index placeholder dropdown-click key-handler filter-box? drop-showing? title?] (when (and @drop-showing? (not disabled?)) [:div.chosen-drop [filter-text-box filter-box? filter-text key-handler drop-showing?] From 00081365245c3ec6ea1f926cbc3c26f29bc0b6ad Mon Sep 17 00:00:00 2001 From: Ducky Date: Mon, 20 Jul 2015 16:37:10 +0100 Subject: [PATCH 2/2] Updated documentation for the new attribute --- src/re_com/dropdown.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 517bdd4e..dfee0956 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -201,7 +201,7 @@ {:name :filter-box? :required false :default false :type "boolean" :description "if true, a filter text field is placed at the top of the dropdown"} {:name :regex-filter? :required false :default false :type "boolean | atom" :description "if true, the filter text field will support JavaScript regular expressions. If false, just plain text"} {:name :placeholder :required false :type "string" :validate-fn string? :description "background text when no selection"} - {:name :title? :required false :default false :type "boolean" :description "if true, it displays the title for the selected dropdown"} + {:name :title? :required false :default false :type "boolean" :description "if true, it allows the title for the selected dropdown to be displayed via a mouse over."} {:name :width :required false :default "100%" :type "string" :validate-fn string? :description "the CSS width. e.g.: \"500px\" or \"20em\""} {:name :max-height :required false :default "240px" :type "string" :validate-fn string? :description "the maximum height of the dropdown part"} {:name :tab-index :required false :type "integer | string" :validate-fn number-or-string? :description "component's tabindex. A value of -1 removes from order"}