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

feat(editable cells): add support for multiple input types in EditableCell component

Browse source 
- Introduced `InputType` enum to support both `Text` and `TextArea` input types.
- Updated `EditableCell` component to accept `input_type` as a parameter.
- Added logic to handle input events for both `Text` and `TextArea` fields.
- Implemented `textarea_ref` to support `<textarea>` elements.
- Used match expressions to dynamically render either `<input>` or `<textarea>` based on the `input_type` provided.
This commit is contained in:
ryan 2025-01-10 20:56:25 +03:00
parent 82eb91a2fe
commit 430cf3e6df
3 changed files with 47 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/style.css
View file

@ -148,4 +148,11 @@ th {
.search-icon i.fas.fa-search {
margin-left: 5px;
}
.editable-cell-textarea {
width: 100%;
height: 100px;
resize: vertical;
overflow: auto;
}

47
src/components/editable_cell.rs
View file

@ -11,13 +11,18 @@ pub fn EditableCell(
set_focused_cell: WriteSignal<Option<String>>,
on_focus: Option<Callback<()>>,
on_blur: Option<Callback<()>>,
input_type: InputType,
) -> impl IntoView {
let input_ref = create_node_ref::<html::Input>();
let textarea_ref = create_node_ref::<html::Textarea>();
let (local_value, set_local_value) = create_signal(value.clone());
let input_type_clone = input_type.clone();
// Handle input event
let handle_input = move |e: web_sys::Event| {
let new_value = event_target_value(&e);
let new_value = match input_type_clone {
InputType::Text => event_target_value(&e),
InputType::TextArea => event_target_value(&e),
};
log!("Input event: {}", new_value);
set_local_value.set(new_value);
};
@ -62,15 +67,35 @@ pub fn EditableCell(
view! {
<div class="editable-cell">
<input
type="text"
prop:value=move || local_value.get()
on:input=handle_input
on:focus=handle_focus
on:blur=handle_blur
node_ref=input_ref
class="editable-cell-input"
/>
{match input_type {
InputType::Text => view! {
<input
type="text"
prop:value=move || local_value.get()
on:input=handle_input
on:focus=handle_focus
on:blur=handle_blur
node_ref=input_ref
class="editable-cell-input"
/>
}.into_view(),
InputType::TextArea => view! {
<textarea
prop:value=move || local_value.get()
on:input=handle_input
on:focus=handle_focus
on:blur=handle_blur
node_ref=textarea_ref
class="editable-cell-input"
/>
}.into_view()
}}
</div>
}
}
#[derive(Debug, PartialEq, Eq, Clone)]
pub enum InputType {
Text,
TextArea,
}

4
src/components/items_list.rs
View file

@ -1,4 +1,5 @@
use crate::components::editable_cell::EditableCell;
use crate::components::editable_cell::InputType;
use crate::components::tag_editor::TagEditor;
use leptos::*;
use serde::Deserialize;
@ -195,6 +196,7 @@ pub fn ItemsList(
});
});
}))
input_type=InputType::Text
/>
<button class="search-icon" on:click=move |_| {
log!("Search icon clicked, showing suggestions");
@ -271,6 +273,7 @@ pub fn ItemsList(
on_blur=Some(Callback::new(move |_| {
log!("Description input blurred");
}))
input_type=InputType::TextArea
/>
}.into_view(),
"Tags" => view! {
@ -319,6 +322,7 @@ pub fn ItemsList(
on_blur=Some(Callback::new(move |_| {
log!("Custom property input blurred");
}))
input_type=InputType::TextArea
/>
</td>
}