2018-09-26 17:02:10 +03:00
|
|
|
module Examples.SegmentedControl exposing
|
2020-03-31 22:43:32 +03:00
|
|
|
( Msg, State
|
2018-09-26 17:02:10 +03:00
|
|
|
, example
|
|
|
|
)
|
2018-03-24 05:05:34 +03:00
|
|
|
|
|
|
|
{-|
|
|
|
|
|
2020-03-31 22:43:32 +03:00
|
|
|
@docs Msg, State
|
2018-03-30 19:03:16 +03:00
|
|
|
@docs example
|
2018-03-24 05:05:34 +03:00
|
|
|
|
|
|
|
-}
|
|
|
|
|
2018-09-10 18:19:15 +03:00
|
|
|
import Accessibility.Styled
|
2020-06-19 23:41:28 +03:00
|
|
|
import AtomicDesignType exposing (AtomicDesignType(..))
|
2020-03-24 03:33:42 +03:00
|
|
|
import Category exposing (Category(..))
|
2019-06-05 02:01:20 +03:00
|
|
|
import Debug.Control as Control exposing (Control)
|
2020-03-31 23:20:03 +03:00
|
|
|
import Example exposing (Example)
|
2018-09-10 18:19:15 +03:00
|
|
|
import Html.Styled as Html exposing (Html)
|
|
|
|
import Html.Styled.Attributes as Attr
|
|
|
|
import Html.Styled.Events as Events
|
2019-10-24 21:29:27 +03:00
|
|
|
import Nri.Ui.Colors.V1 as Colors
|
2020-05-22 21:22:38 +03:00
|
|
|
import Nri.Ui.SegmentedControl.V9 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
|
2018-03-24 05:05:34 +03:00
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
2020-03-31 23:20:03 +03:00
|
|
|
example : Example State Msg
|
2020-03-31 22:43:32 +03:00
|
|
|
example =
|
2020-05-22 21:22:38 +03:00
|
|
|
{ name = "Nri.Ui.SegmentedControl.V9"
|
2020-03-31 22:43:32 +03:00
|
|
|
, state = init
|
|
|
|
, update = update
|
2020-03-31 22:48:26 +03:00
|
|
|
, subscriptions = \_ -> Sub.none
|
2020-03-31 22:43:32 +03:00
|
|
|
, view =
|
|
|
|
\state ->
|
|
|
|
let
|
|
|
|
options =
|
|
|
|
Control.currentValue state.optionsControl
|
|
|
|
in
|
|
|
|
[ Control.view ChangeOptions state.optionsControl
|
|
|
|
|> Html.fromUnstyled
|
|
|
|
, let
|
|
|
|
viewFn =
|
|
|
|
if options.useSpa then
|
|
|
|
SegmentedControl.viewSpa Debug.toString
|
|
|
|
|
|
|
|
else
|
|
|
|
SegmentedControl.view
|
|
|
|
in
|
|
|
|
viewFn
|
2020-05-20 21:58:21 +03:00
|
|
|
{ onClick = SelectNav
|
2020-05-20 22:23:13 +03:00
|
|
|
, options = buildOptions "" options [ A, B, C ] [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ]
|
2020-05-20 21:58:21 +03:00
|
|
|
, selected = state.selectedNav
|
2020-03-31 22:43:32 +03:00
|
|
|
, width = options.width
|
2020-05-20 21:58:21 +03:00
|
|
|
, content = Html.text ("[Content for " ++ Debug.toString state.selectedNav ++ "]")
|
2020-03-31 22:43:32 +03:00
|
|
|
}
|
2020-05-26 21:06:16 +03:00
|
|
|
, Html.h3 [] [ Html.text "Select only view" ]
|
2020-03-31 22:43:32 +03:00
|
|
|
, Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ]
|
2020-05-22 21:31:13 +03:00
|
|
|
, SegmentedControl.viewSelect
|
2020-05-20 21:58:21 +03:00
|
|
|
{ onClick = MaybeSelect
|
2020-05-26 21:06:16 +03:00
|
|
|
, options = buildOptions "" options [ One, Two, Three ] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
|
2020-05-20 21:34:34 +03:00
|
|
|
, selected = state.optionallySelected
|
2020-05-20 21:30:43 +03:00
|
|
|
, width = options.width
|
|
|
|
}
|
2020-03-31 22:43:32 +03:00
|
|
|
]
|
2020-06-19 23:41:28 +03:00
|
|
|
, categories = [ Inputs, Widgets, Layout ]
|
2020-06-20 00:16:10 +03:00
|
|
|
, atomicDesignType = Molecule
|
2018-03-24 05:05:34 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-05-20 21:58:21 +03:00
|
|
|
buildOptions : String -> Options -> List a -> List Svg -> List (SegmentedControl.Option a)
|
|
|
|
buildOptions prefix options selections =
|
2019-10-24 22:29:21 +03:00
|
|
|
let
|
2019-10-24 23:23:52 +03:00
|
|
|
buildOption option icon =
|
2019-10-24 22:29:21 +03:00
|
|
|
{ icon =
|
|
|
|
if options.icon then
|
|
|
|
Just icon
|
|
|
|
|
|
|
|
else
|
|
|
|
Nothing
|
2019-11-15 19:49:48 +03:00
|
|
|
, label = prefix ++ "Choice " ++ Debug.toString option
|
2019-10-24 22:29:21 +03:00
|
|
|
, value = option
|
|
|
|
}
|
|
|
|
in
|
2020-05-20 21:58:21 +03:00
|
|
|
List.map2 buildOption selections
|
2019-10-24 22:29:21 +03:00
|
|
|
|
|
|
|
|
2020-05-20 21:58:21 +03:00
|
|
|
type ExampleOptionNav
|
2019-10-24 22:29:21 +03:00
|
|
|
= A
|
|
|
|
| B
|
|
|
|
| C
|
|
|
|
|
2020-05-20 22:23:13 +03:00
|
|
|
|
2020-05-20 21:58:21 +03:00
|
|
|
type ExampleOptionSelect
|
|
|
|
= One
|
|
|
|
| Two
|
|
|
|
| Three
|
|
|
|
|
2020-05-20 22:23:13 +03:00
|
|
|
|
2019-10-24 22:29:21 +03:00
|
|
|
{-| -}
|
|
|
|
type alias State =
|
2020-05-20 21:58:21 +03:00
|
|
|
{ selectedNav : ExampleOptionNav
|
2020-05-22 21:28:37 +03:00
|
|
|
, optionallySelected : Maybe ExampleOptionSelect
|
2019-10-24 22:29:21 +03:00
|
|
|
, optionsControl : Control Options
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2018-03-24 05:05:34 +03:00
|
|
|
{-| -}
|
2019-10-24 21:08:28 +03:00
|
|
|
init : State
|
|
|
|
init =
|
2020-05-20 21:58:21 +03:00
|
|
|
{ selectedNav = A
|
2020-05-20 21:34:34 +03:00
|
|
|
, optionallySelected = Nothing
|
2019-10-24 22:29:21 +03:00
|
|
|
, optionsControl = optionsControl
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
type alias Options =
|
|
|
|
{ width : SegmentedControl.Width
|
|
|
|
, icon : Bool
|
|
|
|
, useSpa : Bool
|
2018-03-24 05:05:34 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2019-10-24 22:29:21 +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
|
2020-05-20 21:58:21 +03:00
|
|
|
= SelectNav ExampleOptionNav
|
2020-05-22 21:28:37 +03:00
|
|
|
| MaybeSelect ExampleOptionSelect
|
2019-10-24 22:29:21 +03:00
|
|
|
| ChangeOptions (Control Options)
|
2019-10-24 21:29:27 +03:00
|
|
|
|
|
|
|
|
2018-03-24 05:05:34 +03:00
|
|
|
{-| -}
|
|
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
|
|
update msg state =
|
|
|
|
case msg of
|
2020-05-20 21:58:21 +03:00
|
|
|
SelectNav id ->
|
|
|
|
( { state | selectedNav = id }
|
|
|
|
, Cmd.none
|
|
|
|
)
|
2020-05-20 22:23:13 +03:00
|
|
|
|
2020-05-20 21:58:21 +03:00
|
|
|
MaybeSelect id ->
|
|
|
|
( { state | optionallySelected = Just id }
|
2018-09-10 18:19:15 +03:00
|
|
|
, Cmd.none
|
|
|
|
)
|
|
|
|
|
2019-06-05 02:01:20 +03:00
|
|
|
ChangeOptions newOptions ->
|
|
|
|
( { state | optionsControl = newOptions }
|
|
|
|
, Cmd.none
|
|
|
|
)
|