feat(Table): Add clickable rows (#48)

Cargo.toml

@@ -35,7 +35,8 @@ features = [
 
 [patch.crates-io]
 # patternfly-yew = { path = "../patternfly-test-minimal/patternfly-yew" }
-patternfly-yew = { git = "https://github.com/patternfly-yew/patternfly-yew", rev = "74e20e4429248cbc3b2c8085b9a4f8d9002fe456" } # FIXME: awaiting release
+# patternfly-yew = { git = "https://github.com/patternfly-yew/patternfly-yew", rev = "74e20e4429248cbc3b2c8085b9a4f8d9002fe456" } # FIXME: awaiting release
+patternfly-yew = { git = "https://github.com/patternfly-yew/patternfly-yew", rev = "c121c5227bb209a5a502e571ae2cb71d7e52d4b6" } # FIXME: awaiting release
 #yew-nested-router = { path = "../yew-nested-router" }
 #yew-more-hooks = { git = "https://github.com/ctron/yew-more-hooks", rev = "f535bb2e7b227aac7010035215c11d4aeae6cb62" } # FIXME: awaiting release
 #yew-more-hooks = { path = "../yew-more-hooks" }

src/components/pagination/mod.rs

@@ -16,6 +16,7 @@ pub enum Columns {
     Hex,
 }
 
+#[derive(Clone)]
 struct ExampleEntry(usize);
 
 impl TableEntryRenderer<Columns> for ExampleEntry {

src/components/table/mod.rs

@@ -109,6 +109,7 @@ pub fn example() -> Html {
     let example9 = example!("Table (expandable)" => "table.9.example");
     let example10 = example!("Table (expandable, columns)" => "table.10.example");
     let example11 = example!("Table (sortable)" => "table.11.example");
+    let example12 = example!("Table (clickable rows)" => "table.12.example");
 
     html! {
         <>
@@ -124,6 +125,7 @@ pub fn example() -> Html {
                 {example9}
                 {example10}
                 {example11}
+                {example12}
             </ExamplePage>
         </>
     }

src/components/table/table.12.example

@@ -0,0 +1,44 @@
+{
+    #[function_component(Example)]
+    fn example() -> Html {
+        let entries = use_memo((), |()| {
+            vec![
+                ExampleEntry { foo: "bar".into() },
+                ExampleEntry {
+                    foo: "Much, much longer foo".into(),
+                },
+            ]
+        });
+
+        let (entries, _) = use_table_data(MemoizedTableModel::new(entries));
+
+        let header = html_nested! {
+            <TableHeader<Columns>>
+                <TableColumn<Columns> label="foo" index={Columns::First} />
+                <TableColumn<Columns> label="bar" index={Columns::Second} />
+                <TableColumn<Columns> label="baz" index={Columns::Third} />
+            </TableHeader<Columns>>
+        };
+
+        let selected = use_state(|| None);
+
+        let onrowclick = use_callback(selected.clone(), |entry: ExampleEntry, selected| {
+            selected.set(Some(entry.clone()))
+        });
+        let row_selected = use_callback(selected.clone(), |entry: ExampleEntry, selected| {
+            **selected == Some(entry)
+        });
+
+        html! (
+            <Table<Columns, UseTableData<Columns, MemoizedTableModel<ExampleEntry>>>
+                caption="Table caption"
+                {header}
+                {entries}
+                {onrowclick}
+                {row_selected}
+            />
+        )
+    }
+
+    html!(<Example/>)
+}

src/components/table/table.6.example

@@ -1,6 +1,6 @@
 {
 
-    #[derive(PartialEq)]
+    #[derive(Clone, PartialEq)]
     pub struct Centered(pub ExampleEntry);
 
     impl TableEntryRenderer<Columns> for Centered {
@@ -44,4 +44,4 @@
     }
 
     html!(<Example/>)
-}
+}

src/components/toggle_group/mod.rs

@@ -1,6 +1,6 @@
 use crate::{example, example::ExamplePage};
-use yew::prelude::*;
 use patternfly_yew::prelude::*;
+use yew::prelude::*;
 
 #[function_component(ToggleGroupExample)]
 pub fn toast() -> Html {