Feat/time picker (#44)

* feat: add time picker component

* feat: add time picker component panel

* feat: time picker component panel

* feat: time picker component panel scroll

* fix: time picker component open panel scroll

Cargo.toml

@@ -34,6 +34,7 @@ icondata = { version = "0.1.0", features = [
     "AiPlusOutlined",
     "AiMinusOutlined",
     "AiRightOutlined",
+    "AiClockCircleOutlined",
 ] }
 icondata_core = "0.0.2"
 uuid = { version = "1.5.0", features = ["v4"] }

demo/src/app.rs

@@ -77,6 +77,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
                 <Route path="/theme" view=ThemePage/>
                 <Route path="/typography" view=TypographyPage/>
                 <Route path="/calendar" view=CalendarPage/>
+                <Route path="/time-picker" view=TimePickerPage/>
             </Route>
             <Route path="/mobile/tabbar" view=TabbarDemoPage/>
             <Route path="/mobile/nav-bar" view=NavBarDemoPage/>

demo/src/pages/components.rs

@@ -150,6 +150,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
                     value: "switch".into(),
                     label: "Switch".into(),
                 },
+                MenuItemOption {
+                    value: "time-picker".into(),
+                    label: "Time Picker".into(),
+                },
                 MenuItemOption {
                     value: "upload".into(),
                     label: "Upload".into(),

demo/src/pages/mod.rs

@@ -36,6 +36,7 @@ mod table;
 mod tabs;
 mod tag;
 mod theme;
+mod time_picker;
 mod toast;
 mod typography;
 mod upload;
@@ -78,6 +79,7 @@ pub use table::*;
 pub use tabs::*;
 pub use tag::*;
 pub use theme::*;
+pub use time_picker::*;
 pub use toast::*;
 pub use typography::*;
 pub use upload::*;

demo/src/pages/time_picker/mod.rs

@@ -0,0 +1,52 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use prisms::highlight_str;
+use thaw::chrono::prelude::*;
+use thaw::*;
+
+#[component]
+pub fn TimePickerPage() -> impl IntoView {
+    let value = create_rw_signal(Some(Local::now().time()));
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Time Picker"</h1>
+            <Demo>
+                <TimePicker value />
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                        use thaw::chrono::prelude::*;
+
+                        let value = create_rw_signal(Local::now().time());
+                        view! {
+                            <TimePicker value />
+                        }
+                    "#,
+                        "rust"
+                    )}
+
+                </DemoCode>
+            </Demo>
+            <h3>"TimePicker Props"</h3>
+            <Table single_column=true>
+                <thead>
+                    <tr>
+                        <th>"Name"</th>
+                        <th>"Type"</th>
+                        <th>"Default"</th>
+                        <th>"Description"</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>"value"</td>
+                        <td><Text code=true>"RwSignal<Time>"</Text></td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    }
+}

src/lib.rs

@@ -34,6 +34,7 @@ mod table;
 mod tabs;
 mod tag;
 mod theme;
+mod time_picker;
 mod typography;
 mod upload;
 mod utils;
@@ -73,6 +74,7 @@ pub use table::*;
 pub use tabs::*;
 pub use tag::*;
 pub use theme::*;
+pub use time_picker::*;
 pub use typography::*;
 pub use upload::*;
 pub use utils::SignalWatch;

src/theme/mod.rs

@@ -5,7 +5,8 @@ use crate::{
     mobile::{NavBarTheme, TabbarTheme},
     AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, CalendarTheme,
     ColorPickerTheme, InputTheme, MenuTheme, MessageTheme, ProgressTheme, SelectTheme,
-    SkeletionTheme, SliderTheme, SwitchTheme, TableTheme, TagTheme, TypographyTheme, UploadTheme,
+    SkeletionTheme, SliderTheme, SwitchTheme, TableTheme, TagTheme, TimePickerTheme,
+    TypographyTheme, UploadTheme,
 };
 use leptos::*;
 
@@ -39,6 +40,7 @@ pub struct Theme {
     pub progress: ProgressTheme,
     pub typograph: TypographyTheme,
     pub calendar: CalendarTheme,
+    pub time_picker: TimePickerTheme,
 }
 
 impl Theme {
@@ -67,6 +69,7 @@ impl Theme {
             progress: ProgressTheme::light(),
             typograph: TypographyTheme::light(),
             calendar: CalendarTheme::light(),
+            time_picker: TimePickerTheme::light(),
         }
     }
     pub fn dark() -> Self {
@@ -94,6 +97,7 @@ impl Theme {
             progress: ProgressTheme::dark(),
             typograph: TypographyTheme::dark(),
             calendar: CalendarTheme::dark(),
+            time_picker: TimePickerTheme::dark(),
         }
     }
 }

