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) "")

70
src/cljs/auto_ap/views/pages/admin/users/form.cljs
View File

@@ -8,7 +8,11 @@
[auto-ap.views.components.modal :as modal]
[auto-ap.views.components.typeahead :refer [typeahead-v3]]
[auto-ap.views.utils :refer [dispatch-event multi-field with-user]]
[re-frame.core :as re-frame]))
[react-popper :refer [usePopper] :as react-popper]
[re-frame.core :as re-frame]
[react :as react]
[reagent.core :as r]))
(re-frame/reg-event-fx
::saving
@@ -33,39 +37,43 @@
{:dispatch [::modal/modal-closed]}))
(defn form []
(let [{:keys [data]} @(re-frame/subscribe [::forms/form ::form])
clients @(re-frame/subscribe [::subs/clients])]
[form-builder/builder {:submit-event [::saving]
:id ::form}
[form-builder/field
"Name"
[:input.input {:type "text"
:field [:name]
:spec ::entity/name}]]
[:div.field
[:p.help "Role"]
[:div.control
[:div.select
[form-builder/raw-field
[:select {:type "select"
:field [:role]}
[:option {:value ":none"} "None"]
[:option {:value ":user"} "User"]
[:option {:value ":manager"} "Manager"]
[:option {:value ":power_user"} "Power User"]
[:option {:value ":admin"} "Admin"]]]]]]
(when (#{":user" ":manager" ":power_user"} (:role data))
[form-builder/field
"Client"
[multi-field {:type "multi-field"
:field [:clients]
:template [[typeahead-v3 {:entities clients
:entity->text :name
:style {:width "13em"}
:type "typeahead-v3"
:field [:client]}]]}]])
[form-builder/hidden-submit-button]]))
[:<>
[form-builder/builder {:submit-event [::saving]
:id ::form}
[form-builder/field
"Name"
[:input.input {:type "text"
:field [:name]
:spec ::entity/name}]]
[:div.field
[:p.help "Role"]
[:div.control
[:div.select
[form-builder/raw-field
[:select {:type "select"
:field [:role]}
[:option {:value ":none"} "None"]
[:option {:value ":user"} "User"]
[:option {:value ":manager"} "Manager"]
[:option {:value ":power_user"} "Power User"]
[:option {:value ":admin"} "Admin"]]]]]]
(when (#{":user" ":manager" ":power_user"} (:role data))
[form-builder/field
"Client"
[multi-field {:type "multi-field"
:field [:clients]
:template [[typeahead-v3 {:entities clients
:entity->text :name
:style {:width "13em"}
:type "typeahead-v3"
:field [:client]}]]}]])
[form-builder/hidden-submit-button]]]))
(re-frame/reg-event-fx
::editing

6
src/cljs/auto_ap/views/pages/invoices/form.cljs
View File

@@ -349,6 +349,7 @@
[typeahead-v3 {:entities @(re-frame/subscribe [::subs/clients])
:entity->text :name
:type "typeahead-v3"
:style {:width "8em"}
:auto-focus (if active-client false true)
:field [:client]
:disabled exists?}]])
@@ -360,6 +361,8 @@
{:query i}
[:name :id]])
:type "typeahead-v3"
:style {:width "18em"}
:auto-focus (if active-client true false)
:field [:vendor]}]]
[form-builder/vertical-control {:required? true}
@@ -393,7 +396,8 @@
[form-builder/field {:required? true}
"Invoice #"
[:input.input {:type "text"
:field [:invoice-number]}]]
:field [:invoice-number]
:style {:width "12em"}}]]
[form-builder/field {:required? true}
"Total"
[money-field {:type "money"