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:
parent
c16e90ef6f
commit
b33a9366dd
File diff suppressed because one or more lines are too long
|
@ -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 ]
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue