mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-28 01:45:20 +03:00
Merge pull request #755 from NoRedInk/kraken/add-naive-onEnter-handler-TextInput
add an attr for Enter keydown events
This commit is contained in:
Alex Perkins
GitHub
commit
a330d7f519
1
elm.json
1
elm.json
@ -71,6 +71,7 @@
|
||||
"elm-version": "0.19.0 <= v < 0.20.0",
|
||||
"dependencies": {
|
||||
"BrianHicks/elm-particle": "1.5.0 <= v < 2.0.0",
|
||||
"Gizra/elm-keyboard-event": "1.0.1 <= v < 2.0.0",
|
||||
"elm/browser": "1.0.2 <= v < 2.0.0",
|
||||
"elm/core": "1.0.1 <= v < 2.0.0",
|
||||
"elm/html": "1.0.0 <= v < 2.0.0",
|
||||
|
||||
@ -2,7 +2,7 @@ module Nri.Ui.TextInput.V6 exposing
|
||||
( view, generateId
|
||||
, InputType, number, float, text, password, email, search
|
||||
, Attribute, placeholder, hiddenLabel, autofocus
|
||||
, onBlur, onReset
|
||||
, onBlur, onReset, onEnter
|
||||
, css, custom, nriDescription, id, testId, noMargin
|
||||
, disabled, loading, errorIf, errorMessage
|
||||
, writing
|
||||
@ -31,7 +31,7 @@ module Nri.Ui.TextInput.V6 exposing
|
||||
## Attributes
|
||||
|
||||
@docs Attribute, placeholder, hiddenLabel, autofocus
|
||||
@docs onBlur, onReset
|
||||
@docs onBlur, onReset, onEnter
|
||||
@docs css, custom, nriDescription, id, testId, noMargin
|
||||
@docs disabled, loading, errorIf, errorMessage
|
||||
@docs writing
|
||||
@ -44,6 +44,7 @@ import Css.Global
|
||||
import Html.Styled as Html exposing (..)
|
||||
import Html.Styled.Attributes as Attributes exposing (..)
|
||||
import Html.Styled.Events as Events exposing (onInput)
|
||||
import Keyboard.Event exposing (KeyboardEvent)
|
||||
import Nri.Ui.ClickableSvg.V2 as ClickableSvg
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Html.Attributes.V2 as Extra
|
||||
@ -237,6 +238,13 @@ onReset msg =
|
||||
\config -> { config | onReset = Just msg }
|
||||
|
||||
|
||||
{-| -}
|
||||
onEnter : msg -> Attribute msg
|
||||
onEnter msg =
|
||||
Attribute <|
|
||||
\config -> { config | onEnter = Just msg }
|
||||
|
||||
|
||||
{-| Sets the `autofocus` attribute of the resulting HTML input.
|
||||
-}
|
||||
autofocus : Attribute msg
|
||||
@ -313,6 +321,7 @@ type alias Config msg =
|
||||
, placeholder : Maybe String
|
||||
, onBlur : Maybe msg
|
||||
, onReset : Maybe msg
|
||||
, onEnter : Maybe msg
|
||||
, autofocus : Bool
|
||||
, noMarginTop : Bool
|
||||
, css : List (List Css.Style)
|
||||
@ -336,6 +345,7 @@ emptyConfig =
|
||||
, placeholder = Nothing
|
||||
, onBlur = Nothing
|
||||
, onReset = Nothing
|
||||
, onEnter = Nothing
|
||||
, autofocus = False
|
||||
, id = Nothing
|
||||
, noMarginTop = False
|
||||
@ -412,6 +422,19 @@ view_ label (InputType inputType) config currentValue =
|
||||
|
||||
stringValue =
|
||||
inputType.toString currentValue
|
||||
|
||||
onEnter_ : msg -> Html.Attribute msg
|
||||
onEnter_ msg =
|
||||
(\event ->
|
||||
case event.key of
|
||||
Just "Enter" ->
|
||||
Just msg
|
||||
|
||||
_ ->
|
||||
Nothing
|
||||
)
|
||||
|> Keyboard.Event.considerKeyboardEvent
|
||||
|> Events.on "keydown"
|
||||
in
|
||||
div
|
||||
([ Attributes.css
|
||||
@ -454,6 +477,7 @@ view_ label (InputType inputType) config currentValue =
|
||||
, type_ inputType.fieldType
|
||||
, maybeAttr (attribute "inputmode") inputType.inputMode
|
||||
, maybeAttr (attribute "autocomplete") inputType.autocomplete
|
||||
, maybeAttr onEnter_ config.onEnter
|
||||
, class "override-sass-styles"
|
||||
, Attributes.attribute "aria-invalid" <|
|
||||
if isInError then
|
||||
|
||||
@ -16,6 +16,7 @@ import Html.Styled.Attributes exposing (css)
|
||||
import KeyboardSupport exposing (Direction(..), Key(..))
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Heading.V2 as Heading
|
||||
import Nri.Ui.Message.V3 as Message
|
||||
import Nri.Ui.TextInput.V6 as TextInput
|
||||
|
||||
|
||||
@ -27,6 +28,7 @@ type Msg
|
||||
| SetPassword String
|
||||
| SetSearchTerm String
|
||||
| UpdateControl (Control ExampleConfig)
|
||||
| HitEnter
|
||||
|
||||
|
||||
{-| -}
|
||||
@ -37,6 +39,7 @@ type alias State =
|
||||
, passwordInputValue : String
|
||||
, searchInputValue : String
|
||||
, control : Control ExampleConfig
|
||||
, enterCount : Int
|
||||
}
|
||||
|
||||
|
||||
@ -70,7 +73,7 @@ example =
|
||||
exampleConfig =
|
||||
Control.currentValue state.control
|
||||
|
||||
attributes { setField, onBlur, onReset } =
|
||||
attributes { setField, onBlur, onReset, onEnter } =
|
||||
List.filterMap identity
|
||||
[ exampleConfig.maybeErrorAttribute1
|
||||
, exampleConfig.maybeErrorAttribute2
|
||||
@ -89,6 +92,7 @@ example =
|
||||
|
||||
else
|
||||
Nothing
|
||||
, Just <| TextInput.onEnter onEnter
|
||||
]
|
||||
in
|
||||
[ Control.view UpdateControl state.control
|
||||
@ -107,6 +111,7 @@ example =
|
||||
{ setField = SetTextInput 1
|
||||
, onBlur = "Blurred!!!"
|
||||
, onReset = ""
|
||||
, onEnter = HitEnter
|
||||
}
|
||||
)
|
||||
(Maybe.withDefault "" <| Dict.get 1 state.stringInputValues)
|
||||
@ -118,6 +123,7 @@ example =
|
||||
{ setField = SetNumberInput
|
||||
, onBlur = Just 10000000
|
||||
, onReset = Nothing
|
||||
, onEnter = HitEnter
|
||||
}
|
||||
)
|
||||
state.numberInputValue
|
||||
@ -128,6 +134,7 @@ example =
|
||||
{ setField = SetFloatInput
|
||||
, onBlur = Just 1.00000001
|
||||
, onReset = Nothing
|
||||
, onEnter = HitEnter
|
||||
}
|
||||
)
|
||||
state.floatInputValue
|
||||
@ -138,6 +145,7 @@ example =
|
||||
{ setField = SetPassword
|
||||
, onBlur = "Blurred!!!"
|
||||
, onReset = ""
|
||||
, onEnter = HitEnter
|
||||
}
|
||||
)
|
||||
state.passwordInputValue
|
||||
@ -148,6 +156,7 @@ example =
|
||||
{ setField = SetTextInput 2
|
||||
, onBlur = "Blurred!!!"
|
||||
, onReset = ""
|
||||
, onEnter = HitEnter
|
||||
}
|
||||
)
|
||||
(Maybe.withDefault "" <| Dict.get 2 state.stringInputValues)
|
||||
@ -159,6 +168,7 @@ example =
|
||||
{ setField = SetTextInput 4
|
||||
, onBlur = "Blurred!!!"
|
||||
, onReset = ""
|
||||
, onEnter = HitEnter
|
||||
}
|
||||
)
|
||||
(Maybe.withDefault "" <| Dict.get 4 state.stringInputValues)
|
||||
@ -169,6 +179,7 @@ example =
|
||||
{ setField = SetSearchTerm
|
||||
, onBlur = "Blurred!!!"
|
||||
, onReset = ""
|
||||
, onEnter = HitEnter
|
||||
}
|
||||
)
|
||||
state.searchInputValue
|
||||
@ -180,9 +191,15 @@ example =
|
||||
{ setField = SetTextInput 8
|
||||
, onBlur = "Blurred!!!"
|
||||
, onReset = ""
|
||||
, onEnter = HitEnter
|
||||
}
|
||||
)
|
||||
(Maybe.withDefault "" <| Dict.get 8 state.stringInputValues)
|
||||
, Message.view
|
||||
[ Message.tiny
|
||||
, Message.tip
|
||||
, Message.plaintext <| "Hit enter " ++ String.fromInt state.enterCount ++ " times"
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -220,6 +237,7 @@ init =
|
||||
(Control.bool False)
|
||||
|> Control.field "TextInput.onReset"
|
||||
(Control.bool False)
|
||||
, enterCount = 0
|
||||
}
|
||||
|
||||
|
||||
@ -245,6 +263,9 @@ update msg state =
|
||||
UpdateControl newControl ->
|
||||
( { state | control = newControl }, Cmd.none )
|
||||
|
||||
HitEnter ->
|
||||
( { state | enterCount = state.enterCount + 1 }, Cmd.none )
|
||||
|
||||
|
||||
|
||||
-- INTERNAL
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
"dependencies": {
|
||||
"direct": {
|
||||
"BrianHicks/elm-particle": "1.5.0",
|
||||
"Gizra/elm-keyboard-event": "1.0.1",
|
||||
"avh4/elm-debug-controls": "2.2.1",
|
||||
"elm/browser": "1.0.2",
|
||||
"elm/core": "1.0.5",
|
||||
@ -30,6 +31,7 @@
|
||||
},
|
||||
"indirect": {
|
||||
"NoRedInk/datetimepicker-legacy": "1.0.4",
|
||||
"SwiftsNamesake/proper-keyboard": "4.0.0",
|
||||
"elm/bytes": "1.0.8",
|
||||
"elm/file": "1.0.5",
|
||||
"elm/time": "1.0.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user