Textarea with auto resize in UI #1893
Conversation
m-masataka
force-pushed
the
textarea-with-auto-resize
branch
from
b34afc7
to
6ff77b4
Compare
|
hey, sorry for the long delay in responding! I like how the text area resizes in this PR, but the questions I'm thinking about currently:
do you have the time to implement resize-on-type? I think then we could look at the code and see if it makes sense to add this. |
m-masataka
force-pushed
the
textarea-with-auto-resize
branch
from
9280033
to
307a401
Compare
|
@stuartnelson3 Thanks for your comment. |
ui/app/src/Utils/FormValidation.elm
Outdated
| |> ceiling | ||
| |> clamp config.minRows config.maxRows | ||
| in | ||
| { field | rows = rows } |
There was a problem hiding this comment.
I see that there are two ways to update rows, the first way is using the number of lines in the value and the second way is using the scrollHeight. If the first way is working, we don't really need the second way. We don't even need to extend ValidatedField to store rows, we only need to introduce a view for the comment field that calculates the rows based on the number of lines in the value.
There was a problem hiding this comment.
Thanks for your review.
That’s true. Using scrollHeight is my old implementation of it.
revised it
There was a problem hiding this comment.
@m-masataka sorry for not making this clear. Because rows can be calculated from the value, it doesn't need to be stored in the model and can be done in the view function. The proposed change adds rows to every input, even though this is only used in the comment textarea.
What do you think of introducing a separate view function that would render the comment textarea and calculate the rows attribute?
There was a problem hiding this comment.
@w0rm Sorry, I misunderstood.
Because rows can be calculated from the value, it doesn't need to be stored in the model and can be done in the view function.
Exactly.
The proposed change adds rows to every input, even though this is only used in the comment textarea.
What do you think of introducing a separate view function that would render the comment textarea and calculate the rows attribute?
I see. I think textarea must be separated.
Do you mean that create new function similar to validatedField ?
If so, I'll revise that soon.
There was a problem hiding this comment.
@m-masataka yeah, exactly! Just a separate function similar to validatedField for the comment textarea. The rows attribute only makes sense for textarea, we don't need it for all regular input fields.
Signed-off-by: mizukoshi-m <mizukoshi@mfeed.ad.jp>
Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>
m-masataka
force-pushed
the
textarea-with-auto-resize
branch
from
307a401
to
7cdefb6
Compare
Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>
Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>
ui/app/src/Utils/Views.elm
Outdated
| let | ||
| lineCount = | ||
| lines field.value | ||
| |> length |
There was a problem hiding this comment.
List is always imported in Elm, so you can write List.length here and remove import List exposing (length)
ui/app/src/Utils/Views.elm
Outdated
| Valid -> | ||
| div [ class <| "d-flex flex-column form-group has-success " ++ classes ] | ||
| [ label [] [ strong [] [ text labelText ] ] | ||
| , htmlField |
There was a problem hiding this comment.
There is no need in htmlField argument, because it is always textarea.
ui/app/src/Utils/Views.elm
Outdated
| validatedTextareaField htmlField labelText classes inputMsg blurMsg field = | ||
| let | ||
| lineCount = | ||
| lines field.value |
There was a problem hiding this comment.
String is always imported, so you can write String.lines here and remove import String exposing (lines) from the top
There was a problem hiding this comment.
Sorry, lack of elm knowledge.
Thank's for Review.
There was a problem hiding this comment.
No worries, thanks for working on this!
Signed-off-by: m-masataka <m.mizukoshi.wakuwaku@gmail.com>
* 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>
I often use comment field in Silence Form Page with multiple lines of text.
I believe auto expand field is convenient for us.