src/time_picker/mod.rs

@@ -0,0 +1,332 @@
+mod theme;
+
+use crate::{
+    chrono::{Local, NaiveTime, Timelike},
+    components::{Binder, Follower, FollowerPlacement},
+    use_theme,
+    utils::{mount_style, ComponentRef},
+    AiIcon, Button, ButtonSize, ButtonVariant, Icon, Input, InputSuffix, SignalWatch, Theme,
+};
+use leptos::*;
+pub use theme::TimePickerTheme;
+
+#[component]
+pub fn TimePicker(#[prop(optional, into)] value: RwSignal<Option<NaiveTime>>) -> impl IntoView {
+    mount_style("time-picker", include_str!("./time-picker.css"));
+    let time_picker_ref = create_node_ref::<html::Div>();
+    let panel_ref = ComponentRef::<PanelRef>::default();
+    let is_show_panel = create_rw_signal(false);
+    let show_time_format = "%H:%M:%S";
+    let show_time_text = create_rw_signal(String::new());
+    let update_show_time_text = move || {
+        value.with_untracked(move |time| {
+            let text = time.as_ref().map_or(String::new(), |time| {
+                time.format(show_time_format).to_string()
+            });
+            show_time_text.set(text);
+        });
+    };
+    update_show_time_text();
+    let panel_selected_time = create_rw_signal(None::<NaiveTime>);
+    _ = panel_selected_time.watch(move |time| {
+        let text = time.as_ref().map_or(String::new(), |time| {
+            time.format(show_time_format).to_string()
+        });
+        show_time_text.set(text);
+    });
+
+    let on_input_blur = Callback::new(move |_| {
+        if let Ok(time) =
+            NaiveTime::parse_from_str(&show_time_text.get_untracked(), show_time_format)
+        {
+            if value.get_untracked() != Some(time) {
+                value.set(Some(time));
+                update_show_time_text();
+            }
+        } else {
+            update_show_time_text();
+        }
+    });
+    let close_panel = Callback::new(move |time: Option<NaiveTime>| {
+        if value.get_untracked() != time {
+            if time.is_some() {
+                value.set(time);
+            }
+            update_show_time_text();
+        }
+        is_show_panel.set(false);
+    });
+
+    let open_panel = Callback::new(move |_| {
+        panel_selected_time.set(value.get_untracked());
+        is_show_panel.set(true);
+        request_animation_frame(move || {
+            if let Some(panel_ref) = panel_ref.get_untracked() {
+                panel_ref.scroll_into_view();
+            }
+        });
+    });
+
+    view! {
+        <Binder target_ref=time_picker_ref>
+            <div ref=time_picker_ref>
+                <Input value=show_time_text on_focus=open_panel on_blur=on_input_blur>
+                    <InputSuffix slot>
+                        <Icon
+                            icon=Icon::from(AiIcon::AiClockCircleOutlined)
+                            style="font-size: 18px"
+                        />
+                    </InputSuffix>
+                </Input>
+            </div>
+            <Follower slot show=is_show_panel placement=FollowerPlacement::BottomStart>
+                <Panel selected_time=panel_selected_time close_panel time_picker_ref comp_ref=panel_ref/>
+            </Follower>
+        </Binder>
+    }
+}
+
+#[component]
+fn Panel(
+    selected_time: RwSignal<Option<NaiveTime>>,
+    time_picker_ref: NodeRef<html::Div>,
+    close_panel: Callback<Option<NaiveTime>>,
+    comp_ref: ComponentRef<PanelRef>,
+) -> impl IntoView {
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--thaw-item-font-color: {};",
+                theme.common.color_primary
+            ));
+            css_vars.push_str(&format!(
+                "--thaw-background-color: {};",
+                theme.time_picker.panel_background_color
+            ));
+            css_vars.push_str(&format!(
+                "--thaw-item-background-color-hover: {};",
+                theme.time_picker.panel_time_item_background_color_hover
+            ));
+            css_vars.push_str(&format!(
+                "--thaw-item-border-color: {};",
+                theme.time_picker.panel_border_color
+            ));
+        });
+        css_vars
+    });
+    let now = move |_| {
+        close_panel.call(Some(now_time()));
+    };
+    let ok = move |_| {
+        close_panel.call(selected_time.get_untracked());
+    };
+
+    let panel_ref = create_node_ref::<html::Div>();
+    #[cfg(any(feature = "csr", feature = "hydrate"))]
+    {
+        use leptos::wasm_bindgen::__rt::IntoJsResult;
+        let handle = window_event_listener(ev::click, move |ev| {
+            let el = ev.target();
+            let mut el: Option<web_sys::Element> =
+                el.into_js_result().map_or(None, |el| Some(el.into()));
+            let body = document().body().unwrap();
+            while let Some(current_el) = el {
+                if current_el == *body {
+                    break;
+                };
+                if panel_ref.get().is_none() {
+                    return;
+                }
+                if current_el == ***panel_ref.get_untracked().unwrap()
+                    || current_el == ***time_picker_ref.get_untracked().unwrap()
+                {
+                    return;
+                }
+                el = current_el.parent_element();
+            }
+            close_panel.call(None);
+        });
+        on_cleanup(move || handle.remove());
+    }
+    #[cfg(not(any(feature = "csr", feature = "hydrate")))]
+    {
+        _ = time_picker_ref;
+    }
+
+    let hour_ref = create_node_ref::<html::Div>();
+    let minute_ref = create_node_ref::<html::Div>();
+    let second_ref = create_node_ref::<html::Div>();
+    comp_ref.load(PanelRef {
+        hour_ref,
+        minute_ref,
+        second_ref,
+    });
+
+    view! {
+        <div class="thaw-time-picker-panel" style=move || css_vars.get() ref=panel_ref>
+            <div class="thaw-time-picker-panel__time">
+                <div class="thaw-time-picker-panel__time-hour" ref=hour_ref>
+
+                    {(0..24)
+                        .into_iter()
+                        .map(|hour| {
+                            let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
+                            let on_click = move |_| {
+                                selected_time
+                                    .update(move |time| {
+                                        *time = if let Some(time) = time {
+                                            time.with_hour(hour)
+                                        } else {
+                                            NaiveTime::from_hms_opt(hour, 0, 0)
+                                        }
+                                    });
+                                comp_ref.get_untracked().unwrap().scroll_into_view();
+                            };
+                            let is_selected = Memo::new(move |_| {
+                                selected_time.get().map_or(false, |v| v.hour() == hour)
+                            });
+                            view! {
+                                <PanelTimeItem value=hour on:click=on_click is_selected comp_ref/>
+                            }
+                        })
+                        .collect_view()} <div class="thaw-time-picker-panel__time-padding"></div>
+                </div>
+                <div class="thaw-time-picker-panel__time-minute" ref=minute_ref>
+
+                    {(0..60)
+                        .into_iter()
+                        .map(|minute| {
+                            let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
+                            let on_click = move |_| {
+                                selected_time
+                                    .update(move |time| {
+                                        *time = if let Some(time) = time {
+                                            time.with_minute(minute)
+                                        } else {
+                                            NaiveTime::from_hms_opt(now_time().hour(), minute, 0)
+                                        }
+                                    });
+                                comp_ref.get_untracked().unwrap().scroll_into_view();
+                            };
+                            let is_selected = Memo::new(move |_| {
+                                selected_time.get().map_or(false, |v| v.minute() == minute)
+                            });
+                            view! {
+                                <PanelTimeItem value=minute on:click=on_click is_selected comp_ref/>
+                            }
+                        })
+                        .collect_view()} <div class="thaw-time-picker-panel__time-padding"></div>
+                </div>
+                <div class="thaw-time-picker-panel__time-second" ref=second_ref>
+
+                    {(0..60)
+                        .into_iter()
+                        .map(|second| {
+                            let comp_ref = ComponentRef::<PanelTimeItemRef>::default();
+                            let on_click = move |_| {
+                                selected_time
+                                    .update(move |time| {
+                                        *time = if let Some(time) = time {
+                                            time.with_second(second)
+                                        } else {
+                                            now_time().with_second(second)
+                                        }
+                                    });
+                                comp_ref.get_untracked().unwrap().scroll_into_view();
+                            };
+                            let is_selected = Memo::new(move |_| {
+                                selected_time.get().map_or(false, |v| v.second() == second)
+                            });
+                            view! {
+                                <PanelTimeItem value=second on:click=on_click is_selected comp_ref/>
+                            }
+                        })
+                        .collect_view()} <div class="thaw-time-picker-panel__time-padding"></div>
+                </div>
+            </div>
+            <div class="thaw-time-picker-panel__footer">
+                <Button variant=ButtonVariant::Solid size=ButtonSize::Tiny on_click=now>
+                    "Now"
+                </Button>
+                <Button size=ButtonSize::Tiny on_click=ok>
+                    "OK"
+                </Button>
+            </div>
+        </div>
+    }
+}
+
+#[derive(Clone)]
+struct PanelRef {
+    hour_ref: NodeRef<html::Div>,
+    minute_ref: NodeRef<html::Div>,
+    second_ref: NodeRef<html::Div>,
+}
+
+impl PanelRef {
+    fn scroll_top(el: HtmlElement<html::Div>) {
+        if let Ok(Some(slected_el)) =
+            el.query_selector(".thaw-time-picker-panel__time-item--slected")
+        {
+            use wasm_bindgen::JsCast;
+            if let Ok(slected_el) = slected_el.dyn_into::<web_sys::HtmlElement>() {
+                el.set_scroll_top(slected_el.offset_top());
+            }
+        }
+    }
+
+    fn scroll_into_view(&self) {
+        if let Some(hour_el) = self.hour_ref.get_untracked() {
+            Self::scroll_top(hour_el);
+        }
+        if let Some(minute_el) = self.minute_ref.get_untracked() {
+            Self::scroll_top(minute_el);
+        }
+        if let Some(second_el) = self.second_ref.get_untracked() {
+            Self::scroll_top(second_el);
+        }
+    }
+}
+
+#[component]
+fn PanelTimeItem(
+    value: u32,
+    is_selected: Memo<bool>,
+    comp_ref: ComponentRef<PanelTimeItemRef>,
+) -> impl IntoView {
+    let item_ref = create_node_ref();
+    item_ref.on_load(move |_| {
+        let item_ref = PanelTimeItemRef { item_ref };
+        comp_ref.load(item_ref);
+    });
+    view! {
+        <div
+            class="thaw-time-picker-panel__time-item"
+            class=("thaw-time-picker-panel__time-item--slected", move || is_selected.get())
+            ref=item_ref
+        >
+
+            {format!("{value:02}")}
+
+        </div>
+    }
+}
+
+#[derive(Clone)]
+struct PanelTimeItemRef {
+    item_ref: NodeRef<html::Div>,
+}
+
+impl PanelTimeItemRef {
+    fn scroll_into_view(&self) {
+        if let Some(item_ref) = self.item_ref.get_untracked() {
+            item_ref.scroll_into_view_with_bool(true);
+        }
+    }
+}
+
+fn now_time() -> NaiveTime {
+    Local::now().time()
+}

