mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-17 10:17:09 +03:00
Add support for more autocomplete values
This commit is contained in:
parent
e372bcbc13
commit
6a90173d1a
@ -9,6 +9,7 @@ module Nri.Ui.TextInput.V7 exposing
|
||||
, css, custom, nriDescription, id, testId, noMargin
|
||||
, disabled, loading, errorIf, errorMessage, guidance
|
||||
, writing
|
||||
, addressLevel2, addressLine1, familyName, givenName, organization, organizationTitle, postalCode, sex, tel
|
||||
)
|
||||
|
||||
{-|
|
||||
@ -269,6 +270,177 @@ search onInput_ =
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows given-name entry
|
||||
-}
|
||||
givenName : (String -> msg) -> Attribute String msg
|
||||
givenName onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "text"
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Just "given-name"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows family-name entry
|
||||
-}
|
||||
familyName : (String -> msg) -> Attribute String msg
|
||||
familyName onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "text"
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Just "family-name"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows organization entry
|
||||
-}
|
||||
organization : (String -> msg) -> Attribute String msg
|
||||
organization onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "text"
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Just "organization"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows organization-title entry
|
||||
-}
|
||||
organizationTitle : (String -> msg) -> Attribute String msg
|
||||
organizationTitle onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "text"
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Just "organization-title"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows address-line1 entry
|
||||
-}
|
||||
addressLine1 : (String -> msg) -> Attribute String msg
|
||||
addressLine1 onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "text"
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Just "address-line1"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows address-level2 entry
|
||||
-}
|
||||
addressLevel2 : (String -> msg) -> Attribute String msg
|
||||
addressLevel2 onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "text"
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Just "address-level2"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows postal-code entry
|
||||
-}
|
||||
postalCode : (String -> msg) -> Attribute String msg
|
||||
postalCode onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "text"
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Just "postal-code"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows tel entry
|
||||
-}
|
||||
tel : (String -> msg) -> Attribute String msg
|
||||
tel onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "tel"
|
||||
, inputMode = Just "tel"
|
||||
, autocomplete = Just "tel"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| An input that allows sex entry
|
||||
-}
|
||||
sex : (String -> msg) -> Attribute String msg
|
||||
sex onInput_ =
|
||||
Attribute
|
||||
{ emptyEventsAndValues
|
||||
| toString = Just identity
|
||||
, fromString = Just identity
|
||||
, onInput = Just (identity >> onInput_)
|
||||
}
|
||||
(\config ->
|
||||
{ config
|
||||
| fieldType = Just "text"
|
||||
, inputMode = Nothing
|
||||
, autocomplete = Just "sex"
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
{-| -}
|
||||
value : value -> Attribute value msg
|
||||
value value_ =
|
||||
|
@ -165,6 +165,78 @@ customizableExamples state =
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "givenName"
|
||||
, toString = identity
|
||||
, inputType = TextInput.givenName
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "familyName"
|
||||
, toString = identity
|
||||
, inputType = TextInput.familyName
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "organization"
|
||||
, toString = identity
|
||||
, inputType = TextInput.organization
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "organizationTitle"
|
||||
, toString = identity
|
||||
, inputType = TextInput.organizationTitle
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "addressLine1"
|
||||
, toString = identity
|
||||
, inputType = TextInput.addressLine1
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "addressLevel2"
|
||||
, toString = identity
|
||||
, inputType = TextInput.addressLevel2
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "postalCode"
|
||||
, toString = identity
|
||||
, inputType = TextInput.postalCode
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "tel"
|
||||
, toString = identity
|
||||
, inputType = TextInput.tel
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
, toExample
|
||||
{ name = "sex"
|
||||
, toString = identity
|
||||
, inputType = TextInput.sex
|
||||
, onFocus = "Focused!!!"
|
||||
, onBlur = "Blurred!!!"
|
||||
, onEnter = "Entered!!!"
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user