mirror of
https://github.com/yewprint/yewprint
synced 2024-11-22 03:23:03 +00:00
Split doc (#6)
* i have split the doc about collapse * splited the doc about Switch * splited doc about icon * splited the doc about buttons
This commit is contained in:
Yohan Boogaert
GitHub
parent
792c31ac86
commit
be7614df9d
5 changed files with 200 additions and 64 deletions
76
src/app.rs
76
src/app.rs
|
|
@ -1,7 +1,7 @@
|
|||
use crate::buttons::Button;
|
||||
use crate::collapse::Collapse;
|
||||
use crate::forms::controls::Switch;
|
||||
use crate::icon::*;
|
||||
use crate::buttons::doc::*;
|
||||
use crate::collapse::doc::*;
|
||||
use crate::forms::controls::doc::SwitchDoc;
|
||||
use crate::icon::doc::*;
|
||||
use crate::menu::*;
|
||||
use crate::tree::doc::*;
|
||||
use yew::prelude::*;
|
||||
|
|
@ -13,16 +13,12 @@ const LIGHT_FG_COLOR: &str = "#182026";
|
|||
|
||||
pub struct App {
|
||||
link: ComponentLink<Self>,
|
||||
counter: i64,
|
||||
dark_theme: bool,
|
||||
collapsed: bool,
|
||||
doc_menu: DocMenu,
|
||||
dark_theme: bool,
|
||||
}
|
||||
|
||||
pub enum Msg {
|
||||
AddOne,
|
||||
ToggleLight,
|
||||
ToggleCollapse,
|
||||
GoToMenu(DocMenu),
|
||||
}
|
||||
|
||||
|
|
@ -32,9 +28,7 @@ impl Component for App {
|
|||
|
||||
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
App {
|
||||
counter: 0,
|
||||
dark_theme: true,
|
||||
collapsed: true,
|
||||
doc_menu: DocMenu::Tree,
|
||||
link,
|
||||
}
|
||||
|
|
@ -42,9 +36,7 @@ impl Component for App {
|
|||
|
||||
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
||||
match msg {
|
||||
Msg::AddOne => self.counter += 1,
|
||||
Msg::ToggleLight => self.dark_theme ^= true,
|
||||
Msg::ToggleCollapse => self.collapsed ^= true,
|
||||
Msg::GoToMenu(doc_menu) => {
|
||||
self.doc_menu = doc_menu;
|
||||
}
|
||||
|
|
@ -82,58 +74,14 @@ impl Component for App {
|
|||
</div>
|
||||
{
|
||||
match self.doc_menu {
|
||||
DocMenu::Button => html! {
|
||||
<div>
|
||||
<p> {"Counter: "} { self.counter }</p>
|
||||
<div>
|
||||
<Button onclick=self.link.callback(|_| Msg::AddOne)>{ "Add 1" }</Button>
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
DocMenu::Switch => html! {
|
||||
<div>
|
||||
<Switch
|
||||
onclick=self.link.callback(|_| Msg::ToggleLight)
|
||||
checked=self.dark_theme
|
||||
label="Dark theme"
|
||||
/>
|
||||
</div>
|
||||
},
|
||||
DocMenu::Collapse => html! {
|
||||
<div>
|
||||
<Button onclick=self.link.callback(|_| Msg::ToggleCollapse)>
|
||||
{"Toggle collapse"}
|
||||
</Button>
|
||||
<Collapse
|
||||
is_open=!self.collapsed
|
||||
keep_children_mounted=true
|
||||
>
|
||||
<pre class="bp3-code-block">
|
||||
<div>{"[INFO]: Installing wasm-bindgen..."}</div>
|
||||
<div>{"[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended"}</div>
|
||||
<div>{"[INFO]: :-) Done in 0.69s"}</div>
|
||||
<div>{"[INFO]: :-) Your wasm pkg is ready to publish at /home/cecile/repos/blueprint-rs/./static."}</div>
|
||||
<div>{" Index: enabled, Upload: disabled, Cache: disabled, Cors: enabled, Range: enabled, Sort: enabled, Threads: 3"}</div>
|
||||
<div>{" Auth: disabled, Compression: disabled"}</div>
|
||||
<div>{" https: disabled, Cert: , Cert-Password: "}</div>
|
||||
<div>{" Root: /home/cecile/repos/blueprint-rs,"}</div>
|
||||
<div>{" TryFile404: "}</div>
|
||||
<div>{" Address: http://0.0.0.0:8000"}</div>
|
||||
<div>{" ======== [2020-09-07 20:39:46] ========"}</div>
|
||||
<div>{"[2020-09-07 20:39:46] - 127.0.0.1 - 200 - GET /"}</div>
|
||||
<div>{"[2020-09-07 20:39:46] - 127.0.0.1 - 200 - GET /static/blueprint.css"}</div>
|
||||
<div>{"[2020-09-07 20:39:46] - 127.0.0.1 - 200 - GET /static/wasm.js"}</div>
|
||||
<div>{"[2020-09-07 20:39:46] - 127.0.0.1 - 200 - GET /static/wasm_bg.wasm"}</div>
|
||||
</pre>
|
||||
</Collapse>
|
||||
</div>
|
||||
},
|
||||
DocMenu::Button => html! (<ButtonDoc />),
|
||||
DocMenu::Switch => html! (<SwitchDoc
|
||||
dark_theme=self.dark_theme
|
||||
onclick=self.link.callback(|_| Msg::ToggleLight)
|
||||
/>),
|
||||
DocMenu::Collapse => html!(<CollapseDoc />),
|
||||
DocMenu::Tree => html!(<TreeDoc />),
|
||||
DocMenu::Icon => html! {
|
||||
<div>
|
||||
<Icon icon=IconName::Print />
|
||||
</div>
|
||||
},
|
||||
DocMenu::Icon => html!(<IconDoc />),
|
||||
DocMenu::Menu => html!(),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,3 +42,48 @@ impl Component for Button {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "dev")]
|
||||
pub mod doc {
|
||||
use super::*;
|
||||
|
||||
pub struct ButtonDoc {
|
||||
link: ComponentLink<Self>,
|
||||
counter: i64,
|
||||
}
|
||||
|
||||
pub enum Msg {
|
||||
AddOne,
|
||||
}
|
||||
|
||||
impl Component for ButtonDoc {
|
||||
type Message = Msg;
|
||||
type Properties = ();
|
||||
|
||||
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
ButtonDoc { counter: 0, link }
|
||||
}
|
||||
|
||||
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
||||
match msg {
|
||||
Msg::AddOne => self.counter += 1,
|
||||
}
|
||||
true
|
||||
}
|
||||
|
||||
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
|
||||
true
|
||||
}
|
||||
|
||||
fn view(&self) -> Html {
|
||||
html! {
|
||||
<div>
|
||||
<p> {"Counter: "} { self.counter }</p>
|
||||
<div>
|
||||
<Button onclick=self.link.callback(|_| Msg::AddOne)>{ "Add 1" }</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -196,3 +196,73 @@ impl Component for Collapse {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "dev")]
|
||||
pub mod doc {
|
||||
use super::*;
|
||||
use crate::buttons::Button;
|
||||
|
||||
pub struct CollapseDoc {
|
||||
link: ComponentLink<Self>,
|
||||
collapsed: bool,
|
||||
}
|
||||
|
||||
pub enum Msg {
|
||||
ToggleCollapse,
|
||||
}
|
||||
|
||||
impl Component for CollapseDoc {
|
||||
type Message = Msg;
|
||||
type Properties = ();
|
||||
|
||||
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
CollapseDoc {
|
||||
collapsed: true,
|
||||
link,
|
||||
}
|
||||
}
|
||||
|
||||
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
||||
match msg {
|
||||
Msg::ToggleCollapse => self.collapsed ^= true,
|
||||
}
|
||||
true
|
||||
}
|
||||
|
||||
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
|
||||
true
|
||||
}
|
||||
|
||||
fn view(&self) -> Html {
|
||||
html! {
|
||||
<div>
|
||||
<Button onclick=self.link.callback(|_| Msg::ToggleCollapse)>
|
||||
{"Toggle collapse"}
|
||||
</Button>
|
||||
<Collapse
|
||||
is_open=!self.collapsed
|
||||
keep_children_mounted=true
|
||||
>
|
||||
<pre class="bp3-code-block">
|
||||
<div>{"[INFO]: Installing wasm-bindgen..."}</div>
|
||||
<div>{"[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended"}</div>
|
||||
<div>{"[INFO]: :-) Done in 0.69s"}</div>
|
||||
<div>{"[INFO]: :-) Your wasm pkg is ready to publish at /home/cecile/repos/blueprint-rs/./static."}</div>
|
||||
<div>{" Index: enabled, Upload: disabled, Cache: disabled, Cors: enabled, Range: enabled, Sort: enabled, Threads: 3"}</div>
|
||||
<div>{" Auth: disabled, Compression: disabled"}</div>
|
||||
<div>{" https: disabled, Cert: , Cert-Password: "}</div>
|
||||
<div>{" Root: /home/cecile/repos/blueprint-rs,"}</div>
|
||||
<div>{" TryFile404: "}</div>
|
||||
<div>{" Address: http://0.0.0.0:8000"}</div>
|
||||
<div>{" ======== [2020-09-07 20:39:46] ========"}</div>
|
||||
<div>{"[2020-09-07 20:39:46] - 127.0.0.1 - 200 - GET /"}</div>
|
||||
<div>{"[2020-09-07 20:39:46] - 127.0.0.1 - 200 - GET /static/blueprint.css"}</div>
|
||||
<div>{"[2020-09-07 20:39:46] - 127.0.0.1 - 200 - GET /static/wasm.js"}</div>
|
||||
<div>{"[2020-09-07 20:39:46] - 127.0.0.1 - 200 - GET /static/wasm_bg.wasm"}</div>
|
||||
</pre>
|
||||
</Collapse>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,3 +52,47 @@ impl Component for Switch {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "dev")]
|
||||
pub mod doc {
|
||||
use super::*;
|
||||
|
||||
pub struct SwitchDoc {
|
||||
props: Props,
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Properties)]
|
||||
pub struct Props {
|
||||
pub dark_theme: bool,
|
||||
pub onclick: Callback<MouseEvent>,
|
||||
}
|
||||
|
||||
impl Component for SwitchDoc {
|
||||
type Message = ();
|
||||
type Properties = Props;
|
||||
|
||||
fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
|
||||
SwitchDoc { props }
|
||||
}
|
||||
|
||||
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
|
||||
true
|
||||
}
|
||||
|
||||
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
|
||||
true
|
||||
}
|
||||
|
||||
fn view(&self) -> Html {
|
||||
html! {
|
||||
<div>
|
||||
<Switch
|
||||
onclick=self.props.onclick.clone()
|
||||
checked=self.props.dark_theme
|
||||
label="Dark theme"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
29
src/icon.rs
29
src/icon.rs
|
|
@ -93,3 +93,32 @@ impl Component for Icon {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "dev")]
|
||||
pub mod doc {
|
||||
use super::*;
|
||||
|
||||
pub struct IconDoc {}
|
||||
|
||||
impl Component for IconDoc {
|
||||
type Message = ();
|
||||
type Properties = ();
|
||||
|
||||
fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
|
||||
IconDoc {}
|
||||
}
|
||||
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
|
||||
true
|
||||
}
|
||||
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
|
||||
true
|
||||
}
|
||||
fn view(&self) -> Html {
|
||||
html! {
|
||||
<div>
|
||||
<Icon icon=IconName::Print />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue