mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-19 03:31:32 +03:00
119 lines
3.0 KiB
Elm
119 lines
3.0 KiB
Elm
module Examples.Select exposing (Msg, State, example)
|
|
|
|
{-|
|
|
|
|
@docs Msg, State, example
|
|
|
|
-}
|
|
|
|
import Category exposing (Category(..))
|
|
import Css
|
|
import Debug.Control as Control exposing (Control)
|
|
import Debug.Control.Extra as ControlExtra
|
|
import Example exposing (Example)
|
|
import Html.Styled
|
|
import Html.Styled.Attributes
|
|
import KeyboardSupport exposing (Direction(..), Key(..))
|
|
import Nri.Ui.Heading.V2 as Heading
|
|
import Nri.Ui.Select.V8 as Select exposing (Choice)
|
|
|
|
|
|
{-| -}
|
|
example : Example State Msg
|
|
example =
|
|
{ name = "Select"
|
|
, version = 8
|
|
, state = init
|
|
, update = update
|
|
, subscriptions = \_ -> Sub.none
|
|
, categories = [ Inputs ]
|
|
, keyboardSupport = []
|
|
, view =
|
|
\state ->
|
|
let
|
|
attributes : Settings
|
|
attributes =
|
|
Control.currentValue state.attributes
|
|
in
|
|
[ Control.view UpdateAttributes state.attributes
|
|
|> Html.Styled.fromUnstyled
|
|
, Select.view "Tortilla Selector" attributes
|
|
|> Html.Styled.map ConsoleLog
|
|
]
|
|
}
|
|
|
|
|
|
{-| -}
|
|
type alias State =
|
|
{ attributes : Control Settings
|
|
}
|
|
|
|
|
|
{-| -}
|
|
init : State
|
|
init =
|
|
{ attributes = initControls
|
|
}
|
|
|
|
|
|
type alias Settings =
|
|
List (Select.Attribute String)
|
|
|
|
|
|
initControls : Control Settings
|
|
initControls =
|
|
ControlExtra.list
|
|
|> ControlExtra.listItem "choices"
|
|
(Control.map (Select.choices identity) initChoices)
|
|
|> ControlExtra.optionalListItem "defaultDisplayText"
|
|
(Control.map Select.defaultDisplayText <|
|
|
Control.string "Select a tasty tortilla based treat!"
|
|
)
|
|
|> ControlExtra.optionalListItem "errorIf"
|
|
(Control.map Select.errorIf <| Control.bool True)
|
|
|> ControlExtra.optionalListItem "errorMessage"
|
|
(Control.map (Just >> Select.errorMessage) <|
|
|
Control.string "The right item must be selected."
|
|
)
|
|
|
|
|
|
initChoices : Control (List (Choice String))
|
|
initChoices =
|
|
Control.choice
|
|
[ ( "Short choices"
|
|
, [ { label = "Tacos", value = "tacos" }
|
|
, { label = "Burritos", value = "burritos" }
|
|
, { label = "Enchiladas", value = "enchiladas" }
|
|
]
|
|
|> Control.value
|
|
)
|
|
, ( "Overflowing text choices"
|
|
, [ { label = "Look at me, I design coastlines, I got an award for Norway. Where's the sense in that? My mistress' eyes are nothing like the sun. Coral be far more red than her lips red.", value = "design-coastlines" }
|
|
]
|
|
|> Control.value
|
|
)
|
|
]
|
|
|
|
|
|
{-| -}
|
|
type Msg
|
|
= ConsoleLog String
|
|
| UpdateAttributes (Control Settings)
|
|
|
|
|
|
{-| -}
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
update msg state =
|
|
case msg of
|
|
ConsoleLog message ->
|
|
let
|
|
_ =
|
|
Debug.log "SelectExample" message
|
|
in
|
|
( state, Cmd.none )
|
|
|
|
UpdateAttributes attributes ->
|
|
( { state | attributes = attributes }
|
|
, Cmd.none
|
|
)
|