Textarea with auto resize in UI (#1893)

* textarea with auto resize

Signed-off-by: mizukoshi-m <mizukoshi@mfeed.ad.jp>

* implement resize textarea on type

Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>

* remove scrollHeight

Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>

* Add new function for textarea field

Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>

* remove unnecessary code

Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>
This commit is contained in:
masataka 2019-06-12 15:54:16 +09:00 committed by Andrey Kuzmin
parent c16e90ef6f
commit b33a9366dd
3 changed files with 55 additions and 4 deletions

File diff suppressed because one or more lines are too long

View File

@ -12,6 +12,7 @@ module Utils.Views exposing
, tab
, textField
, validatedField
, validatedTextareaField
)
import Html exposing (..)
@ -131,6 +132,56 @@ validatedField htmlField labelText classes inputMsg blurMsg field =
]
validatedTextareaField : String -> String -> (String -> msg) -> msg -> ValidatedField -> Html msg
validatedTextareaField labelText classes inputMsg blurMsg field =
let
lineCount =
String.lines field.value
|> List.length
|> clamp 3 15
in
case field.validationState of
Valid ->
div [ class <| "d-flex flex-column form-group has-success " ++ classes ]
[ label [] [ strong [] [ text labelText ] ]
, textarea
[ value field.value
, onInput inputMsg
, onBlur blurMsg
, class "form-control form-control-success"
, rows lineCount
]
[]
]
Initial ->
div [ class <| "d-flex flex-column form-group " ++ classes ]
[ label [] [ strong [] [ text labelText ] ]
, textarea
[ value field.value
, onInput inputMsg
, onBlur blurMsg
, class "form-control"
, rows lineCount
]
[]
]
Invalid error_ ->
div [ class <| "d-flex flex-column form-group has-danger " ++ classes ]
[ label [] [ strong [] [ text labelText ] ]
, textarea
[ value field.value
, onInput inputMsg
, onBlur blurMsg
, class "form-control form-control-danger"
, rows lineCount
]
[]
, div [ class "form-control-feedback" ] [ text error_ ]
]
formField : String -> String -> String -> (String -> msg) -> Html msg
formField labelText content classes msg =
div [ class <| "d-flex flex-column " ++ classes ]

View File

@ -7,7 +7,7 @@ import Html.Events exposing (onClick)
import Utils.Filter
import Utils.FormValidation exposing (ValidatedField, ValidationState(..))
import Utils.Types exposing (ApiData)
import Utils.Views exposing (checkbox, iconButtonMsg, loading, validatedField)
import Utils.Views exposing (checkbox, iconButtonMsg, loading, validatedField, validatedTextareaField)
import Views.Shared.SilencePreview
import Views.Shared.Types exposing (Msg)
import Views.SilenceForm.Types exposing (MatcherForm, Model, SilenceForm, SilenceFormFieldMsg(..), SilenceFormMsg(..))
@ -34,7 +34,7 @@ view maybeId matchers defaultCreator { form, silenceId, alerts, activeAlertId }
(UpdateCreatedBy >> UpdateField)
(ValidateCreatedBy |> UpdateField)
form.createdBy
, validatedField textarea
, validatedTextareaField
"Comment"
inputSectionPadding
(UpdateComment >> UpdateField)