actually bring back builder_args

crates/components/src/scroll_views/virtual_scroll_view.rs

@@ -14,15 +14,21 @@ use crate::{
 
 /// [`VirtualScrollView`] component properties.
 #[derive(Props, Clone)]
-pub struct VirtualScrollViewProps<F: 'static + Clone + Fn(usize) -> Element> {
+pub struct VirtualScrollViewProps<
+    Builder: 'static + Clone + Fn(usize, &Option<BuilderArgs>) -> Element,
+    BuilderArgs: Clone + 'static + PartialEq = (),
+> {
     /// Theme override.
     pub theme: Option<ScrollViewThemeWith>,
     /// Quantity of items in the VirtualScrollView.
     pub length: usize,
     /// Size of the items, height for vertical direction and width for horizontal.
     pub item_size: f32,
     /// The item builder function.
-    pub builder: F,
+    pub builder: Builder,
+    /// The values for the item builder function.
+    #[props(into)]
+    pub builder_args: Option<BuilderArgs>,
     /// Direction of the VirtualScrollView, `vertical` or `horizontal`.
     #[props(default = "vertical".to_string(), into)]
     pub direction: String,
@@ -34,14 +40,19 @@ pub struct VirtualScrollViewProps<F: 'static + Clone + Fn(usize) -> Element> {
     pub scroll_with_arrows: bool,
 }
 
-impl<T: Clone + Fn(usize) -> Element> PartialEq for VirtualScrollViewProps<T> {
+impl<
+        BuilderArgs: Clone + PartialEq,
+        Builder: Clone + Fn(usize, &Option<BuilderArgs>) -> Element,
+    > PartialEq for VirtualScrollViewProps<Builder, BuilderArgs>
+{
     fn eq(&self, other: &Self) -> bool {
         self.theme == other.theme
             && self.length == other.length
             && self.item_size == other.item_size
             && self.direction == other.direction
             && self.show_scrollbar == other.show_scrollbar
             && self.scroll_with_arrows == other.scroll_with_arrows
+            && self.builder_args == other.builder_args
     }
 }
 
@@ -81,7 +92,7 @@ fn get_render_range(
 ///             length: 5,
 ///             item_size: 80.0,
 ///             direction: "vertical",
-///             builder: move |i| {
+///             builder: move |i, _other_args: &Option<()>| {
 ///                 rsx! {
 ///                     label {
 ///                         key: "{i}",
@@ -95,8 +106,11 @@ fn get_render_range(
 /// }
 /// ```
 #[allow(non_snake_case)]
-pub fn VirtualScrollView<F: Clone + Fn(usize) -> Element>(
-    props: VirtualScrollViewProps<F>,
+pub fn VirtualScrollView<
+    Builder: Clone + Fn(usize, &Option<BuilderArgs>) -> Element,
+    BuilderArgs: Clone + PartialEq,
+>(
+    props: VirtualScrollViewProps<Builder, BuilderArgs>,
 ) -> Element {
     let mut clicking_scrollbar = use_signal::<Option<(Axis, f64)>>(|| None);
     let mut clicking_shift = use_signal(|| false);
@@ -311,11 +325,14 @@ pub fn VirtualScrollView<F: Clone + Fn(usize) -> Element>(
         items_length as f32,
     );
 
-    let children = use_memo_with_dependencies(&render_range, move |render_range| {
-        render_range
-            .map(|i| (props.builder)(i))
-            .collect::<Vec<Element>>()
-    });
+    let children = use_memo_with_dependencies(
+        (&render_range, &props.builder_args),
+        move |(render_range, builder_args)| {
+            render_range
+                .map(|i| (props.builder)(i, &builder_args))
+                .collect::<Vec<Element>>()
+        },
+    );
 
     let is_scrolling_x = clicking_scrollbar
         .read()

crates/devtools/src/tabs/tree.rs

@@ -23,14 +23,15 @@ pub fn NodesTree(
             height: height.to_string().into(),
             padding: "15".into(),
         }),
-        builder: move |i| {
+        builder_args: selected_node_id,
+        builder: move |i, selected_node_id: &Option<Option<NodeId>>| {
             let nodes = nodes.read();
             let node = nodes.get(i).cloned().unwrap();
-            to_owned![onselected, router];
+            to_owned![onselected];
             rsx! {
                 NodeElement {
                     key: "{node.id:?}",
-                    is_selected: Some(node.id) == selected_node_id,
+                    is_selected: Some(node.id) == selected_node_id.flatten(),
                     onselected: move |node: TreeNode| {
                         onselected.call(node.clone());
                         router.replace(Route::TreeStyleTab { node_id: node.id.serialize() });

examples/cloned_editor.rs

@@ -32,7 +32,6 @@ fn Body() -> Element {
     );
     let cursor_reference = editable.cursor_attr();
     let editor = editable.editor().read();
-    let cloned_editable = editable.clone();
 
     let onclick = move |_: MouseEvent| {
         editable.process_event(&EditableEvent::Click);
@@ -59,7 +58,7 @@ fn Body() -> Element {
                 length: editor.len_lines(),
                 item_size: 35.0,
                 scroll_with_arrows: false,
-                builder: move |line_index| {
+                builder: move |line_index, _: &Option<()>| {
                     let editor = editable.editor().read();
                     let line = editor.line(line_index).unwrap();
 
@@ -135,8 +134,8 @@ fn Body() -> Element {
                 length: editor.len_lines(),
                 item_size: 35.0,
                 scroll_with_arrows: false,
-                builder: move |line_index| {
-                    let editor = cloned_editable.editor().read();
+                builder: move |line_index, _: &Option<()>| {
+                    let editor = editable.editor().read();
                     let line = editor.line(line_index).unwrap();
 
                     let is_line_selected = editor.cursor_row() == line_index;
@@ -163,8 +162,7 @@ fn Body() -> Element {
                         editable.process_event(&EditableEvent::MouseOver(e.data, line_index));
                     };
 
-
-                    let highlights = cloned_editable.highlights_attr(line_index);
+                    let highlights = editable.highlights_attr(line_index);
 
                     rsx! {
                         rect {

examples/virtual_scroll_view.rs

@@ -16,7 +16,7 @@ fn app() -> Element {
         length: values.read().len(),
         item_size: 25.0,
         direction: "vertical",
-        builder: move |index: usize| {
+        builder: move |index, _: &Option<()>| {
             let value = values.read()[index];
             let background = if index % 2 == 0 {
                 "rgb(200, 200, 200)"