Hi Manny,
My last take on using latest material-ui (0.8.0) with latest om and react
that required to setting the theme is something like below:
(def ^:dynamic *mui-theme*
(.getCurrentTheme (js/MaterialUI.Styles.ThemeManager.)))
(defn mui-root [component]
(fn [data _owner]
(reify
om/IDisplayName
(display-name [_] "muiroot")
om/IRender
(render [_]
(let [ctor (js/React.createFactory
(js/React.createClass
#js
{:getDisplayName (fn [] "muiroot-context")
:childContextTypes #js {:muiTheme
js/React.PropTypes.object}
:getChildContext (fn [] #js {:muiTheme *mui-theme*})
:render (fn [] (component data))}))] ;; <--- THIS
PART IS THAT MAKE IT WORK
(ctor. nil))))))
(defn rce
([type] (rce type {} nil))
([type opts & childs]
(js/React.createElement type (clj->js opts) childs)))
(defcomponentk login [data owner]
(did-mount
[_]
(let [c (aget (.-refs owner) "username")]
(.focus c)))
(render
[_]
(dom/div
{:class "login block-group"}
(dom/h3 {:class "block"} "Member Login")
(dom/div
{:class "block"}
(dom/form
{}
(rce js/MaterialUI.TextField
{:ref "username"
:floatingLabelText "User Name"
:className "login-form-group"})
(rce js/MaterialUI.TextField
{:floatingLabelText "Organization"
:className "login-form-group"})
(rce js/MaterialUI.TextField
{:type "password"
:floatingLabelText "Password"
:className "login-form-group"})
(dom/br {:style {:line-height "1em"}})
(rce js/MaterialUI.RaisedButton
{:type "submit"
:primary true
:label "Sign in"}))))))
...
(defn main []
(om/root
(mui-root ->login)
app-state
{:target (. js/document getElementById "app")}))
To my limited knowledge, as of react 0.13.3, "context" can be accessed by
child by owner-based, not parent-based. This will planned to be changed in
react 0.14.
With owner-based, mui component childs have to be owned (--*or rendered*)
in react class that specify childContextTypes and getChildContext.
Best regards,
Ridho.
On Thu, Jun 11, 2015 at 4:40 AM, Manny Singh <[email protected]>
wrote:
> This is great but can anyone tell me the best way of setting the theme?
>
> Thanks
>
> On Tuesday, 20 January 2015 23:55:10 UTC, Timothy Washington wrote:
> > Bloody hell, just tried it out. Working like a charm (at least for a
> simple text input). I'm even using mui/input mixed in with sablono. Tip: If
> you get the error, Uncaught ReferenceError: MaterialUI is not defined, make
> sure material.js (where window.MaterialUI = MaterialUI is assigned) is
> getting included successfully.
> >
> >
> >
> >
> > (reify
> >
> > om/IRenderState
> >
> > (render-state [owner state]
> >
> >
> >
> >
> > (sablono.core/html
> >
> > ...
> >
> > [:div {:horizontal true :layout true}
> >
> > (dom/div nil "thing") ;; ok
> >
> > (mui/input {:placeholder "Placeholder" :description "I am a
> description"})] ;; ok
> >
> >
> >
> >
> > ...)))
> >
> >
> >
> >
> > This is awesome. Cheers.
> >
> >
> >
> >
> >
> >
> > Tim
> >
> >
> >
> > On Sat, Jan 17, 2015 at 11:04 PM, Taylor Sando <[email protected]>
> wrote:
> > I made a clojars release and put it up on github:
> >
> >
> >
> > https://github.com/taylorSando/om-material-ui
>
> --
> Note that posts from new members are moderated - please be patient with
> your first post.
> ---
> You received this message because you are subscribed to the Google Groups
> "ClojureScript" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/clojurescript.
>
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/clojurescript.
