fixed svg example

maccesch · maccesch · commit 541c40948d48 · 2024-02-22T21:42:14.000Z
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -29,11 +29,23 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        example: [ bootstrap, custom_renderers_svg, custom_row_renderer, editable, generic, getter, paginated_rest_datasource, pagination, selectable, simple, tailwind ]
+        example:
+          - bootstrap
+          - custom_renderers_svg
+          - custom_row_renderer
+          - editable
+          - generic
+          - getter
+          - paginated_rest_datasource
+          - pagination
+          - selectable
+          - serverfn_sqlx
+          - simple
+          - tailwind
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/rust_toolchain/
-      - name: Run example ${{ matrix.example }}
+      - name: Build example ${{ matrix.example }}
         run: |
           cd ${{ github.workspace }}/examples/${{ matrix.example }}/
           cargo build
diff --git a/examples/custom_renderers_svg/src/main.rs b/examples/custom_renderers_svg/src/main.rs
@@ -21,19 +21,19 @@ fn main() {
 
     mount_to_body(|| {
         let rows = vec![
-                Form {
-                    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 {
-                    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 {
-                    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(),
-                }
-            ];
+            Form {
+                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 {
+                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 {
+                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;">
@@ -44,7 +44,7 @@ fn main() {
                     error_row_renderer=SvgErrorRowRenderer
                     thead_row_renderer=GRenderer
                     thead_renderer=GRenderer
-                    tbody_renderer=GRenderer
+                    tbody_renderer=SvgTbodyRenderer
                 />
             </svg>
         }
diff --git a/examples/custom_renderers_svg/src/renderers.rs b/examples/custom_renderers_svg/src/renderers.rs
@@ -1,3 +1,5 @@
+use leptos::html::AnyElement;
+use leptos::svg::G;
 use leptos::*;
 use leptos_struct_table::*;
 
@@ -10,6 +12,18 @@ wrapper_render_fn!(
     g,
 );
 
+#[allow(non_snake_case)]
+pub fn SvgTbodyRenderer(
+    content: Fragment,
+    class: Signal<String>,
+    node_ref: NodeRef<AnyElement>,
+) -> impl IntoView {
+    let tbody_ref = create_node_ref::<G>();
+    tbody_ref.on_load(move |e| node_ref.load(&e.into_any()));
+
+    view! { <g class=class node_ref=tbody_ref>{content}</g> }
+}
+
 #[allow(unused_variables, non_snake_case)]
 pub fn SvgRowRenderer<Row>(
     class: Signal<String>,
@@ -19,10 +33,10 @@ pub fn SvgRowRenderer<Row>(
     on_select: EventHandler<web_sys::MouseEvent>,
     on_change: EventHandler<ChangeEvent<Row>>,
 ) -> impl IntoView
-where
-    Row: TableRow + Clone + 'static,
+    where
+        Row: TableRow + Clone + 'static,
 {
-    let transform = format!("translate(0, {})", (index + 1) * ROW_HEIGHT);
+    let transform = y_transform_from_index(index);
 
     view! {
         <g
@@ -44,9 +58,13 @@ where
     }
 }
 
+fn y_transform_from_index(index: usize) -> String {
+    format!("translate(0, {})", (index + 1) * ROW_HEIGHT)
+}
+
 #[allow(non_snake_case)]
 pub fn SvgErrorRowRenderer(err: String, index: usize, _col_count: usize) -> impl IntoView {
-    let transform = transform_from_index(index, 0);
+    let transform = y_transform_from_index(index);
 
     view! {
         <g transform=transform>
@@ -65,7 +83,7 @@ pub fn SvgLoadingRowRenderer(
     index: usize,
     _col_count: usize,
 ) -> impl IntoView {
-    let transform = transform_from_index(index, 0);
+    let transform = y_transform_from_index(index);
 
     view! {
         <g class=class transform=transform>
@@ -96,8 +114,8 @@ pub fn SvgHeadCellRenderer<F>(
     on_click: F,
     children: Children,
 ) -> impl IntoView
-where
-    F: Fn(TableHeadEvent) + 'static,
+    where
+        F: Fn(TableHeadEvent) + 'static,
 {
     let style = move || {
         let sort = match sort_direction() {
@@ -142,9 +160,9 @@ pub fn SvgTextCellRenderer<T, F>(
     on_change: F,
     index: usize,
 ) -> impl IntoView
-where
-    T: IntoView + Clone + 'static,
-    F: Fn(T) + 'static,
+    where
+        T: IntoView + Clone + 'static,
+        F: Fn(T) + 'static,
 {
     let x = x_from_index(index);
 
@@ -163,8 +181,8 @@ pub fn SvgPathCellRenderer<F>(
     on_change: F,
     index: usize,
 ) -> impl IntoView
-where
-    F: Fn(String) + 'static,
+    where
+        F: Fn(String) + 'static,
 {
     let transform = transform_from_index(index, 3);
 
diff --git a/src/components/table_content.rs b/src/components/table_content.rs
@@ -170,11 +170,11 @@ pub fn TableContent<Row, DataP, Err, ClsP>(
     loading_row_display_limit: Option<usize>,
     #[prop(optional)] _marker: PhantomData<Err>,
 ) -> impl IntoView
-where
-    Row: TableRow<ClassesProvider = ClsP> + Clone + 'static,
-    DataP: TableDataProvider<Row, Err> + 'static,
-    Err: Debug,
-    ClsP: TableClassesProvider + Copy + 'static,
+    where
+        Row: TableRow<ClassesProvider=ClsP> + Clone + 'static,
+        DataP: TableDataProvider<Row, Err> + 'static,
+        Err: Debug,
+        ClsP: TableClassesProvider + Copy + 'static,
 {
     let on_change = store_value(on_change);
     let rows = Rc::new(RefCell::new(rows));
@@ -299,11 +299,11 @@ where
             create_memo(move |_| {
                 ((height.get() / average_row_height.get()).ceil() as usize).max(20)
             })
-            .into()
+                .into()
         }
     };
 
-    let (display_range, set_display_range) = create_signal(0..5);
+    let (display_range, set_display_range) = create_signal(0..0);
 
     let placeholder_height_before =
         if matches!(display_strategy, DisplayStrategy::Pagination { .. }) {
@@ -325,7 +325,7 @@ where
 
             row_count_after * average_row_height.get()
         })
-        .into()
+            .into()
     };
 
     let tbody_ref = create_node_ref::<AnyElement>();
@@ -592,7 +592,7 @@ fn compute_average_row_height_from_loaded<Row, ClsP>(
     placeholder_height_before: Signal<f64>,
     loaded_rows: RwSignal<LoadedRows<Row>>,
 ) where
-    Row: TableRow<ClassesProvider = ClsP> + Clone + 'static,
+    Row: TableRow<ClassesProvider=ClsP> + Clone + 'static,
 {
     if let Some(el) = tbody_ref.get_untracked() {
         let el: &web_sys::Element = &el;
diff --git a/src/components/tbody.rs b/src/components/tbody.rs
@@ -1,15 +1,15 @@
 use leptos::html::{AnyElement, Tbody};
 use leptos::*;
 
-/// Default tbody renderer. Please note that this is  **NOT**  a  `#[component]` .
+/// Default tbody renderer. Please note that this is **NOT** a `#[component]`.
 ///
 /// # Arguments
 ///
 /// * `content` - The content of the renderer. It's like the children of this view.
 /// * `class` - The class attribute that is passed to the root element
 /// * `node_ref` - The `NodeRef` referencing the root tbody element.
-#[doc = ""]
-#[doc = " This render function has to render exactly one root element."]
+///
+/// This render function has to render exactly one root element.
 #[allow(non_snake_case)]
 pub fn DefaultTableBodyRenderer(
     content: Fragment,
diff --git a/src/loaded_rows.rs b/src/loaded_rows.rs
@@ -27,9 +27,7 @@ pub struct LoadedRows<T: Clone> {
 
 impl<T: Clone> LoadedRows<T> {
     pub fn new() -> Self {
-        Self {
-            rows: vec![RowState::Placeholder; 5],
-        }
+        Self { rows: vec![] }
     }
 
     #[inline]
diff --git a/src/table_row.rs b/src/table_row.rs
@@ -18,15 +18,15 @@ pub trait TableRow: Clone {
     ///
     /// This render function has to render exactly one root element.
     fn render_row(&self, index: usize, on_change: EventHandler<ChangeEvent<Self>>)
-        -> impl IntoView;
+                  -> impl IntoView;
 
     /// Render the head row of the table.
     fn render_head_row<F>(
         sorting: Signal<VecDeque<(usize, ColumnSort)>>,
         on_head_click: F,
     ) -> impl IntoView
-    where
-        F: Fn(TableHeadEvent) + Clone + 'static;
+        where
+            F: Fn(TableHeadEvent) + Clone + 'static;
 
     /// The name of the column (= struct field name) at the given index. This can be used to implement
     /// sorting in a database. It takes the `#[table(skip)]` attributes into account. `col_index`
@@ -35,6 +35,7 @@ pub trait TableRow: Clone {
     /// For example:
     /// ```
     /// # use leptos_struct_table::*;
+    /// # use leptos::*;
     /// #
     /// #[derive(TableRow, Clone)]
     /// struct Person {

Original file line number	Diff line number	Diff line change
`@@ -27,9 +27,7 @@ pub struct LoadedRows<T: Clone> {`
`27`	`27`
`28`	`28`	`impl<T: Clone> LoadedRows<T> {`
`29`	`29`	`pub fn new() -> Self {`
`30`		`- Self {`
`31`		`- rows: vec![RowState::Placeholder; 5],`
`32`		`- }`
	`30`	`+ Self { rows: vec![] }`
`33`	`31`	`}`
`34`	`32`
`35`	`33`	`#[inline]`