Created
May 13, 2016 16:26
-
-
Save madvas/5db418a60025d74acd1aa17339bdb894 to your computer and use it in GitHub Desktop.
Snippet example of using library cljs-react-material-ui with Reagent
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(ns crmui-reagent.core | |
(:require | |
[cljsjs.material-ui] | |
[cljs-react-material-ui.core :as ui] | |
[cljs-react-material-ui.reagent :as rui] | |
[cljs-react-material-ui.icons :as ic] | |
[reagent.core :as r :refer [atom]] | |
[reagent.session :as session] | |
[secretary.core :as secretary :include-macros true] | |
[accountant.core :as accountant] | |
)) | |
(enable-console-print!) | |
(defn my-component [] | |
(r/create-class | |
{:component-did-mount #(println "component-did-mount") | |
:display-name "my-component" | |
:reagent-render (fn [] | |
[rui/paper "My component"])})) | |
(defn some-other-component [text] | |
[rui/paper text]) | |
;; ------------------------- | |
;; Views | |
(defn user-menu [] | |
(r/create-class | |
{:component-did-mount #(println "user-menu-did-mount") | |
:display-name "user-menu" | |
:reagent-render (fn [] | |
[rui/icon-menu {:icon-button-element (ui/icon-button {:touch true} (ic/navigation-expand-more))} | |
[rui/menu-item {:primary-text "Edit Profile"}] | |
[rui/menu-item {:primary-text "Logout"}]])})) | |
(defn home-page [] | |
(r/create-class | |
{:component-did-mount | |
#(println "home-page did mount") | |
:reagent-render | |
(fn [] | |
[rui/mui-theme-provider | |
{:mui-theme (ui/get-mui-theme | |
{:palette {:text-color (ui/color :green600)}})} | |
[:div | |
[rui/app-bar {:title "Title" | |
:icon-element-right (ui/icon-button | |
(ic/action-account-balance-wallet))}] | |
[rui/paper | |
[user-menu] | |
[:div "Hello there"] | |
[my-component] | |
[some-other-component "What time is it?"] | |
[rui/mui-theme-provider | |
{:mui-theme (ui/get-mui-theme {:palette {:text-color (ui/color :blue200)}})} | |
[rui/raised-button {:label "Blue button"}]] | |
(ic/action-home {:color (ui/color :grey600)}) | |
[rui/raised-button {:label "Click me" | |
:icon (ic/social-group) | |
:on-touch-tap #(println "clicked")}]]]])})) | |
(defn about-page [] | |
[:div [:h2 "About crmui-reagent"] | |
[:div [:a {:href "/"} "go to the home page"]]]) | |
(defn current-page [] | |
[:div [(session/get :current-page)]]) | |
;; ------------------------- | |
;; Routes | |
(secretary/defroute "/" [] | |
(session/put! :current-page #'home-page)) | |
(secretary/defroute "/about" [] | |
(session/put! :current-page #'about-page)) | |
;; ------------------------- | |
;; Initialize app | |
(defn mount-root [] | |
(r/render [current-page] (.getElementById js/document "app"))) | |
(defn init! [] | |
(accountant/configure-navigation! | |
{:nav-handler | |
(fn [path] | |
(secretary/dispatch! path)) | |
:path-exists? | |
(fn [path] | |
(secretary/locate-route path))}) | |
(accountant/dispatch-current!) | |
(mount-root)) |
Well, it's because reagent doesn't parse it's syntax in component attributes, only in component body. And material-ui expects there react components, not reagent. Tho it's true I might add this as-element
conversion into library for attributes where react component is expected.
The reason for wrong styling is probably, cuz when u use create-class
, component-will-mount
, etc. that creates another element, which wraps rui/icon-menu
, so u might have to play with styling little bit with this user-menu
element. Maybe there's other solution, but I don't know now.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
also,
r/as-element
does not produce what i want:A
produces a different HTML than
B
in B icon is right, next to text which is correct. in A icon is above text which is wrong.