Mirrors/yewprint
2
0
Fork 0
mirror of https://github.com/yewprint/yewprint synced 2025-02-16 12:08:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

Adapt doc (#55)

Browse source 
have made some improvement to the doc

- change menu who show the props into a select
- we have now example for switch and menu
- a new MenuDivider
This commit is contained in:
Yohan Boogaert 2020-10-28 13:35:28 +01:00 • committed by GitHub
parent 5f1ee29cb8
commit 213e618409
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 323 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
yewprint-doc/src/app.rs
View file

@ -6,7 +6,9 @@ use crate::collapse::*;
use crate::divider::*;
use crate::html_select::*;
use crate::icon::*;
use crate::menu::*;
use crate::progressbar::*;
use crate::switch::*;
use crate::tabs::*;
use crate::tag::*;
use crate::text::*;
@ -208,7 +210,6 @@ impl Component for App {
match switch {
DocMenu::Button | DocMenu::Home => html! (<ButtonDoc />),
DocMenu::ButtonGroup => html! (<ButtonGroupDoc />),
DocMenu::Switch => html! (),
DocMenu::Callout => html!(<CalloutDoc />),
DocMenu::Card => html!(<CardDoc />),
DocMenu::Collapse => html!(<CollapseDoc />),
@ -218,9 +219,10 @@ impl Component for App {
DocMenu::Tree => html!(<TreeDoc />),
DocMenu::Icon => html!(<IconDoc />),
DocMenu::ProgressBar => html!(<ProgressBarDoc />),
DocMenu::Switch => html!(<SwitchDoc />),
DocMenu::Tabs => html!(<TabsDoc />),
DocMenu::Tag => html!(<TagDoc />),
DocMenu::Menu => html!(),
DocMenu::Menu => html!(<MenuDoc />),
}
})
/>

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

@ -74,7 +74,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.minimal
label="Minimal"
label=html!("Minimal")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps{
@ -82,7 +82,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.fill
label="Fill"
label=html!("Fill")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps{
@ -90,7 +90,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.large
label="Large"
label=html!("Large")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -98,7 +98,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.vertical
label="Vertical"
label=html!("Vertical")
/>
</div>
}

4
yewprint-doc/src/buttons/mod.rs
View file

@ -73,7 +73,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.minimal
label="Minimal"
label=html!("Minimal")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -81,7 +81,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.fill
label="Fill"
label=html!("Fill")
/>
</div>
}

4
yewprint-doc/src/callout/mod.rs
View file

@ -73,7 +73,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.show_icon
label="Show/hide icon"
label=html!("Show/hide icon")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -81,7 +81,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.show_title
label="Show/hide title"
label=html!("Show/hide title")
/>
<p>{"Select intent:"}</p>
<HtmlSelect<Option<Intent>>

51
yewprint-doc/src/card/mod.rs
View file

@ -3,7 +3,7 @@ mod example;
use crate::ExampleContainer;
use example::*;
use yew::prelude::*;
use yewprint::{Elevation, Menu, MenuItem, Switch, H1, H5};
use yewprint::{Elevation, HtmlSelect, Switch, H1, H5};
pub struct CardDoc {
callback: Callback<ExampleProps>,
@ -72,46 +72,19 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.interactive
label="Toggle interaction"
label=html!("Toggle interaction")
/>
<p>{"Elevation:"}</p>
<Menu>
<MenuItem
onclick=self.update_props(|props, _| ExampleProps {
elevation: Elevation::Level0,
..props
})
text=html!{"Level 0"}
/>
<MenuItem
onclick=self.update_props(|props, _| ExampleProps {
elevation: Elevation::Level1,
..props
})
text=html!{"Level 1"}
/>
<MenuItem
onclick=self.update_props(|props, _| ExampleProps {
elevation: Elevation::Level2,
..props
})
text=html!{"Level 2"}
/>
<MenuItem
onclick=self.update_props(|props, _| ExampleProps {
elevation: Elevation::Level3,
..props
})
text=html!{"Level 3"}
/>
<MenuItem
onclick=self.update_props(|props, _| ExampleProps {
elevation: Elevation::Level4,
..props
})
text=html!{"Level 4"}
/>
</Menu>
<HtmlSelect<Elevation>
options={vec![
(Elevation::Level0, "Level 0".to_string()),
(Elevation::Level1, "Level 1".to_string()),
(Elevation::Level2, "Level 2".to_string()),
(Elevation::Level3, "Level 3".to_string()),
(Elevation::Level4, "Level 4".to_string()),
]}
value=Some(self.props.elevation)
/>
</div>
</div>
}

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

@ -67,7 +67,7 @@ crate::build_example_prop_component! {
vertical: !props.vertical
})
checked=self.props.vertical
label="Vertical"
label=html!("Vertical")
/>
</div>
}

