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

Wrap material-ui form contents in Grid items

This commit is contained in:
Juho Teperi 2018-10-12 23:56:44 +03:00
parent d0812152bc
commit bd7a2b5a99
1 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
examples/material-ui/src/example/core.cljs
View File

@ -70,82 +70,88 @@
(defn form [{:keys [classes] :as props}]
[:> mui/Grid
{:container true
:direction "column"}
:direction "column"
:spacing 16}
[:> mui/Toolbar
{:disable-gutters true}
[:> mui/Button
{:variant "contained"
:color "primary"
:class (.-button classes)
:on-click #(swap! text-state str " foo")}
"Update value property"
[:> mui-icons/AddBox]]
[:> mui/Grid {:item true}
[:> mui/Toolbar
{:disable-gutters true}
[:> mui/Button
{:variant "contained"
:color "primary"
:class (.-button classes)
:on-click #(swap! text-state str " foo")}
"Update value property"
[:> mui-icons/AddBox]]
[:> mui/Button
{:variant "outlined"
:color "secondary"
:class (.-button classes)
:on-click #(reset! text-state "")}
"Reset"
[:> mui-icons/Clear]]]
[:> mui/Button
{:variant "outlined"
:color "secondary"
:class (.-button classes)
:on-click #(reset! text-state "")}
"Reset"
[:> mui-icons/Clear]]]]
[text-field
{:value @text-state
:label "Text input"
:placeholder "Placeholder"
:helper-text "Helper text"
:class (.-textField classes)
:on-change (fn [e]
(reset! text-state (.. e -target -value)))
:inputRef #(js/console.log "input-ref" %)}]
[:> mui/Grid {:item true}
[text-field
{:value @text-state
:label "Text input"
:placeholder "Placeholder"
:helper-text "Helper text"
:class (.-textField classes)
:on-change (fn [e]
(reset! text-state (.. e -target -value)))
:inputRef #(js/console.log "input-ref" %)}]]
[text-field
{:value @text-state
:label "Textarea"
:placeholder "Placeholder"
:helper-text "Helper text"
:class (.-textField classes)
:on-change (fn [e]
(reset! text-state (.. e -target -value)))
:multiline true
;; TODO: Autosize textarea is broken.
:rows 10}]
[:> mui/Grid {:item true}
[text-field
{:value @text-state
:label "Textarea"
:placeholder "Placeholder"
:helper-text "Helper text"
:class (.-textField classes)
:on-change (fn [e]
(reset! text-state (.. e -target -value)))
:multiline true
;; TODO: Autosize textarea is broken.
:rows 10}]]
[text-field
{:value @text-state
:label "Select"
:placeholder "Placeholder"
:helper-text "Helper text"
:class (.-textField classes)
:on-change (fn [e]
(reset! text-state (.. e -target -value)))
:select true}
[:> mui/MenuItem
{:value 1}
"Item 1"]
;; Same as previous, alternative to adapt-react-class
[:> mui/MenuItem
{:value 2}
"Item 2"]]
[:> mui/Grid {:item true}
[text-field
{:value @text-state
:label "Select"
:placeholder "Placeholder"
:helper-text "Helper text"
:class (.-textField classes)
:on-change (fn [e]
(reset! text-state (.. e -target -value)))
:select true}
[:> mui/MenuItem
{:value 1}
"Item 1"]
;; Same as previous, alternative to adapt-react-class
[:> mui/MenuItem
{:value 2}
"Item 2"]]]
[:> mui/Grid
{:container true
:direction "row"
:spacing 8}
[:> mui/Grid {:item true}
[:> mui/Grid
{:container true
:direction "row"
:spacing 8}
;; For properties that require React Node as parameter,
;; either use r/as-element to convert Reagent hiccup forms into React elements,
;; or use r/create-element to directly instantiate element from React class (i.e. non-adapted React component).
[:> mui/Grid {:item true}
[:> mui/Chip
{:icon (r/as-element [:> mui-icons/Face])
:label "Icon element example, r/as-element"}]]
;; For properties that require React Node as parameter,
;; either use r/as-element to convert Reagent hiccup forms into React elements,
;; or use r/create-element to directly instantiate element from React class (i.e. non-adapted React component).
[:> mui/Grid {:item true}
[:> mui/Chip
{:icon (r/as-element [:> mui-icons/Face])
:label "Icon element example, r/as-element"}]]
[:> mui/Grid {:item true}
[:> mui/Chip
{:icon (r/create-element mui-icons/Face)
:label "Icon element example, r/create-element"}]]]])
[:> mui/Grid {:item true}
[:> mui/Chip
{:icon (r/create-element mui-icons/Face)
:label "Icon element example, r/create-element"}]]]]])
(defn main []
;; fragment