diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index edb6767b..f6f64f0a 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -1,4 +1,4 @@ -module Example exposing (Example, view) +module Example exposing (Example, view, wrap) import Category exposing (Category) import Css exposing (..) @@ -18,6 +18,28 @@ type alias Example state msg = } +wrap : + { wrapMsg : msg -> msg2, unwrapMsg : msg2 -> Maybe msg } + -> Example state msg + -> Example state msg2 +wrap { wrapMsg, unwrapMsg } example = + { name = example.name + , state = example.state + , update = + \msg2 state -> + case unwrapMsg msg2 of + Just msg -> + example.update msg state + |> Tuple.mapSecond (Cmd.map wrapMsg) + + Nothing -> + ( state, Cmd.none ) + , subscriptions = \state -> Sub.map wrapMsg (example.subscriptions state) + , view = \state -> List.map (Html.map wrapMsg) (example.view state) + , categories = example.categories + } + + view : Bool -> Example state msg -> Html msg view showFocusLink example = Html.div @@ -31,7 +53,7 @@ view showFocusLink example = [ displayFlex , alignItems center , justifyContent flexStart - , flexWrap wrap + , flexWrap Css.wrap , padding (px 4) , backgroundColor glacier ] diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index a046a2fe..aff48442 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -39,8 +39,8 @@ import Html.Styled as Html exposing (Html) type alias ModuleStates = - { accordion : Example Accordion.State Accordion.Msg - , button : Example Button.State Button.Msg + { accordion : Example Accordion.State Msg + , button : Example Button.State Msg , bannerAlert : Example BannerAlert.State BannerAlert.Msg , clickableText : Example ClickableText.State ClickableText.Msg , checkbox : Example Checkbox.State Checkbox.Msg @@ -64,8 +64,8 @@ type alias ModuleStates = init : ModuleStates init = - { accordion = Accordion.example - , button = Button.example + { accordion = Example.wrap { wrapMsg = AccordionMsg, unwrapMsg = getAccordionMsg } Accordion.example + , button = Example.wrap { wrapMsg = ButtonMsg, unwrapMsg = getButtonMsg } Button.example , bannerAlert = BannerAlert.example , clickableText = ClickableText.example , checkbox = Checkbox.example @@ -94,6 +94,26 @@ type Msg | ModalMsg Modal.Msg +getAccordionMsg : Msg -> Maybe Accordion.Msg +getAccordionMsg msg = + case msg of + AccordionMsg childMsg -> + Just childMsg + + _ -> + Nothing + + +getButtonMsg : Msg -> Maybe Button.Msg +getButtonMsg msg = + case msg of + ButtonMsg childMsg -> + Just childMsg + + _ -> + Nothing + + update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) update msg moduleStates = let @@ -108,13 +128,19 @@ update msg moduleStates = ( updater { module_ | state = newState } moduleStates , Cmd.map wrapMsg cmd ) + + update_ example = + example.update msg example.state + |> Tuple.mapFirst (\newState -> { example | state = newState }) in case msg of AccordionMsg exampleMsg -> - updateWith .accordion (\state m -> { m | accordion = state }) AccordionMsg exampleMsg + update_ moduleStates.accordion + |> Tuple.mapFirst (\accordion -> { moduleStates | accordion = accordion }) ButtonMsg exampleMsg -> - updateWith .button (\state m -> { m | button = state }) ButtonMsg exampleMsg + update_ moduleStates.button + |> Tuple.mapFirst (\button -> { moduleStates | button = button }) BannerAlertMsg exampleMsg -> updateWith .bannerAlert (\state m -> { m | bannerAlert = state }) BannerAlertMsg exampleMsg @@ -136,9 +162,9 @@ view : Bool -> (Example state msg -> Bool) -> ModuleStates -> List (Html Msg) view showFocusLink filter moduleStates = -- TODO add the filter back in [ Example.view showFocusLink moduleStates.accordion - |> Html.map AccordionMsg , Example.view showFocusLink moduleStates.button - |> Html.map ButtonMsg , Example.view showFocusLink moduleStates.bannerAlert |> Html.map BannerAlertMsg + , Example.view showFocusLink moduleStates.modal + |> Html.map ModalMsg ]