Merge pull request #363 from reagent-project/remove-synthetic-input

Remove synthetic-input options
This commit is contained in:
Juho Teperi 2018-04-11 20:21:15 +03:00 committed by GitHub
commit 2588041c5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 108 deletions

View File

@ -9,6 +9,7 @@
- Apply vector metadata to the outermost element when using nesting shorthard ([#262](https://github.com/reagent-project/reagent/issues/262)) - Apply vector metadata to the outermost element when using nesting shorthard ([#262](https://github.com/reagent-project/reagent/issues/262))
- Add `:<>` shorthand for [React Fragments](https://reactjs.org/docs/fragments.html) ([#352](https://github.com/reagent-project/reagent/pull/352)]) - Add `:<>` shorthand for [React Fragments](https://reactjs.org/docs/fragments.html) ([#352](https://github.com/reagent-project/reagent/pull/352)])
- Fix `:class` property with custom elements ([#322](https://github.com/reagent-project/reagent/issues/322)) - Fix `:class` property with custom elements ([#322](https://github.com/reagent-project/reagent/issues/322))
- Remove synthetic input support (added in previous alpha) ([#351](https://github.com/reagent-project/reagent/pull/351))
## 0.8.0-alpha2 (2017-10-20) ## 0.8.0-alpha2 (2017-10-20)
@ -21,10 +22,10 @@
- Update Cljsjs dependencies or Node packages to use React 16 - Update Cljsjs dependencies or Node packages to use React 16
- `:class` property now supports collections of strings - `:class` property now supports collections of strings
([#154](https://github.com/reagent-project/reagent/pull/154)) ([#154](https://github.com/reagent-project/reagent/pull/154))
- Support for marking React components as `synthetic-input`, which will fix - ~~Support for marking React components as `synthetic-input`, which will fix
problems with cursor jumping around problems with cursor jumping around
([#282](https://github.com/reagent-project/reagent/pull/282)) ([#282](https://github.com/reagent-project/reagent/pull/282))~~
- Helps with e.g. Material-UI TextField - This was reverted due to not working for all use cases ([#351](https://github.com/reagent-project/reagent/pull/351))
- Added `IWithMeta` to `RAtom` ([#314](https://github.com/reagent-project/reagent/pull/314)) - Added `IWithMeta` to `RAtom` ([#314](https://github.com/reagent-project/reagent/pull/314))
## 0.8.0-alpha1 (2017-07-31) ## 0.8.0-alpha1 (2017-07-31)

View File

@ -50,11 +50,9 @@
(defn adapt-react-class (defn adapt-react-class
"Returns an adapter for a native React class, that may be used "Returns an adapter for a native React class, that may be used
just like a Reagent component function or class in Hiccup forms." just like a Reagent component function or class in Hiccup forms."
([c opts] [c]
(assert-some c "Component") (assert-some c "Component")
(tmpl/adapt-react-class c opts)) (tmpl/adapt-react-class c))
([c]
(adapt-react-class c {})))
(defn reactify-component (defn reactify-component
"Returns an adapter for a Reagent component, that may be used from "Returns an adapter for a Reagent component, that may be used from

View File

@ -211,12 +211,10 @@
($! this :cljsInputDirty false) ($! this :cljsInputDirty false)
(let [rendered-value ($ this :cljsRenderedValue) (let [rendered-value ($ this :cljsRenderedValue)
dom-value ($ this :cljsDOMValue) dom-value ($ this :cljsDOMValue)
node (find-dom-node this) ;; Default to the root node within this component ;; Default to the root node within this component
synthetic-on-update ($ this :cljsSyntheticOnUpdate)] node (find-dom-node this)]
(when (not= rendered-value dom-value) (when (not= rendered-value dom-value)
(if (fn? synthetic-on-update) (input-node-set-value node rendered-value dom-value this {})))))
(synthetic-on-update input-node-set-value node rendered-value dom-value this)
(input-node-set-value node rendered-value dom-value this {}))))))
(defn input-handle-change [this on-change e] (defn input-handle-change [this on-change e]
($! this :cljsDOMValue (-> e .-target .-value)) ($! this :cljsDOMValue (-> e .-target .-value))
@ -228,7 +226,7 @@
(on-change e)) (on-change e))
(defn input-render-setup (defn input-render-setup
([this jsprops {:keys [synthetic-on-update synthetic-on-change]}] [this jsprops]
;; Don't rely on React for updating "controlled inputs", since it ;; Don't rely on React for updating "controlled inputs", since it
;; doesn't play well with async rendering (misses keystrokes). ;; doesn't play well with async rendering (misses keystrokes).
(when (and (some? jsprops) (when (and (some? jsprops)
@ -236,15 +234,9 @@
(.hasOwnProperty jsprops "value")) (.hasOwnProperty jsprops "value"))
(assert find-dom-node (assert find-dom-node
"reagent.dom needs to be loaded for controlled input to work") "reagent.dom needs to be loaded for controlled input to work")
(when synthetic-on-update
;; Pass along any synthetic input setter given
($! this :cljsSyntheticOnUpdate synthetic-on-update))
(let [v ($ jsprops :value) (let [v ($ jsprops :value)
value (if (nil? v) "" v) value (if (nil? v) "" v)
on-change ($ jsprops :onChange) on-change ($ jsprops :onChange)]
on-change (if synthetic-on-change
(partial synthetic-on-change on-change)
on-change)]
(when-not ($ this :cljsInputLive) (when-not ($ this :cljsInputLive)
;; set initial value ;; set initial value
($! this :cljsInputLive true) ($! this :cljsInputLive true)
@ -254,8 +246,6 @@
(doto jsprops (doto jsprops
($! :defaultValue value) ($! :defaultValue value)
($! :onChange #(input-handle-change this on-change %)))))) ($! :onChange #(input-handle-change this on-change %))))))
([this jsprops]
(input-render-setup this jsprops {})))
(defn input-unmount [this] (defn input-unmount [this]
($! this :cljsInputLive nil)) ($! this :cljsInputLive nil))
@ -267,8 +257,6 @@
(def reagent-input-class nil) (def reagent-input-class nil)
(def reagent-synthetic-input-class nil)
(declare make-element) (declare make-element)
(def input-spec (def input-spec
@ -281,31 +269,12 @@
(input-render-setup this jsprops) (input-render-setup this jsprops)
(make-element argv comp jsprops first-child)))}) (make-element argv comp jsprops first-child)))})
(def synthetic-input-spec
;; Same as `input-spec` except it takes another argument for `input-setter`
{:display-name "ReagentSyntheticInput"
:component-did-update input-component-set-value
:component-will-unmount input-unmount
:reagent-render
(fn [on-update on-change argv comp jsprops first-child]
(let [this comp/*current-component*]
(input-render-setup this jsprops {:synthetic-on-update on-update
:synthetic-on-change on-change})
(make-element argv comp jsprops first-child)))})
(defn reagent-input (defn reagent-input
[] []
(when (nil? reagent-input-class) (when (nil? reagent-input-class)
(set! reagent-input-class (comp/create-class input-spec))) (set! reagent-input-class (comp/create-class input-spec)))
reagent-input-class) reagent-input-class)
(defn reagent-synthetic-input
[]
(when (nil? reagent-synthetic-input-class)
(set! reagent-synthetic-input-class (comp/create-class synthetic-input-spec)))
reagent-synthetic-input-class)
;;; Conversion from Hiccup forms ;;; Conversion from Hiccup forms
@ -354,38 +323,11 @@
(make-element argv react/Fragment jsprops first-child))) (make-element argv react/Fragment jsprops first-child)))
(defn adapt-react-class (defn adapt-react-class
([c {:keys [synthetic-input]}] [c]
(let [on-update (:on-update synthetic-input) (doto (->NativeWrapper)
on-change (:on-change synthetic-input)]
(when synthetic-input
(assert (fn? on-update))
(assert (fn? on-change)))
(let [wrapped (doto (->NativeWrapper)
($! :name c) ($! :name c)
($! :id nil) ($! :id nil)
($! :class nil)) ($! :class nil)))
wrapped (if synthetic-input
(doto wrapped
($! :syntheticInput true))
wrapped)
wrapped (if synthetic-input
(doto wrapped
($! :syntheticOnChange on-change))
wrapped)
wrapped (if synthetic-input
;; This is a synthetic input component, i.e. it has a complex
;; nesting of elements such that the root node is not necessarily
;; the <input> tag we need to control, and/or it needs to execute
;; custom code when updated values are written so we provide an affordance
;; to configure a setter fn that can choose a different DOM node
;; than the root node if it wants, and can supply a function hooked
;; to value updates so it can maintain its own component state as needed.
(doto wrapped
($! :syntheticOnUpdate on-update))
wrapped)]
wrapped)))
([c]
(adapt-react-class c {})))
(def tag-name-cache #js{}) (def tag-name-cache #js{})
@ -395,24 +337,13 @@
(aset tag-name-cache x (parse-tag x)))) (aset tag-name-cache x (parse-tag x))))
(defn native-element [parsed argv first] (defn native-element [parsed argv first]
(let [comp ($ parsed :name) (let [comp ($ parsed :name)]
synthetic-input ($ parsed :syntheticInput)]
(let [props (nth argv first nil) (let [props (nth argv first nil)
hasprops (or (nil? props) (map? props)) hasprops (or (nil? props) (map? props))
jsprops (convert-props (if hasprops props) parsed) jsprops (convert-props (if hasprops props) parsed)
first-child (+ first (if hasprops 1 0))] first-child (+ first (if hasprops 1 0))]
(if (or synthetic-input (input-component? comp)) (if (input-component? comp)
(-> (if synthetic-input (-> [(reagent-input) argv comp jsprops first-child]
;; If we are dealing with a synthetic input, use the synthetic-input-spec form:
[(reagent-synthetic-input)
($ parsed :syntheticOnUpdate)
($ parsed :syntheticOnChange)
argv
comp
jsprops
first-child]
;; Else use the regular input-spec form:
[(reagent-input) argv comp jsprops first-child])
(with-meta (meta argv)) (with-meta (meta argv))
as-element) as-element)
(let [key (-> (meta argv) get-key) (let [key (-> (meta argv) get-key)