Add Material-UI v1 example with working TextField

2018-06-17 20:48:35 +03:00 · 2018-06-17 20:48:35 +03:00 · 2dc1b1459e
parent eff27834b3
commit 2dc1b1459e
3 changed files with 110 additions and 0 deletions
--- a/examples/material-ui/project.clj
+++ 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}}}})
--- a/examples/material-ui/resources/public/index.html
+++ b/examples/material-ui/resources/public/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Example</title>
+    <link rel="stylesheet" href="todos.css">
+  </head>
+  <body>
+    <div id="app">
+      <h1>Reagent example app – see README.md</h1>
+    </div>
+    <script src="js/main.js"></script>
+  </body>
+</html>
--- a/examples/material-ui/src/example/core.cljs
+++ 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)