Mirrors/yewprint
2
0
Fork 0
mirror of https://github.com/yewprint/yewprint synced 2024-11-22 03:23:03 +00:00
Code Issues Projects Releases Packages Wiki Activity

Adapt Buttongroup and Divider (#54)

Browse source 
Closes #53
This commit is contained in:
Yohan Boogaert 2020-10-18 12:42:07 +02:00 committed by GitHub
parent e43601691d
commit 628cba209e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 215 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
yewprint-doc/src/button_group/example.rs
View file

@ -1,27 +1,48 @@
use yew::prelude::*;
use yewprint::{Button, ButtonGroup, IconName};
pub struct Example;
pub struct Example {
props: ExampleProps,
}
#[derive(Clone, PartialEq, Properties)]
pub struct ExampleProps {
pub minimal: bool,
pub fill: bool,
pub large: bool,
pub vertical: bool,
}
impl Component for Example {
type Message = ();
type Properties = ();
type Properties = ExampleProps;
fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
Self
fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
Example { props }
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
true
}
fn change(&mut self, _: Self::Properties) -> 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! {
<ButtonGroup is_minimal=true>
<ButtonGroup
minimal=self.props.minimal
fill=self.props.fill
large=self.props.large
vertical=self.props.vertical
style="margin:0;"
>
<Button icon=IconName::Database>{"Queries"}</Button>
<Button icon=IconName::Function>{"Functions"}</Button>
<Button icon=IconName::Cog>{"Options"}</Button>

81
yewprint-doc/src/button_group/mod.rs
View file

@ -3,19 +3,31 @@ mod example;
use crate::ExampleContainer;
use example::*;
use yew::prelude::*;
use yewprint::H1;
use yewprint::{Switch, H1, H5};
pub struct ButtonGroupDoc;
pub struct ButtonGroupDoc {
callback: Callback<ExampleProps>,
state: ExampleProps,
}
impl Component for ButtonGroupDoc {
type Message = ();
type Message = ExampleProps;
type Properties = ();
fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
Self
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
ButtonGroupDoc {
callback: link.callback(|x| x),
state: ExampleProps {
minimal: false,
fill: false,
large: false,
vertical: false,
},
}
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.state = msg;
true
}
@ -24,6 +36,7 @@ impl Component for ButtonGroupDoc {
}
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"
@ -32,10 +45,62 @@ impl Component for ButtonGroupDoc {
html! {
<div>
<H1 class="docs-title">{"Button Group"}</H1>
<ExampleContainer source=source>
<Example />
<ExampleContainer
source=source
props=Some(html! {
<ButtonGroupProps
callback={self.callback.clone()}
props=example_props.clone()
>
</ButtonGroupProps>
})
>
<Example with example_props />
</ExampleContainer>
</div>
}
}
}
crate::build_example_prop_component! {
ButtonGroupProps for ExampleProps =>
fn view(&self) -> Html {
html! {
<div>
<H5>{"Props"}</H5>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
minimal: !props.minimal,
..props
})
checked=self.props.minimal
label="Minimal"
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps{
fill: !props.fill,
..props
})
checked=self.props.fill
label="Fill"
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps{
large: !props.large,
..props
})
checked=self.props.large
label="Large"
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
vertical: !props.vertical,
..props
})
checked=self.props.vertical
label="Vertical"
/>
</div>
}
}
}

32
yewprint-doc/src/divider/example.rs
View file

