TextArea

yewprint-doc/src/app.rs

@@ -17,6 +17,7 @@ use crate::switch::*;
 use crate::tabs::*;
 use crate::tag::*;
 use crate::text::*;
+use crate::textarea::*;
 use crate::tree::*;
 use std::borrow::Cow;
 use yew::prelude::*;
@@ -227,6 +228,12 @@ impl Component for App {
                                     onclick=self.link
                                         .callback(|_| Msg::GoToMenu(DocMenu::Text))
                                 />
+                                <MenuItem
+                                    text={html!("TextArea")}
+                                    href=Cow::Borrowed("#textarea")
+                                    onclick=self.link
+                                        .callback(|_| Msg::GoToMenu(DocMenu::TextArea))
+                                />
                                 <MenuItem
                                     text={html!("Tree")}
                                     href=Cow::Borrowed("#tree")
@@ -270,6 +277,7 @@ impl Component for App {
                                         DocMenu::Tabs => html!(<TabsDoc />),
                                         DocMenu::Tag => html!(<TagDoc />),
                                         DocMenu::Text => html!(<TextDoc />),
+                                        DocMenu::TextArea => html!(<TextAreaDoc />),
                                         DocMenu::Tree => html!(<TreeDoc />),
                                     }
                                 })
@@ -320,6 +328,8 @@ pub enum DocMenu {
     Tabs,
     #[to = "/#tag"]
     Tag,
+    #[to = "/#textarea"]
+    TextArea,
     #[to = "/#text"]
     Text,
     #[to = "/#tree"]

yewprint-doc/src/lib.rs

@@ -21,6 +21,7 @@ mod switch;
 mod tabs;
 mod tag;
 mod text;
+mod textarea;
 mod tree;
 
 pub use app::*;

yewprint-doc/src/textarea/example.rs

@@ -0,0 +1,48 @@
+use yew::prelude::*;
+use yewprint::{Intent, TextArea};
+
+pub struct Example {
+    props: ExampleProps,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct ExampleProps {
+    pub intent: Option<Intent>,
+    pub small: bool,
+    pub large: bool,
+    pub fill: bool,
+}
+
+impl Component for Example {
+    type Message = ();
+    type Properties = ExampleProps;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Example { props }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <div style="width: 200px; height: 50px">
+                <TextArea intent=self.props.intent
+                          large=self.props.large
+                          fill=self.props.fill
+                          small=self.props.small
+                />
+            </div>
+        }
+    }
+}

yewprint-doc/src/textarea/mod.rs

@@ -0,0 +1,112 @@
+mod example;
+
+use crate::ExampleContainer;
+use example::*;
+use yew::prelude::*;
+use yewprint::{HtmlSelect, Intent, Switch, H1, H5};
+
+pub struct TextAreaDoc {
+    callback: Callback<ExampleProps>,
+    state: ExampleProps,
+}
+
+impl Component for TextAreaDoc {
+    type Message = ExampleProps;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        TextAreaDoc {
+            callback: link.callback(|x| x),
+            state: ExampleProps {
+                intent: None,
+                large: false,
+                small: false,
+                fill: false,
+            },
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        self.state = msg;
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        true
+    }
+
+    fn view(&self) -> Html {
+        let example_props = self.state.clone();
+        let source = crate::include_raw_html!(
+            concat!(env!("OUT_DIR"), "/", file!(), ".html"),
+            "bp3-code-block"
+        );
+
+        html! {
+            <div>
+                <H1 class=classes!("docs-title")>{"Text"}</H1>
+                <div>
+                    <ExampleContainer
+                        source=source
+                        props=Some(html! {
+                            <TextAreaProps
+                                callback={self.callback.clone()}
+                                props=example_props.clone()
+                            />
+                        })
+                    >
+                        <Example with example_props />
+                    </ExampleContainer>
+                </div>
+            </div>
+        }
+    }
+}
+
+crate::build_example_prop_component! {
+    TextAreaProps for ExampleProps =>
+        fn view(&self) -> Html {
+            html! {
+                <div>
+                    <H5>{"Props"}</H5>
+                    <Switch
+                        onclick=self.update_props(|props, _| ExampleProps {
+                            fill: !props.fill,
+                            ..props
+                        })
+                        checked=self.props.fill
+                        label=html!("Fill")
+                         />
+                    <Switch
+                        onclick=self.update_props(|props, _| ExampleProps {
+                            large: !props.large,
+                            ..props
+                        })
+                        checked=self.props.large
+                        label=html!("Large")
+                    />
+                    <Switch
+                        onclick=self.update_props(|props, _| ExampleProps {
+                            small: !props.small,
+                            ..props
+                        })
+                        checked=self.props.small
+                        label=html!("Small")
+                    />
+                    <HtmlSelect<Option<Intent>>
+                        options={vec![
+                            (None, "None".to_string()),
+                            (Some(Intent::Primary), "Primary".to_string()),
+                            (Some(Intent::Success), "Success".to_string()),
+                            (Some(Intent::Warning), "Warning".to_string()),
+                            (Some(Intent::Danger), "Danger".to_string()),
+                        ]}
+                        onchange=self.update_props(|props, intent| ExampleProps {
+                            intent,
+                            ..props
+                        })
+                    />
+                </div>
+            }
+        }
+}

yewprint/src/lib.rs

@@ -25,6 +25,7 @@ mod switch;
 mod tabs;
 mod tag;
 mod text;
+mod textarea;
 #[cfg(feature = "tree")]
 mod tree;
 
@@ -51,6 +52,7 @@ pub use switch::*;
 pub use tabs::*;
 pub use tag::*;
 pub use text::*;
+pub use textarea::*;
 #[cfg(feature = "tree")]
 pub use tree::*;
 

yewprint/src/textarea.rs

@@ -0,0 +1,65 @@
+use crate::Intent;
+use yew::prelude::*;
+
+pub struct TextArea {
+    props: TextAreaProps,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct TextAreaProps {
+    #[prop_or_default]
+    pub class: Classes,
+    #[prop_or_default]
+    pub fill: bool,
+    #[prop_or_default]
+    pub grow_vertically: bool,
+    #[prop_or_default]
+    pub input_ref: NodeRef,
+    #[prop_or_default]
+    pub intent: Option<Intent>,
+    #[prop_or_default]
+    pub large: bool,
+    #[prop_or_default]
+    pub small: bool,
+    #[prop_or_default]
+    pub onchange: Option<Callback<ChangeData>>,
+}
+
+impl Component for TextArea {
+    type Message = ();
+    type Properties = TextAreaProps;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        TextArea { props }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, props: Self::Properties) -> ShouldRender {
+        if self.props != props {
+            self.props = props;
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self) -> Html {
+        let classes = classes!(
+            "bp3-input",
+            self.props.intent,
+            self.props.class.clone(),
+            self.props.fill.then(|| "bp3-fill"),
+            self.props.small.then(|| "bp3-small"),
+            self.props.large.then(|| "bp3-large"),
+        );
+        html! {
+            <textarea
+                class=classes
+                onchange=self.props.onchange.clone()
+            />
+        }
+    }
+}