yew_autocomplete/view/
bulma.rs

1use web_sys::HtmlInputElement;
2use yew::prelude::*;
3use yew::Html;
4
5use crate::render_if;
6
7use super::render_items;
8use super::RenderHtml;
9
10#[function_component(Bulma)]
11pub fn bulma<T: 'static + Clone + PartialEq + RenderHtml>() -> Html {
12    let view_ctx = use_context::<super::Context<T>>().expect("view::Context wasn't provided");
13
14    let items = render_items(&view_ctx, &["dropdown-item"], &["is-active"])
15        .into_iter()
16        .collect::<Vec<_>>();
17    let selected_lis = view_ctx
18        .selected_items
19        .iter()
20        .map(|value| {
21            html! { <li class={classes!("autocomplete-item", "selected")}>{value.render()}</li>}
22        })
23        .collect::<Html>();
24
25    let input_cb = view_ctx.callbacks.on_input.clone();
26    let oninput = move |e: InputEvent| {
27        let input = e.target_dyn_into::<HtmlInputElement>().unwrap();
28        input_cb.emit(input.value());
29    };
30    let onclick = view_ctx.callbacks.resolve.clone();
31
32    html! {
33        <div>
34            {
35                render_if(!view_ctx.selected_items.is_empty(), html!{
36                    <ul class="selected-items">
37                        { selected_lis }
38                    </ul>
39                })
40            }
41            <div class="field">
42                <div class="field has-addons" style="margin-bottom: 0">
43                    <div class="control is-expanded">
44                        <input
45                            class="input"
46                            type="text"
47                            value={view_ctx.value.clone()}
48                            {oninput}
49                            onkeydown={view_ctx.callbacks.on_keydown.clone()}
50                        />
51                    </div>
52                    {
53                        render_if(
54                            !view_ctx.auto,
55                            html! {
56                                <div class="control">
57                                    <input class="button is-primary" type="button" value="Search" {onclick}/>
58                                </div>
59                            }
60                        )
61                    }
62                </div>
63                {
64                    render_if(!view_ctx.items.is_empty(), html!{
65                        <div class="dropdown is-active autocomplete-items">
66                            <div class="dropdown-menu">
67                                <div class="dropdown-content">
68                                    { items }
69                                </div>
70                            </div>
71                        </div>
72                    })
73                }
74            </div>
75        </div>
76    }
77}
yew_autocomplete/view/bulma.rs

yew_autocomplete/view/
bulma.rs
