From df8b248ae46bb1c3cb317e34616cbe5afd7f51c3 Mon Sep 17 00:00:00 2001
From: Lucas Vas <lvas463@gmail.com>
Date: Wed, 27 Aug 2025 13:58:32 -0400
Subject: [PATCH] feat: implement disabled behavior for all components

---
 src/components/checkboxes.rs | 84 ++++++++++++++++++++----------------
 src/components/select.rs     | 10 +++--
 src/components/text_field.rs | 30 +++++++------
 src/pages/home_page.rs       | 28 ++++++------
 4 files changed, 84 insertions(+), 68 deletions(-)

diff --git a/src/components/checkboxes.rs b/src/components/checkboxes.rs
index cf894ca..615f666 100644
--- a/src/components/checkboxes.rs
+++ b/src/components/checkboxes.rs
@@ -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,14 +21,17 @@ 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.
                 <span
@@ -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>
     }
 }
diff --git a/src/components/select.rs b/src/components/select.rs
index 4749266..d161304 100644
--- a/src/components/select.rs
+++ b/src/components/select.rs
@@ -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(
diff --git a/src/components/text_field.rs b/src/components/text_field.rs
index ca4eca6..bbe3304 100644
--- a/src/components/text_field.rs
+++ b/src/components/text_field.rs
@@ -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>
     )
 }
diff --git a/src/pages/home_page.rs b/src/pages/home_page.rs
index 27c3a80..42ce3d8 100644
--- a/src/pages/home_page.rs
+++ b/src/pages/home_page.rs
@@ -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