NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 03:31:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Detangle example state

Browse Source
This commit is contained in:
Katie Hughes 2020-05-20 11:58:21 -07:00
parent 8d2d77d75d
commit fd26b1e508
1 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
styleguide-app/Examples/SegmentedControl.elm
View File

@ -47,25 +47,25 @@ example =
SegmentedControl.view SegmentedControl.view
in in
viewFn viewFn
{ onClick = Select { onClick = SelectNav
, options = buildOptions "" options [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ] , options = buildOptions "" options [A,B,C] [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ]
, selected = state.selected , selected = state.selectedNav
, width = options.width , width = options.width
, content = Html.text ("[Content for " ++ Debug.toString state.selected ++ "]") , content = Html.text ("[Content for " ++ Debug.toString state.selectedNav ++ "]")
} }
, Html.h3 [] [ Html.text "Toggle only view" ] , Html.h3 [] [ Html.text "Toggle only view" ]
, Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ] , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ]
, SegmentedControl.viewToggle , SegmentedControl.viewToggle
{ onClick = Select { onClick = Select
, options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] , options = buildOptions "Toggle-Only " options [One, Two,Three] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
, selected = state.selected , selected = state.selected
, width = options.width , width = options.width
} }
, Html.h3 [] [ Html.text "Toggle only view without a default" ] , Html.h3 [] [ Html.text "Toggle only view without a default" ]
, Html.p [] [ Html.text "Used when you only need the ui element and not a page control but don't want a default." ] , Html.p [] [ Html.text "Used when you only need the ui element and not a page control but don't want a default." ]
, SegmentedControl.viewOptionalSelectToggle , SegmentedControl.viewOptionalSelectToggle
{ onClick = Select { onClick = MaybeSelect
, options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] , options = buildOptions "Toggle-Only " options [Do, Re, Mi] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
, selected = state.optionallySelected , selected = state.optionallySelected
, width = options.width , width = options.width
} }
@ -74,8 +74,8 @@ example =
} }
buildOptions : String -> Options -> List Svg -> List (SegmentedControl.Option ExampleOption) buildOptions : String -> Options -> List a -> List Svg -> List (SegmentedControl.Option a)
buildOptions prefix options = buildOptions prefix options selections =
let let
buildOption option icon = buildOption option icon =
{ icon = { icon =
@ -88,27 +88,41 @@ buildOptions prefix options =
, value = option , value = option
} }
in in
List.map2 buildOption [ A, B, C ] List.map2 buildOption selections
type ExampleOption type ExampleOptionNav
= A = A
| B | B
| C | C
type ExampleOptionSelect
= One
| Two
| Three
type ExampleOptionMaybeSelect
= Do
| Re
| Mi
{-| -} {-| -}
type alias State = type alias State =
{ selected : ExampleOption { selectedNav : ExampleOptionNav
, optionallySelected : Maybe ExampleOption , selected : ExampleOptionSelect
, optionallySelected : Maybe ExampleOptionMaybeSelect
, optionsControl : Control Options , optionsControl : Control Options
-- , optionsControlSelect
-- , optionsControlMaybeSelect :
} }
{-| -} {-| -}
init : State init : State
init = init =
{ selected = A { selectedNav = A
, selected = One
, optionallySelected = Nothing , optionallySelected = Nothing
, optionsControl = optionsControl , optionsControl = optionsControl
} }
@ -141,7 +155,9 @@ optionsControl =
{-| -} {-| -}
type Msg type Msg
= Select ExampleOption = SelectNav ExampleOptionNav
| Select ExampleOptionSelect
| MaybeSelect ExampleOptionMaybeSelect
| ChangeOptions (Control Options) | ChangeOptions (Control Options)
@ -149,8 +165,16 @@ type Msg
update : Msg -> State -> ( State, Cmd Msg ) update : Msg -> State -> ( State, Cmd Msg )
update msg state = update msg state =
case msg of case msg of
SelectNav id ->
( { state | selectedNav = id }
, Cmd.none
)
Select id -> Select id ->
( { state | selected = id, optionallySelected = Just id } ( { state | selected = id }
, Cmd.none
)
MaybeSelect id ->
( { state | optionallySelected = Just id }
, Cmd.none , Cmd.none
) )