darth-ui 0.1.2

darth-ui
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

#![cfg(feature = "form")]
use leptos::{leptos_dom::logging::console_warn, *};
use std::collections::HashMap;
use wasm_bindgen::JsCast;
use web_sys::{HtmlFormElement, HtmlInputElement};
pub struct FormBuild {
    class: &'static str,
    submit: fn(HashMap<String, String>, form: HtmlFormElement),
}

impl FormBuild {
    pub fn new() -> Self {
        Self {
            class: "",
            submit: |_, _| {},
        }
    }

    pub fn class(mut self, class: &'static str) -> Self {
        self.class = class;
        self
    }

    pub fn submit(mut self, f: fn(HashMap<String, String>, form: HtmlFormElement)) -> Self {
        self.submit = f;
        self
    }
}

type Hash = (
    ReadSignal<HashMap<String, String>>,
    WriteSignal<HashMap<String, String>>,
);

#[component]
pub fn Form(props: FormBuild, children: Children) -> impl IntoView {
    let (read_hash, write_hash): Hash = create_signal(HashMap::new());

    view! {
       <form class=props.class on:submit=move |ev| {
         ev.prevent_default();
         let target = ev.target().unwrap();
         let form: HtmlFormElement = target.dyn_into().expect("Failed to cast target to HtmlFormElement");
         let collection = form.get_elements_by_tag_name("input");
         for i in 0..collection.length() {
            let element = collection.item(i).expect("Failed to get item from HtmlCollection");
            let input: HtmlInputElement = element.dyn_into().expect("Failed to cast Element to HtmlInputElement");
            write_hash.update(|old| {
               let name = input.name();
               let value = input.value();
               old.insert(name, value);
            })
         }
         let submit = props.submit;
         submit(read_hash.get(), form);
         console_warn(format!("{:#?}", read_hash.get()).as_str())
       }>
        {children()}
       </form>
    }
}