8
yewprint-doc/src/html_select/mod.rs
View file

@ -75,7 +75,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.minimal
label="Minimal"
label=html!("Minimal")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps{
@ -83,7 +83,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.fill
label="Fill"
label=html!("Fill")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -91,7 +91,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.disabled
label="Disabled"
label=html!("Disabled")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps{
@ -99,7 +99,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.large
label="Large"
label=html!("Large")
/>
</div>
}

1
yewprint-doc/src/lib.rs
View file

@ -8,6 +8,7 @@ mod divider;
mod example;
mod html_select;
mod icon;
mod menu;
mod progressbar;
mod switch;
mod tabs;

53
yewprint-doc/src/menu/example.rs Normal file
View file

@ -0,0 +1,53 @@
use yew::prelude::*;
use yewprint::{IconName, Menu, MenuDivider, MenuItem};
pub struct Example {}
impl Component for Example {
type Message = ();
type Properties = ();
fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
Self {}
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
true
}
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
true
}
fn view(&self) -> Html {
html! {
<div>
<Menu>
<MenuItem
text={html!("Custom SVG icon")}
// add the yewprint icon
/>
<MenuDivider />
<MenuItem
text={html!{"New text box"}}
icon=IconName::NewTextBox
/>
<MenuItem
text={html!{"New object"}}
icon=IconName::NewObject
/>
<MenuItem
text={html!{"New link"}}
icon=IconName::NewLink
/>
<MenuDivider />
<MenuItem
text={html!{"Settings"}}
icon=IconName::Cog
// add the label icon
/>
</Menu>
</div>
}
}
}

41
yewprint-doc/src/menu/mod.rs Normal file
View file

@ -0,0 +1,41 @@
mod example;
use crate::ExampleContainer;
use example::*;
use yew::prelude::*;
use yewprint::H1;
pub struct MenuDoc;
impl Component for MenuDoc {
type Message = ();
type Properties = ();
fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
MenuDoc
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
true
}
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
true
}
fn view(&self) -> Html {
let source = crate::include_raw_html!(
concat!(env!("OUT_DIR"), "/", file!(), ".html"),
"bp3-code-block"
);
html! {
<div>
<H1 class="docs-title">{"Menu"}</H1>
<ExampleContainer source=source>
<Example />
</ExampleContainer>
</div>
}
}
}

4
yewprint-doc/src/progressbar/mod.rs
View file

@ -73,7 +73,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.stripes
label="Stripes"
label=html!("Stripes")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -81,7 +81,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.animate
label="Animate"
label=html!("Animate")
/>
<p>{"Select intent:"}</p>
<HtmlSelect<Option<Intent>>

67
yewprint-doc/src/switch/example.rs Normal file
View file

@ -0,0 +1,67 @@
use yew::prelude::*;
use yewprint::{Label, Switch};
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>{"Privacy settings"}</Label>
<Switch
disabled=self.props.disabled
inline=self.props.inline
large=self.props.large
label=html!("Enabled")
/>
<Switch
disabled=self.props.disabled
inline=self.props.inline
large=self.props.large
label=html!(<em>{"Public"}</em>)
/>
<Switch
disabled=self.props.disabled
inline=self.props.inline
large=self.props.large
label=html!{<strong>{"Cooperative"}</strong>}
/>
<Switch
disabled=self.props.disabled
inline=self.props.inline
large=self.props.large
label=html!(<u>{"Containing Text"}</u>)
/>
</div>
}
}
}

87
yewprint-doc/src/switch/mod.rs
View file

