Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save madvas/5db418a60025d74acd1aa17339bdb894 to your computer and use it in GitHub Desktop.
Save madvas/5db418a60025d74acd1aa17339bdb894 to your computer and use it in GitHub Desktop.
Snippet example of using library cljs-react-material-ui with Reagent
(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))
@madvas
Copy link
Author

madvas commented May 18, 2016

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