dioxus-nox-tag-input 0.13.2

Headless tag/multi-select input primitive for Dioxus
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

use crate::hook::TagInputState;
use crate::tag::TagLike;
use dioxus::prelude::*;

/// Props for [`TagPopover`].
#[derive(Props, Clone, PartialEq)]
pub struct TagPopoverProps<T: TagLike + 'static> {
    pub index: usize,
    #[props(extends = GlobalAttributes)]
    pub attributes: Vec<Attribute>,
    pub children: Element,
    #[props(default)]
    _phantom: std::marker::PhantomData<T>,
}

/// Popover container for a tag pill. Conditionally renders when `popover_pill` matches the index.
///
/// Renders `<div role="dialog">` with `data-slot="tag-popover"`, `data-state="open"`.
pub fn TagPopover<T: TagLike>(props: TagPopoverProps<T>) -> Element {
    let ctx = use_context::<TagInputState<T>>();
    let is_open = *ctx.popover_pill.read() == Some(props.index);

    if !is_open {
        return rsx! {};
    }

    let popover_id = format!("dti-popover-{}", props.index);

    rsx! {
        div {
            role: "dialog",
            id: "{popover_id}",
            aria_label: "Tag actions",
            aria_modal: "false",
            "data-slot": "tag-popover",
            "data-state": "open",
            ..props.attributes,
            {props.children}
        }
    }
}