status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add Material-UI v1 example with working TextField

This commit is contained in:
Juho Teperi 2018-06-17 20:48:35 +03:00
parent eff27834b3
commit 2dc1b1459e
3 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
examples/material-ui/project.clj Normal file
View File

@ -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}}}})

14
examples/material-ui/resources/public/index.html Normal file
View File

@ -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>

50
examples/material-ui/src/example/core.cljs Normal file
View File

@ -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)