1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-25 06:33:09 +03:00
noredink-ui/styleguide-app/Examples/SegmentedControl.elm

155 lines
3.8 KiB
Elm
Raw Normal View History

2018-09-26 17:02:10 +03:00
module Examples.SegmentedControl exposing
( Msg
, State
, example
, init
, update
)
2018-03-24 05:05:34 +03:00
{-|
@docs Msg
@docs State
@docs example
@docs init
@docs update
2018-03-24 05:05:34 +03:00
-}
import Accessibility.Styled
import Category exposing (Category(..))
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 (ModuleExample)
import Nri.Ui.Colors.V1 as Colors
2019-10-24 21:08:28 +03:00
import Nri.Ui.SegmentedControl.V8 as SegmentedControl
2019-10-24 23:23:52 +03:00
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
2019-10-24 21:08:28 +03:00
import Nri.Ui.UiIcon.V1 as UiIcon
import Sort.Set as Set exposing (Set)
2018-03-24 05:05:34 +03:00
{-| -}
example : (Msg -> msg) -> State -> ModuleExample msg
example parentMessage state =
let
options =
Control.currentValue state.optionsControl
in
2019-10-24 21:08:28 +03:00
{ name = "Nri.Ui.SegmentedControl.V8"
, categories = Set.fromList Category.sorter <| List.singleton Widgets
2018-03-24 05:05:34 +03:00
, content =
[ Control.view ChangeOptions state.optionsControl
|> Html.fromUnstyled
, let
viewFn =
if options.useSpa then
SegmentedControl.viewSpa Debug.toString
else
SegmentedControl.view
in
viewFn
{ onClick = Select
, options = buildOptions "" options [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ]
, selected = state.selected
, width = options.width
, content = Html.text ("[Content for " ++ Debug.toString state.selected ++ "]")
}
, Html.h3 [] [ Html.text "Toggle only view" ]
, Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ]
, SegmentedControl.viewToggle
{ onClick = Select
, options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
, selected = state.selected
, width = options.width
}
]
|> List.map (Html.map parentMessage)
2018-03-24 05:05:34 +03:00
}
buildOptions : String -> Options -> List Svg -> List (SegmentedControl.Option ExampleOption)
buildOptions prefix options =
let
2019-10-24 23:23:52 +03:00
buildOption option icon =
{ icon =
if options.icon then
Just icon
else
Nothing
, label = prefix ++ "Choice " ++ Debug.toString option
, value = option
}
in
2019-10-24 23:23:52 +03:00
List.map2 buildOption [ A, B, C ]
type ExampleOption
= A
| B
| C
{-| -}
type alias State =
{ selected : ExampleOption
, optionsControl : Control Options
}
2018-03-24 05:05:34 +03:00
{-| -}
2019-10-24 21:08:28 +03:00
init : State
init =
{ selected = A
, optionsControl = optionsControl
}
type alias Options =
{ width : SegmentedControl.Width
, icon : Bool
, useSpa : Bool
2018-03-24 05:05:34 +03:00
}
optionsControl : Control Options
optionsControl =
Control.record Options
|> Control.field "width"
(Control.choice
[ ( "FitContent", Control.value SegmentedControl.FitContent )
, ( "FillContainer", Control.value SegmentedControl.FillContainer )
]
)
|> Control.field "icon" (Control.bool False)
|> Control.field "which view function"
(Control.choice
[ ( "view", Control.value False )
, ( "viewSpa", Control.value True )
]
)
{-| -}
type Msg
= Select ExampleOption
| ChangeOptions (Control Options)
2018-03-24 05:05:34 +03:00
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
Select id ->
( { state | selected = id }
, Cmd.none
)
ChangeOptions newOptions ->
( { state | optionsControl = newOptions }
, Cmd.none
)