148 lines
6.4 KiB
Rust
148 lines
6.4 KiB
Rust
use crate::common::ValueType;
|
|
use crate::components::utils::create_unique_id;
|
|
use leptos::prelude::*;
|
|
use std::collections::HashMap;
|
|
|
|
/// # Chip Component
|
|
///
|
|
/// This component defines a single chip for use in the `ChipsList` component. It functions almost
|
|
/// identically to the `Checkbox` component. It should only be created from within its parent
|
|
/// `CheckboxList` component.
|
|
///
|
|
/// Example usage:
|
|
/// ```
|
|
/// view! {
|
|
/// <Chip
|
|
/// value="Some Value"
|
|
/// name="list_name"
|
|
/// on_change=move || { println!("Some work here.") }
|
|
/// checked=RwSignal::new(false)
|
|
/// disabled=RwSignal::new(false)
|
|
/// />
|
|
/// }
|
|
/// ```
|
|
#[component]
|
|
pub fn Chip(
|
|
#[prop(into)] display_text: String,
|
|
#[prop(into)] value: String,
|
|
#[prop(into)] name: String,
|
|
#[prop(into)] on_change: Callback<(), ()>,
|
|
#[prop()] checked: Signal<bool>,
|
|
#[prop(optional)] disabled: RwSignal<bool>,
|
|
) -> impl IntoView {
|
|
// Generate a unique id - ensure that the value doesn't contain spaces.
|
|
// Without this id, checkbox/radio inputs can interfere with each other.
|
|
let id = create_unique_id(&name, &value);
|
|
|
|
view! {
|
|
<label for=id>
|
|
<input
|
|
r#type="checkbox"
|
|
class="relative peer shrink-0 hidden"
|
|
name=name.clone()
|
|
id=id.clone()
|
|
prop:checked=checked
|
|
on:change=move |_| on_change.run(())
|
|
disabled=disabled />
|
|
<div class="rounded-full p-2.5
|
|
cursor-pointer text-base
|
|
bg-transparent border-1 border-gray-300
|
|
shadow-md/50 hover:shadow-md/70
|
|
peer-checked:bg-red-700 peer-checked:border-red-700 peer-checked:text-white
|
|
peer-disabled:peer-checked:bg-gray-700
|
|
peer-disabled:peer-checked:border-gray-700
|
|
peer-disabled:cursor-default
|
|
transition-all duration-150">
|
|
<span>{display_text.clone()}</span>
|
|
</div>
|
|
</label>
|
|
}
|
|
}
|
|
|
|
/// # Chips List Component
|
|
///
|
|
/// This defines a list of `Chip` components. The list of values is created based on the data from the
|
|
/// `data_map` prop, which is found using the given `data_member`.
|
|
///
|
|
/// Any values selected from the list are stored within the `data_map` immediately as part of a callback
|
|
/// passed to the `on_change` prop for each individual `Chip` component.
|
|
#[component]
|
|
pub fn ChipsList(
|
|
#[prop(into)] data_member: String,
|
|
#[prop()] data_map: RwSignal<HashMap<String, ValueType>>,
|
|
#[prop()] displayed_text: Vec<String>,
|
|
#[prop()] values: Vec<String>,
|
|
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
|
#[prop(optional, into)] label: String,
|
|
) -> impl IntoView {
|
|
view! {
|
|
<div class="m-1.5 mt-0 mb-0">
|
|
<span class="font-bold">{label}</span>
|
|
<div class="flex flex-row flex-wrap gap-2 mt-1">
|
|
{displayed_text.into_iter().zip(values)
|
|
.into_iter()
|
|
.map(|(text, value)| {
|
|
let checked_signal = Signal::derive({
|
|
let item_name = value.clone();
|
|
let data_member = data_member.clone();
|
|
move || {
|
|
data_map.get()
|
|
.get(&data_member)
|
|
.unwrap_or(&ValueType::List(None))
|
|
.as_list()
|
|
.unwrap_or(Some(vec!()))
|
|
.unwrap_or(vec!())
|
|
.contains(&ValueType::String(Some(item_name.clone())))
|
|
}
|
|
});
|
|
|
|
let on_change = {
|
|
let item_name = value.clone();
|
|
let data_member = data_member.clone();
|
|
move || {
|
|
let result = ValueType::String(Some(item_name.clone()));
|
|
data_map.update(|map| {
|
|
// Attempt to get the value type from the hash map.
|
|
match map.get_mut(&data_member) {
|
|
Some(value_type) => {
|
|
// Attempt to get the value as a list.
|
|
match value_type.as_list().unwrap_or(None) {
|
|
Some(mut list) => {
|
|
// Attempt to find the selected value in the selected list.
|
|
// If it's present, remove it, or vice versa.
|
|
match list.iter().position(|val| *val == result) {
|
|
Some(index) => { list.remove(index); },
|
|
None => { list.push(result); }
|
|
};
|
|
// Update the existing value_type entry in the hash map.
|
|
*value_type = ValueType::List(Some(list));
|
|
},
|
|
// Insert a new value_type entry.
|
|
None => { *value_type = ValueType::List(Some(vec![result])); }
|
|
};
|
|
},
|
|
// Insert a new value_type entry.
|
|
None => { map.insert(data_member.clone(), ValueType::List(Some(vec![result]))); }
|
|
};
|
|
});
|
|
}
|
|
};
|
|
|
|
view! {
|
|
<Chip
|
|
checked=checked_signal
|
|
name=data_member.clone()
|
|
on_change=on_change
|
|
value=value.clone()
|
|
display_text=text.clone()
|
|
disabled=disabled
|
|
/>
|
|
}
|
|
})
|
|
.collect_view()
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|