Added new typeahead approach

This commit is contained in:
2021-05-30 09:16:56 -07:00
parent 057e88de30
commit bff7d4adf2
6 changed files with 43 additions and 24 deletions

View File

@@ -3,9 +3,9 @@
[reagent.ratom :as ra]
[clojure.string :as str]
[clojure.set :as set]
[memsearch.core :as ms]
[downshift :as ds :refer [useCombobox]]
[react]))
(set! *warn-on-infer* true)
;; TODO: This avoids the use of inferred externs by using aget. You could just use the ^js tag though
@@ -21,7 +21,7 @@
:else
(aget actions-and-changes "changes")))
(defn typeahead-v3-internal [{:keys [class style disabled entities entity->text entities-by-id entity-index on-change disabled value name auto-focus] :or {disabled false} :as i}]
(defn typeahead-v3-internal [{:keys [class style disabled entities ^js entity->text entities-by-id entity-index on-change disabled value name auto-focus] :or {disabled false} :as i}]
(let [[items set-items] (react/useState (map clj->js entities))
[getLabelProps getMenuProps getComboboxProps getToggleButtonProps getInputProps getItemProps isOpen highlightedIndex selectItem selectedItem setInputValue]
(as-> (useCombobox (clj->js {:items items
@@ -29,15 +29,11 @@
:defaultSelectedItem value
:onInputValueChange (fn [input]
(if entities-by-id
(->> (ms/text-search (aget input "inputValue") entity-index)
(sort-by (fn [[k v]]
(- (:score v))))
(map (fn [[x]]
(entities-by-id x)
))
(take 5)
clj->js
set-items)
(do
(->> (.search entity-index (or (aget input "inputValue") "") #js {:fuzzy 0.2} )
clj->js
(take 10)
(set-items)))
(set-items (map clj->js (take 5 (filter (fn [x] (str/includes? (or (some-> (entity->text x) str/lower-case) "")
(or (some-> (aget input "inputValue") str/lower-case) "")))