updated svg example

Author: maccesch

examples/custom_renderers_svg/Cargo.toml

@@ -10,7 +10,6 @@ chrono = { version = "0.4", features=["serde"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
-serde = "1"
 async-trait = "0.1"
 
 [dev-dependencies]

examples/custom_renderers_svg/src/main.rs

@@ -2,24 +2,13 @@ mod renderers;
 
 use renderers::*;
 
-use async_trait::async_trait;
 use leptos::*;
 use leptos_struct_table::*;
-use serde::{Deserialize, Serialize};
 
 // This generates the component BookTable
-#[derive(TableComponent, Serialize, Deserialize, Debug, Clone, Default, PartialEq)]
-#[table(
-    row_renderer = "SvgRowRenderer",
-    head_row_renderer = "g",
-    head_cell_renderer = "SvgHeadCellRenderer",
-    thead_renderer = "g",
-    tbody_renderer = "g",
-    tag = "g"
-)]
+#[derive(TableRow, Clone)]
+#[table(head_cell_renderer = "SvgHeadCellRenderer", impl_vec_data_provider)]
 pub struct Form {
-    #[table(key, skip)]
-    pub id: u32,
     #[table(renderer = "SvgTextCellRenderer")]
     pub name: String,
     #[table(renderer = "SvgPathCellRenderer")]
@@ -31,30 +20,32 @@ fn main() {
     console_error_panic_hook::set_once();
 
     mount_to_body(|| {
-        let items = create_rw_signal(
-
-            vec![
+        let rows = vec![
                 Form {
-                    id: 1,
                     name: "Heart".to_string(),
                     path: "M12.82 5.58l-.82.822l-.824-.824a5.375 5.375 0 1 0-7.601 7.602l7.895 7.895a.75.75 0 0 0 1.06 0l7.902-7.897a5.376 5.376 0 0 0-.001-7.599a5.38 5.38 0 0 0-7.611 0zm6.548 6.54L12 19.485L4.635 12.12a3.875 3.875 0 1 1 5.48-5.48l1.358 1.357a.75.75 0 0 0 1.073-.012L13.88 6.64a3.88 3.88 0 0 1 5.487 5.48z".to_string(),
                 },
                 Form {
-                    id: 2,
                     name: "Bell".to_string(),
                     path: "M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.249 1.249 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.251 1.251 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5zM13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145l.007-.147zM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.003-.225A5.988 5.988 0 0 0 12 3.496z".to_string(),
                 },
                 Form {
-                    id: 3,
                     name: "Star".to_string(),
                     path: "M10.788 3.102c.495-1.003 1.926-1.003 2.421 0l2.358 4.778l5.273.766c1.107.16 1.549 1.522.748 2.303l-3.816 3.719l.901 5.25c.19 1.104-.968 1.945-1.959 1.424l-4.716-2.48l-4.715 2.48c-.99.52-2.148-.32-1.96-1.423l.901-5.251l-3.815-3.72c-.801-.78-.359-2.141.748-2.302L8.43 7.88l2.358-4.778zm1.21.937L9.74 8.614a1.35 1.35 0 0 1-1.016.739l-5.05.734l3.654 3.562c.318.31.463.757.388 1.195l-.862 5.029l4.516-2.375a1.35 1.35 0 0 1 1.257 0l4.516 2.375l-.862-5.03a1.35 1.35 0 0 1 .388-1.194l3.654-3.562l-5.05-.734a1.35 1.35 0 0 1-1.016-.739L11.998 4.04z".to_string(),
                 }
-            ],
-        );
+            ];
 
         view! {
             <svg style="font-family: sans-serif;">
-                <FormTable items=items/>
+                <TableContent
+                    rows
+                    row_renderer=SvgRowRenderer
+                    loading_row_renderer=SvgLoadingRowRenderer
+                    error_row_renderer=SvgErrorRowRenderer
+                    thead_row_renderer=GRenderer
+                    thead_renderer=GRenderer
+                    tbody_renderer=GRenderer
+                />
             </svg>
         }
     })

examples/custom_renderers_svg/src/renderers.rs

@@ -4,39 +4,79 @@ use leptos_struct_table::*;
 const ROW_HEIGHT: usize = 30;
 const ROW_HEIGHT_HALF: usize = ROW_HEIGHT / 2;
 
-#[allow(unused_variables)]
-#[component]
-pub fn SvgRowRenderer<F, K>(
-    #[prop(into)] class: MaybeSignal<String>,
-    #[prop(into)] key: K,
+wrapper_render_fn!(
+    /// g
+    GRenderer,
+    g,
+);
+
+#[allow(unused_variables, non_snake_case)]
+pub fn SvgRowRenderer<Row>(
+    class: Signal<String>,
+    row: Row,
     index: usize,
-    #[prop(into)] selected: Signal<bool>,
-    on_click: F,
-    children: Children,
+    selected: Signal<bool>,
+    on_select: EventHandler<web_sys::MouseEvent>,
+    on_change: EventHandler<ChangeEvent<Row>>,
 ) -> impl IntoView
 where
-    F: Fn(TableRowEvent<K>) + 'static,
-    K: Clone + 'static,
+    Row: RowRenderer + Clone + 'static,
 {
     let transform = format!("translate(0, {})", (index + 1) * ROW_HEIGHT);
 
     view! {
-        <g class=class
+        <g
+            class=class
             transform=transform
-            on:click=move |mouse_event| on_click(TableRowEvent {
-                key: key.clone(),
-                index,
-                mouse_event,
-            })
+            on:click=move |mouse_event| on_select.run(mouse_event)
         >
-            <line x1="5" y1="0" x2="150" y2="0" stroke-width="1px" stroke="black" opacity="0.1" />
-            {children()}
+            <line
+                x1="5"
+                y1="0"
+                x2="150"
+                y2="0"
+                stroke-width="1px"
+                stroke="black"
+                opacity="0.1"
+            ></line>
+            {row.render_row(index, on_change)}
+        </g>
+    }
+}
+
+#[allow(non_snake_case)]
+pub fn SvgErrorRowRenderer(err: String, index: usize, _col_count: usize) -> impl IntoView {
+    let transform = transform_from_index(index, 0);
+
+    view! {
+        <g transform=transform>
+            <text x="0" y=ROW_HEIGHT_HALF dominant-baseline="central">
+                {err}
+            </text>
+        </g>
+    }
+}
+
+#[allow(non_snake_case)]
+pub fn SvgLoadingRowRenderer(
+    class: Signal<String>,
+    inner_class: Signal<String>,
+    index: usize,
+    _col_count: usize,
+) -> impl IntoView {
+    let transform = transform_from_index(index, 0);
+
+    view! {
+        <g class=class transform=transform>
+            <text x="0" y=ROW_HEIGHT_HALF class=inner_class dominant-baseline="central">
+                Loading...
+            </text>
         </g>
     }
 }
 
 #[component]
-pub fn SvgHeadCellRenderer<C, F>(
+pub fn SvgHeadCellRenderer<F>(
     /// The class attribute for the head element. Generated by the classes provider.
     #[prop(into)]
     class: Signal<String>,
@@ -45,8 +85,6 @@ pub fn SvgHeadCellRenderer<C, F>(
     inner_class: String,
     /// The index of the column. Starts at 0 for the first column. The order of the columns is the same as the order of the fields in the struct.
     index: usize,
-    /// The column enum variant. It is auto generated from the struct.
-    column: C,
     /// The sort priority of the column. `None` if the column is not sorted. `0` means the column is the primary sort column.
     #[prop(into)]
     sort_priority: Signal<Option<usize>>,
@@ -58,8 +96,7 @@ pub fn SvgHeadCellRenderer<C, F>(
     children: Children,
 ) -> impl IntoView
 where
-    F: Fn(TableHeadEvent<C>) + 'static,
-    C: 'static + Copy,
+    F: Fn(TableHeadEvent) + 'static,
 {
     let style = move || {
         let sort = match sort_direction() {
@@ -79,13 +116,14 @@ where
     let transform = transform_from_index(index, 0);
 
     view! {
-        <g class=class
+        <g
+            class=class
             transform=transform
             on:click=move |mouse_event| on_click(TableHeadEvent {
                 index,
-                column,
                 mouse_event,
             })
+
             style=style
         >
             <text x="0" y=ROW_HEIGHT_HALF class=inner_class dominant-baseline="central">
@@ -98,26 +136,28 @@ where
 #[component]
 #[allow(unused_variables)]
 pub fn SvgTextCellRenderer<T, F>(
-    #[prop(into)] class: MaybeSignal<String>,
+    class: String,
     #[prop(into)] value: MaybeSignal<T>,
     on_change: F,
     index: usize,
 ) -> impl IntoView
 where
     T: IntoView + Clone + 'static,
-    F: Fn(String) + 'static,
+    F: Fn(T) + 'static,
 {
     let x = x_from_index(index);
 
     view! {
-        <text x=x y=ROW_HEIGHT_HALF class=class dominant-baseline="central">{value}</text>
+        <text x=x y=ROW_HEIGHT_HALF class=class dominant-baseline="central">
+            {value}
+        </text>
     }
 }
 
 #[component]
 #[allow(unused_variables)]
 pub fn SvgPathCellRenderer<F>(
-    #[prop(into)] class: MaybeSignal<String>,
+    #[prop(into)] class: String,
     #[prop(into)] value: MaybeSignal<String>,
     on_change: F,
     index: usize,
@@ -127,9 +167,7 @@ where
 {
     let transform = transform_from_index(index, 3);
 
-    view! {
-        <path transform=transform class=class d=value />
-    }
+    view! { <path transform=transform class=class d=value></path> }
 }
 
 fn transform_from_index(index: usize, y: usize) -> String {

examples/editable/Cargo.toml

@@ -10,7 +10,6 @@ chrono = { version = "0.4", features=["serde"] }
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
-serde = "1"
 async-trait = "0.1"
 
 [dev-dependencies]

examples/editable/src/main.rs

@@ -4,35 +4,40 @@ mod tailwind;
 use crate::renderer::*;
 use async_trait::async_trait;
 use chrono::NaiveDate;
-use leptos::logging::log;
 use leptos::*;
 use leptos_struct_table::*;
-use serde::{Deserialize, Serialize};
+use std::ops::Range;
 use tailwind::TailwindClassesPreset;
 
 // This generates the component BookTable
-#[derive(TableComponent, Serialize, Deserialize, Debug, Clone, Default, PartialEq)]
+#[derive(TableRow, Clone, Debug)]
 #[table(classes_provider = "TailwindClassesPreset")]
 pub struct Book {
-    #[table(key)]
     pub id: u32,
     #[table(renderer = "InputCellRenderer")]
     pub title: String,
     #[table(renderer = "InputCellRenderer")]
     pub author: String,
-    #[table(
-        cell_class = "text-red-600 dark:text-red-400",
-        head_class = "text-red-700 dark:text-red-300"
-    )]
     pub publish_date: NaiveDate,
 }
 
+#[async_trait(?Send)]
+impl TableDataProvider<Book> for RwSignal<Vec<Book>> {
+    async fn get_rows(&self, range: Range<usize>) -> Result<(Vec<Book>, Range<usize>), String> {
+        Ok((self.get_untracked()[range.clone()].to_vec(), range))
+    }
+
+    async fn row_count(&self) -> Option<usize> {
+        Some(self.get_untracked().len())
+    }
+}
+
 fn main() {
     _ = console_log::init_with_level(log::Level::Debug);
     console_error_panic_hook::set_once();
 
     mount_to_body(|| {
-        let items = create_rw_signal(vec![
+        let rows = create_rw_signal(vec![
             Book {
                 id: 1,
                 title: "The Great Gatsby".to_string(),
@@ -59,28 +64,20 @@ fn main() {
             },
         ]);
 
-        let on_change = move |evt: TableChangeEvent<Book, BookColumnName, BookColumnValue>| {
-            items.update(|items| {
-                items[evt.row_index] = match evt.new_value {
-                    BookColumnValue::Author(author) => Book {
-                        author,
-                        ..evt.old_row
-                    },
-                    BookColumnValue::Title(title) => Book {
-                        title,
-                        ..evt.old_row
-                    },
-                    _ => unreachable!(),
-                };
+        let on_change = move |evt: ChangeEvent<Book>| {
+            rows.update(|rows| {
+                rows[evt.row_index] = evt.changed_row;
             });
         };
 
         view! {
             <div class="rounded-md overflow-clip m-10 border dark:border-gray-700 w-[50%]".to_string()>
-                <BookTable class="mb-[-1px]".to_string() items=items on_change=on_change/>
+                <table class="text-sm text-left text-gray-500 dark:text-gray-400 mb-[-1px]">
+                    <TableContent rows on_change/>
+                </table>
             </div>
 
-            <pre>{move || format!("{:#?}", items())}</pre>
+            <pre>{move || format!("{:#?}", rows())}</pre>
         }
     })
 }

examples/editable/src/renderer.rs

@@ -2,10 +2,10 @@ use leptos::*;
 
 /// A renderer that shows an <input> tag and emits the `on_change` event when the <input> is changed.
 #[component]
+#[allow(unused_variables)]
 pub fn InputCellRenderer<F>(
     /// The class attribute for the cell element. Generated by the classes provider.
-    #[prop(into)]
-    class: MaybeSignal<String>,
+    class: String,
     /// The value to display.
     #[prop(into)]
     value: MaybeSignal<String>,