Skip to content

Commit 61e3862

Browse files
luoxiaozeroluoxiaozero
committed
feat: TimePicker scrollbar
1 parent 69ddf6b commit 61e3862

File tree

2 files changed

+88
-85
lines changed

2 files changed

+88
-85
lines changed

‎thaw/src/time_picker/mod.rs

+88-84
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ mod theme;
33
pub use theme::TimePickerTheme;
44

55
use crate::{
6-
use_theme, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme,
6+
use_theme, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, Scrollbar, SignalWatch,
7+
Theme,
78
};
89
use chrono::{Local, NaiveTime, Timelike};
910
use leptos::*;
@@ -187,96 +188,99 @@ fn Panel(
187188
>
188189
<div class="thaw-time-picker-panel__time">
189190
<div class="thaw-time-picker-panel__time-hour" ref=hour_ref>
190-
191-
{(0..24)
192-
.map(|hour| {
193-
let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
194-
let on_click = move |_| {
195-
selected_time
196-
.update(move |time| {
197-
*time = if let Some(time) = time {
198-
time.with_hour(hour)
199-
} else {
200-
NaiveTime::from_hms_opt(hour, 0, 0)
201-
}
202-
});
203-
comp_ref.get_untracked().unwrap().scroll_into_view();
204-
};
205-
let is_selected = Memo::new(move |_| {
206-
selected_time.get().map_or(false, |v| v.hour() == hour)
207-
});
208-
view! {
209-
<PanelTimeItem
210-
value=hour
211-
on:click=on_click
212-
is_selected
213-
comp_ref
214-
/>
215-
}
216-
})
217-
.collect_view()}
191+
<Scrollbar size=6>
192+
{(0..24)
193+
.map(|hour| {
194+
let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
195+
let on_click = move |_| {
196+
selected_time
197+
.update(move |time| {
198+
*time = if let Some(time) = time {
199+
time.with_hour(hour)
200+
} else {
201+
NaiveTime::from_hms_opt(hour, 0, 0)
202+
}
203+
});
204+
comp_ref.get_untracked().unwrap().scroll_into_view();
205+
};
206+
let is_selected = Memo::new(move |_| {
207+
selected_time.get().map_or(false, |v| v.hour() == hour)
208+
});
209+
view! {
210+
<PanelTimeItem
211+
value=hour
212+
on:click=on_click
213+
is_selected
214+
comp_ref
215+
/>
216+
}
217+
})
218+
.collect_view()}
219+
</Scrollbar>
218220
<div class="thaw-time-picker-panel__time-padding"></div>
219221
</div>
220222
<div class="thaw-time-picker-panel__time-minute" ref=minute_ref>
221-
222-
{(0..60)
223-
.map(|minute| {
224-
let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
225-
let on_click = move |_| {
226-
selected_time
227-
.update(move |time| {
228-
*time = if let Some(time) = time {
229-
time.with_minute(minute)
230-
} else {
231-
NaiveTime::from_hms_opt(now_time().hour(), minute, 0)
232-
}
233-
});
234-
comp_ref.get_untracked().unwrap().scroll_into_view();
235-
};
236-
let is_selected = Memo::new(move |_| {
237-
selected_time.get().map_or(false, |v| v.minute() == minute)
238-
});
239-
view! {
240-
<PanelTimeItem
241-
value=minute
242-
on:click=on_click
243-
is_selected
244-
comp_ref
245-
/>
246-
}
247-
})
223+
<Scrollbar size=6>
224+
{(0..60)
225+
.map(|minute| {
226+
let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
227+
let on_click = move |_| {
228+
selected_time
229+
.update(move |time| {
230+
*time = if let Some(time) = time {
231+
time.with_minute(minute)
232+
} else {
233+
NaiveTime::from_hms_opt(now_time().hour(), minute, 0)
234+
}
235+
});
236+
comp_ref.get_untracked().unwrap().scroll_into_view();
237+
};
238+
let is_selected = Memo::new(move |_| {
239+
selected_time.get().map_or(false, |v| v.minute() == minute)
240+
});
241+
view! {
242+
<PanelTimeItem
243+
value=minute
244+
on:click=on_click
245+
is_selected
246+
comp_ref
247+
/>
248+
}
249+
})
248250
.collect_view()}
251+
</Scrollbar>
249252
<div class="thaw-time-picker-panel__time-padding"></div>
250253
</div>
251254
<div class="thaw-time-picker-panel__time-second" ref=second_ref>
252-
253-
{(0..60)
254-
.map(|second| {
255-
let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
256-
let on_click = move |_| {
257-
selected_time
258-
.update(move |time| {
259-
*time = if let Some(time) = time {
260-
time.with_second(second)
261-
} else {
262-
now_time().with_second(second)
263-
}
264-
});
265-
comp_ref.get_untracked().unwrap().scroll_into_view();
266-
};
267-
let is_selected = Memo::new(move |_| {
268-
selected_time.get().map_or(false, |v| v.second() == second)
269-
});
270-
view! {
271-
<PanelTimeItem
272-
value=second
273-
on:click=on_click
274-
is_selected
275-
comp_ref
276-
/>
277-
}
278-
})
279-
.collect_view()}
255+
<Scrollbar size=6>
256+
{(0..60)
257+
.map(|second| {
258+
let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
259+
let on_click = move |_| {
260+
selected_time
261+
.update(move |time| {
262+
*time = if let Some(time) = time {
263+
time.with_second(second)
264+
} else {
265+
now_time().with_second(second)
266+
}
267+
});
268+
comp_ref.get_untracked().unwrap().scroll_into_view();
269+
};
270+
let is_selected = Memo::new(move |_| {
271+
selected_time.get().map_or(false, |v| v.second() == second)
272+
});
273+
view! {
274+
<PanelTimeItem
275+
value=second
276+
on:click=on_click
277+
is_selected
278+
comp_ref
279+
/>
280+
}
281+
})
282+
.collect_view()}
283+
</Scrollbar>
280284
<div class="thaw-time-picker-panel__time-padding"></div>
281285
</div>
282286
</div>

‎thaw/src/time_picker/time-picker.css

-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
.thaw-time-picker-panel__time-minute,
1818
.thaw-time-picker-panel__time-second {
1919
flex: 1;
20-
overflow-y: auto;
2120
}
2221

2322
.thaw-time-picker-panel__time-item {

0 commit comments

Comments
 (0)