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

23
src/components/items_list.rs
View file

@ -21,6 +21,9 @@ pub fn ItemsList(
items: ReadSignal<Vec<Item>>,
set_items: WriteSignal<Vec<Item>>,
) -> 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
let (custom_properties, set_custom_properties) = create_signal(Vec::<String>::new());
@ -159,8 +162,10 @@ pub fn ItemsList(
"Name" => view! {
<EditableCell
value=item.name.clone()
on_input=move |value| update_item(index, "name", value)
key=format!("name-{}", index)
on_input=move |value| update_item(index, "name", value)
key=Arc::new(format!("name-{}", index))
focused_cell=focused_cell
set_focused_cell=set_focused_cell.clone()
/>
<ul>
{move || {
@ -199,15 +204,17 @@ pub fn ItemsList(
"Description" => view! {
<EditableCell
value=item.description.clone()
on_input=move |value| update_item(index, "description", value)
key=format!("description-{}", index)
on_input=move |value| update_item(index, "description", value)
key=Arc::new(format!("description-{}", index))
focused_cell=focused_cell
set_focused_cell=set_focused_cell.clone()
/>
}.into_view(),
"Tags" => view! {
<TagEditor
tags=item.tags.clone()
on_add=move |key, value| add_tag(index, key, value)
on_remove=Arc::new(Mutex::new(move |tag_index: usize| remove_tag(index, tag_index)))
on_add=move |key, value| add_tag(index, key, value)
on_remove=Arc::new(Mutex::new(move |tag_index: usize| remove_tag(index, tag_index)))
/>
}.into_view(),
"Actions" => view! {
@ -240,7 +247,9 @@ pub fn ItemsList(
<EditableCell
value=item.custom_properties.get(&property_clone).cloned().unwrap_or_default()
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>
}