feat: implement disabled behavior for all components
This commit is contained in:
alphafetus committed
1 parent
75a8f2d6d4
commit
df8b248ae4
4 files changed
+83
-67
No files matched your search
@@ -4,7 +4,8 @@ use leptos::prelude::*;
|
||||
pub fn Checkbox(
|
||||
#[prop()] checked: Signal<bool>,
|
||||
#[prop(into)] on_change: Callback<(), ()>,
|
||||
#[prop(into)] value: String
|
||||
#[prop(into)] value: String,
|
||||
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<label for=value
|
||||
@@ -20,13 +21,16 @@ pub fn Checkbox(
|
||||
id={value.clone()}
|
||||
on:change = move |_| on_change.run(())
|
||||
prop:checked = checked
|
||||
disabled = disabled
|
||||
/>
|
||||
// This div displays the box for the checkbox, and applies some styling to the child
|
||||
// span element.
|
||||
<div
|
||||
class="relative inline-block h-5 w-5 m-1 rounded-sm border border-gray-300 bg-white
|
||||
class="relative inline-block h-5 w-5 m-1 mr-2 rounded-sm border border-gray-300 bg-white
|
||||
transition-bg duration-150 peer-checked:bg-red-700 peer-checked:border-red-700
|
||||
[&>span]:opacity-0 peer-checked:[&>span]:opacity-100"
|
||||
[&>span]:opacity-0 peer-checked:[&>span]:opacity-100
|
||||
peer-disabled:bg-gray-600/33 peer-disabled:border-gray-600
|
||||
peer-disabled:peer-checked:bg-gray-600"
|
||||
>
|
||||
// This span is the check icon. It is centered within the div and has a border on the bottom
|
||||
// and right sides, which is then rotated to appear like a checkmark.
|
||||
@@ -44,7 +48,8 @@ pub fn Checkbox(
|
||||
#[component]
|
||||
pub fn CheckboxList(
|
||||
#[prop(default = RwSignal::new(vec![]))] selected: RwSignal<Vec<String>>,
|
||||
#[prop()] items: Vec<String>
|
||||
#[prop()] items: Vec<String>,
|
||||
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
// Checkbox elements go in here. Each one will have a derived signal
|
||||
@@ -53,39 +58,42 @@ pub fn CheckboxList(
|
||||
|
||||
// Somehow create a derived signal??
|
||||
|
||||
{
|
||||
items.into_iter().map(|item| {
|
||||
let is_checked = {
|
||||
let item_name = item.clone();
|
||||
move || {
|
||||
// Check if this checkbox should be selected
|
||||
selected.get().contains(&item_name)
|
||||
}
|
||||
};
|
||||
|
||||
let checked_signal = Signal::derive(is_checked);
|
||||
|
||||
view! {
|
||||
<Checkbox
|
||||
checked = checked_signal
|
||||
on_change = {
|
||||
// Clone this value to avoid moving it into the closure
|
||||
let item_name = item.clone();
|
||||
move || {
|
||||
selected.update(|list| {
|
||||
// Check if the list contains this element. If so, remove it. If not, add it.
|
||||
if let Some(index) = list.iter().position(|val| *val == item_name) {
|
||||
list.remove(index);
|
||||
} else {
|
||||
list.push(item_name.clone());
|
||||
}
|
||||
});
|
||||
}
|
||||
<div>
|
||||
{
|
||||
items.into_iter().map(|item| {
|
||||
let is_checked = {
|
||||
let item_name = item.clone();
|
||||
move || {
|
||||
// Check if this checkbox should be selected
|
||||
selected.get().contains(&item_name)
|
||||
}
|
||||
// The actual selected values are tracked by this element, not by the checkboxes themselves.
|
||||
value = item.clone() />
|
||||
}
|
||||
}).collect::<Vec<_>>()
|
||||
}
|
||||
};
|
||||
|
||||
let checked_signal = Signal::derive(is_checked);
|
||||
|
||||
view! {
|
||||
<Checkbox
|
||||
checked = checked_signal
|
||||
on_change = {
|
||||
// Clone this value to avoid moving it into the closure
|
||||
let item_name = item.clone();
|
||||
move || {
|
||||
selected.update(|list| {
|
||||
// Check if the list contains this element. If so, remove it. If not, add it.
|
||||
if let Some(index) = list.iter().position(|val| *val == item_name) {
|
||||
list.remove(index);
|
||||
} else {
|
||||
list.push(item_name.clone());
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// The actual selected values are tracked by this element, not by the checkboxes themselves.
|
||||
value = item.clone()
|
||||
disabled = disabled />
|
||||
}
|
||||
}).collect::<Vec<_>>()
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -16,12 +16,14 @@ pub fn Select(
|
||||
<label>
|
||||
{label}
|
||||
<select
|
||||
class="relative border-2 m-1.5 p-1.5 rounded-md"
|
||||
class=(["border-red-700", "bg-transparent"], move || !disabled.get())
|
||||
class=(["border-gray-600", "pointer-events-none", "bg-gray-600/33"], move || disabled.get())
|
||||
class="relative border-2 m-1.5 p-1.5 rounded-md
|
||||
transition-border duration-150
|
||||
border-red-700 bg-transparent
|
||||
disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
|
||||
on:change:target=move |e| {
|
||||
value.set(e.target().value());
|
||||
}>
|
||||
}
|
||||
disabled = disabled >
|
||||
// This closure handles the display of the options.
|
||||
{move || {
|
||||
value_list.iter().map(
|
||||
|
||||
@@ -22,19 +22,21 @@ where
|
||||
};
|
||||
|
||||
view! (
|
||||
<label>
|
||||
{ label }
|
||||
<input
|
||||
class="border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-400"
|
||||
class=(["border-red-700", "bg-transparent"], move || !disabled.get())
|
||||
class=(["border-gray-600", "pointer-events-none", "bg-gray-600/33"], move || disabled.get())
|
||||
r#type={input_type}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
prop:name=name
|
||||
prop:value={move || value.get().to_string()} // Sets the initial value.
|
||||
on:input=on_input // Sets the value on each input.
|
||||
/>
|
||||
</label>
|
||||
<div>
|
||||
<label>
|
||||
{ label }
|
||||
<input
|
||||
class="border-2 m-1.5 p-1.5 rounded-md bg-transparent mt-6 relative transition-all duration-150
|
||||
border-red-700 bg-transparent
|
||||
disabled:border-gray-600 disabled:pointer-events-none disabled:bg-gray-600/33"
|
||||
r#type={input_type}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
prop:name=name
|
||||
prop:value={move || value.get().to_string()} // Sets the initial value.
|
||||
on:input=on_input // Sets the value on each input.
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+16
-12
@@ -155,39 +155,43 @@ pub fn HomePage() -> impl IntoView {
|
||||
let select_value = RwSignal::new(String::from("Math"));
|
||||
let chk_select = RwSignal::new(vec!["Testing 2".into()]);
|
||||
|
||||
let elements_disabled = RwSignal::new(false);
|
||||
|
||||
view! {
|
||||
<p>
|
||||
"Current user's reported full name from the API: "
|
||||
{reactive_info.first_name}" "{reactive_info.last_name}
|
||||
</p>
|
||||
|
||||
<form>
|
||||
<div>
|
||||
<form
|
||||
class="flex flex-col gap-4">
|
||||
<div class="flex flex-row gap-2">
|
||||
<OutlinedTextField
|
||||
label="First Name".into()
|
||||
placeholder="John".into()
|
||||
disabled=elements_disabled
|
||||
value=reactive_info.first_name />
|
||||
</div>
|
||||
<div>
|
||||
<OutlinedTextField
|
||||
label="Last Name".into()
|
||||
placeholder="Smith".into()
|
||||
disabled=elements_disabled
|
||||
value=reactive_info.last_name />
|
||||
</div>
|
||||
<div>
|
||||
<OutlinedTextField
|
||||
label="Testing".into()
|
||||
placeholder="Test".into()
|
||||
disabled=elements_disabled
|
||||
value=reactive_info.math_sat_score />
|
||||
</div>
|
||||
<Select
|
||||
value_list = vec!["Math".into(), "English".into(), "Science".into()]
|
||||
value = select_value
|
||||
/>
|
||||
<div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<Select
|
||||
value_list = vec!["Math".into(), "English".into(), "Science".into()]
|
||||
value = select_value
|
||||
disabled=elements_disabled
|
||||
/>
|
||||
<CheckboxList
|
||||
selected = chk_select
|
||||
items = vec!["Testing 1".into(), "Testing 2".into()] />
|
||||
items = vec!["Testing 1".into(), "Testing 2".into()]
|
||||
disabled=elements_disabled />
|
||||
</div>
|
||||
<div>
|
||||
<ActionButton
|
||||
|
||||
Reference in new issue
Block a user