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

making main form better.

Browse Source
This commit is contained in:
Bryce Covert
2022-07-16 15:53:27 -07:00
parent 16a1d243e8
commit 2830004092
9 changed files with 284 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/cljs/auto_ap/views/components/money_field.cljs
View File

@@ -1,23 +1,71 @@
(ns auto-ap.views.components.money-field
(:require [reagent.core :as r]
[clojure.string :as str]))
[auto-ap.views.utils :refer [->short$]]
[clojure.string :as str]
[react :as react]))
(def good-$ #"^\-?[0-9]+(\.[0-9][0-9])?$")
(defn money-field [{:keys [min max disabled on-change value]}]
(let [parsed-amount (r/atom {:parsed value
:raw (str value)})]
(fn [{:keys [min max disabled on-change value]}]
[:input.input {:type "number"
:disabled disabled
:on-change (fn [e]
(let [raw (.. e -target -value)
new-value (when (and raw (not (str/blank? raw)))
(js/parseFloat raw))]
(swap! parsed-amount assoc
:raw raw
:parsed new-value)
(when (not= value new-value)
(on-change new-value))))
:value (:raw @parsed-amount)
:min min
:max max
:step "0.01"}])))
(defn -money-field [{:keys [min max disabled on-change value class style]}]
(let [[ parsed-amount set-parsed-amount] (react/useState {:parsed value
:raw (cond
(str/blank? value)
""
(js/Number.isNaN (js/parseFloat value))
""
:else
(->short$ (js/parseFloat value)))})]
(react/useEffect (fn []
;; allow the controlling field to change the raw representation
;; when the raw amount is a valid representation, so that 33.
;; doesn't get unset
(when (or
(and (:raw parsed-amount)
(re-find good-$ (:raw parsed-amount)))
(str/blank? (:raw parsed-amount)))
(set-parsed-amount
(assoc parsed-amount
:parsed value
:raw (cond
(str/blank? value)
""
(js/Number.isNaN (js/parseFloat value))
""
:else
(->short$ (js/parseFloat value))))))
nil))
[:div.control.has-icons-left
[:input.input {:type "text"
:disabled disabled
:class class
:on-change (fn [e]
(let [raw (.. e -target -value)
new-value (when (and raw
(not (str/blank? raw))
(re-find good-$ raw))
(js/parseFloat raw))]
(set-parsed-amount {:raw raw
:parsed new-value})
(when (not= value new-value)
(on-change new-value))))
:value (or (:raw parsed-amount)
"")
:on-blur (fn []
(when-not (re-find good-$ (:raw parsed-amount))
(set-parsed-amount {:raw ""
:parsed nil})
(on-change nil)))
:min min
:max max
:step "0.01"
:style (or style
{:width "8em"})}]
[:span.icon.is-left
[:i.fa.fa-usd]]]))
(defn money-field []
[:f> -money-field (r/props (r/current-component))])