status-im/reagent
2
0
Fork 0
mirror of https://github.com/status-im/reagent.git synced 2025-01-13 21:34:29 +00:00
Code Issues Projects Releases Wiki Activity

Wrap material-ui form contents in Grid items

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