@ -1,25 +1,32 @@
mod example;
use crate::ExampleContainer;
use example::*;
use yew::prelude::*;
use yewprint::{Switch, H1};
use yewprint::{Switch, H1, H5};
pub struct SwitchDoc {
props: Props,
}
#[derive(Clone, PartialEq, Properties)]
pub struct Props {
pub dark_theme: bool,
pub onclick: Callback<MouseEvent>,
callback: Callback<ExampleProps>,
state: ExampleProps,
}
impl Component for SwitchDoc {
type Message = ();
type Properties = Props;
type Message = ExampleProps;
type Properties = ();
fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
SwitchDoc { props }
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
SwitchDoc {
callback: link.callback(|x| x),
state: ExampleProps {
disabled: false,
inline: false,
large: false,
},
}
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.state = msg;
true
}
@ -28,13 +35,61 @@ impl Component for SwitchDoc {
}
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="docs-title">{"Switch"}</H1>
<ExampleContainer
source=source
props=Some(html! {
<SwitchProps
callback={self.callback.clone()}
props=example_props.clone()
>
</SwitchProps>
})
>
<Example with example_props />
</ExampleContainer>
</div>
}
}
}
crate::build_example_prop_component! {
SwitchProps for ExampleProps =>
fn view(&self) -> Html {
html! {
<div>
<H5>{"Props"}</H5>
<Switch
onclick=self.props.onclick.clone()
checked=self.props.dark_theme
label="Dark theme"
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>
}

4
yewprint-doc/src/tabs/mod.rs
View file

@ -73,7 +73,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.animate
label="Animate indicator"
label=html!("Animate indicator")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -81,7 +81,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.vertical
label="Use vertical tabs"
label=html!("Use vertical tabs")
/>
</div>
}

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

@ -97,7 +97,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.active
label="Active"
label=html!("Active")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -105,7 +105,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.fill
label="Fill"
label=html!("Fill")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -113,7 +113,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.interactive
label="Interactive"
label=html!("Interactive")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -121,7 +121,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.large
label="Large"
label=html!("Large")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -129,7 +129,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.minimal
label="Minimal"
label=html!("Minimal")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -137,7 +137,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.multiline
label="Multiline"
label=html!("Multiline")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -145,7 +145,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.round
label="Round"
label=html!("Round")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -153,7 +153,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.removable
label="Removable"
label=html!("Removable")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -161,7 +161,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.icon
label="Icon"
label=html!("Icon")
/>
<Switch
onclick=self.update_props(|props, _| ExampleProps {
@ -169,7 +169,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.right_icon
label="Right icon"
label=html!("Right icon")
/>
<p>{"Select intent:"}</p>
<ButtonGroup

2
yewprint-doc/src/text/mod.rs
View file

@ -73,7 +73,7 @@ crate::build_example_prop_component! {
..props
})
checked=self.props.ellipsize
label="Ellipsize"
label=html!("Ellipsize")
/>
<input
class="bp3-input"

25
yewprint/src/menu.rs
View file

@ -149,3 +149,28 @@ impl Component for MenuItem {
}
}
}
pub struct MenuDivider {}
impl Component for MenuDivider {
type Message = ();
type Properties = ();
fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
Self {}
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
true
}
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
true
}
fn view(&self) -> Html {
html! {
<span class="bp3-menu-divider" />
}
}
}

27
yewprint/src/switch.rs
View file

@ -1,25 +1,32 @@
use boolinator::Boolinator;
use yew::prelude::*;
pub struct Switch {
props: Props,
props: SwitchProps,
}
#[derive(Clone, PartialEq, Properties)]
pub struct Props {
pub struct SwitchProps {
#[prop_or_default]
pub checked: bool,
#[prop_or_default]
pub disabled: bool,
#[prop_or_default]
pub inline: bool,
#[prop_or_default]
pub large: bool,
#[prop_or_default]
pub onclick: Callback<MouseEvent>,
#[prop_or_default]
pub label: String,
pub label: yew::virtual_dom::VNode,
}
impl Component for Switch {
type Message = ();
type Properties = Props;
type Properties = SwitchProps;
fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
Switch { props }
Self { props }
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
@ -37,11 +44,19 @@ impl Component for Switch {
fn view(&self) -> Html {
html! {
<label class="bp3-control bp3-switch">
<label
class=(
"bp3-control bp3-switch",
self.props.disabled.as_some("bp3-disabled"),
self.props.inline.as_some("bp3-inline"),
self.props.large.as_some("bp3-large"),
)
>
<input
type="checkbox"
checked={self.props.checked}
onclick={self.props.onclick.clone()}
disabled=self.props.disabled
/>
<span
class="bp3-control-indicator"