dioxus-tw-components 0.2.11

Components made 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

use crate::components::{button::*, icon::*};
use dioxus::dioxus_core::AttributeValue;
use dioxus::prelude::*;

#[derive(Clone, PartialEq, Props)]
pub struct PaginationProps {
    #[props(extends = div, extends = GlobalAttributes)]
    attributes: Vec<Attribute>,

    #[props(optional, default)]
    pub class: ReadSignal<String>,
    #[props(into)]
    pub data_size: ReadSignal<usize>,
    #[props(into)]
    pub page_size: ReadSignal<usize>,
    pub page_number: Signal<usize>,
}

#[component]
pub fn Pagination(mut props: PaginationProps) -> Element {
    let default_classes = "pagination";
    crate::setup_class_attribute(&mut props.attributes, default_classes);

    let max_pages = use_memo(move || (*props.data_size.read() / *props.page_size.read()) + 1);

    let data_variant_attribute = match props
        .attributes
        .iter()
        .find(|attr| attr.name == "data-variant")
    {
        Some(attribute) => {
            if let AttributeValue::Text(ref value) = attribute.value {
                value.clone()
            } else {
                "none".to_string()
            }
        }
        _ => "none".to_string(),
    };
    let data_color_attribute = match props
        .attributes
        .iter()
        .find(|attr| attr.name == "data-style")
    {
        Some(attribute) => {
            if let AttributeValue::Text(ref value) = attribute.value {
                value.clone()
            } else {
                "none".to_string()
            }
        }
        _ => "none".to_string(),
    };

    let prev_dots = use_memo(move || *props.page_number.read() > 2);
    let next_dots =
        use_memo(move || *props.page_number.read() <= max_pages.read().checked_sub(2).unwrap_or(0));

    rsx! {
        div { class: format!("{} {}", default_classes, props.class),
            ..props.attributes,
            Button {
                class: format!("pagination-nav-button {}", props.class),
                "data-variant": data_variant_attribute.clone(),
                "data-style": data_color_attribute.clone(),
                disabled: *props.page_number.read() == 1,
                onclick: move |_event: MouseEvent| {
                    let value = *props.page_number.peek();
                    props.page_number.set(value - 1);
                },
                Icon { style: "font-family: 'Material Symbols Rounded'; user-select: none; font-size: 1.5rem;", icon: Icons::ArrowLeft }
            }
            if *prev_dots.read() {
                Button {
                    class: props.class,
                    disabled: *props.page_number.read() == 1,
                    "data-variant": data_variant_attribute.clone(),
                    "data-style": data_color_attribute.clone(),
                    onclick: move |_event: MouseEvent| {
                        props.page_number.set(1);
                    },
                    "1"
                }
                p { class: "pagination-dots", "..." }
            }
            for page in (std::cmp::max(1_isize, *props.page_number.read() as isize - 1)
                as usize)..=std::cmp::min(*max_pages.read(), *props.page_number.read() + 1)
            {
                Button {
                    class: props.class,
                    "data-variant": data_variant_attribute.clone(),
                    "data-style": data_color_attribute.clone(),
                    disabled: *props.page_number.read() == page,
                    onclick: move |_event: MouseEvent| {
                        props.page_number.set(page);
                    },
                    "{page}"
                }
            }
            if *next_dots.read() {
                p { class: "pagination-dots", "..." }
                Button {
                    class: props.class,
                    "data-variant": data_variant_attribute.clone(),
                    "data-style": data_color_attribute.clone(),
                    disabled: *props.page_number.read() == *max_pages.read(),
                    onclick: move |_event: MouseEvent| {
                        props.page_number.set(*max_pages.peek());
                    },
                    "{*max_pages.read()}"
                }
            }
            Button {
                class: format!("pagination-nav-button {}", props.class),
                "data-variant": data_variant_attribute.clone(),
                "data-style": data_color_attribute.clone(),
                disabled: *props.page_number.read() == *max_pages.read(),
                onclick: move |_event: MouseEvent| {
                    let value = *props.page_number.peek();
                    props.page_number.set(value + 1);
                },
                Icon { style: "font-family: 'Material Symbols Rounded'; user-select: none; font-size: 1.5rem;", icon: Icons::ArrowRight }
            }
        }
    }
}