From 31a3ba8946ee84c6ace5e3f3219945f62a430003 Mon Sep 17 00:00:00 2001
From: Simon Bihel <sbihel@users.noreply.github.com>
Date: Mon, 24 Apr 2023 08:57:21 +0100
Subject: [PATCH] Add grow_vertically to TextArea (#171)

This change replicates the behaviour on Blueprint.

Improvements could include:
1. adding support for the `value` property and generating the element
with the appropriate height; and
2. reduce the height when text is deleted.

Close #158
---
 Cargo.lock                            | 16 +++++++----
 Cargo.toml                            |  2 +-
 src/text_area.rs                      | 41 ++++++++++++++++++++++++++-
 yewprint-doc/src/text/mod.rs          |  5 ++++
 yewprint-doc/src/text_area/example.rs |  6 +++-
 yewprint-doc/src/text_area/mod.rs     | 40 ++++++++++++++++++++++++++
 6 files changed, 102 insertions(+), 8 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 0335c3b..c260b34 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -90,6 +90,12 @@ version = "1.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
+[[package]]
+name = "bitflags"
+version = "2.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24a6904aef64d73cf10ab17ebace7befb918b82164785cb89907993be7f83813"
+
 [[package]]
 name = "boolinator"
 version = "2.4.0"
@@ -182,11 +188,11 @@ checksum = "fff857943da45f546682664a79488be82e69e43c1a7a2307679ab9afb3a66d2e"
 
 [[package]]
 name = "clap"
-version = "4.0.29"
+version = "4.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4d63b9e9c07271b9957ad22c173bae2a4d9a81127680962039296abcd2f8251d"
+checksum = "42dfd32784433290c51d92c438bb72ea5063797fc3cc9a21a8c4346bebbb2098"
 dependencies = [
- "bitflags 1.3.2",
+ "bitflags 2.2.1",
  "clap_derive",
  "clap_lex",
  "is-terminal",
@@ -197,9 +203,9 @@ dependencies = [
 
 [[package]]
 name = "clap_derive"
-version = "4.0.21"
+version = "4.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0177313f9f02afc995627906bbd8967e2be069f5261954222dac78290c2b9014"
+checksum = "fddf67631444a3a3e3e5ac51c36a5e01335302de677bd78759eaa90ab1f46644"
 dependencies = [
  "heck 0.4.0",
  "proc-macro-error",
diff --git a/Cargo.toml b/Cargo.toml
index 9127a34..f2b1ad4 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -22,7 +22,7 @@ gloo = "0.8"
 id_tree = { version = "1.8", optional = true }
 implicit-clone = "0.3.5"
 wasm-bindgen = "0.2"
-web-sys = { version = "0.3", features = ["DomRect", "Element", "Event", "HtmlSelectElement", "DomTokenList", "Element"] }
+web-sys = { version = "0.3", features = ["DomRect", "Element", "Event", "HtmlSelectElement", "DomTokenList", "CssStyleDeclaration"] }
 yew = "0.20"
 yew-callbacks = "0.2.1"
 
diff --git a/src/text_area.rs b/src/text_area.rs
index 666d5d9..1b4cc85 100644
--- a/src/text_area.rs
+++ b/src/text_area.rs
@@ -1,4 +1,6 @@
 use crate::Intent;
+use wasm_bindgen::JsCast;
+use web_sys::HtmlTextAreaElement;
 use yew::prelude::*;
 
 #[derive(Clone, PartialEq, Properties)]
@@ -7,7 +9,8 @@ pub struct TextAreaProps {
     pub class: Classes,
     #[prop_or_default]
     pub fill: bool,
-    //TODO pub grow_vertically: bool,
+    #[prop_or_default]
+    pub grow_vertically: bool,
     #[prop_or_default]
     pub r#ref: NodeRef,
     #[prop_or_default]
@@ -18,6 +21,15 @@ pub struct TextAreaProps {
     pub small: bool,
     #[prop_or_default]
     pub onchange: Callback<Event>,
+    #[prop_or_default]
+    pub value: Option<String>,
+}
+
+fn resize(input: &HtmlTextAreaElement) {
+    input
+        .style()
+        .set_property("height", &format!("{}px", input.scroll_height()))
+        .unwrap();
 }
 
 #[function_component(TextArea)]
@@ -25,13 +37,38 @@ pub fn text_area(
     TextAreaProps {
         class,
         fill,
+        grow_vertically,
         r#ref,
         intent,
         large,
         small,
         onchange,
+        value,
     }: &TextAreaProps,
 ) -> Html {
+    {
+        let node_ref = r#ref.clone();
+        use_effect_with_deps(
+            move |node_ref| {
+                let input = node_ref.cast::<HtmlTextAreaElement>().unwrap();
+                resize(&input);
+            },
+            node_ref,
+        );
+    }
+    let oninput = {
+        let grow_vertically = *grow_vertically;
+        Callback::from(move |e: InputEvent| {
+            if grow_vertically {
+                let input = e
+                    .target()
+                    .and_then(|t| t.dyn_into::<HtmlTextAreaElement>().ok());
+                if let Some(input) = input {
+                    resize(&input);
+                }
+            }
+        })
+    };
     html! {
         <textarea
             class={classes!(
@@ -44,6 +81,8 @@ pub fn text_area(
             )}
             ref={r#ref}
             {onchange}
+            {oninput}
+            value={value.clone()}
         />
     }
 }
diff --git a/yewprint-doc/src/text/mod.rs b/yewprint-doc/src/text/mod.rs
index 0441299..ac351af 100644
--- a/yewprint-doc/src/text/mod.rs
+++ b/yewprint-doc/src/text/mod.rs
@@ -73,6 +73,11 @@ crate::build_example_prop_component! {
                         checked={ctx.props().example_props.ellipsize}
                         label={html!("Ellipsize")}
                     />
+                    <p
+                        style="margin-top: 5px;"
+                    >
+                        {"Value:"}
+                    </p>
                     <input
                         class="bp3-input"
                         onchange={self.update_props(ctx, |props, e: Event| {
diff --git a/yewprint-doc/src/text_area/example.rs b/yewprint-doc/src/text_area/example.rs
index fd62f8c..2837a29 100644
--- a/yewprint-doc/src/text_area/example.rs
+++ b/yewprint-doc/src/text_area/example.rs
@@ -7,16 +7,20 @@ pub struct ExampleProps {
     pub small: bool,
     pub large: bool,
     pub fill: bool,
+    pub grow_vertically: bool,
+    pub text: String,
 }
 
 #[function_component(Example)]
 pub fn example(props: &ExampleProps) -> Html {
     html! {
-        <div style="width: 200px; height: 50px">
+        <div style="width: 200px; min-height: 50px">
             <TextArea intent={props.intent}
                       large={props.large}
                       fill={props.fill}
                       small={props.small}
+                      grow_vertically={props.grow_vertically}
+                      value={Some(props.text.clone())}
             />
         </div>
     }
diff --git a/yewprint-doc/src/text_area/mod.rs b/yewprint-doc/src/text_area/mod.rs
index ce243ae..bca32d9 100644
--- a/yewprint-doc/src/text_area/mod.rs
+++ b/yewprint-doc/src/text_area/mod.rs
@@ -3,6 +3,7 @@ mod example;
 use crate::ExampleContainer;
 use example::*;
 use implicit_clone::unsync::IArray;
+use web_sys::HtmlInputElement;
 use yew::prelude::*;
 use yewprint::{HtmlSelect, Intent, Switch, H1, H5};
 
@@ -23,6 +24,8 @@ impl Component for TextAreaDoc {
                 large: false,
                 small: false,
                 fill: false,
+                grow_vertically: true,
+                text: "Hello, world!".into(),
             },
         }
     }
@@ -91,6 +94,19 @@ crate::build_example_prop_component! {
                         checked={ctx.props().example_props.small}
                         label={html!("Small")}
                     />
+                    <Switch
+                        onclick={self.update_props(ctx, |props, _| ExampleProps {
+                            grow_vertically: !props.grow_vertically,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.grow_vertically}
+                        label={html!("Grow vertically")}
+                    />
+                    <p
+                        style="margin-top: 5px;"
+                    >
+                        {"Select intent:"}
+                    </p>
                     <HtmlSelect<Option<Intent>>
                         options={[
                             (None, "None".into()),
@@ -105,6 +121,30 @@ crate::build_example_prop_component! {
                         })}
                         value={ctx.props().example_props.intent}
                     />
+                    <p
+                        style="margin-top: 5px;"
+                    >
+                        {"Default value:"}
+                    </p>
+                    <input
+                        class="bp3-input"
+                        onchange={self.update_props(ctx, |props, e: Event| {
+                                if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
+                                    ExampleProps {
+                                        text: input.value().into(),
+                                        ..props
+                                    }
+                                } else {
+                                    ExampleProps {
+                                        text: "Hello, world!".into(),
+                                        ..props
+                                    }
+                                }
+                            }
+                        )}
+                        type="text"
+                        value={ctx.props().example_props.text.clone()}
+                    />
                 </div>
             }
         }