src/time_picker/theme.rs

@@ -0,0 +1,26 @@
+use crate::theme::ThemeMethod;
+
+#[derive(Clone)]
+pub struct TimePickerTheme {
+    pub panel_background_color: String,
+    pub panel_time_item_background_color_hover: String,
+    pub panel_border_color: String,
+}
+
+impl ThemeMethod for TimePickerTheme {
+    fn light() -> Self {
+        Self {
+            panel_background_color: "#fff".into(),
+            panel_time_item_background_color_hover: "#f1f3f5".into(),
+            panel_border_color: "#e0e0e6".into(),
+        }
+    }
+
+    fn dark() -> Self {
+        Self {
+            panel_background_color: "#48484e".into(),
+            panel_time_item_background_color_hover: "#ffffff1a".into(),
+            panel_border_color: "#ffffff3d".into(),
+        }
+    }
+}

src/time_picker/time-picker.css

@@ -0,0 +1,53 @@
+.thaw-time-picker-panel {
+    width: 160px;
+    height: 260px;
+    background-color: var(--thaw-background-color);
+    border-radius: 3px;
+    box-sizing: border-box;
+    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+        0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+
+.thaw-time-picker-panel__time {
+    display: flex;
+    height: calc(100% - 40px);
+}
+
+.thaw-time-picker-panel__time-hour,
+.thaw-time-picker-panel__time-minute,
+.thaw-time-picker-panel__time-second {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.thaw-time-picker-panel__time-item {
+    height: 34px;
+    margin: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.thaw-time-picker-panel__time-padding {
+    height: 184px;
+}
+
+.thaw-time-picker-panel__time-item--slected,
+.thaw-time-picker-panel__time-item:hover {
+    background-color: var(--thaw-item-background-color-hover);
+}
+
+.thaw-time-picker-panel__time-item--slected {
+    color: var(--thaw-item-font-color);
+}
+
+.thaw-time-picker-panel__footer {
+    display: flex;
+    padding: 0 2px 2px;
+    height: 38px;
+    justify-content: space-evenly;
+    align-items: center;
+    border-top: 1px solid var(--thaw-item-border-color);
+}