@ -1,33 +1,45 @@
use yew::prelude::*;
use yewprint::{Button, ButtonGroup, Divider};
pub struct Example;
pub struct Example {
props: ExampleProps,
}
#[derive(Clone, PartialEq, Properties)]
pub struct ExampleProps {
pub vertical: bool,
}
impl Component for Example {
type Message = ();
type Properties = ();
type Properties = ExampleProps;
fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
Self
fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
Example { props }
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
true
}
fn change(&mut self, _: Self::Properties) -> 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! {
<ButtonGroup>
<ButtonGroup vertical=self.props.vertical>
<Button>{"File"}</Button>
<Button>{"Edit"}</Button>
<Divider />
<Divider vertical=self.props.vertical />
<Button>{"Create"}</Button>
<Button>{"Delete"}</Button>
<Divider />
<Divider vertical=self.props.vertical />
// <Button icon=IconName::Add />
// <Button icon=IconName::Remove />
</ButtonGroup>

50
yewprint-doc/src/divider/mod.rs
View file

@ -3,19 +3,26 @@ mod example;
use crate::ExampleContainer;
use example::*;
use yew::prelude::*;
use yewprint::H1;
use yewprint::{Switch, H1, H5};
pub struct DividerDoc;
pub struct DividerDoc {
callback: Callback<ExampleProps>,
state: ExampleProps,
}
impl Component for DividerDoc {
type Message = ();
type Message = ExampleProps;
type Properties = ();
fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
DividerDoc
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
DividerDoc {
callback: link.callback(|x| x),
state: ExampleProps { vertical: false },
}
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.state = msg;
true
}
@ -24,6 +31,7 @@ impl Component for DividerDoc {
}
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"
@ -32,10 +40,36 @@ impl Component for DividerDoc {
html! {
<div>
<H1 class="docs-title">{"Divider"}</H1>
<ExampleContainer source=source>
<Example />
<ExampleContainer
source=source
props=Some(html! {
<DividerProps
callback={self.callback.clone()}
props=example_props.clone()
/>
})
>
<Example with example_props />
</ExampleContainer>
</div>
}
}
}
crate::build_example_prop_component! {
DividerProps for ExampleProps =>
fn view(&self) -> Html {
html! {
<div>
<H5>{"Props"}</H5>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
vertical: !props.vertical
})
checked=self.props.vertical
label="Vertical"
/>
</div>
}
}
}

34
yewprint-doc/src/tag/mod.rs
View file

@ -3,7 +3,7 @@ mod example;
use crate::ExampleContainer;
use example::*;
use yew::prelude::*;
use yewprint::{Button, HtmlSelect, IconName, Intent, Switch, H1, H5};
use yewprint::{Button, ButtonGroup, HtmlSelect, IconName, Intent, Switch, H1, H5};
pub struct TagDoc {
callback: Callback<ExampleProps>,
@ -172,22 +172,23 @@ crate::build_example_prop_component! {
label="Right icon"
/>
<p>{"Select intent:"}</p>
<HtmlSelect<Option<Intent>>
fill=true
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
})
/>
<ButtonGroup
vertical=true
>
<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
})
/>
<Button
fill=true
icon=IconName::Refresh
onclick=self.update_props(|props, _| ExampleProps {
reset_tags: props.reset_tags + 1,
@ -196,6 +197,7 @@ crate::build_example_prop_component! {
>
{"Reset tags"}
</Button>
</ButtonGroup>
</div>
</div>
}

30
yewprint/src/button_group.rs
View file

@ -1,3 +1,4 @@
use crate::ConditionalClass;
use yew::prelude::*;
pub struct ButtonGroup {
@ -7,7 +8,15 @@ pub struct ButtonGroup {
#[derive(Clone, PartialEq, Properties)]
pub struct ButtonGroupProps {
#[prop_or_default]
pub is_minimal: bool,
pub minimal: ConditionalClass,
#[prop_or_default]
pub vertical: ConditionalClass,
#[prop_or_default]
pub fill: ConditionalClass,
#[prop_or_default]
pub large: ConditionalClass,
#[prop_or_default]
pub style: Option<String>,
#[prop_or_default]
pub children: html::Children,
}
@ -34,15 +43,18 @@ impl Component for ButtonGroup {
}
fn view(&self) -> Html {
let mut classname = String::from("bp3-button-group");
if self.props.is_minimal {
classname.push_str(" bp3-minimal");
}
html! {
<div class=classname>
{self.props.children.clone()}
<div
class=(
"bp3-button-group",
self.props.minimal.map_some("bp3-minimal"),
self.props.fill.map_some("bp3-fill"),
self.props.large.map_some("bp3-large"),
self.props.vertical.map_some("bp3-vertical"),
)
style?=self.props.style.clone()
>
{self.props.children.clone()}
</div>
}
}

12
yewprint/src/divider.rs
View file

@ -1,3 +1,4 @@
use crate::ConditionalClass;
use yew::prelude::*;
pub struct Divider {
@ -6,6 +7,8 @@ pub struct Divider {
#[derive(Clone, PartialEq, Properties)]
pub struct DividerProps {
#[prop_or_default]
pub vertical: ConditionalClass,
#[prop_or_default]
pub children: html::Children,
}
@ -18,7 +21,7 @@ impl Component for Divider {
Self { props }
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
fn update(&mut self, _: Self::Message) -> ShouldRender {
true
}
@ -33,7 +36,12 @@ impl Component for Divider {
fn view(&self) -> Html {
html! {
<span class="bp3-divider"></span>
<span
class=(
"bp3-divider",
self.props.vertical.map_some("bp3-vertical"),
)
/>
}
}
}