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

using popper instead of handrolled appearing stuff.

Browse Source
This commit is contained in:
Bryce Covert
2022-07-17 19:40:23 -07:00
parent b1cdd60781
commit 5e49f61265
8 changed files with 158 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/cljs/auto_ap/views/components/typeahead/vendor.cljs
View File

@@ -3,12 +3,34 @@
[downshift :as ds :refer [useCombobox]]
[re-frame.core :as re-frame]
[auto-ap.views.utils :refer [with-user]]
[react-popper :refer [usePopper] :as react-popper]
[reagent.core :as r]
[clojure.string :as str]
[react :as react]))
(set! *warn-on-infer* true)
(defn popper-test-internal [props children]
(let [[reference-element set-reference-element] (react/useState nil)
[popper-element set-popper-element] (react/useState nil)
^js/Popper use (usePopper reference-element popper-element
#js {:placement "bottom-start"
:strategy "fixed"})
popper-props (into {:ref set-popper-element
:style (assoc (js->clj (.. use -styles -popper))
:z-index "1000")
}
(js->clj (.. use -attributes -popper)))]
[:<>
[:div {:ref set-reference-element}]
[:div popper-props
(into [:div {:class (:class props)}] children)]]))
(defn popper []
[:f> popper-test-internal (r/props (r/current-component))
(r/children (r/current-component))])
(re-frame/reg-event-fx
::search-completed
(fn [_ [_ set-items set-loading-status result]]
@@ -62,8 +84,7 @@
:key ::input-value-settled}})))
(defn typeahead-v3-internal [{:keys [class entity->text entities on-input-change style ^js on-change disabled value name auto-focus] :or {disabled false}
prop-value :value
:as i}]
prop-value :value}]
(let [[items set-items] (react/useState (or entities
[]))
[focused set-focus] (react/useState (boolean auto-focus))
@@ -148,8 +169,8 @@
:autoFocus (if auto-focus
"autoFocus"
"")}))]]]
[:div {:class (when (and isOpen (seq items))
"typeahead-menu")}
[popper {:class (when (and isOpen (seq items))
"typeahead-menu")}
[:ul (js->clj (getMenuProps))
(when (and isOpen (seq items))
(for [[index item] (map vector (range) (js->clj items :keywordize-keys true))]
@@ -176,11 +197,10 @@
:on-input-change
(fn [input set-items]
(if entities-by-id
(do
(set-items
(into-array
(->> (.search entity-index (or (aget input "inputValue") "") #js {:fuzzy 0.2} )
(take 10)))))
(set-items
(into-array
(->> (.search entity-index (or (aget input "inputValue") "") #js {:fuzzy 0.2} )
(take 10))))
(set-items (into-array
(take 10 (filter (fn [x] (str/includes? (or (some-> (entity->text x) str/lower-case) "")