NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-01 00:34:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #204 from NoRedInk/ink/on-blur-text-input

Browse Source 
Add onBlur to TextInput V4
This commit is contained in:
Ally McKnight 2019-01-07 12:40:48 -08:00 committed by GitHub
commit ed7c04264d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 183 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
elm.json
View File

@ -45,6 +45,7 @@
"Nri.Ui.TextArea.V3",
"Nri.Ui.TextArea.V4",
"Nri.Ui.TextInput.V3",
"Nri.Ui.TextInput.V4",
"Nri.Ui"
],
"elm-version": "0.19.0 <= v < 0.20.0",

28
package-lock.json generated
View File

@ -568,7 +568,7 @@
},
"browserify-aes": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
"dev": true,
"requires": {
@ -605,7 +605,7 @@
},
"browserify-rsa": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
"dev": true,
"requires": {
@ -882,7 +882,7 @@
},
"convert-source-map": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/convert-source-map/-/convert-source-map-1.1.3.tgz",
"integrity": "sha1-SCnId+n+SbMWHzvzZziI4gRpmGA=",
"dev": true
},
@ -910,7 +910,7 @@
},
"create-hash": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
"dev": true,
"requires": {
@ -923,7 +923,7 @@
},
"create-hmac": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
"dev": true,
"requires": {
@ -1108,7 +1108,7 @@
},
"diffie-hellman": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
"dev": true,
"requires": {
@ -2451,7 +2451,7 @@
},
"jsonfile": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
"resolved": "http://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
"integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
"dev": true,
"requires": {
@ -2712,7 +2712,7 @@
},
"mkdirp": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
@ -2959,7 +2959,7 @@
},
"parse-asn1": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
"resolved": "http://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.1.tgz",
"integrity": "sha512-KPx7flKXg775zZpnp9SxJlz00gTd4BmJ2yJufSc44gMCRrRQ7NSzAcSJQfifuOLgW6bEi+ftrALtsgALeB2Adw==",
"dev": true,
"requires": {
@ -3069,7 +3069,7 @@
},
"public-encrypt": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
"resolved": "http://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
"integrity": "sha512-4kJ5Esocg8X3h8YgJsKAuoesBgB7mqH3eowiDzMUPKiRDDE7E/BqqZD1hnTByIaAFiwAw246YEltSq7tdrOH0Q==",
"dev": true,
"requires": {
@ -3771,7 +3771,7 @@
},
"sha.js": {
"version": "2.4.11",
"resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
"dev": true,
"requires": {
@ -3781,7 +3781,7 @@
},
"shasum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/shasum/-/shasum-1.0.2.tgz",
"resolved": "http://registry.npmjs.org/shasum/-/shasum-1.0.2.tgz",
"integrity": "sha1-5wEjENj0F/TetXEhUOVni4euVl8=",
"dev": true,
"requires": {
@ -4147,7 +4147,7 @@
"dependencies": {
"rimraf": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
"resolved": "http://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
"integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
"dev": true
}
@ -4155,7 +4155,7 @@
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
"resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},

146
src/Nri/Ui/TextInput/V4.elm Normal file
View File

@ -0,0 +1,146 @@
module Nri.Ui.TextInput.V4 exposing
( Model
, view, writing
, number
, text
)
{-|
@docs Model
@docs view, writing
## Input types
@docs number
@docs text
-}
import Accessibility.Styled.Style as Accessibility
import Css exposing (batch, center, position, px, relative, textAlign)
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 Nri.Ui.Html.Attributes.V2 as Extra
import Nri.Ui.InputStyles.V2 as InputStyles exposing (Theme)
import Nri.Ui.Util exposing (dashify)
{-| -}
type alias Model value msg =
{ label : String
, isInError : Bool
, onInput : value -> msg
, onBlur : Maybe msg
, placeholder : String
, value : value
, autofocus : Bool
, showLabel : Bool
, type_ : InputType value
}
{-| -}
type InputType value
= InputType
{ toString : value -> String
, fromString : String -> value
, fieldType : String
}
{-| An input that allows text entry
-}
text : InputType String
text =
InputType
{ toString = identity
, fromString = identity
, fieldType = "text"
}
{-| An input that allows number entry
-}
number : InputType (Maybe Int)
number =
InputType
{ toString = Maybe.map String.fromInt >> Maybe.withDefault ""
, fromString = String.toInt
, fieldType = "number"
}
{-| -}
view : Model value msg -> Html msg
view model =
view_ InputStyles.Standard model
{-| -}
writing : Model value msg -> Html msg
writing model =
view_ InputStyles.Writing model
view_ : Theme -> Model value msg -> Html msg
view_ theme model =
let
idValue =
"Nri-Ui-TextInput-" ++ dashify model.label
(InputType inputType) =
model.type_
in
div
[ Attributes.css [ position relative ]
]
[ input
[ Attributes.id idValue
, css
[ InputStyles.input theme model.isInError
, if theme == InputStyles.Writing then
Css.Global.withClass "override-sass-styles"
[ textAlign center
, Css.height Css.auto
]
else
Css.Global.withClass "override-sass-styles"
[ Css.height (px 45)
]
]
, placeholder model.placeholder
, value (inputType.toString model.value)
, onInput (inputType.fromString >> model.onInput)
, Maybe.withDefault Extra.none (Maybe.map Events.onBlur model.onBlur)
, autofocus model.autofocus
, type_ inputType.fieldType
, class "override-sass-styles"
, Attributes.attribute "aria-invalid" <|
if model.isInError then
"true"
else
"false"
]
[]
, if model.showLabel then
Html.label
[ for idValue
, css [ InputStyles.label theme model.isInError ]
]
[ Html.text model.label ]
else
Html.label
([ for idValue
, css [ InputStyles.label theme model.isInError ]
]
++ Accessibility.invisible
)
[ Html.text model.label ]
]

24
styleguide-app/Examples/TextInput.elm
View File

@ -8,7 +8,7 @@ import Dict exposing (Dict)
import Headings
import Html.Styled as Html
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.TextInput.V3 as TextInput
import Nri.Ui.TextInput.V4 as TextInput
{-| -}
@ -27,7 +27,7 @@ type alias State =
{-| -}
example : (Msg -> msg) -> State -> ModuleExample msg
example parentMessage state =
{ filename = "Nri.Ui.TextInput.V3"
{ filename = "Nri.Ui.TextInput.V4"
, category = Inputs
, content =
[ Html.map parentMessage <|
@ -38,6 +38,7 @@ example parentMessage state =
, placeholder = "For example, \"Something!!\""
, value = Maybe.withDefault "" <| Dict.get 1 state.textInputValues
, onInput = SetTextInput 1
, onBlur = Nothing
, autofocus = False
, type_ = TextInput.text
, showLabel = True
@ -49,6 +50,7 @@ example parentMessage state =
, placeholder = "enter a number"
, value = state.numberInputValue
, onInput = SetNumberInput
, onBlur = Nothing
, autofocus = False
, type_ = TextInput.number
, showLabel = True
@ -60,6 +62,7 @@ example parentMessage state =
, placeholder = "Wrong!"
, value = state.numberInputValue
, onInput = SetNumberInput
, onBlur = Nothing
, autofocus = False
, type_ = TextInput.number
, showLabel = True
@ -71,6 +74,7 @@ example parentMessage state =
, placeholder = "For example, \"Something!!\""
, value = Maybe.withDefault "" <| Dict.get 2 state.textInputValues
, onInput = SetTextInput 2
, onBlur = Nothing
, autofocus = False
, type_ = TextInput.text
, showLabel = False
@ -81,6 +85,7 @@ example parentMessage state =
, placeholder = "Everything you type is wrong!"
, value = Maybe.withDefault "" <| Dict.get 3 state.textInputValues
, onInput = SetTextInput 3
, onBlur = Nothing
, isInError = True
, autofocus = False
, type_ = TextInput.text
@ -93,6 +98,7 @@ example parentMessage state =
, placeholder = "Writing is good for me and my family"
, value = Maybe.withDefault "" <| Dict.get 4 state.textInputValues
, onInput = SetTextInput 4
, onBlur = Nothing
, autofocus = False
, type_ = TextInput.text
, showLabel = True
@ -104,6 +110,7 @@ example parentMessage state =
, placeholder = "Oopsie!"
, value = Maybe.withDefault "" <| Dict.get 5 state.textInputValues
, onInput = SetTextInput 5
, onBlur = Nothing
, autofocus = False
, type_ = TextInput.text
, showLabel = True
@ -115,10 +122,23 @@ example parentMessage state =
, placeholder = "No label on this writing input!"
, value = Maybe.withDefault "" <| Dict.get 6 state.textInputValues
, onInput = SetTextInput 6
, onBlur = Nothing
, autofocus = False
, type_ = TextInput.text
, showLabel = False
}
, Html.br [] []
, TextInput.writing
{ label = "Writing onBlur demonstration!"
, isInError = False
, placeholder = "Click away to blur!"
, value = Maybe.withDefault "" <| Dict.get 7 state.textInputValues
, onInput = SetTextInput 7
, onBlur = Just (SetTextInput 7 "Blurred!")
, autofocus = False
, type_ = TextInput.text
, showLabel = True
}
]
]
}