instant-text-input.clj

(defn instant-text-input
  [{:keys [value format-value on-change-text]}]
  (let [value' (r/atom value)
        this' (atom nil)
        on-change-text' (fn [new-value]
                          (reset! value' (format-value new-value)) ; Do formatting
                          (some-> @this' r/force-update)
                          (on-change-text new-value))]
    (r/create-class
      {:display-name "instant-text-input"
       :component-did-mount
       (fn [this] (reset! this' this))
       :component-will-unmount
       (fn [] (reset! this' nil))
       :reagent-render
       (fn [props]
         [text-input (assoc props
                            :on-change-text on-change-text'
                            :value @value')])})))

;; Usage
[instant-text-input {:style {:flex 0.45
                            :text-align :right}
                    :keyboard-type :numeric
                    :value (fmt/money amount)
                    :format-value (comp fmt/money fmt/parse-money)
                    :on-change-text #(dispatch-sync [::events/set-amount
                                                     (fmt/parse-money %)])}]