119 lines
3.7 KiB
Rust
119 lines
3.7 KiB
Rust
use chrono::Days;
|
|
use gpui::{
|
|
px, IntoElement, ParentElement as _, Render, Styled as _, View, ViewContext,
|
|
VisualContext as _, WindowContext,
|
|
};
|
|
use ui::{
|
|
date_picker::{DatePicker, DatePickerEvent},
|
|
v_flex, Sizable as _,
|
|
};
|
|
|
|
pub struct CalendarStory {
|
|
date_picker: View<DatePicker>,
|
|
date_picker_small: View<DatePicker>,
|
|
date_picker_large: View<DatePicker>,
|
|
date_picker_value: Option<String>,
|
|
date_range_picker: View<DatePicker>,
|
|
default_range_mode_picker: View<DatePicker>,
|
|
}
|
|
|
|
impl super::Story for CalendarStory {
|
|
fn title() -> &'static str {
|
|
"Calendar"
|
|
}
|
|
|
|
fn description() -> &'static str {
|
|
"A date picker and calendar component."
|
|
}
|
|
|
|
fn new_view(cx: &mut WindowContext) -> gpui::AnyView {
|
|
Self::view(cx).into()
|
|
}
|
|
}
|
|
|
|
impl CalendarStory {
|
|
pub fn view(cx: &mut WindowContext) -> View<Self> {
|
|
cx.new_view(Self::new)
|
|
}
|
|
|
|
fn new(cx: &mut ViewContext<Self>) -> Self {
|
|
let now = chrono::Local::now().naive_local().date();
|
|
let date_picker = cx.new_view(|cx| {
|
|
let mut picker = DatePicker::new("date_picker_medium", cx)
|
|
.cleanable()
|
|
.width(px(220.));
|
|
picker.set_date(now, cx);
|
|
picker
|
|
});
|
|
let date_picker_large = cx.new_view(|cx| {
|
|
DatePicker::new("date_picker_large", cx)
|
|
.large()
|
|
.date_format("%Y-%m-%d")
|
|
.width(px(300.))
|
|
});
|
|
let date_picker_small = cx.new_view(|cx| {
|
|
let mut picker = DatePicker::new("date_picker_small", cx)
|
|
.small()
|
|
.width(px(180.));
|
|
picker.set_date(now, cx);
|
|
picker
|
|
});
|
|
let date_range_picker = cx.new_view(|cx| {
|
|
let mut picker = DatePicker::new("date_range_picker", cx)
|
|
.width(px(300.))
|
|
.number_of_months(2)
|
|
.cleanable();
|
|
picker.set_date((now, now.checked_add_days(Days::new(4)).unwrap()), cx);
|
|
picker
|
|
});
|
|
|
|
cx.subscribe(&date_picker, |this, _, ev, _| match ev {
|
|
DatePickerEvent::Change(date) => {
|
|
this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
|
|
}
|
|
})
|
|
.detach();
|
|
cx.subscribe(&date_range_picker, |this, _, ev, _| match ev {
|
|
DatePickerEvent::Change(date) => {
|
|
this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
|
|
}
|
|
})
|
|
.detach();
|
|
|
|
let default_range_mode_picker = cx.new_view(|cx| {
|
|
DatePicker::range_picker("default_range_mode_picker", cx)
|
|
.width(px(300.))
|
|
.placeholder("Range mode picker")
|
|
.cleanable()
|
|
});
|
|
|
|
cx.subscribe(&default_range_mode_picker, |this, _, ev, _| match ev {
|
|
DatePickerEvent::Change(date) => {
|
|
this.date_picker_value = date.format("%Y-%m-%d").map(|s| s.to_string());
|
|
}
|
|
})
|
|
.detach();
|
|
|
|
Self {
|
|
date_picker,
|
|
date_picker_large,
|
|
date_picker_small,
|
|
date_range_picker,
|
|
default_range_mode_picker,
|
|
date_picker_value: None,
|
|
}
|
|
}
|
|
}
|
|
|
|
impl Render for CalendarStory {
|
|
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
|
|
v_flex()
|
|
.gap_3()
|
|
.child(self.date_picker.clone())
|
|
.child(self.date_picker_small.clone())
|
|
.child(self.date_picker_large.clone())
|
|
.child(self.date_range_picker.clone())
|
|
.child(self.default_range_mode_picker.clone())
|
|
.child(format!("Date picker value: {:?}", self.date_picker_value).into_element())
|
|
}
|
|
}
|