style: remove unnecessary comments
This commit is contained in:
1 parent
c7eabda6df
commit
d01b568f15
2 files changed
+21
-37
No files matched your search
+21
-31
@@ -8,8 +8,7 @@ pub fn Checkbox(
|
|||||||
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
view! {
|
view! {
|
||||||
<label for=value
|
<label for=value class="flex items-center">
|
||||||
class="flex items-center">
|
|
||||||
<input
|
<input
|
||||||
// Using the "peer" class links this input with the div "peer" at the same level.
|
// Using the "peer" class links this input with the div "peer" at the same level.
|
||||||
// By using the "peer-checked" selector this div can toggle states based on this
|
// By using the "peer-checked" selector this div can toggle states based on this
|
||||||
@@ -18,27 +17,23 @@ pub fn Checkbox(
|
|||||||
relative peer shrink-0
|
relative peer shrink-0
|
||||||
hidden"
|
hidden"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id={value.clone()}
|
id=value.clone()
|
||||||
on:change=move |_| on_change.run(())
|
on:change=move |_| on_change.run(())
|
||||||
prop:checked=checked
|
prop:checked=checked
|
||||||
disabled=disabled
|
disabled=disabled
|
||||||
/>
|
/>
|
||||||
// This div displays the box for the checkbox, and applies some styling to the child
|
// This div displays the box for the checkbox, and applies some styling to the child
|
||||||
// span element.
|
// span element.
|
||||||
<div
|
<div class="relative inline-block h-5 w-5 m-1 mr-2 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
|
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:bg-gray-600/33 peer-disabled:border-gray-600
|
||||||
peer-disabled:peer-checked:bg-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
|
// 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.
|
// and right sides, which is then rotated to appear like a checkmark.
|
||||||
<span
|
<span class="absolute left-1/2 top-1/2 block h-3 w-1.5 -translate-x-1/2 -translate-y-1/2
|
||||||
class="absolute left-1/2 top-1/2 block h-3 w-1.5 -translate-x-1/2 -translate-y-1/2
|
|
||||||
rotate-45 transform border-b-3 border-r-3
|
rotate-45 transform border-b-3 border-r-3
|
||||||
border-white transition-opacity duration-150"
|
border-white transition-opacity duration-150"></span>
|
||||||
></span>
|
|
||||||
</div>
|
</div>
|
||||||
<span>{value.clone()}</span>
|
<span>{value.clone()}</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -52,35 +47,29 @@ pub fn CheckboxList(
|
|||||||
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
view! {
|
view! {
|
||||||
// Checkbox elements go in here. Each one will have a derived signal
|
|
||||||
// that checks if the name/value of that checkbox is in the selected items
|
|
||||||
// vec. If so, display as selected. If not, clear that checkbox.
|
|
||||||
|
|
||||||
// Somehow create a derived signal??
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{
|
{items
|
||||||
items.into_iter().map(|item| {
|
.into_iter()
|
||||||
|
.map(|item| {
|
||||||
let is_checked = {
|
let is_checked = {
|
||||||
let item_name = item.clone();
|
let item_name = item.clone();
|
||||||
move || {
|
move || { selected.get().contains(&item_name) }
|
||||||
// Check if this checkbox should be selected
|
|
||||||
selected.get().contains(&item_name)
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
let checked_signal = Signal::derive(is_checked);
|
let checked_signal = Signal::derive(is_checked);
|
||||||
|
// Check if this checkbox should be selected
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked=checked_signal
|
checked=checked_signal
|
||||||
on_change={
|
on_change={
|
||||||
// Clone this value to avoid moving it into the closure
|
|
||||||
let item_name = item.clone();
|
let item_name = item.clone();
|
||||||
move || {
|
move || {
|
||||||
selected.update(|list| {
|
selected
|
||||||
// Check if the list contains this element. If so, remove it. If not, add it.
|
.update(|list| {
|
||||||
if let Some(index) = list.iter().position(|val| *val == item_name) {
|
if let Some(index) = list
|
||||||
|
.iter()
|
||||||
|
.position(|val| *val == item_name)
|
||||||
|
{
|
||||||
list.remove(index);
|
list.remove(index);
|
||||||
} else {
|
} else {
|
||||||
list.push(item_name.clone());
|
list.push(item_name.clone());
|
||||||
@@ -90,10 +79,11 @@ pub fn CheckboxList(
|
|||||||
}
|
}
|
||||||
// The actual selected values are tracked by this element, not by the checkboxes themselves.
|
// The actual selected values are tracked by this element, not by the checkboxes themselves.
|
||||||
value=item.clone()
|
value=item.clone()
|
||||||
disabled = disabled />
|
disabled=disabled
|
||||||
}
|
/>
|
||||||
}).collect::<Vec<_>>()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
.collect::<Vec<_>>()}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -47,12 +47,6 @@ pub fn RadioList(
|
|||||||
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
#[prop(default = RwSignal::new(false))] disabled: RwSignal<bool>,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
view! {
|
view! {
|
||||||
// Checkbox elements go in here. Each one will have a derived signal
|
|
||||||
// that checks if the name/value of that checkbox is in the selected items
|
|
||||||
// vec. If so, display as selected. If not, clear that checkbox.
|
|
||||||
|
|
||||||
// Somehow create a derived signal??
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
{items
|
{items
|
||||||
.into_iter()
|
.into_iter()
|
||||||
|
|||||||
Reference in new issue
Block a user