patternfly-yew 0.7.4

PatternFly 5 components for Yew
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

use super::column::TableColumn;
use crate::core::Order;
use std::fmt::Debug;
use yew::prelude::*;

#[derive(Clone, Debug, PartialEq, Copy)]
pub struct TableHeaderSortBy<K>
where
    K: Clone + Eq,
{
    pub index: K,
    pub order: Order,
}

impl<K> TableHeaderSortBy<K>
where
    K: Clone + Eq,
{
    pub fn ascending(index: K) -> Self {
        Self {
            index,
            order: Order::Ascending,
        }
    }

    pub fn descending(index: K) -> Self {
        Self {
            index,
            order: Order::Descending,
        }
    }
}

#[derive(Clone, Debug, PartialEq)]
pub struct TableHeaderContext<K>
where
    K: Clone + Eq,
{
    pub sortby: Option<TableHeaderSortBy<K>>,
    pub onsort: Callback<TableHeaderSortBy<K>>,
}

/// Properties for [`TableHeader`]
#[derive(Debug, PartialEq, Clone, Properties)]
pub struct TableHeaderProperties<K>
where
    K: Clone + Eq + 'static,
{
    #[prop_or_default]
    pub sticky: bool,
    #[prop_or_default]
    pub children: ChildrenWithProps<TableColumn<K>>,
    #[prop_or_default]
    pub(crate) expandable: bool,
    #[prop_or_default]
    pub hide_actions: bool,
}

/// The Table Header component.
///
/// ## Properties
///
/// Defined by [`TableHeaderProperties`].
#[function_component(TableHeader)]
pub fn table_header<K>(props: &TableHeaderProperties<K>) -> Html
where
    K: Clone + Eq + 'static,
{
    let sortby: UseStateHandle<Option<TableHeaderSortBy<K>>> = use_state_eq(|| None);
    let onsort = use_callback(sortby.clone(), |val: TableHeaderSortBy<K>, sortby| {
        sortby.set(Some(val));
    });

    let table_header_context = TableHeaderContext {
        onsort,
        sortby: (*sortby).clone(),
    };

    html! (
        <thead class="pf-v6-c-table__thead">
            <tr class="pf-v6-c-table__tr" role="row">
                if props.expandable {
                    <td class="pf-v6-c-table__td pf-v6-c-table__toggle" role="cell" />
                }
                <ContextProvider<TableHeaderContext<K>>
                    context={table_header_context}
                >
                    { for props.children.iter() }
                </ContextProvider<TableHeaderContext<K>>>
                if !props.hide_actions {
                    <td class="pf-v6-c-table__td" />
                }
            </tr>
        </thead>
    )
}