NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-24 08:53:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Bake onReset behavior in to the Search so that the search icon and x always appear

Browse Source
This commit is contained in:
Tessa Kelly 2021-10-28 15:25:38 -07:00
parent c64a10965d
commit c46e6fb332
2 changed files with 56 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/Nri/Ui/TextInput/V7.elm
View File

@ -2,7 +2,7 @@ module Nri.Ui.TextInput.V7 exposing
( view, generateId
, number, float, text, password, email, search
, value, map
, onInput, onBlur, onReset, onEnter
, onInput, onBlur, onEnter
, Attribute, placeholder, hiddenLabel, autofocus
, css, custom, nriDescription, id, testId, noMargin
, disabled, loading, errorIf, errorMessage
@ -33,7 +33,7 @@ module Nri.Ui.TextInput.V7 exposing
### Event handlers
@docs onInput, onBlur, onReset, onEnter
@docs onInput, onBlur, onEnter
## Attributes
@ -166,6 +166,15 @@ search =
{ emptyEventsAndValues
| toString = Just identity
, fromString = Just identity
, floatingContent =
Just
(\label stringValue onInput_ ->
if stringValue == "" then
searchIcon
else
resetButton label (onInput_ "")
)
}
(\config ->
{ config
@ -262,12 +271,6 @@ onBlur msg =
Attribute { emptyEventsAndValues | onBlur = Just msg } identity
{-| -}
onReset : msg -> Attribute value msg
onReset msg =
Attribute { emptyEventsAndValues | onReset = Just msg } identity
{-| -}
onEnter : msg -> Attribute value msg
onEnter msg =
@ -357,8 +360,8 @@ type alias EventsAndValues value msg =
, fromString : Maybe (String -> value)
, onInput : Maybe (value -> msg)
, onBlur : Maybe msg
, onReset : Maybe msg
, onEnter : Maybe msg
, floatingContent : Maybe (String -> String -> (String -> msg) -> Html msg)
}
@ -368,9 +371,9 @@ emptyEventsAndValues =
, toString = Nothing
, fromString = Nothing
, onBlur = Nothing
, onReset = Nothing
, onEnter = Nothing
, onInput = Nothing
, floatingContent = Nothing
}
@ -382,9 +385,9 @@ map f toString onInput_ (Attribute eventsAndValues configF) =
, toString = Just toString
, fromString = Maybe.map (\from -> from >> f) eventsAndValues.fromString
, onBlur = eventsAndValues.onBlur
, onReset = eventsAndValues.onReset
, onEnter = eventsAndValues.onEnter
, onInput = Just onInput_
, floatingContent = eventsAndValues.floatingContent
}
configF
@ -458,7 +461,7 @@ applyEvents =
, toString = orExisting .toString eventsAndValues existing
, fromString = orExisting .fromString eventsAndValues existing
, onBlur = orExisting .onBlur eventsAndValues existing
, onReset = orExisting .onReset eventsAndValues existing
, floatingContent = orExisting .floatingContent eventsAndValues existing
, onEnter = orExisting .onEnter eventsAndValues existing
, onInput = orExisting .onInput eventsAndValues existing
}
@ -540,6 +543,12 @@ view label attributes =
)
|> Keyboard.Event.considerKeyboardEvent
|> Events.on "keydown"
onStringInput : Maybe (String -> msg)
onStringInput =
Maybe.map2 (>>)
eventsAndValues.fromString
eventsAndValues.onInput
in
div
([ Attributes.css
@ -576,11 +585,7 @@ view label attributes =
, Attributes.placeholder placeholder_
, Attributes.value stringValue
, Attributes.disabled disabled_
, maybeAttr Events.onInput
(Maybe.map2 (>>)
eventsAndValues.fromString
eventsAndValues.onInput
)
, maybeAttr Events.onInput onStringInput
, maybeAttr Events.onBlur eventsAndValues.onBlur
, Attributes.autofocus config.autofocus
, maybeAttr type_ config.fieldType
@ -619,34 +624,10 @@ view label attributes =
++ extraStyles
)
[ Html.text label ]
, case ( eventsAndValues.onReset, stringValue, config.fieldType ) of
( Just _, "", Just "search" ) ->
UiIcon.search
|> Svg.withWidth (Css.px 20)
|> Svg.withHeight (Css.px 20)
|> Svg.withColor Colors.gray75
|> Svg.withCss
[ Css.position Css.absolute
, Css.right (Css.px 10)
, Css.top (Css.px 22)
]
|> Svg.toHtml
( Just resetAction, _, _ ) ->
ClickableSvg.button ("Reset " ++ label)
UiIcon.x
[ ClickableSvg.onClick resetAction
, ClickableSvg.exactWidth 14
, ClickableSvg.exactHeight 14
, ClickableSvg.css
[ Css.position Css.absolute
, Css.right (Css.px 10)
, Css.top (Css.px 25)
]
]
( Nothing, _, _ ) ->
Html.text ""
, Maybe.map2 (\view_ -> view_ label stringValue)
eventsAndValues.floatingContent
onStringInput
|> Maybe.withDefault (Html.text "")
, case errorMessage_ of
Just m ->
Message.view
@ -667,3 +648,32 @@ This is for use when you need the DOM element id for use in javascript (such as
generateId : String -> String
generateId labelText =
"Nri-Ui-TextInput-" ++ dashify labelText
searchIcon : Html msg
searchIcon =
UiIcon.search
|> Svg.withWidth (Css.px 20)
|> Svg.withHeight (Css.px 20)
|> Svg.withColor Colors.gray75
|> Svg.withCss
[ Css.position Css.absolute
, Css.right (Css.px 10)
, Css.top (Css.px 22)
]
|> Svg.toHtml
resetButton : String -> msg -> Html msg
resetButton label resetAction =
ClickableSvg.button ("Reset " ++ label)
UiIcon.x
[ ClickableSvg.onClick resetAction
, ClickableSvg.exactWidth 14
, ClickableSvg.exactHeight 14
, ClickableSvg.css
[ Css.position Css.absolute
, Css.right (Css.px 10)
, Css.top (Css.px 25)
]
]

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

@ -38,7 +38,7 @@ example =
exampleConfig =
Control.currentValue state.control
toExample { name, toString, inputType, onBlur, onReset, onEnter } index =
toExample { name, toString, inputType, onBlur, onEnter } index =
( name
, TextInput.view exampleConfig.label
(exampleConfig.attributes
@ -51,11 +51,6 @@ example =
[ if exampleConfig.onBlur then
Just (TextInput.onBlur (SetInput index onBlur))
else
Nothing
, if exampleConfig.onReset then
Just (TextInput.onReset (SetInput index onReset))
else
Nothing
, if exampleConfig.onEnter then
@ -75,7 +70,6 @@ example =
, toString = identity
, inputType = TextInput.text
, onBlur = "Blurred!!!"
, onReset = ""
, onEnter = "Entered!!!"
}
, toExample
@ -83,7 +77,6 @@ example =
, toString = Maybe.map String.fromInt >> Maybe.withDefault ""
, inputType = TextInput.number
, onBlur = "10000000"
, onReset = ""
, onEnter = "20000000"
}
, toExample
@ -91,7 +84,6 @@ example =
, toString = Maybe.map String.fromFloat >> Maybe.withDefault ""
, inputType = TextInput.float
, onBlur = "1.00000001"
, onReset = ""
, onEnter = "100000001.1"
}
, toExample
@ -99,7 +91,6 @@ example =
, toString = identity
, inputType = TextInput.password
, onBlur = "Blurred!!!"
, onReset = ""
, onEnter = "Entered!!!"
}
, toExample
@ -107,7 +98,6 @@ example =
, toString = identity
, inputType = TextInput.email
, onBlur = "Blurred!!!"
, onReset = ""
, onEnter = "Entered!!!"
}
, toExample
@ -115,7 +105,6 @@ example =
, toString = identity
, inputType = TextInput.search
, onBlur = "Blurred!!!"
, onReset = ""
, onEnter = "Entered!!!"
}
]
@ -142,7 +131,6 @@ type alias ExampleConfig =
{ label : String
, attributes : List (TextInput.Attribute String Msg)
, onBlur : Bool
, onReset : Bool
, onEnter : Bool
}
@ -153,7 +141,6 @@ initControl =
|> Control.field "label" (Control.string "Assignment name")
|> Control.field "attributes" controlAttributes
|> Control.field "onBlur" (Control.bool False)
|> Control.field "onReset" (Control.bool False)
|> Control.field "onEnter" (Control.bool False)