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

167 lines
4.3 KiB
Elm
Raw Normal View History

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
@docs example
2018-03-24 05:05:34 +03:00
-}
import Accessibility.Styled
2020-06-19 23:41:28 +03:00
import AtomicDesignType exposing (AtomicDesignType(..))
import Category exposing (Category(..))
import Debug.Control as Control exposing (Control)
2020-03-31 23:20:03 +03:00
import Example exposing (Example)
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Attr
import Html.Styled.Events as Events
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
}
, 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
, options = buildOptions "" options [ One, Two, Three ] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
, selected = state.optionallySelected
, 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 =
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
2020-05-20 21:58:21 +03:00
List.map2 buildOption selections
2020-05-20 21:58:21 +03:00
type ExampleOptionNav
= 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
{-| -}
type alias State =
2020-05-20 21:58:21 +03:00
{ selectedNav : ExampleOptionNav
2020-05-22 21:28:37 +03:00
, optionallySelected : Maybe ExampleOptionSelect
, 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
, optionallySelected = Nothing
, 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
2020-05-20 21:58:21 +03:00
= SelectNav ExampleOptionNav
2020-05-22 21:28:37 +03:00
| MaybeSelect ExampleOptionSelect
| ChangeOptions (Control Options)
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 }
, Cmd.none
)
ChangeOptions newOptions ->
( { state | optionsControl = newOptions }
, Cmd.none
)