45 lines
1.6 KiB
Clojure
45 lines
1.6 KiB
Clojure
(ns auto-ap.views.components.number
|
|
(:require [react :as react]
|
|
[reagent.core :as r]))
|
|
|
|
|
|
(defn number-internal [props]
|
|
|
|
(let [[text set-text ] (react/useState (some-> props :value str))
|
|
[value set-value ] (react/useState (some-> props :value))
|
|
coerce-value (fn [new-value]
|
|
(let [new-value (js/parseInt new-value)]
|
|
(cond
|
|
(nil? new-value)
|
|
nil
|
|
|
|
(js/Number.isNaN new-value)
|
|
nil
|
|
|
|
:else
|
|
new-value)))]
|
|
(react/useEffect (fn []
|
|
(let [prop-value (:value props)]
|
|
(when (not (= prop-value value))
|
|
(set-value prop-value)
|
|
(if prop-value
|
|
(set-text (str prop-value))
|
|
(set-text ""))))))
|
|
[:div.field.has-addons
|
|
[:div.control
|
|
[:input.input (assoc props
|
|
:on-change (fn [e]
|
|
((:on-change props)
|
|
(coerce-value (.. e -target -value))))
|
|
:value text
|
|
:type "number"
|
|
:step "1"
|
|
:style (or (:style props)
|
|
{:width "5em"})
|
|
:size 3)]]]))
|
|
|
|
(defn number-input []
|
|
[:f> number-internal
|
|
(r/props (r/current-component))])
|
|
|