status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #489 from mjhanninen/fix-bmi-example 

Fix the BMI example in the introduction
This commit is contained in:
Juho Teperi 2020-04-16 14:57:28 +03:00 committed by GitHub
parent 9165f0b724 97697be14b
commit 25b44e8016
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
demo/reagentdemo/intro.cljs
View File

@ -67,25 +67,28 @@
[simple-component] [simple-component]
(.-body js/document))) (.-body js/document)))
(def bmi-data (r/atom {:height 180 :weight 80})) (defn calc-bmi [{:keys [height weight bmi] :as data}]
(let [h (/ height 100)]
(defn calc-bmi []
(let [{:keys [height weight bmi] :as data} @bmi-data
h (/ height 100)]
(if (nil? bmi) (if (nil? bmi)
(assoc data :bmi (/ weight (* h h))) (assoc data :bmi (/ weight (* h h)))
(assoc data :weight (* bmi h h))))) (assoc data :weight (* bmi h h)))))
(defn slider [param value min max] (def bmi-data (r/atom (calc-bmi {:height 180 :weight 80})))
(defn slider [param value min max invalidates]
[:input {:type "range" :value value :min min :max max [:input {:type "range" :value value :min min :max max
:style {:width "100%"} :style {:width "100%"}
:on-change (fn [e] :on-change (fn [e]
(swap! bmi-data assoc param (.. e -target -value)) (let [new-value (js/parseInt (.. e -target -value))]
(when (not= param :bmi) (swap! bmi-data
(swap! bmi-data assoc :bmi nil)))}]) (fn [data]
(-> data
(assoc param new-value)
(dissoc invalidates)
calc-bmi)))))}])
(defn bmi-component [] (defn bmi-component []
(let [{:keys [weight height bmi]} (calc-bmi) (let [{:keys [weight height bmi]} @bmi-data
[color diagnose] (cond [color diagnose] (cond
(< bmi 18.5) ["orange" "underweight"] (< bmi 18.5) ["orange" "underweight"]
(< bmi 25) ["inherit" "normal"] (< bmi 25) ["inherit" "normal"]
@ -95,14 +98,14 @@
[:h3 "BMI calculator"] [:h3 "BMI calculator"]
[:div [:div
"Height: " (int height) "cm" "Height: " (int height) "cm"
[slider :height height 100 220]] [slider :height height 100 220 :bmi]]
[:div [:div
"Weight: " (int weight) "kg" "Weight: " (int weight) "kg"
[slider :weight weight 30 150]] [slider :weight weight 30 150 :bmi]]
[:div [:div
"BMI: " (int bmi) " " "BMI: " (int bmi) " "
[:span {:style {:color color}} diagnose] [:span {:style {:color color}} diagnose]
[slider :bmi bmi 10 50]]])) [slider :bmi bmi 10 50 :weight]]]))
(def ns-src (s/syntaxed "(ns example (def ns-src (s/syntaxed "(ns example
(:require [reagent.core :as r]))")) (:require [reagent.core :as r]))"))
@ -292,7 +295,7 @@
[demo-component {:comp bmi-component [demo-component {:comp bmi-component
:src [:pre :src [:pre
ns-src ns-src
(s/src-of [:bmi-data :calc-bmi :slider (s/src-of [:calc-bmi :bmi-data :slider
:bmi-component])]}]]) :bmi-component])]}]])
(defn complete-simple-demo [] (defn complete-simple-demo []