patternfly_yew/components/pagination/
simple.rs

1use crate::prelude::*;
2use yew::prelude::*;
3
4/// Properties for [`SimplePagination`].
5#[derive(Debug, PartialEq, Properties)]
6pub struct SimplePaginationProperties {
7    /// The pagination state, created by [`crate::hooks::pagination::use_pagination`].
8    pub pagination: UsePagination,
9
10    /// Choices for number of items per page.
11    #[prop_or(vec![10,25,50])]
12    pub entries_per_page_choices: Vec<usize>,
13
14    /// Total number of items, if known.
15    #[prop_or_default]
16    pub total: Option<usize>,
17
18    /// Position of the pagination control
19    #[prop_or(PaginationPosition::Top)]
20    pub position: PaginationPosition,
21
22    /// Element ID.
23    #[prop_or_default]
24    pub id: Option<AttrValue>,
25
26    /// Additional styles
27    #[prop_or_default]
28    pub style: AttrValue,
29
30    /// Disable the control
31    #[prop_or_default]
32    pub disabled: bool,
33}
34
35/// An opinionated pagination component.
36///
37/// This component provides an opinionated approach to pagination, using the state from
38/// [`crate::hooks::pagination::use_pagination`] and the more basic
39/// [`crate::components::pagination::Pagination`] component.
40///
41/// For an example see [`crate::hooks::pagination::use_pagination`] or the quickstart project.
42#[function_component(SimplePagination)]
43pub fn simple_pagination(props: &SimplePaginationProperties) -> Html {
44    let total = &props.total;
45    let UsePagination {
46        state,
47        onnavigation,
48        onperpagechange,
49    } = props.pagination.clone();
50
51    html!(
52        <Pagination
53            total_entries={*total}
54            offset={(*state).offset()}
55            entries_per_page_choices={props.entries_per_page_choices.clone()}
56            selected_choice={state.control.per_page}
57            onlimit={&onperpagechange}
58            onnavigation={&onnavigation}
59            style={&props.style}
60            position={props.position}
61            id={&props.id}
62            disabled={props.disabled}
63        />
64    )
65}