diff --git a/src/Nri/Ui/TextInput/V7.elm b/src/Nri/Ui/TextInput/V7.elm index 5912f51b..db836e5c 100644 --- a/src/Nri/Ui/TextInput/V7.elm +++ b/src/Nri/Ui/TextInput/V7.elm @@ -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) + ] + ] diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm index 3cee6727..d9e5bca0 100644 --- a/styleguide-app/Examples/TextInput.elm +++ b/styleguide-app/Examples/TextInput.elm @@ -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)