Add material-ui autocomplete example

examples/material-ui/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "material-ui",
+  "dependencies": {
+    "@material-ui/core": "^4.9.7",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.46",
+    "react": "16.9.0",
+    "react-dom": "16.9.0"
+  },
+  "devDependencies": {
+    "shadow-cljs": "2.8.93"
+  }
+}

examples/material-ui/project.clj

@@ -1,62 +0,0 @@
-(defproject material-ui-reagent "0.6.0"
-  :dependencies [[org.clojure/clojure "1.10.1"]
-                 [org.clojure/clojurescript "1.10.520"]
-                 [reagent "0.9.0-rc1"]
-                 [figwheel "0.5.19"]
-                 [cljsjs/react "16.9.0-0"]
-                 [cljsjs/react-dom "16.9.0-0"]
-                 [cljsjs/material-ui "4.4.1-0"]
-                 [cljsjs/material-ui-icons "4.4.1-0"]]
-
-  :plugins [[lein-cljsbuild "1.1.7"]
-            [lein-figwheel "0.5.19"]]
-
-  :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
-                :infer-externs true}}
-
-    :adv
-    {:source-paths ["src"]
-     :compiler {:parallel-build true
-                :source-map "target/cljsbuild/adv/public/js/main.js.map"
-                :optimizations :advanced
-                :main "example.core"
-                :output-dir "target/cljsbuild/adv/public/js/out"
-                :output-to "target/cljsbuild/adv/public/js/main.js"
-                :asset-path "js/out"
-                :npm-deps false
-                :infer-externs true}}
-
-    ;; 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.8.6"
-                           react-dom "16.8.6"
-                           "@material-ui/core" "4.1.0"
-                           "@material-ui/icons" "3.0.1"}
-                :process-shim true}}}})

examples/material-ui/shadow-cljs.edn

@@ -0,0 +1,9 @@
+{:builds
+ {:app {:asset-path "/js"
+        :modules {:main {:entries [example.core]}}
+        :output-dir "target/public/js"
+        :target :browser}}
+ :dependencies [[reagent "0.10.0"]]
+ :dev-http {3000 ["resources/public" "target/public"]}
+ :nrepl {:port 3333}
+ :source-paths ["src"]}

examples/material-ui/src/example/core.cljs

@@ -6,6 +6,7 @@
             ["@material-ui/core/styles" :refer [createMuiTheme withStyles]]
             ["@material-ui/core/colors" :as mui-colors]
             ["@material-ui/icons" :as mui-icons]
+            ["@material-ui/lab" :refer [Autocomplete]]
             [goog.object :as gobj]
             [reagent.impl.template :as rtpl]))
 
@@ -71,6 +72,23 @@
 
 (defonce text-state (r/atom "foobar"))
 
+(defn autocomplete-example []
+  [:> mui/Grid
+   {:item true}
+   [:> Autocomplete {:options ["foo" "bar" "foobar"]
+                     :style {:width 300}
+                     ;; Note that the function parameter is a JS Object!
+                     :render-input (fn [^js params]
+                                     ;; Don't call js->clj because that would
+                                     ;; recursively convert all JS objects (e.g. React ref objects)
+                                     ;; to Cljs maps, which breaks them, even when converted back to JS.
+                                     ;; Best thing is to use r/create-element and
+                                     ;; pass the JS params to it. If necessary,
+                                     ;; use JS interop to modify params.
+                                     (set! (.-variant params) "outlined")
+                                     (set! (.-label params) "Autocomplete")
+                                     (r/create-element mui/TextField params))}]])
+
 ;; Props in cljs but classes in JS object
 (defn form [{:keys [classes] :as props}]
   [:> mui/Grid
@@ -156,7 +174,14 @@
      [:> mui/Grid {:item true}
       [:> mui/Chip
        {:icon (r/create-element mui-icons/Face)
-        :label "Icon element example, r/create-element"}]]]]])
+        :label "Icon element example, r/create-element"}]]]]
+
+   [:> mui/Grid {:item true}
+    [:> mui/Grid
+     {:container true
+      :direction "row"
+      :spacing 4}
+     [autocomplete-example]]]])
 
 (defn main []
   ;; fragment

package.json

@@ -18,6 +18,6 @@
     "karma-junit-reporter": "2.0.1",
     "karma-sourcemap-loader": "^0.3.7",
     "md5-file": "4.0.0",
-    "shadow-cljs": "2.8.83"
+    "shadow-cljs": "2.8.93"
   }
 }