ryanmwangi/Compware
1
0
Fork 0
Code Issues Pull requests Releases Activity

fix(item_list): enhance ItemsList component with centralized focus management for EditableCell

Browse source 
- Added `focused_cell` and `set_focused_cell` signals to handle global focus state across cells.
- Updated `EditableCell` usage in `ItemsList` to utilize `Arc<String>` keys for efficient reference sharing.
- Simplified focus handling by removing local state tracking and integrating centralized focus management.
- Ensured better UX by making the currently edited cell regain focus after state updates.
- Improved dynamic property handling by applying the new focus mechanism to both default and custom properties.
This commit is contained in:
ryan 2025-01-04 22:30:32 +03:00
parent 25195d6753
commit 4f9d423a5c
1 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/items_list.rs
View file

@ -21,6 +21,9 @@ pub fn ItemsList(
items: ReadSignal<Vec<Item>>, items: ReadSignal<Vec<Item>>,
set_items: WriteSignal<Vec<Item>>, set_items: WriteSignal<Vec<Item>>,
) -> impl IntoView { ) -> impl IntoView {
// State to track the currently focused cell
let (focused_cell, set_focused_cell) = create_signal(None::<String>);
// State to manage dynamic property names // State to manage dynamic property names
let (custom_properties, set_custom_properties) = create_signal(Vec::<String>::new()); let (custom_properties, set_custom_properties) = create_signal(Vec::<String>::new());
@ -160,7 +163,9 @@ pub fn ItemsList(
<EditableCell <EditableCell
value=item.name.clone() value=item.name.clone()
on_input=move |value| update_item(index, "name", value) on_input=move |value| update_item(index, "name", value)
key=format!("name-{}", index) key=Arc::new(format!("name-{}", index))
focused_cell=focused_cell
set_focused_cell=set_focused_cell.clone()
/> />
<ul> <ul>
{move || { {move || {
@ -200,7 +205,9 @@ pub fn ItemsList(
<EditableCell <EditableCell
value=item.description.clone() value=item.description.clone()
on_input=move |value| update_item(index, "description", value) on_input=move |value| update_item(index, "description", value)
key=format!("description-{}", index) key=Arc::new(format!("description-{}", index))
focused_cell=focused_cell
set_focused_cell=set_focused_cell.clone()
/> />
}.into_view(), }.into_view(),
"Tags" => view! { "Tags" => view! {
@ -240,7 +247,9 @@ pub fn ItemsList(
<EditableCell <EditableCell
value=item.custom_properties.get(&property_clone).cloned().unwrap_or_default() value=item.custom_properties.get(&property_clone).cloned().unwrap_or_default()
on_input=move |value| update_item(index, &property_clone_for_closure, value) on_input=move |value| update_item(index, &property_clone_for_closure, value)
key=format!("custom-{}-{}", property_clone, index) key=Arc::new(format!("custom-{}-{}", property_clone, index))
focused_cell=focused_cell
set_focused_cell=set_focused_cell.clone()
/> />
</td> </td>
} }