Checkbox (#79)

yewprint-doc/src/app.rs

@@ -2,6 +2,7 @@ use crate::button_group::*;
 use crate::buttons::*;
 use crate::callout::*;
 use crate::card::*;
+use crate::checkbox::*;
 use crate::collapse::*;
 use crate::control_group::*;
 use crate::divider::*;
@@ -140,6 +141,12 @@ impl Component for App {
                                     onclick=self.link
                                         .callback(|_| Msg::GoToMenu(DocMenu::Card))
                                 />
+                                <MenuItem
+                                    text={html!("Checkbox")}
+                                    href=Cow::Borrowed("#checkbox")
+                                    onclick=self.link
+                                        .callback(|_| Msg::GoToMenu(DocMenu::Checkbox))
+                                />
                                 <MenuItem
                                     text={html!("Collapse")}
                                     href=Cow::Borrowed("#collapse")
@@ -269,6 +276,7 @@ impl Component for App {
                                         DocMenu::ButtonGroup => html! (<ButtonGroupDoc />),
                                         DocMenu::Callout => html!(<CalloutDoc />),
                                         DocMenu::Card => html!(<CardDoc />),
+                                        DocMenu::Checkbox => html!(<CheckboxDoc />),
                                         DocMenu::Collapse => html!(<CollapseDoc />),
                                         DocMenu::ControlGroup => html!(<ControlGroupDoc />),
                                         DocMenu::Divider => html!(<DividerDoc />),
@@ -308,6 +316,8 @@ pub enum DocMenu {
     Callout,
     #[to = "/#card"]
     Card,
+    #[to = "/#checkbox"]
+    Checkbox,
     #[to = "/#collapse"]
     Collapse,
     #[to = "/#control-group"]

yewprint-doc/src/checkbox/example.rs

@@ -0,0 +1,61 @@
+use yew::prelude::*;
+use yewprint::{Checkbox, Label};
+
+pub struct Example {
+    props: ExampleProps,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct ExampleProps {
+    pub disabled: bool,
+    pub inline: bool,
+    pub large: 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>
+                <Label>{"Assign responsability"}</Label>
+                <Checkbox
+                    disabled=self.props.disabled
+                    inline=self.props.inline
+                    large=self.props.large
+                    label=html!("Gilad Gray")
+                />
+                <Checkbox
+                    disabled=self.props.disabled
+                    inline=self.props.inline
+                    large=self.props.large
+                    label=html!("Jason Killian")
+                />
+                <Checkbox
+                    disabled=self.props.disabled
+                    inline=self.props.inline
+                    large=self.props.large
+                    label=html!("Antoine Llorca")
+                />
+            </div>
+        }
+    }
+}

yewprint-doc/src/checkbox/mod.rs

@@ -0,0 +1,96 @@
+mod example;
+
+use crate::ExampleContainer;
+use example::*;
+use yew::prelude::*;
+use yewprint::{Switch, H1, H5};
+
+pub struct CheckboxDoc {
+    callback: Callback<ExampleProps>,
+    state: ExampleProps,
+}
+
+impl Component for CheckboxDoc {
+    type Message = ExampleProps;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        CheckboxDoc {
+            callback: link.callback(|x| x),
+            state: ExampleProps {
+                disabled: false,
+                inline: false,
+                large: 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")>{"Switch"}</H1>
+            <ExampleContainer
+                source=source
+                props=Some(html! {
+                    <CheckboxProps
+                        callback={self.callback.clone()}
+                        props=example_props.clone()
+                    />
+                })
+            >
+                <Example with example_props />
+            </ExampleContainer>
+            </div>
+        }
+    }
+}
+
+crate::build_example_prop_component! {
+    CheckboxProps for ExampleProps =>
+    fn view(&self) -> Html {
+        html! {
+            <div>
+                <H5>{"Props"}</H5>
+                <Switch
+                    onclick=self.update_props(|props, _| ExampleProps {
+                        disabled: !props.disabled,
+                        ..props
+                    })
+                    checked=self.props.disabled
+                    label=html!("Disabled")
+                />
+                <Switch
+                    onclick=self.update_props(|props, _| ExampleProps {
+                        inline: !props.inline,
+                        ..props
+                    })
+                    checked=self.props.inline
+                    label=html!("Inline")
+                />
+                <Switch
+                    onclick=self.update_props(|props, _| ExampleProps {
+                        large: !props.large,
+                        ..props
+                    })
+                    checked=self.props.large
+                    label=html!("Large")
+                />
+            </div>
+        }
+    }
+}

yewprint-doc/src/lib.rs

@@ -5,6 +5,7 @@ mod button_group;
 mod buttons;
 mod callout;
 mod card;
+mod checkbox;
 mod collapse;
 mod control_group;
 mod divider;

yewprint/src/checkbox.rs

@@ -0,0 +1,70 @@
+use yew::prelude::*;
+
+pub struct Checkbox {
+    props: Props,
+}
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct Props {
+    #[prop_or_default]
+    pub disabled: bool,
+    #[prop_or_default]
+    pub inline: bool,
+    #[prop_or_default]
+    pub large: bool,
+    #[prop_or_default]
+    pub checked: bool,
+    #[prop_or_default]
+    pub onchange: Callback<ChangeData>,
+    #[prop_or_default]
+    pub label: yew::virtual_dom::VNode,
+    #[prop_or_default]
+    pub indeterminate_state: bool,
+}
+
+impl Component for Checkbox {
+    type Message = ();
+    type Properties = Props;
+
+    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
+        Self { 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! {
+            <label
+                class=classes!(
+                    "bp3-control", "bp3-checkbox",
+                    self.props.disabled.then(|| "bp3-disabled"),
+                    self.props.inline.then(|| "bp3-inline"),
+                    self.props.large.then(|| "bp3-large")
+                )
+            >
+                <input
+                    type="checkbox"
+                    checked={self.props.checked}
+                    onchange={self.props.onchange.clone()}
+                    disabled=self.props.disabled
+                />
+                <span
+                    class="bp3-control-indicator"
+                >
+                </span>
+                {self.props.label.clone()}
+            </label>
+        }
+    }
+}

yewprint/src/lib.rs

@@ -9,6 +9,7 @@ mod button_group;
 mod buttons;
 mod callout;
 mod card;
+mod checkbox;
 mod collapse;
 mod control_group;
 mod divider;
@@ -35,6 +36,7 @@ pub use button_group::*;
 pub use buttons::*;
 pub use callout::*;
 pub use card::*;
+pub use checkbox::*;
 pub use collapse::*;
 pub use control_group::*;
 pub use divider::*;