Commit 880d7db4 authored by Bruno Burke's avatar Bruno Burke 🍔
Browse files

add definition macro and devcard for material-ui

parent 8ea3c241
Pipeline #2364 failed with stages
in 47 seconds
(defproject lernmeister.components "0.1.17"
:dependencies [[org.clojure/clojure "1.9.0"]
[org.clojure/clojurescript "1.9.946"]
[reagent "0.7.0"]
[reagent "0.7.0" :exclusions [cljsjs/react cljsjs/react-dom]]
[garden "1.3.3"]
[hickory "0.7.1"]
[cljsjs/katex "0.7.1-0"]
[cljsjs/material-ui "1.0.0-beta.32-0"]
[clj-http "3.7.0"]
[cljs-ajax "0.7.3"]
[cheshire "5.8.0"] ;;; clj-http json support
[devcards "0.2.4" :exclusions [cljsjs/react]]]
:min-lein-version "2.5.3"
:source-paths ["src/cljc" "src/cljs" "src/clj"]
:test-paths ["test/clj" "test/cljc"]
:plugins [[lein-cljsbuild "1.1.7"]
......
......@@ -46,4 +46,13 @@
(when (first o)
[:option {:value (first o) :key (name (first o))} (second o)])))]
)
}))
\ No newline at end of file
}))
#_(defmacro load-material-ui-component
[component-name]
`(def ~(symbol (quote component-name))
(reagent/adapt-react-class ~(symbol (str "js/MaterialUI." (quote component-name))))))
#_(load-material-ui-component Button)
(ns lernmeister.components.material-ui)
(def mui-tags '[AppBar
Avatar
Badge
Button
Card
CardActions
CardContent
CardHeader
Checkbox
Input
Icon
MuiThemeProvider
Paper
Radio
Reboot
])
(def mui-functions '[])
(def mui-styles-functions '[withStyles])
(defn load-material-ui-component
[component-name]
`(def ~component-name
(reagent.core/adapt-react-class (aget js/MaterialUI ~(name component-name)))))
(defn load-material-ui-function
[fn-name]
`(def ~fn-name
(aget js/MaterialUI ~(name fn-name))))
(defn load-material-ui-styles-function
[fn-name]
`(def ~fn-name
(aget js/MaterialUIStyles ~(name fn-name))))
(defmacro export-react-components []
`(do
~@(map load-material-ui-function mui-functions)
~@(map load-material-ui-styles-function mui-styles-functions)
~@(map load-material-ui-component mui-tags)))
(ns lernmeister.components.ui
(:require-macros [lernmeister.components.material-ui :refer [export-react-components]])
(:require
[cljsjs.material-ui]
[reagent.core])
)
(export-react-components)
......@@ -2,7 +2,8 @@
(:require-macros
[devcards.core :as dc])
(:require
[lernmeister.components.first-card]
[devcards.lernmeister.components.first-card]
[devcards.lernmeister.components.mui-card]
[devcards.lernmeister.components.tex-test-card]
[devcards.lernmeister.components.exercise-programming]
[devcards.lernmeister.components.exercise-editor-card]
......
......@@ -18,7 +18,6 @@
(defonce exercise-data data/mc-exercise)
(defonce state (reagent/atom {:exercise-data @exercise-data :answer nil}))
(defn exercise-dialog [& {:keys [title exercise add-fn! answer]}]
......
(ns lernmeister.components.first-card
(ns devcards.lernmeister.components.first-card
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
......@@ -6,6 +6,8 @@
(:require
[lernmeister.components.sample-data :as data]
[lernmeister.components.core]
[lernmeister.components.ui :refer [Card CardContent Button Icon]]
[cljsjs.material-ui]
[lernmeister.components.content-elements.exercise :as exercise]
[devcards.core]
[reagent.core :as reagent]))
......@@ -17,6 +19,7 @@
(defn on-click [ratom]
(swap! ratom update-in [:count] inc))
(defn counter [ratom]
(let [count (:count @ratom)]
[:div
......
(ns devcards.lernmeister.components.mui-card
(:require-macros
[devcards.core :refer [defcard-doc
defcard-rg
mkdn-pprint-source]])
(:require
[lernmeister.components.ui :refer [Card CardContent Button Icon withStyles]]
[devcards.core]
[reagent.core :as reagent]))
(defonce app-state (reagent/atom {:count 0
:answer nil}))
(def styles {:Button {:color "#dba"
:background-color "#17d"
:&:hover {:background-color "blue"}}})
(defn on-click [ratom]
(swap! ratom update-in [:count] inc))
(defn counter [ratom]
(let [count (:count @ratom)]
[:div
[:p "Current count: " count]
[Card
[CardContent
[Button {:variant :raised :on-click #(on-click ratom)} "Increment"
[Icon "star"]]
]]]))
(defcard-rg counter
[counter app-state]
app-state
{:inspect-data true
:history true})
(defn styled-counter [ratom]
(let [count (:count @ratom)
style {:color "#dba"
:background-color "#17d"
:&:hover {:background-color "blue"}}]
[:div
[:p "Current count: " count]
[Card
[CardContent
#_[:> ((withStyles (clj->js styles))
(reagent/as-element [Button "Click"]))]
[Button {:variant :raised
:on-click #(on-click ratom)
:style style} "Click"]
]]]
))
(defcard-rg counter2
[styled-counter app-state]
app-state
{:inspect-data true
:history true})
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment