mirror of
https://github.com/correl/elm-mdl.git
synced 2024-11-23 19:19:52 +00:00
162 lines
4.1 KiB
Elm
162 lines
4.1 KiB
Elm
module Demo.Buttons where
|
|
|
|
import Dict
|
|
import Html exposing (..)
|
|
import Html.Attributes exposing (..)
|
|
import Effects
|
|
|
|
import Material.Button as Button exposing (..)
|
|
import Material.Grid as Grid
|
|
import Material.Icon as Icon
|
|
import Material.Style exposing (Style)
|
|
|
|
import Material.Textfield as Textfield
|
|
import Material.Component exposing (..)
|
|
|
|
|
|
-- MODEL
|
|
|
|
|
|
type alias Index = (Int, Int)
|
|
|
|
type alias View =
|
|
Signal.Address Button.Action -> Button.Model -> List Style -> List Html -> Html
|
|
|
|
type alias View' =
|
|
Signal.Address Button.Action -> Button.Model -> Html
|
|
|
|
|
|
view' : View -> List Style -> Html -> Signal.Address Button.Action -> Button.Model -> Html
|
|
view' view coloring elem addr model =
|
|
view addr model coloring [elem]
|
|
|
|
|
|
describe : String -> Bool -> String -> String
|
|
describe kind ripple c =
|
|
kind ++ ", " ++ c ++ if ripple then " w/ripple" else ""
|
|
|
|
|
|
row : (String, Html, View) -> Bool -> List (Int, (Bool, String, View'))
|
|
row (kind, elem, v) ripple =
|
|
[ ("plain", [])
|
|
, ("colored", [Button.colored])
|
|
, ("primary", [Button.primary])
|
|
, ("accent", [Button.accent])
|
|
]
|
|
|> List.map (\(d,c) -> (ripple, describe kind ripple d, view' v c elem))
|
|
|> List.indexedMap (,)
|
|
|
|
|
|
buttons : List (List (Index, (Bool, String, View')))
|
|
buttons =
|
|
[ ("flat", text "Flat Button", Button.flat)
|
|
, ("raised", text "Raised Button", Button.raised)
|
|
, ("FAB", Icon.i "add", Button.fab)
|
|
, ("mini-FAB", Icon.i "zoom_in", Button.minifab)
|
|
, ("icon", Icon.i "flight_land", Button.icon)
|
|
]
|
|
|> List.concatMap (\a -> [row a False, row a True])
|
|
|> List.indexedMap (\i r -> List.map (\(j, x) -> ((i,j), x)) r)
|
|
|
|
|
|
model : Model
|
|
model =
|
|
{ clicked = ""
|
|
, buttons =
|
|
buttons
|
|
|> List.concatMap (List.map <| \(idx, (ripple, _, _)) -> (idx, Button.model ripple))
|
|
|> Dict.fromList
|
|
, componentState = state0
|
|
}
|
|
|
|
|
|
-- ACTION, UPDATE
|
|
|
|
|
|
type Action
|
|
= Action Index Button.Action
|
|
| State' (Material.Component.Action Material.Component.State (Maybe Action))
|
|
| Click
|
|
|
|
|
|
|
|
type alias Model =
|
|
{ clicked : String
|
|
, buttons : Dict.Dict Index Button.Model
|
|
, componentState : State
|
|
-- TODO: Exposed Action should not be parametric.
|
|
}
|
|
|
|
|
|
update : Action -> Model -> (Model, Effects.Effects Action)
|
|
update action model =
|
|
case action of
|
|
Action idx action ->
|
|
Dict.get idx model.buttons
|
|
|> Maybe.map (\m0 ->
|
|
let
|
|
(m1, e) = Button.update action m0
|
|
in
|
|
({ model | buttons = Dict.insert idx m1 model.buttons }, Effects.map (Action idx) e)
|
|
)
|
|
|> Maybe.withDefault (model, Effects.none)
|
|
|
|
State' action' ->
|
|
Material.Component.update State' update action' model
|
|
|
|
Click ->
|
|
( tf.map (\m -> { m | value = "You clicked!" }) model, Effects.none )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- VIEW
|
|
|
|
tf = instance State' (textfieldWidget Textfield.model 4)
|
|
|
|
|
|
view : Signal.Address Action -> Model -> Html
|
|
view addr model =
|
|
buttons |> List.concatMap (\row ->
|
|
row |> List.concatMap (\(idx, (ripple, description, view)) ->
|
|
let model' =
|
|
Dict.get idx model.buttons |> Maybe.withDefault (Button.model False)
|
|
in
|
|
[ Grid.cell
|
|
[ Grid.size Grid.All 3]
|
|
[ div
|
|
[ style
|
|
[ ("text-align", "center")
|
|
, ("margin-top", "1em")
|
|
, ("margin-bottom", "1em")
|
|
]
|
|
]
|
|
[ view
|
|
(Signal.forwardTo addr (Action idx))
|
|
model'
|
|
, div
|
|
[ style
|
|
[ ("font-size", "9pt")
|
|
, ("margin-top", "1em")
|
|
]
|
|
]
|
|
[ text description
|
|
]
|
|
]
|
|
]
|
|
]
|
|
)
|
|
)
|
|
|> (\contents ->
|
|
div []
|
|
[ instance' State' (buttonWidget (Button.model True) 1 |> onClick Click) addr model [] [ text "Click me (1)" ]
|
|
, instance' State' (buttonWidget (Button.model False) 2) addr model [] [ text "Click me (2)" ]
|
|
, instance' State' (textfieldWidget Textfield.model 3) addr model
|
|
, tf.view addr model
|
|
, Grid.grid [] contents
|
|
]
|
|
)
|
|
|
|
--i = instance' State' (buttonWidget (Button.model True) 1) -- addr model.componentState [] [ text "Click me (1)" ]
|