Passing parent msg trough child control and back

[Zackie de Beer]

I am trying to create a button that you can pass a msg to it, the button will then call that message on click.

This works nicely, when I click the button it wall send the message I passed in the action parameter.

buttonFab : msg -> String -> Html.Html msg

buttonFab action icon =

    Html.button [ onClick action, class "mdl-button mdl-button--fab mdl-button--colored" ]

        [ i [ class "material-icons" ] [ text icon ] ]

But if I try to add control specific messages like the MouseUp message I run into trouble, I am not sure how I should pass it or map it in and out. This is what I tried but it gives an error.

 type Msg msg

    = MouseUp

    | Click pmsg

buttonFab1 : pmsg -> String -> Html.Html msg

buttonFab1 action icon =

    Html.button [ onClick Click action, onMouseUp MouseUp, class "mdl-button mdl-button--fab mdl-button--colored" ]

        [ i [ class "material-icons" ] [ text icon ] ]

 

[Janis Voigtländer]

Brackets: onClick (Click action)

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Janis Voigtländer]

And changes to the type, but probably the compiler will help you with those.

Am 28.05.2016 um 20:46 schrieb Zackie de Beer <zde...@gmail.com>:

--

[Janis Voigtländer]

If the compiler doesn’t, here goes:

type Msg pmsg
    = MouseUp
    | Click pmsg

buttonFab1 : pmsg -> String -> Html.Html (Msg pmsg)
buttonFab1 action icon =
    Html.button [ onClick (Click action), onMouseUp MouseUp, class "mdl-button mdl-button--fab mdl-button--colored" ]
        [ i [ class "material-icons" ] [ text icon ] ]

​

[Zackie de Beer]

Wow, thanks for the help, now I just need to map the message I get from my button back to the parent control message type.

view : Model -> Html.Html Msg

view model =

    div []

        [ text (toString model)

        , div []

            [ buttonFab Inc "add" ]

        , div []

            [ buttonFab Dec "remove" ]

        ]

Current Error

The type annotation for `view` does not match its definition.
The type annotation is saying:
 
     Model -> Html.Html Msg
 
 But I am inferring that the definition has this type:
 
     Model -> Html.Html (MDL.Msg Msg)

Where MDL.Msg is the buttonFab Msg. 

Let me play around with this error, I am sure I can get it working from here. 

Thanks alot.

You received this message because you are subscribed to a topic in the Google Groups "Elm Discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/elm-discuss/I3eJK2avJus/unsubscribe.
To unsubscribe from this group and all its topics, send an email to elm-discuss...@googlegroups.com.