smart-house-web: leptos эсперименты
This commit is contained in:
@@ -1,100 +1,88 @@
|
||||
#![allow(non_snake_case)]
|
||||
use leptos::ev::SubmitEvent;
|
||||
use leptos::prelude::*;
|
||||
|
||||
#[component]
|
||||
fn App() -> impl IntoView {
|
||||
view! {
|
||||
<h2>"Controlled Component"</h2>
|
||||
<ControlledComponent/>
|
||||
<h2>"Uncontrolled Component"</h2>
|
||||
<UncontrolledComponent/>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn ControlledComponent() -> impl IntoView {
|
||||
// create a signal to hold the value
|
||||
let (name, set_name) = signal("Controlled".to_string());
|
||||
let (value, set_value) = signal(0);
|
||||
let is_odd = move || value.get() & 1 == 1;
|
||||
let odd_text = move || if is_odd() { Some("How odd!") } else { None };
|
||||
|
||||
view! {
|
||||
<input type="text"
|
||||
// fire an event whenever the input changes
|
||||
// adding :target after the event gives us access to
|
||||
// a correctly-typed element at ev.target()
|
||||
on:input:target=move |ev| {
|
||||
set_name.set(ev.target().value());
|
||||
<h1>"Control Flow"</h1>
|
||||
|
||||
// Simple UI to update and show a value
|
||||
<button on:click=move |_| *set_value.write() += 1>
|
||||
"+1"
|
||||
</button>
|
||||
<p>"Value is: " {value}</p>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h2><code>"Option<T>"</code></h2>
|
||||
// For any `T` that implements `IntoView`,
|
||||
// so does `Option<T>`
|
||||
|
||||
<p>{odd_text}</p>
|
||||
// This means you can use `Option` methods on it
|
||||
<p>{move || odd_text().map(|text| text.len())}</p>
|
||||
|
||||
<h2>"Conditional Logic"</h2>
|
||||
// You can do dynamic conditional if-then-else
|
||||
// logic in several ways
|
||||
//
|
||||
// a. An "if" expression in a function
|
||||
// This will simply re-render every time the value
|
||||
// changes, which makes it good for lightweight UI
|
||||
<p>
|
||||
{move || if is_odd() {
|
||||
"Odd"
|
||||
} else {
|
||||
"Even"
|
||||
}}
|
||||
</p>
|
||||
|
||||
// b. Toggling some kind of class
|
||||
// This is smart for an element that's going to
|
||||
// toggled often, because it doesn't destroy
|
||||
// it in between states
|
||||
// (you can find the `hidden` class in `index.html`)
|
||||
<p class:hidden=is_odd>"Appears if even."</p>
|
||||
|
||||
// c. The <Show/> component
|
||||
// This only renders the fallback and the child
|
||||
// once, lazily, and toggles between them when
|
||||
// needed. This makes it more efficient in many cases
|
||||
// than a {move || if ...} block
|
||||
<Show when=is_odd
|
||||
fallback=|| view! { <p>"Even steven"</p> }
|
||||
>
|
||||
<p>"Oddment"</p>
|
||||
</Show>
|
||||
|
||||
// d. Because `bool::then()` converts a `bool` to
|
||||
// `Option`, you can use it to create a show/hide toggled
|
||||
{move || is_odd().then(|| view! { <p>"Oddity!"</p> })}
|
||||
|
||||
<h2>"Converting between Types"</h2>
|
||||
// e. Note: if branches return different types,
|
||||
// you can convert between them with
|
||||
// `.into_any()` or using the `Either` enums
|
||||
// (`Either`, `EitherOf3`, `EitherOf4`, etc.)
|
||||
{move || match is_odd() {
|
||||
true if value.get() == 1 => {
|
||||
// <pre> returns HtmlElement<Pre>
|
||||
view! { <pre>"One"</pre> }.into_any()
|
||||
},
|
||||
false if value.get() == 2 => {
|
||||
// <p> returns HtmlElement<P>
|
||||
// so we convert into a more generic type
|
||||
view! { <p>"Two"</p> }.into_any()
|
||||
}
|
||||
|
||||
// the `prop:` syntax lets you update a DOM property,
|
||||
// rather than an attribute.
|
||||
//
|
||||
// IMPORTANT: the `value` *attribute* only sets the
|
||||
// initial value, until you have made a change.
|
||||
// The `value` *property* sets the current value.
|
||||
// This is a quirk of the DOM; I didn't invent it.
|
||||
// Other frameworks gloss this over; I think it's
|
||||
// more important to give you access to the browser
|
||||
// as it really works.
|
||||
//
|
||||
// tl;dr: use prop:value for form inputs
|
||||
prop:value=name
|
||||
/>
|
||||
<p>"Name is: " {name}</p>
|
||||
_ => view! { <textarea>{value.get()}</textarea> }.into_any()
|
||||
}}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn UncontrolledComponent() -> impl IntoView {
|
||||
// import the type for <input>
|
||||
use leptos::html::Input;
|
||||
|
||||
let (name, set_name) = signal("Uncontrolled".to_string());
|
||||
|
||||
// we'll use a NodeRef to store a reference to the input element
|
||||
// this will be filled when the element is created
|
||||
let input_element: NodeRef<Input> = NodeRef::new();
|
||||
|
||||
// fires when the form `submit` event happens
|
||||
// this will store the value of the <input> in our signal
|
||||
let on_submit = move |ev: SubmitEvent| {
|
||||
// stop the page from reloading!
|
||||
ev.prevent_default();
|
||||
|
||||
// here, we'll extract the value from the input
|
||||
let value = input_element
|
||||
.get()
|
||||
// event handlers can only fire after the view
|
||||
// is mounted to the DOM, so the `NodeRef` will be `Some`
|
||||
.expect("<input> to exist")
|
||||
// `NodeRef` implements `Deref` for the DOM element type
|
||||
// this means we can call`HtmlInputElement::value()`
|
||||
// to get the current value of the input
|
||||
.value();
|
||||
set_name.set(value);
|
||||
};
|
||||
|
||||
view! {
|
||||
<form on:submit=on_submit>
|
||||
<input type="text"
|
||||
// here, we use the `value` *attribute* to set only
|
||||
// the initial value, letting the browser maintain
|
||||
// the state after that
|
||||
value=name
|
||||
|
||||
// store a reference to this input in `input_element`
|
||||
node_ref=input_element
|
||||
/>
|
||||
<input type="submit" value="Submit"/>
|
||||
</form>
|
||||
<p>"Name is: " {name}</p>
|
||||
}
|
||||
}
|
||||
|
||||
// This `main` function is the entry point into the app
|
||||
// It just mounts our component to the <body>
|
||||
// Because we defined it as `fn App`, we can now use it in a
|
||||
// template as <App/>
|
||||
fn main() {
|
||||
leptos::mount::mount_to_body(App)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user