reagent 2017-05-22 | Slack Archive

hi, is there a good library for resizing components?

Hi, in reagent, why should I use :auto-focus rather than :autofocus as one of the attributes of an input field, and should I use :placeholder or :place-holder? How can I know this? Are there any docs about this? Thanks!

pesterhazy09:05:06

I think it's :autofocus, what makes you think otherwise? https://developer.mozilla.org/en/docs/Web/HTML/Element/input

cmal09:05:53

I find the example todomvc project in re-frame used :auto-focus and it works well.

pesterhazy09:05:16

ah wait....

cmal09:05:18

Are there any explanations in reagent's doc?

pesterhazy09:05:27

the docs are here: https://facebook.github.io/react/docs/dom-elements.html

pesterhazy09:05:53

looks like react "normalizes" the attributes to camelCase

pesterhazy09:05:15

reagent automatically turns kebab-case into camelCase

cmal09:05:17

So camelCase becomes camel-case

cmal09:05:25

Thanks a lot!

pesterhazy09:05:35

if attributes are already camelCase, it'll leave them alone

cmal09:05:43

It's in the doc of react.js.

pesterhazy09:05:12

anytime 🙂

pesterhazy10:05:28

It doesn't look like the exception is triggered by the code you've show

cmal10:05:08

(defn input-response []
  (let [get-result @(subscribe [:get-result])
        get-error @(subscribe [:get-error])
        post-result @(subscribe [:post-result])
        post-error @(subscribe [:post-error])]
    [:p
     (str
      (when get-result
        (str "GET result:" get-result))
      (when get-error
        (str "GET error:" (:last-error get-error) (:last-error-code get-error)))
      (when post-result
        (str "POST result: " post-result))
      (when post-error
        (str "POST error:" (:last-error post-error) (:last-error-code post-error))))]))

(defn about-page []
  (fn []
    (let [!aref (atom nil)
          modal-state (r/atom {})]
      [:div#wrapper.container.toggled
       [:h3 "Input Field"]
       [input-field]
       [:h5 "Input Response"]
       [input-response]
       ])))

cmal10:05:33

(def pages
  {:home #'home-page
   :about #'about-page})

(defn page []
  [:div
   [navbar]
   [(pages @(subscribe [:page]))]])

cmal10:05:42

That is all...

cmal10:05:20

I've commented all the unrelated page and run the page again and tried, still get the same exception message.

cmal10:05:35

even if I comment the input-response.

cmal10:05:15

(defn input-field []
  (let [
        ;; val (r/atom  "Default Text")
        ;; execute #(do #_(dispatch [:input-execute (-> <@U1BH0DC10> str s/trim)])
        ;;              #_(reset! val ""))
        cancel #(do (dispatch [:input-canceled])
                   #_(reset! val ""))
        ]
    (fn []
      [:input {:type "text"
               ;; :value <@U1BH0DC10>
               :value "ttt"
               ;; :auto-focus true
               ;; :placeholder "Please input something ..."
               ;; :on-change #(dispatch [:input-canceled]) #_(reset! val (-> % .-target .-value))
               :on-key-down #(dispatch [:input-canceled]) #_(reset! val (-> % .-target .-value))
               ;; :on-key-down #(case (.-which %)
               ;;                 13 (execute)
               ;;                 27 (cancel)
               ;;                 nil)
               }])))

I comment out all the unrelated things, still get the same error.

cmal10:05:26

Btw, can I dispatch an event in an reg-event-db?

curlyfry09:05:52

cmal: You can, but you shouldn't 🙂 That is what fx are for! https://github.com/Day8/re-frame/blob/master/docs/EffectfulHandlers.md

cmal09:05:14

Ahh.. Thanks!

cmal10:05:50

I think that is where the code get error. If I do not use dispatch in reg-event-db, I will get the error again! But the doc of re-frame says it is ok if not dispatch-sync.

cmal11:05:16

Ahh.. I didn't return db in the reg-event-db.

cmal13:05:08

Hi , how to do initializeTouchEvents in reagent?

danielgrosse14:05:33

Could someone give me a hint, how I could use the Tab component from reagent-material?

2017-05-22

Channels