2018-11-12 23:25:37 +03:00
|
|
|
module Examples.Tabs exposing
|
|
|
|
( example
|
2020-03-31 22:43:32 +03:00
|
|
|
, State, Msg
|
2018-11-12 23:25:37 +03:00
|
|
|
)
|
2018-11-10 01:01:11 +03:00
|
|
|
|
|
|
|
{-|
|
|
|
|
|
|
|
|
@docs example
|
2020-03-31 22:43:32 +03:00
|
|
|
@docs State, Msg
|
2018-11-10 01:01:11 +03:00
|
|
|
|
|
|
|
-}
|
|
|
|
|
2020-06-19 23:41:28 +03:00
|
|
|
import AtomicDesignType exposing (AtomicDesignType(..))
|
2020-06-10 03:56:10 +03:00
|
|
|
import Browser.Dom as Dom
|
2020-03-24 03:33:42 +03:00
|
|
|
import Category exposing (Category(..))
|
2020-06-10 01:28:12 +03:00
|
|
|
import Css
|
2020-06-10 00:51:00 +03:00
|
|
|
import Debug.Control as Control exposing (Control)
|
2020-03-31 23:20:03 +03:00
|
|
|
import Example exposing (Example)
|
2020-06-10 00:51:00 +03:00
|
|
|
import Html.Styled as Html exposing (Html, fromUnstyled)
|
2020-06-10 01:28:12 +03:00
|
|
|
import Html.Styled.Attributes exposing (css)
|
2020-06-20 00:45:32 +03:00
|
|
|
import KeyboardSupport exposing (Key(..))
|
2020-06-10 01:12:30 +03:00
|
|
|
import List.Zipper exposing (Zipper)
|
2020-06-10 01:28:12 +03:00
|
|
|
import Nri.Ui.Svg.V1 as Svg
|
2020-08-06 00:17:38 +03:00
|
|
|
import Nri.Ui.Tabs.V6 as Tabs exposing (Alignment(..), Tab)
|
2020-06-10 01:28:12 +03:00
|
|
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
2020-06-10 03:56:10 +03:00
|
|
|
import Task
|
2018-11-10 01:01:11 +03:00
|
|
|
|
|
|
|
|
2020-06-10 00:51:00 +03:00
|
|
|
type alias State =
|
|
|
|
{ selected : Id
|
2020-06-10 00:55:39 +03:00
|
|
|
, settings : Control Settings
|
2020-06-10 00:51:00 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
init : State
|
|
|
|
init =
|
|
|
|
{ selected = First
|
2020-06-10 00:55:39 +03:00
|
|
|
, settings = initSettings
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
type alias Settings =
|
|
|
|
{ title : Maybe String
|
|
|
|
, alignment : Alignment
|
2020-06-10 04:08:33 +03:00
|
|
|
, customSpacing : Maybe Float
|
2020-06-10 00:51:00 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-06-10 00:55:39 +03:00
|
|
|
initSettings : Control Settings
|
|
|
|
initSettings =
|
|
|
|
Control.record Settings
|
|
|
|
|> Control.field "title" (Control.maybe False (Control.string "Title"))
|
|
|
|
|> Control.field "alignment"
|
|
|
|
(Control.choice
|
|
|
|
[ ( "Left", Control.value Left )
|
|
|
|
, ( "Center", Control.value Center )
|
|
|
|
, ( "Right", Control.value Right )
|
|
|
|
]
|
|
|
|
)
|
2020-06-10 04:08:33 +03:00
|
|
|
|> Control.field "customSpacing"
|
|
|
|
(Control.maybe False
|
|
|
|
(Control.choice
|
|
|
|
[ ( "2", Control.value 2 )
|
|
|
|
, ( "3", Control.value 3 )
|
|
|
|
, ( "4", Control.value 4 )
|
|
|
|
, ( "8", Control.value 8 )
|
|
|
|
, ( "16", Control.value 16 )
|
|
|
|
]
|
|
|
|
)
|
|
|
|
)
|
2020-06-10 00:55:39 +03:00
|
|
|
|
|
|
|
|
2020-06-10 00:51:00 +03:00
|
|
|
type Id
|
2018-11-10 01:01:11 +03:00
|
|
|
= First
|
|
|
|
| Second
|
2020-06-10 01:12:30 +03:00
|
|
|
| Third
|
|
|
|
| Fourth
|
2018-11-10 01:01:11 +03:00
|
|
|
|
|
|
|
|
2020-06-10 00:51:00 +03:00
|
|
|
type Msg
|
|
|
|
= SelectTab Id
|
2020-06-10 03:56:10 +03:00
|
|
|
| Focus String
|
|
|
|
| Focused (Result Dom.Error ())
|
2020-06-10 00:55:39 +03:00
|
|
|
| SetSettings (Control Settings)
|
2020-06-10 00:51:00 +03:00
|
|
|
|
|
|
|
|
2020-06-10 03:43:54 +03:00
|
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
2020-06-10 00:51:00 +03:00
|
|
|
update msg model =
|
|
|
|
case msg of
|
|
|
|
SelectTab id ->
|
2020-06-10 03:43:54 +03:00
|
|
|
( { model | selected = id }, Cmd.none )
|
2020-06-10 00:51:00 +03:00
|
|
|
|
2020-06-10 03:56:10 +03:00
|
|
|
Focus id ->
|
|
|
|
( model, Task.attempt Focused (Dom.focus id) )
|
|
|
|
|
|
|
|
Focused error ->
|
|
|
|
( model, Cmd.none )
|
|
|
|
|
2020-06-10 00:55:39 +03:00
|
|
|
SetSettings settings ->
|
2020-06-10 03:43:54 +03:00
|
|
|
( { model | settings = settings }, Cmd.none )
|
2020-03-31 22:43:32 +03:00
|
|
|
|
2018-11-12 23:25:37 +03:00
|
|
|
|
2020-03-31 23:20:03 +03:00
|
|
|
example : Example State Msg
|
2020-03-31 22:43:32 +03:00
|
|
|
example =
|
2020-08-06 00:17:38 +03:00
|
|
|
{ name = "Nri.Ui.Tabs.V6"
|
2020-03-31 22:43:32 +03:00
|
|
|
, categories = [ Layout ]
|
2020-06-20 00:16:10 +03:00
|
|
|
, atomicDesignType = Molecule
|
2020-06-20 00:50:47 +03:00
|
|
|
, keyboardSupport =
|
|
|
|
[ { keys = [ KeyboardSupport.Tab ]
|
2020-08-06 01:58:40 +03:00
|
|
|
, result = "Move focus to the currently-selected Tab's tab panel"
|
2020-06-20 00:50:47 +03:00
|
|
|
}
|
|
|
|
, { keys = [ Arrow KeyboardSupport.Left ]
|
|
|
|
, result = "Select the tab to the left of the currently-selected Tab"
|
|
|
|
}
|
|
|
|
, { keys = [ Arrow KeyboardSupport.Right ]
|
|
|
|
, result = "Select the tab to the right of the currently-selected Tab"
|
|
|
|
}
|
|
|
|
]
|
2020-06-10 00:51:00 +03:00
|
|
|
, state = init
|
2020-06-10 03:43:54 +03:00
|
|
|
, update = update
|
2020-03-31 22:48:26 +03:00
|
|
|
, subscriptions = \_ -> Sub.none
|
2020-03-31 22:43:32 +03:00
|
|
|
, view =
|
2020-06-10 00:51:00 +03:00
|
|
|
\model ->
|
2020-06-10 00:55:39 +03:00
|
|
|
let
|
|
|
|
settings =
|
|
|
|
Control.currentValue model.settings
|
|
|
|
in
|
|
|
|
[ Control.view SetSettings model.settings |> fromUnstyled
|
2020-06-10 00:51:00 +03:00
|
|
|
, Tabs.view
|
2020-06-10 00:55:39 +03:00
|
|
|
{ title = settings.title
|
2020-06-10 02:23:15 +03:00
|
|
|
, alignment = settings.alignment
|
2020-06-10 04:08:33 +03:00
|
|
|
, customSpacing = settings.customSpacing
|
2020-06-10 00:51:00 +03:00
|
|
|
, onSelect = SelectTab
|
2020-06-10 03:56:10 +03:00
|
|
|
, onFocus = Focus
|
2020-06-10 01:53:46 +03:00
|
|
|
, selected = model.selected
|
2020-06-10 02:23:15 +03:00
|
|
|
, tabs = allTabs
|
2020-03-31 22:43:32 +03:00
|
|
|
}
|
|
|
|
]
|
2018-11-10 01:01:11 +03:00
|
|
|
}
|
2020-06-10 01:12:30 +03:00
|
|
|
|
|
|
|
|
2020-06-10 02:23:15 +03:00
|
|
|
allTabs : List (Tab Id Msg)
|
|
|
|
allTabs =
|
|
|
|
[ { id = First
|
|
|
|
, idString = "tab-0"
|
2020-08-06 00:17:38 +03:00
|
|
|
, spaHref = Just "/#/doodad/Nri.Ui.Tabs.V6"
|
2020-06-10 03:12:03 +03:00
|
|
|
, tabView = Tabs.viewTabDefault "Link example"
|
2020-06-10 02:23:15 +03:00
|
|
|
, panelView = Html.text "First Panel"
|
|
|
|
}
|
|
|
|
, { id = Second
|
|
|
|
, idString = "tab-1"
|
2020-06-10 03:12:03 +03:00
|
|
|
, spaHref = Nothing
|
2020-06-10 02:23:15 +03:00
|
|
|
, tabView = Tabs.viewTabDefault "Second Tab"
|
|
|
|
, panelView = Html.text "Second Panel"
|
|
|
|
}
|
|
|
|
, { id = Third
|
|
|
|
, idString = "tab-2"
|
2020-06-10 03:12:03 +03:00
|
|
|
, spaHref = Nothing
|
2020-06-10 02:23:15 +03:00
|
|
|
, tabView =
|
2020-06-10 01:28:12 +03:00
|
|
|
UiIcon.bulb
|
2020-06-10 04:34:52 +03:00
|
|
|
|> Svg.withLabel "Lightbulb"
|
2020-06-10 01:28:12 +03:00
|
|
|
|> Svg.withWidth (Css.px 40)
|
|
|
|
|> Svg.withHeight (Css.px 40)
|
|
|
|
|> Svg.withCss [ Css.padding2 Css.zero (Css.px 6) ]
|
|
|
|
|> Svg.toHtml
|
2020-06-10 02:23:15 +03:00
|
|
|
, panelView = Html.text "Third Panel"
|
|
|
|
}
|
|
|
|
, { id = Fourth
|
|
|
|
, idString = "tab-3"
|
2020-06-10 03:12:03 +03:00
|
|
|
, spaHref = Nothing
|
2020-06-10 02:23:15 +03:00
|
|
|
, tabView = Tabs.viewTabDefault "Fourth Tab"
|
|
|
|
, panelView = Html.text "Fourth Panel"
|
|
|
|
}
|
|
|
|
]
|