mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 03:01:41 +03:00
Adds onFocus helper
This commit is contained in:
Tessa Kelly
parent
5557a43013
commit
79468439ba
@ -2,7 +2,7 @@ module Nri.Ui.TextInput.V7 exposing
|
||||
( view, generateId
|
||||
, number, float, text, newPassword, currentPassword, email, search
|
||||
, value, map
|
||||
, onBlur, onEnter
|
||||
, onFocus, onBlur, onEnter
|
||||
, Attribute, placeholder, hiddenLabel, autofocus
|
||||
, css, custom, nriDescription, id, testId, noMargin
|
||||
, disabled, loading, errorIf, errorMessage, guidance
|
||||
@ -35,7 +35,7 @@ module Nri.Ui.TextInput.V7 exposing
|
||||
|
||||
### Event handlers
|
||||
|
||||
@docs onBlur, onEnter
|
||||
@docs onFocus, onBlur, onEnter
|
||||
|
||||
|
||||
## Attributes
|
||||
@ -328,6 +328,13 @@ hiddenLabel =
|
||||
\config -> { config | hideLabel = True }
|
||||
|
||||
|
||||
{-| Causes the TextInput to produce the given `msg` when the field is focused.
|
||||
-}
|
||||
onFocus : msg -> Attribute value msg
|
||||
onFocus msg =
|
||||
Attribute { emptyEventsAndValues | onFocus = Just msg } identity
|
||||
|
||||
|
||||
{-| Causes the TextInput to produce the given `msg` when the field is blurred.
|
||||
-}
|
||||
onBlur : msg -> Attribute value msg
|
||||
@ -423,6 +430,7 @@ type alias EventsAndValues value msg =
|
||||
, toString : Maybe (value -> String)
|
||||
, fromString : Maybe (String -> value)
|
||||
, onInput : Maybe (String -> msg)
|
||||
, onFocus : Maybe msg
|
||||
, onBlur : Maybe msg
|
||||
, onEnter : Maybe msg
|
||||
, floatingContent : Maybe (FloatingContentConfig msg -> Html msg)
|
||||
@ -434,6 +442,7 @@ emptyEventsAndValues =
|
||||
{ currentValue = Nothing
|
||||
, toString = Nothing
|
||||
, fromString = Nothing
|
||||
, onFocus = Nothing
|
||||
, onBlur = Nothing
|
||||
, onEnter = Nothing
|
||||
, onInput = Nothing
|
||||
@ -448,6 +457,7 @@ map f toString (Attribute eventsAndValues configF) =
|
||||
{ currentValue = Maybe.map f eventsAndValues.currentValue
|
||||
, toString = Just toString
|
||||
, fromString = Maybe.map (\from -> from >> f) eventsAndValues.fromString
|
||||
, onFocus = eventsAndValues.onFocus
|
||||
, onBlur = eventsAndValues.onBlur
|
||||
, onEnter = eventsAndValues.onEnter
|
||||
, onInput = eventsAndValues.onInput
|
||||
@ -528,6 +538,7 @@ applyEvents =
|
||||
{ currentValue = orExisting .currentValue eventsAndValues existing
|
||||
, toString = orExisting .toString eventsAndValues existing
|
||||
, fromString = orExisting .fromString eventsAndValues existing
|
||||
, onFocus = orExisting .onFocus eventsAndValues existing
|
||||
, onBlur = orExisting .onBlur eventsAndValues existing
|
||||
, floatingContent = orExisting .floatingContent eventsAndValues existing
|
||||
, onEnter = orExisting .onEnter eventsAndValues existing
|
||||
@ -654,6 +665,7 @@ view label attributes =
|
||||
, Attributes.value stringValue
|
||||
, Attributes.disabled disabled_
|
||||
, maybeAttr Events.onInput eventsAndValues.onInput
|
||||
, maybeAttr Events.onFocus eventsAndValues.onFocus
|
||||
, maybeAttr Events.onBlur eventsAndValues.onBlur
|
||||
, Attributes.autofocus config.autofocus
|
||||
, maybeAttr type_ config.fieldType
|
||||
|
||||
@ -38,7 +38,7 @@ example =
|
||||
exampleConfig =
|
||||
Control.currentValue state.control
|
||||
|
||||
toExample { name, toString, inputType, onBlur, onEnter } index =
|
||||
toExample { name, toString, inputType, onFocus, onBlur, onEnter } index =
|
||||
( name
|
||||
, TextInput.view exampleConfig.label
|
||||
(exampleConfig.attributes
|
||||
@ -48,7 +48,12 @@ example =
|
||||
, TextInput.value (Maybe.withDefault "" (Dict.get index state.inputValues))
|
||||
]
|
||||
++ List.filterMap identity
|
||||
[ if exampleConfig.onBlur then
|
||||
[ if exampleConfig.onFocus then
|
||||
Just (TextInput.onFocus (SetInput index onFocus))
|
||||
|
||||
else
|
||||
Nothing
|
||||
, if exampleConfig.onBlur then
|
||||
Just (TextInput.onBlur (SetInput index onBlur))
|
||||
|
||||
else
|
||||
@ -69,6 +74,7 @@ example =
|
||||
{ name = "text"
|
||||
, toString = identity
|
||||
, inputType = TextInput.text
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
@ -76,6 +82,7 @@ example =
|
||||
{ name = "number"
|
||||
, toString = Maybe.map String.fromInt >> Maybe.withDefault ""
|
||||
, inputType = TextInput.number
|
||||
, onFocus = "1234"
|
||||
, onBlur = "10000000"
|
||||
, onEnter = "20000000"
|
||||
}
|
||||
@ -83,6 +90,7 @@ example =
|
||||
{ name = "float"
|
||||
, toString = Maybe.map String.fromFloat >> Maybe.withDefault ""
|
||||
, inputType = TextInput.float
|
||||
, onFocus = "123"
|
||||
, onBlur = "1.00000001"
|
||||
, onEnter = "100000001.1"
|
||||
}
|
||||
@ -96,6 +104,7 @@ example =
|
||||
, showPassword = state.showPassword
|
||||
, setShowPassword = SetShowPassword
|
||||
}
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
@ -103,6 +112,7 @@ example =
|
||||
{ name = "email"
|
||||
, toString = identity
|
||||
, inputType = TextInput.email
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
@ -110,6 +120,7 @@ example =
|
||||
{ name = "search"
|
||||
, toString = identity
|
||||
, inputType = TextInput.search
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
@ -138,6 +149,7 @@ init =
|
||||
type alias ExampleConfig =
|
||||
{ label : String
|
||||
, attributes : List (TextInput.Attribute String Msg)
|
||||
, onFocus : Bool
|
||||
, onBlur : Bool
|
||||
, onEnter : Bool
|
||||
}
|
||||
@ -148,6 +160,7 @@ initControl =
|
||||
Control.record ExampleConfig
|
||||
|> Control.field "label" (Control.string "Assignment name")
|
||||
|> Control.field "attributes" controlAttributes
|
||||
|> Control.field "onFocus" (Control.bool False)
|
||||
|> Control.field "onBlur" (Control.bool False)
|
||||
|> Control.field "onEnter" (Control.bool False)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user