Add flexibility to SegmentedControl example

This commit is contained in:
Aaron VonderHaar 2019-06-04 16:01:20 -07:00
parent 0c4e79b2ee
commit 8e04ea9771
3 changed files with 73 additions and 69 deletions

View File

@ -17,7 +17,7 @@ import Nri.Ui
import Nri.Ui.Colors.Extra exposing (withAlpha)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Icon.V3 as Icon
import Nri.Ui.Icon.V5 as Icon
{-| -}

View File

@ -17,22 +17,39 @@ module Examples.SegmentedControl exposing
-}
import Accessibility.Styled
import Debug.Control as Control exposing (Control)
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Attr
import Html.Styled.Events as Events
import ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Icon.V5 as Icon
import Nri.Ui.SegmentedControl.V7 as SegmentedControl
{-| -}
type Msg
= Select Id
| SetFillContainer Bool
= Select ExampleOption
| ChangeOptions (Control Options)
type ExampleOption
= A
| B
| C
{-| -}
type alias State =
SegmentedControl.Config Id Msg
{ selected : ExampleOption
, optionsControl : Control Options
}
type alias Options =
{ width : SegmentedControl.Width
, icon : Maybe SegmentedControl.Icon
, useSpa : Bool
}
{-| -}
@ -41,82 +58,69 @@ example parentMessage state =
{ name = "Nri.Ui.SegmentedControl.V7"
, category = Widgets
, content =
List.map (Html.map parentMessage)
[ fillContainerCheckbox state.width
, SegmentedControl.view state
]
[ Control.view ChangeOptions state.optionsControl
|> Html.fromUnstyled
, let
options =
Control.currentValue state.optionsControl
viewFn =
if options.useSpa then
SegmentedControl.viewSpa Debug.toString
else
SegmentedControl.view
in
viewFn
{ onClick = Select
, options =
[ A, B, C ]
|> List.map
(\i ->
{ icon = options.icon
, label = "Option " ++ Debug.toString i
, value = i
}
)
, selected = state.selected
, width = options.width
}
]
|> List.map (Html.map parentMessage)
}
{-| -}
init : State
init =
{ onClick = Select
, options =
[ { icon = Nothing
, label = "Option A"
, value = "a"
}
, { icon = Nothing
, label = "Option B"
, value = "b"
}
]
, selected = "a"
, width = SegmentedControl.FitContent
init : { r | help : String } -> State
init assets =
{ selected = A
, optionsControl =
Control.record Options
|> Control.field "width"
(Control.choice
( "FitContent", Control.value SegmentedControl.FitContent )
[ ( "FillContainer", Control.value SegmentedControl.FillContainer ) ]
)
|> Control.field "icon"
(Control.maybe False (Control.value { alt = "Help", icon = Icon.helpSvg assets }))
|> Control.field "which view function"
(Control.choice
( "view", Control.value False )
[ ( "viewSpa", Control.value True ) ]
)
}
fillContainerCheckbox : SegmentedControl.Width -> Html Msg
fillContainerCheckbox currentOption =
let
id =
"SegmentedControl-fill-container-checkbox"
isChecked =
case currentOption of
SegmentedControl.FitContent ->
Just False
SegmentedControl.FillContainer ->
Just True
in
Html.div []
[ Accessibility.Styled.checkbox "Fill container"
isChecked
[ Attr.id id
, Events.onCheck SetFillContainer
]
, Html.label
[ Attr.for id
]
[ Html.text "Fill Container" ]
]
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
Select id ->
( { state | selected = id }, Cmd.none )
SetFillContainer fillContainer ->
( { state
| width =
if fillContainer then
SegmentedControl.FillContainer
else
SegmentedControl.FitContent
}
( { state | selected = id }
, Cmd.none
)
-- INTERNAL
type alias Id =
String
ChangeOptions newOptions ->
( { state | optionsControl = newOptions }
, Cmd.none
)

View File

@ -55,7 +55,7 @@ init =
, clickableTextExampleState = Examples.ClickableText.init assets
, checkboxExampleState = Examples.Checkbox.init
, dropdownState = Examples.Dropdown.init
, segmentedControlState = Examples.SegmentedControl.init
, segmentedControlState = Examples.SegmentedControl.init assets
, selectState = Examples.Select.init
, tableExampleState = Examples.Table.init
, textAreaExampleState = TextAreaExample.init