notid/integreat
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

typeahead improvements

Browse Source
This commit is contained in:
Bryce Covert
2019-01-25 09:29:54 -08:00
parent 226a54b7ad
commit 09f30e19cf
1 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/cljs/auto_ap/views/components/typeahead.cljs
View File

@@ -15,7 +15,7 @@
(defn typeahead [{:keys [matches on-change field text-field value class not-found-description (defn typeahead [{:keys [matches on-change field text-field value class not-found-description
not-found-value auto-focus]}] not-found-value auto-focus]}]
(let [text (r/atom (or (second (first (filter #(= (first %) value) matches))) "")) (let [text (r/atom (or (second (first (filter #(= (first %) value) matches))) ""))
highlighted (r/atom 0) highlighted (r/atom nil)
selected (r/atom (first (first (filter #(= (first %) value) matches)))) selected (r/atom (first (first (filter #(= (first %) value) matches))))
select (fn [[id text-description text-value]] select (fn [[id text-description text-value]]
(reset! selected id) (reset! selected id)
@@ -23,8 +23,7 @@
(when on-change (when on-change
(if (= :not-found id) (if (= :not-found id)
(on-change nil text-description text-value) (on-change nil text-description text-value)
(on-change id text-description (or text-value text-description))))) (on-change id text-description (or text-value text-description)))))]
]
(r/create-class (r/create-class
{:reagent-render (fn [{:keys [matches on-change field text-field value class not-found-description]}] {:reagent-render (fn [{:keys [matches on-change field text-field value class not-found-description]}]
(let [text @text (let [text @text
@@ -63,24 +62,36 @@
(do (select [nil ""]) (do (select [nil ""])
true))) true)))
:on-key-up (fn [e] :on-key-up (fn [e]
(if (and (= 13 (.-keyCode e)) (condp = (.-keyCode e)
(seq valid-matches)) ; up
(do 38 (do
(select (first valid-matches)) (when-let [new-match (->> valid-matches
false) (take-while #(not= (first %) @highlighted))
true)) (last))]
(reset! highlighted new-match))
true)
;; dwon
40 (do
(when-let [new-match (->> valid-matches
(drop-while #(not= (first %) @highlighted))
(drop 1)
(first))]
(reset! highlighted new-match))
true)
13 (when @highlighted
(select @highlighted)
false)
true)
)
:on-change (fn [e] :on-change (fn [e]
(let [new-matches (get-valid-matches matches not-found-description not-found-value (.. e -target -value))] (let [new-matches (get-valid-matches matches not-found-description not-found-value (.. e -target -value))]
(reset! highlighted (ffirst new-matches))) (reset! highlighted (first new-matches)))
(select [nil (.. e -target -value)]))}])
(select [nil (.. e -target -value)]))}
])
(cond (cond
(and (seq text) (and (seq text)
(not @selected) (not @selected)
(seq valid-matches)) (seq valid-matches))
(let [h @highlighted] (let [[h] @highlighted]
[:div.typeahead-menu [:div.typeahead-menu
[:ul [:ul
(for [[id t :as match] valid-matches] (for [[id t :as match] valid-matches]