Add support for more autocomplete values

This commit is contained in:
charbelrami 2022-07-22 15:06:06 -03:00
parent e372bcbc13
commit 6a90173d1a
2 changed files with 244 additions and 0 deletions

View File

@ -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_ =

View File

@ -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!!!"
}
]