smart-house-web: leptos эсперименты

smart-house-web/frontend/src/main.rs

@@ -1,100 +1,88 @@
 #![allow(non_snake_case)]
-use leptos::ev::SubmitEvent;
 use leptos::prelude::*;
 
 #[component]
 fn App() -> impl IntoView {
-    view! {
+    let (value, set_value) = signal(0);
-        <h2>"Controlled Component"</h2>
+    let is_odd = move || value.get() & 1 == 1;
-        <ControlledComponent/>
+    let odd_text = move || if is_odd() { Some("How odd!") } else { None };
-        <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());
 
     view! {
-        <input type="text"
+        <h1>"Control Flow"</h1>
-            // 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());
-            }
 
-            // the `prop:` syntax lets you update a DOM property,
+        // Simple UI to update and show a value
-            // rather than an attribute.
+        <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
         //
-            // IMPORTANT: the `value` *attribute* only sets the
+        // a. An "if" expression in a function
-            // initial value, until you have made a change.
+        //    This will simply re-render every time the value
-            // The `value` *property* sets the current value.
+        //    changes, which makes it good for lightweight UI
-            // This is a quirk of the DOM; I didn't invent it.
+        <p>
-            // Other frameworks gloss this over; I think it's
+            {move || if is_odd() {
-            // more important to give you access to the browser
+                "Odd"
-            // as it really works.
+            } else {
-            //
+                "Even"
-            // tl;dr: use prop:value for form inputs
+            }}
-            prop:value=name
+        </p>
-        />
+
-        <p>"Name is: " {name}</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()
+            }
+            _ => 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)
 }