adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: TimePicker scrollbar

Browse source
This commit is contained in:
luoxiao 2024-04-05 23:27:29 +08:00 • committed by luoxiaozero
parent 69ddf6b02f
commit 61e3862a1d
2 changed files with 88 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
thaw/src/time_picker/mod.rs
View file

@ -3,7 +3,8 @@ mod theme;
pub use theme::TimePickerTheme; pub use theme::TimePickerTheme;
use crate::{ use crate::{
use_theme, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme, use_theme, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, Scrollbar, SignalWatch,
Theme,
}; };
use chrono::{Local, NaiveTime, Timelike}; use chrono::{Local, NaiveTime, Timelike};
use leptos::*; use leptos::*;
@ -187,96 +188,99 @@ fn Panel(
> >
<div class="thaw-time-picker-panel__time"> <div class="thaw-time-picker-panel__time">
<div class="thaw-time-picker-panel__time-hour" ref=hour_ref> <div class="thaw-time-picker-panel__time-hour" ref=hour_ref>
<Scrollbar size=6>
{(0..24) {(0..24)
.map(|hour| { .map(|hour| {
let comp_ref = ComponentRef::<PanelTimeItemRef>::default(); let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
let on_click = move |_| { let on_click = move |_| {
selected_time selected_time
.update(move |time| { .update(move |time| {
*time = if let Some(time) = time { *time = if let Some(time) = time {
time.with_hour(hour) time.with_hour(hour)
} else { } else {
NaiveTime::from_hms_opt(hour, 0, 0) NaiveTime::from_hms_opt(hour, 0, 0)
} }
}); });
comp_ref.get_untracked().unwrap().scroll_into_view(); comp_ref.get_untracked().unwrap().scroll_into_view();
}; };
let is_selected = Memo::new(move |_| { let is_selected = Memo::new(move |_| {
selected_time.get().map_or(false, |v| v.hour() == hour) selected_time.get().map_or(false, |v| v.hour() == hour)
}); });
view! { view! {
<PanelTimeItem <PanelTimeItem
value=hour value=hour
on:click=on_click on:click=on_click
is_selected is_selected
comp_ref comp_ref
/> />
} }
}) })
.collect_view()} .collect_view()}
</Scrollbar>
<div class="thaw-time-picker-panel__time-padding"></div> <div class="thaw-time-picker-panel__time-padding"></div>
</div> </div>
<div class="thaw-time-picker-panel__time-minute" ref=minute_ref> <div class="thaw-time-picker-panel__time-minute" ref=minute_ref>
<Scrollbar size=6>
{(0..60) {(0..60)
.map(|minute| { .map(|minute| {
let comp_ref = ComponentRef::<PanelTimeItemRef>::default(); let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
let on_click = move |_| { let on_click = move |_| {
selected_time selected_time
.update(move |time| { .update(move |time| {
*time = if let Some(time) = time { *time = if let Some(time) = time {
time.with_minute(minute) time.with_minute(minute)
} else { } else {
NaiveTime::from_hms_opt(now_time().hour(), minute, 0) NaiveTime::from_hms_opt(now_time().hour(), minute, 0)
} }
}); });
comp_ref.get_untracked().unwrap().scroll_into_view(); comp_ref.get_untracked().unwrap().scroll_into_view();
}; };
let is_selected = Memo::new(move |_| { let is_selected = Memo::new(move |_| {
selected_time.get().map_or(false, |v| v.minute() == minute) selected_time.get().map_or(false, |v| v.minute() == minute)
}); });
view! { view! {
<PanelTimeItem <PanelTimeItem
value=minute value=minute
on:click=on_click on:click=on_click
is_selected is_selected
comp_ref comp_ref
/> />
} }
}) })
.collect_view()} .collect_view()}
</Scrollbar>
<div class="thaw-time-picker-panel__time-padding"></div> <div class="thaw-time-picker-panel__time-padding"></div>
</div> </div>
<div class="thaw-time-picker-panel__time-second" ref=second_ref> <div class="thaw-time-picker-panel__time-second" ref=second_ref>
<Scrollbar size=6>
{(0..60) {(0..60)
.map(|second| { .map(|second| {
let comp_ref = ComponentRef::<PanelTimeItemRef>::default(); let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
let on_click = move |_| { let on_click = move |_| {
selected_time selected_time
.update(move |time| { .update(move |time| {
*time = if let Some(time) = time { *time = if let Some(time) = time {
time.with_second(second) time.with_second(second)
} else { } else {
now_time().with_second(second) now_time().with_second(second)
} }
}); });
comp_ref.get_untracked().unwrap().scroll_into_view(); comp_ref.get_untracked().unwrap().scroll_into_view();
}; };
let is_selected = Memo::new(move |_| { let is_selected = Memo::new(move |_| {
selected_time.get().map_or(false, |v| v.second() == second) selected_time.get().map_or(false, |v| v.second() == second)
}); });
view! { view! {
<PanelTimeItem <PanelTimeItem
value=second value=second
on:click=on_click on:click=on_click
is_selected is_selected
comp_ref comp_ref
/> />
} }
}) })
.collect_view()} .collect_view()}
</Scrollbar>
<div class="thaw-time-picker-panel__time-padding"></div> <div class="thaw-time-picker-panel__time-padding"></div>
</div> </div>
</div> </div>

1
thaw/src/time_picker/time-picker.css
View file

@ -17,7 +17,6 @@
.thaw-time-picker-panel__time-minute, .thaw-time-picker-panel__time-minute,
.thaw-time-picker-panel__time-second { .thaw-time-picker-panel__time-second {
flex: 1; flex: 1;
overflow-y: auto;
} }
.thaw-time-picker-panel__time-item { .thaw-time-picker-panel__time-item {