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

Added new typeahead approach

Browse Source
This commit is contained in:
Bryce Covert
2021-05-30 09:16:56 -07:00
parent 057e88de30
commit bff7d4adf2
6 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
dev.cljs.edn
View File

@@ -6,9 +6,14 @@
:infer-externs true
:closure-defines {cljs.core/*global* "window"}
:npm-deps true
:foreign-libs [{:file "node_modules/minisearch/dist/es/index.js"
:provides ["minisearch"]
:global-exports {minisearch MiniSearch}}]
:bundle-cmd {:none ["npx" "webpack" "--mode=development" :output-to
"--output-path" :final-output-dir
"--output-filename" :final-output-filename]
:default ["npx" "webpack" "--mode=production" :output-to
"--output-path" :final-output-dir
"--output-filename" :final-output-filename]}}
"--output-filename" :final-output-filename]}
}

11
package-lock.json generated
View File

@@ -10,6 +10,7 @@
"dependencies": {
"downshift": "^6.1.3",
"dropzone": "^4.3.0",
"minisearch": "^3.0.2",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-datepicker": "^2.1.0",
@@ -1217,6 +1218,11 @@
"node": ">=6"
}
},
"node_modules/minisearch": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/minisearch/-/minisearch-3.0.2.tgz",
"integrity": "sha512-7rTrJEzovKNi5LSwiIr5aCfJNNo6Lk4O9HTVzjFTMdp+dSr6UisUnEqdwj4rBgNcAcaWW5ClpXnpgTurv8PGqA=="
},
"node_modules/neo-async": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
@@ -3160,6 +3166,11 @@
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
"dev": true
},
"minisearch": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/minisearch/-/minisearch-3.0.2.tgz",
"integrity": "sha512-7rTrJEzovKNi5LSwiIr5aCfJNNo6Lk4O9HTVzjFTMdp+dSr6UisUnEqdwj4rBgNcAcaWW5ClpXnpgTurv8PGqA=="
},
"neo-async": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",

1
package.json
View File

@@ -9,6 +9,7 @@
"dependencies": {
"downshift": "^6.1.3",
"dropzone": "^4.3.0",
"minisearch": "^3.0.2",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-datepicker": "^2.1.0",

4
project.clj
View File

@@ -86,9 +86,7 @@
;; needed for java 11
[javax.xml.bind/jaxb-api "2.4.0-b180830.0359"]
[coderafting/memsearch "0.1.0"]]
[javax.xml.bind/jaxb-api "2.4.0-b180830.0359"]]
:managed-dependencies [;; explicit dependencies to get to latest versions for above
[com.fasterxml.jackson.core/jackson-core "2.12.0"]
[com.fasterxml.jackson.core/jackson-databind "2.12.0"]

22
src/cljs/auto_ap/subs.cljs
View File

@@ -3,7 +3,10 @@
[auto-ap.utils :refer [by]]
[clojure.string :as str]
[goog.crypt.base64 :as base64]
[memsearch.core :as ms]))
[minisearch :as ms]))
(set! *warn-on-infer* true)
(def MiniSearch (aget ms "default"))
(re-frame/reg-sub
::client
@@ -65,10 +68,13 @@
::accounts-index
:<- [::accounts]
(fn [accounts]
(ms/text-index (map (fn [v] {:id (:id v)
(doto (MiniSearch. #js {:fields #js ["numeric-code" "name" "content"]
:storeFields #js ["id" "numeric-code" "name" "content"]})
(.addAll (clj->js (map (fn [v] {:id (:id v)
:name (:name v)
:numeric-code (:numeric-code v)
:content (str (:numeric-code v) " " (:name v))})
accounts)
{:maintain-actual? true})))
accounts))))))
@@ -217,10 +223,12 @@
::searchable-vendors-index
:<- [::searchable-vendors]
(fn [searchable-vendors]
(ms/text-index (map (fn [v] {:id (:id v)
(doto (MiniSearch. #js {:fields #js ["name" "content"]
:storeFields #js ["id" "name" "content"]})
(.addAll (clj->js (map (fn [v] {:id (:id v)
:name (:name v)
:content (:name v)})
searchable-vendors)
{:maintain-actual? true})))
searchable-vendors))))))
(re-frame/reg-sub
::all-vendors

16
src/cljs/auto_ap/views/components/typeahead.cljs
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)
(do
(->> (.search entity-index (or (aget input "inputValue") "") #js {:fuzzy 0.2} )
clj->js
set-items)
(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) "")))