From 2dc1b1459ec76047a8b7376736d37b86daaa8447 Mon Sep 17 00:00:00 2001 From: Juho Teperi Date: Sun, 17 Jun 2018 20:48:35 +0300 Subject: [PATCH] Add Material-UI v1 example with working TextField --- examples/material-ui/project.clj | 46 +++++++++++++++++ .../material-ui/resources/public/index.html | 14 ++++++ examples/material-ui/src/example/core.cljs | 50 +++++++++++++++++++ 3 files changed, 110 insertions(+) create mode 100644 examples/material-ui/project.clj create mode 100644 examples/material-ui/resources/public/index.html create mode 100644 examples/material-ui/src/example/core.cljs diff --git a/examples/material-ui/project.clj b/examples/material-ui/project.clj new file mode 100644 index 0000000..feb130d --- /dev/null +++ b/examples/material-ui/project.clj @@ -0,0 +1,46 @@ +(defproject material-ui-reagent "0.6.0" + :dependencies [[org.clojure/clojure "1.9.0"] + [org.clojure/clojurescript "1.10.312"] + [reagent "0.8.1"] + [figwheel "0.5.16"] + [cljsjs/material-ui "1.2.1-0"]] + + :plugins [[lein-cljsbuild "1.1.7"] + [lein-figwheel "0.5.16"]] + + :figwheel {:repl false + :http-server-root "public"} + + :profiles {:dev {:resource-paths ["target/cljsbuild/client" "target/cljsbuild/client-npm"]}} + + :cljsbuild + {:builds + {:client + {:source-paths ["src"] + :figwheel true + :compiler {:parallel-build true + :source-map true + :optimizations :none + :main "example.core" + :output-dir "target/cljsbuild/client/public/js/out" + :output-to "target/cljsbuild/client/public/js/main.js" + :asset-path "js/out" + :npm-deps false}} + + ;; FIXME: Doesn't work due to Closure bug with scoped npm packages + :client-npm + {:source-paths ["src"] + :figwheel true + :compiler {:parallel-build true + :source-map true + :optimizations :none + :main "example.core" + :output-dir "target/cljsbuild/client-npm/public/js/out" + :output-to "target/cljsbuild/client-npm/public/js/main.js" + :asset-path "js/out" + :install-deps true + :npm-deps {react "16.3.0" + react-dom "16.3.0" + create-react-class "16.3.2" + "@material-ui/core" "1.2.1"} + :process-shim true}}}}) diff --git a/examples/material-ui/resources/public/index.html b/examples/material-ui/resources/public/index.html new file mode 100644 index 0000000..482ef72 --- /dev/null +++ b/examples/material-ui/resources/public/index.html @@ -0,0 +1,14 @@ + + + + + Example + + + +
+

Reagent example app – see README.md

+
+ + + diff --git a/examples/material-ui/src/example/core.cljs b/examples/material-ui/src/example/core.cljs new file mode 100644 index 0000000..adaaeaa --- /dev/null +++ b/examples/material-ui/src/example/core.cljs @@ -0,0 +1,50 @@ +(ns example.core + (:require [reagent.core :as r] + [material-ui :as mui] + [goog.object :as gobj] + [reagent.impl.template :as rtpl])) + +(def mui-theme-provider (r/adapt-react-class mui/MuiThemeProvider)) + +(def ^:private input-wrapper + (r/reactify-component + (fn [props] + [:input (-> props + (assoc :ref (:inputRef props)) + (dissoc :inputRef))]))) + +;; To fix cursor jumping when controlled input value is changed, +;; use wrapper input element created by Reagent instead of +;; letting Material-UI to create input element directly using React. +;; Create-element + convert-props-value is the same as what adapt-react-class does. +(defn text-field [props & children] + (let [props (-> props + (assoc-in [:InputProps :inputComponent] input-wrapper) + rtpl/convert-prop-value)] + (apply r/create-element mui/TextField props children))) + +(defonce text-state (r/atom "foobar")) + +(defn main [] + [:div + [:div + [:strong @text-state]] + [:button + {:on-click #(swap! text-state str " foo")} + "update value property"] + [:button + {:on-click #(reset! text-state "")} + "reset"] + [text-field + {:id "example" + :value @text-state + :label "Label" + :placeholder "Placeholder" + :on-change (fn [e] + (reset! text-state (.. e -target -value))) + :inputRef #(js/console.log "input-ref" %)}]]) + +(defn start [] + (r/render [main] (js/document.getElementById "app"))) + +(start)