diff --git a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org index 123ce5e..e984960 100644 --- a/reagent-reitit-demo/resources/public/documents/reagent-reitit.org +++ b/reagent-reitit-demo/resources/public/documents/reagent-reitit.org @@ -123,7 +123,7 @@ In the example below the function just returns some hiccup with the parameters i ** Form 2 components Form two components are used so we can track local state of a component, this is appropriate any time we need to react to change forms and user click event's being simple examples. - +*** Example Click counter component #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs (defn my-component [title starting-value] (let [local-state (reagent/atom starting-value)] @@ -137,15 +137,9 @@ Form two components are used so we can track local state of a component, this is [my-component "Clickable component" 1] #+END_SRC +*** Example address capture component #+BEGIN_SRC clojurescript :results output :tangle src/clojure_demo/core.cljs (defn update-form-data [form-data ^js event] - (prn "test here") - (prn @form-data) - ;;(prn (.dir js/console event)) - (prn (-> event)) - (prn (-> event .-currentTarget)) - (prn (-> event .-target )) - (prn (-> event .-target .-value)) (swap! form-data assoc (keyword (-> event .-target .-name)) (-> event .-target .-value))) @@ -157,14 +151,14 @@ Form two components are used so we can track local state of a component, this is [:div (str @form-data) [:form {:on-submit prn} - [:input {:type "text" - :default-value (str (:test @form-data)) - :name "address-line-1" - :on-change form-change :placeholder "Address Line 1"}] - [:input {:type "text" :name "address-line-2" :on-change form-change :placeholder "Address Line 2"}] - [:input {:name "address-line-3" :on-change form-change :placeholder "Address Line 3"}] - [:input {:name "city" :on-change form-change :placeholder "City"}] - [:input {:name "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]]))) + [:input.db {:type "text" + :default-value (str (:test @form-data)) + :name "address-line-1" + :on-change form-change :placeholder "Address Line 1"}] + [:input.db {:type "text" :name "address-line-2" :on-change form-change :placeholder "Address Line 2"}] + [:input.db {:name "address-line-3" :on-change form-change :placeholder "Address Line 3"}] + [:input.db {:name "city" :on-change form-change :placeholder "City"}] + [:input.db {: "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]]))) [:div [my-address-form]] #+END_SRC diff --git a/reagent-reitit-demo/resources/public/index.html b/reagent-reitit-demo/resources/public/index.html index 94006c3..b095e83 100644 --- a/reagent-reitit-demo/resources/public/index.html +++ b/reagent-reitit-demo/resources/public/index.html @@ -9,7 +9,6 @@ - diff --git a/reagent-reitit-demo/src/clojure_demo/core.cljs b/reagent-reitit-demo/src/clojure_demo/core.cljs index 10d5173..5dc3f7c 100644 --- a/reagent-reitit-demo/src/clojure_demo/core.cljs +++ b/reagent-reitit-demo/src/clojure_demo/core.cljs @@ -42,7 +42,8 @@ (def sqlh-ns (sci/create-ns 'honey.sql.helpers nil)) (def sci-ctx (sci/init - {:namespaces + {:classes {'js js/globalThis :allow :all} + :namespaces {'reagent sci-reagent/reagent-namespace ;'h {'html (sci/copy-var h/html hc-ns)} 'd sci-datascript/core-namespace @@ -103,7 +104,8 @@ (first selected-text) (.-doc (.-state view-update)))] (reset! evaled-result (sci/eval-string* sci-ctx - (.toString eval-code))) + (.toString eval-code) + )) (prn "updated delayed"))) 1000))))) start-state (.create EditorState @@ -315,34 +317,6 @@ :code (filter (fn filter-code [tag] (org-code (first tag))) dsl) :body (filter (fn filter-body [tag] (body (first tag))) dsl)}) -(defn update-form-data [form-data ^js event] - (prn "test here") - (prn @form-data) - ;;(prn (.dir js/console event)) - (prn (-> event)) - (prn (-> event .-currentTarget)) - (prn (-> event .-target)) - (prn (-> event .-target .-value)) - (swap! form-data assoc - (keyword (-> event .-target .-name)) - (-> event .-target .-value))) - -(defn my-address-form [] - (let [form-data (reagent/atom {}) - form-change (partial update-form-data form-data)] - (fn [] - [:div - (str @form-data) - [:form {:on-submit prn} - [:input {:type "text" - :default-value (str (:test @form-data)) - :name "address-line-1" - :on-change form-change :placeholder "Address Line 1"}] - [:input {:type "text" :name "address-line-2" :on-change form-change :placeholder "Address Line 2"}] - [:input {:name "address-line-3" :on-change form-change :placeholder "Address Line 3"}] - [:input {:name "city" :on-change form-change :placeholder "City"}] - [:input {:name "postcode" :on-change form-change :placeholder "Postcode / Zipcode"}]]]))) - ;; form two component render demo ;;(h/org->split (parse document1)) (defn demo-page [route] @@ -360,7 +334,6 @@ (fn [route] (if @content [:main.mt4.mw7.center.avenir - [my-address-form] [:h1.f3.f2-ns (:content (last (first (:header @content))))] [:div.mw7.center.avenir (into [:ol] (org->replacements theme-toc (:toc @content)))]