mirror of
https://github.com/yewprint/yewprint
synced 2024-11-24 20:43:05 +00:00
Router (#29)
This commit is contained in:
parent
e433e11db7
commit
1e840c81ef
9 changed files with 361 additions and 262 deletions
2
.github/workflows/rust.yml
vendored
2
.github/workflows/rust.yml
vendored
|
@ -16,7 +16,7 @@ jobs:
|
|||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- run: rustfmt --check **/*.rs
|
||||
- run: cargo fmt -- --check
|
||||
if: ${{ github.event_name == 'pull_request' }}
|
||||
- uses: actions-rs/clippy-check@v1
|
||||
with:
|
||||
|
|
3
.rustfmt.toml
Normal file
3
.rustfmt.toml
Normal file
|
@ -0,0 +1,3 @@
|
|||
error_on_line_overflow = true
|
||||
error_on_unformatted = true
|
||||
newline_style = "Unix"
|
82
Cargo.lock
generated
82
Cargo.lock
generated
|
@ -18,6 +18,12 @@ version = "0.12.1"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "33954243bd79057c2de7338850b85983a44588021f8a5fee574a8888c6de4344"
|
||||
|
||||
[[package]]
|
||||
name = "arrayvec"
|
||||
version = "0.5.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "cff77d8686867eceff3105329d4698d96c2391c176d5d03adc90c7389162b5b8"
|
||||
|
||||
[[package]]
|
||||
name = "autocfg"
|
||||
version = "1.0.1"
|
||||
|
@ -359,6 +365,19 @@ version = "1.3.0"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "830d08ce1d1d941e6b30645f1a0eb5643013d835ce3779a5fc208261dbe10f55"
|
||||
|
||||
[[package]]
|
||||
name = "lexical-core"
|
||||
version = "0.7.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "db65c6da02e61f55dae90a0ae427b2a5f6b3e8db09f58d10efab23af92592616"
|
||||
dependencies = [
|
||||
"arrayvec",
|
||||
"bitflags",
|
||||
"cfg-if",
|
||||
"ryu",
|
||||
"static_assertions",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "libc"
|
||||
version = "0.2.77"
|
||||
|
@ -405,6 +424,17 @@ dependencies = [
|
|||
"autocfg",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "nom"
|
||||
version = "5.1.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ffb4262d26ed83a1c0a33a38fe2bb15797329c85770da05e6b828ddb782627af"
|
||||
dependencies = [
|
||||
"lexical-core",
|
||||
"memchr",
|
||||
"version_check",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "num-integer"
|
||||
version = "0.1.43"
|
||||
|
@ -607,6 +637,12 @@ version = "1.3.0"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "27207bb65232eda1f588cf46db2fee75c0808d557f6b3cf19a75f5d6d7c94df1"
|
||||
|
||||
[[package]]
|
||||
name = "static_assertions"
|
||||
version = "1.1.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
|
||||
|
||||
[[package]]
|
||||
name = "syn"
|
||||
version = "1.0.39"
|
||||
|
@ -672,6 +708,12 @@ version = "0.2.1"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f7fe0bb3479651439c9112f72b6c505038574c9fbb575ed1bf3b797fa39dd564"
|
||||
|
||||
[[package]]
|
||||
name = "version_check"
|
||||
version = "0.9.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "b5a972e5669d67ba988ce3dc826706fb0a8b01471c088cb0b6110b805cc36aed"
|
||||
|
||||
[[package]]
|
||||
name = "walkdir"
|
||||
version = "2.3.1"
|
||||
|
@ -847,6 +889,45 @@ dependencies = [
|
|||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yew-router"
|
||||
version = "0.14.0"
|
||||
source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
|
||||
dependencies = [
|
||||
"cfg-if",
|
||||
"cfg-match",
|
||||
"gloo",
|
||||
"js-sys",
|
||||
"log",
|
||||
"nom",
|
||||
"serde",
|
||||
"serde_json",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
"yew",
|
||||
"yew-router-macro",
|
||||
"yew-router-route-parser",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yew-router-macro"
|
||||
version = "0.14.0"
|
||||
source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
"yew-router-route-parser",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yew-router-route-parser"
|
||||
version = "0.14.0"
|
||||
source = "git+https://github.com/yewstack/yew.git?rev=1507c21b#1507c21b39e7941f7b9fe8ff5af792cf55be1f6f"
|
||||
dependencies = [
|
||||
"nom",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yewprint"
|
||||
version = "0.1.0"
|
||||
|
@ -867,6 +948,7 @@ dependencies = [
|
|||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
"yew",
|
||||
"yew-router",
|
||||
"yewprint",
|
||||
]
|
||||
|
||||
|
|
|
@ -14,6 +14,7 @@ wasm-bindgen = "^0.2"
|
|||
yew = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
|
||||
web-sys = { version = "0.3", features = ["Window", "MediaQueryList"] }
|
||||
yewprint = { path = "../yewprint" }
|
||||
yew-router = { git = "https://github.com/yewstack/yew.git", rev = "1507c21b" }
|
||||
|
||||
[build-dependencies]
|
||||
syntect = "4.4.0"
|
||||
|
|
|
@ -2,17 +2,21 @@ use crate::buttons::*;
|
|||
use crate::callout::*;
|
||||
use crate::collapse::*;
|
||||
use crate::icon::*;
|
||||
use crate::switch::*;
|
||||
use crate::tree::*;
|
||||
use crate::progressbar::*;
|
||||
use crate::tree::*;
|
||||
|
||||
use yew::prelude::*;
|
||||
use yew_router::{
|
||||
agent::{RouteAgentDispatcher, RouteRequest},
|
||||
router::Router,
|
||||
Switch,
|
||||
};
|
||||
use yewprint::{ConditionalClass, IconName, Menu, MenuItem};
|
||||
|
||||
pub struct App {
|
||||
link: ComponentLink<Self>,
|
||||
doc_menu: DocMenu,
|
||||
dark_theme: ConditionalClass,
|
||||
route_dispatcher: RouteAgentDispatcher,
|
||||
}
|
||||
|
||||
pub enum Msg {
|
||||
|
@ -31,8 +35,8 @@ impl Component for App {
|
|||
.map(|x| x.matches())
|
||||
.unwrap_or(true)
|
||||
.into(),
|
||||
doc_menu: DocMenu::Button,
|
||||
link,
|
||||
route_dispatcher: RouteAgentDispatcher::new(),
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -40,7 +44,8 @@ impl Component for App {
|
|||
match msg {
|
||||
Msg::ToggleLight => *self.dark_theme ^= true,
|
||||
Msg::GoToMenu(doc_menu) => {
|
||||
self.doc_menu = doc_menu;
|
||||
self.route_dispatcher
|
||||
.send(RouteRequest::ChangeRoute(doc_menu.into()));
|
||||
}
|
||||
}
|
||||
true
|
||||
|
@ -142,21 +147,20 @@ impl Component for App {
|
|||
</div>
|
||||
<main class="docs-content-wrapper" role="main">
|
||||
<div class="docs-page">
|
||||
{
|
||||
match self.doc_menu {
|
||||
DocMenu::Button => html! (<ButtonDoc />),
|
||||
DocMenu::Switch => html! (<SwitchDoc
|
||||
dark_theme=self.dark_theme
|
||||
onclick=self.link.callback(|_| Msg::ToggleLight)
|
||||
/>),
|
||||
DocMenu::Callout => html!(<CalloutDoc />),
|
||||
DocMenu::Collapse => html!(<CollapseDoc />),
|
||||
DocMenu::Tree => html!(<TreeDoc />),
|
||||
DocMenu::Icon => html!(<IconDoc />),
|
||||
DocMenu::ProgressBar => html!(<ProgressBarDoc />),
|
||||
DocMenu::Menu => html!(),
|
||||
}
|
||||
}
|
||||
<Router<DocMenu, ()>
|
||||
render=Router::render(|switch: DocMenu| {
|
||||
match switch {
|
||||
DocMenu::Button | DocMenu::Home => html! (<ButtonDoc />),
|
||||
DocMenu::Switch => html! (),
|
||||
DocMenu::Callout => html!(<CalloutDoc />),
|
||||
DocMenu::Collapse => html!(<CollapseDoc />),
|
||||
DocMenu::Tree => html!(<TreeDoc />),
|
||||
DocMenu::Icon => html!(<IconDoc />),
|
||||
DocMenu::ProgressBar => html!(<ProgressBarDoc />),
|
||||
DocMenu::Menu => html!(),
|
||||
}
|
||||
})
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
@ -165,14 +169,24 @@ impl Component for App {
|
|||
}
|
||||
}
|
||||
|
||||
#[derive(Debug, Copy, Clone)]
|
||||
#[derive(Debug, Copy, Clone, Switch)]
|
||||
pub enum DocMenu {
|
||||
#[to = "/#button"]
|
||||
Button,
|
||||
#[to = "/#callout"]
|
||||
Callout,
|
||||
#[to = "/#collapse"]
|
||||
Collapse,
|
||||
#[to = "/#icon"]
|
||||
Icon,
|
||||
#[to = "/#menu"]
|
||||
Menu,
|
||||
#[to = "/#switch"]
|
||||
Switch,
|
||||
#[to = "/#tree"]
|
||||
Tree,
|
||||
#[to = "/#progress-bar"]
|
||||
ProgressBar,
|
||||
#[to = "/"]
|
||||
Home,
|
||||
}
|
||||
|
|
|
@ -4,9 +4,9 @@ mod callout;
|
|||
mod collapse;
|
||||
mod example;
|
||||
mod icon;
|
||||
mod progressbar;
|
||||
mod switch;
|
||||
mod tree;
|
||||
mod progressbar;
|
||||
|
||||
pub use app::*;
|
||||
pub use example::*;
|
||||
|
|
|
@ -1,43 +1,43 @@
|
|||
use yew::prelude::*;
|
||||
use yewprint::{ProgressBar, Intent};
|
||||
|
||||
pub struct Example {
|
||||
props: ExampleProps,
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Properties)]
|
||||
pub struct ExampleProps {
|
||||
pub intent: Option<Intent>,
|
||||
pub animate: bool,
|
||||
pub stripes: 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! {
|
||||
<ProgressBar
|
||||
animate=self.props.animate
|
||||
stripes=self.props.stripes
|
||||
intent=self.props.intent
|
||||
value=0.3
|
||||
/>
|
||||
}
|
||||
}
|
||||
}
|
||||
use yew::prelude::*;
|
||||
use yewprint::{Intent, ProgressBar};
|
||||
|
||||
pub struct Example {
|
||||
props: ExampleProps,
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Properties)]
|
||||
pub struct ExampleProps {
|
||||
pub intent: Option<Intent>,
|
||||
pub animate: bool,
|
||||
pub stripes: 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! {
|
||||
<ProgressBar
|
||||
animate=self.props.animate
|
||||
stripes=self.props.stripes
|
||||
intent=self.props.intent
|
||||
value=0.3
|
||||
/>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,133 +1,132 @@
|
|||
mod example;
|
||||
|
||||
use crate::ExampleContainer;
|
||||
use example::*;
|
||||
use yew::prelude::*;
|
||||
use yewprint::{Intent, Menu, MenuItem, Switch, H1, H5};
|
||||
|
||||
|
||||
pub struct ProgressBarDoc {
|
||||
callback: Callback<ExampleProps>,
|
||||
state: ExampleProps,
|
||||
}
|
||||
|
||||
impl Component for ProgressBarDoc {
|
||||
type Message = ExampleProps;
|
||||
type Properties = ();
|
||||
|
||||
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
ProgressBarDoc {
|
||||
callback: link.callback(|x| x),
|
||||
state: ExampleProps {
|
||||
intent: None,
|
||||
animate: false,
|
||||
stripes: 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="docs-title">{"ProgressBar"}</H1>
|
||||
<ExampleContainer
|
||||
source=source
|
||||
props=Some(html! {
|
||||
<ProgressBarProps
|
||||
callback={self.callback.clone()}
|
||||
props=example_props.clone()
|
||||
/>
|
||||
})
|
||||
>
|
||||
<Example with example_props />
|
||||
</ExampleContainer>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
crate::build_example_prop_component! {
|
||||
ProgressBarProps for ExampleProps =>
|
||||
fn view(&self) -> Html {
|
||||
html! {
|
||||
<div>
|
||||
<H5>{"Props"}</H5>
|
||||
<div>
|
||||
<Switch
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
stripes: !props.stripes,
|
||||
..props
|
||||
})
|
||||
checked=self.props.stripes
|
||||
label="Stripes"
|
||||
/>
|
||||
<Switch
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
animate: !props.animate,
|
||||
..props
|
||||
})
|
||||
checked=self.props.animate
|
||||
label="animate"
|
||||
/>
|
||||
<p>{"Select intent:"}</p>
|
||||
<Menu>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: None,
|
||||
..props
|
||||
})
|
||||
text=html!{"None"}
|
||||
/>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: Some(Intent::Primary),
|
||||
..props
|
||||
})
|
||||
text=html!{"Primary"}
|
||||
intent=Intent::Primary
|
||||
/>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: Some(Intent::Success),
|
||||
..props
|
||||
})
|
||||
text=html!{"Success"}
|
||||
intent=Intent::Success
|
||||
/>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: Some(Intent::Warning),
|
||||
..props
|
||||
})
|
||||
text=html!{"Warning"}
|
||||
intent=Intent::Warning
|
||||
/>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: Some(Intent::Danger),
|
||||
..props
|
||||
})
|
||||
text=html!{"Danger"}
|
||||
intent=Intent::Danger
|
||||
/>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
mod example;
|
||||
|
||||
use crate::ExampleContainer;
|
||||
use example::*;
|
||||
use yew::prelude::*;
|
||||
use yewprint::{Intent, Menu, MenuItem, Switch, H1, H5};
|
||||
|
||||
pub struct ProgressBarDoc {
|
||||
callback: Callback<ExampleProps>,
|
||||
state: ExampleProps,
|
||||
}
|
||||
|
||||
impl Component for ProgressBarDoc {
|
||||
type Message = ExampleProps;
|
||||
type Properties = ();
|
||||
|
||||
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
ProgressBarDoc {
|
||||
callback: link.callback(|x| x),
|
||||
state: ExampleProps {
|
||||
intent: None,
|
||||
animate: false,
|
||||
stripes: 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="docs-title">{"ProgressBar"}</H1>
|
||||
<ExampleContainer
|
||||
source=source
|
||||
props=Some(html! {
|
||||
<ProgressBarProps
|
||||
callback={self.callback.clone()}
|
||||
props=example_props.clone()
|
||||
/>
|
||||
})
|
||||
>
|
||||
<Example with example_props />
|
||||
</ExampleContainer>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
crate::build_example_prop_component! {
|
||||
ProgressBarProps for ExampleProps =>
|
||||
fn view(&self) -> Html {
|
||||
html! {
|
||||
<div>
|
||||
<H5>{"Props"}</H5>
|
||||
<div>
|
||||
<Switch
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
stripes: !props.stripes,
|
||||
..props
|
||||
})
|
||||
checked=self.props.stripes
|
||||
label="Stripes"
|
||||
/>
|
||||
<Switch
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
animate: !props.animate,
|
||||
..props
|
||||
})
|
||||
checked=self.props.animate
|
||||
label="animate"
|
||||
/>
|
||||
<p>{"Select intent:"}</p>
|
||||
<Menu>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: None,
|
||||
..props
|
||||
})
|
||||
text=html!{"None"}
|
||||
/>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: Some(Intent::Primary),
|
||||
..props
|
||||
})
|
||||
text=html!{"Primary"}
|
||||
intent=Intent::Primary
|
||||
/>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: Some(Intent::Success),
|
||||
..props
|
||||
})
|
||||
text=html!{"Success"}
|
||||
intent=Intent::Success
|
||||
/>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: Some(Intent::Warning),
|
||||
..props
|
||||
})
|
||||
text=html!{"Warning"}
|
||||
intent=Intent::Warning
|
||||
/>
|
||||
<MenuItem
|
||||
onclick=self.update_props(|props| ExampleProps {
|
||||
intent: Some(Intent::Danger),
|
||||
..props
|
||||
})
|
||||
text=html!{"Danger"}
|
||||
intent=Intent::Danger
|
||||
/>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,63 +1,63 @@
|
|||
use crate::{ConditionalClass, Intent};
|
||||
use yew::prelude::*;
|
||||
|
||||
pub struct ProgressBar {
|
||||
props: Props,
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Properties)]
|
||||
pub struct Props {
|
||||
#[prop_or_default]
|
||||
pub animate: ConditionalClass,
|
||||
#[prop_or_default]
|
||||
pub stripes: ConditionalClass,
|
||||
#[prop_or_default]
|
||||
pub value: Option<f32>,
|
||||
#[prop_or_default]
|
||||
pub intent: Option<Intent>,
|
||||
}
|
||||
|
||||
impl Component for ProgressBar {
|
||||
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 {
|
||||
let width = if let Some(value) = self.props.value {
|
||||
// NOTE: nightly, issue #44095 for f32::clamp
|
||||
// let percent = ((1000. * value).ceil() / 10.).clamp(0.,100.);
|
||||
let percent = ((1000. * value).ceil() / 10.).max(0.).min(100.);
|
||||
format!("width: {}%;", percent)
|
||||
} else {
|
||||
"".into()
|
||||
};
|
||||
html! {
|
||||
<div
|
||||
class=(
|
||||
"bp3-progress-bar",
|
||||
self.props.intent,
|
||||
(!self.props.animate).map_some("bp3-no-animation"),
|
||||
(!self.props.stripes).map_some("bp3-no-stripes")
|
||||
)
|
||||
>
|
||||
<div class="bp3-progress-meter" style={{width}}/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
use crate::{ConditionalClass, Intent};
|
||||
use yew::prelude::*;
|
||||
|
||||
pub struct ProgressBar {
|
||||
props: Props,
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Properties)]
|
||||
pub struct Props {
|
||||
#[prop_or_default]
|
||||
pub animate: ConditionalClass,
|
||||
#[prop_or_default]
|
||||
pub stripes: ConditionalClass,
|
||||
#[prop_or_default]
|
||||
pub value: Option<f32>,
|
||||
#[prop_or_default]
|
||||
pub intent: Option<Intent>,
|
||||
}
|
||||
|
||||
impl Component for ProgressBar {
|
||||
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 {
|
||||
let width = if let Some(value) = self.props.value {
|
||||
// NOTE: nightly, issue #44095 for f32::clamp
|
||||
// let percent = ((1000. * value).ceil() / 10.).clamp(0.,100.);
|
||||
let percent = ((1000. * value).ceil() / 10.).max(0.).min(100.);
|
||||
format!("width: {}%;", percent)
|
||||
} else {
|
||||
"".into()
|
||||
};
|
||||
html! {
|
||||
<div
|
||||
class=(
|
||||
"bp3-progress-bar",
|
||||
self.props.intent,
|
||||
(!self.props.animate).map_some("bp3-no-animation"),
|
||||
(!self.props.stripes).map_some("bp3-no-stripes")
|
||||
)
|
||||
>
|
||||
<div class="bp3-progress-meter" style={{width}}/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue