orbital-date-pickers 0.1.1

Date and time picker components for Orbital
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

//! [`TimeField`] — segmented time input bound to [`OrbitalDateTime`].

use leptos::prelude::*;
use orbital_macros::component_doc;
use orbital_theme::use_theme_options;

use crate::shared::picker_style_sheet;
use crate::{use_datetime_locale, SegmentedDatetimeField};

use super::field_types::{TimeFieldAppearance, TimeFieldBind};

/// Segmented time input bound to [`OrbitalDateTime`] on a reference calendar day.
///
/// TimeField renders hour/minute (and meridiem for 12-hour) segments. Parsed values are
/// anchored to `appearance.reference_date` or the nearest [`DatetimeLocale`](crate::DatetimeLocale)
/// default. For scroll-column time selection, use core [`TimePicker`](orbital_core_components::TimePicker).
///
/// # When to use
///
/// - Time-of-day entry with keyboard-friendly segments
/// - Scheduling forms paired with a date field on the same reference day
///
/// # Usage
///
/// 1. Bind `Option<OrbitalDateTime>` via [`TimeFieldBind`].
/// 2. Set `appearance.format` to `Time12` or `Time24`.
/// 3. Set `appearance.timezone` and `reference_date` when the anchor day or zone differs from defaults.
///
/// # Lifecycle
///
/// - **Value:** completed time segments commit on blur via [`SegmentedDatetimeField`].
/// - **Open state:** no popover — segments are always editable inline.
///
/// # Timezone
///
/// `appearance.timezone` controls how hour/minute segments resolve to [`OrbitalDateTime`]
/// on `appearance.reference_date`.
///
/// # Examples
///
/// ## Time segments
/// Default 12-hour segmented input with bind readout for E2E.
/// <!-- preview -->
/// ```rust
/// use orbital_base_components::{OrbitalDateTime, ToUnixSeconds};
/// use crate::preview::{PickerPreviewExample, PickerPreviewKnobs};
/// let value = RwSignal::new(None::<OrbitalDateTime>);
/// view! {
///     <PickerPreviewExample data_testid="time-field-preview">
///         <PickerPreviewKnobs />
///         <TimeField bind=value />
///         <div data-testid="time-field-preview-VALUE">{move || value.get().map(|v| v.to_unix_seconds().to_string()).unwrap_or_else(|| "none".to_string())}</div>
///     </PickerPreviewExample>
/// }
/// ```
///
/// ## 24-hour format
/// Hour and minute segments without meridiem.
/// <!-- preview -->
/// ```rust
/// use orbital_base_components::OrbitalDateTime;
/// use crate::preview::PickerPreviewExample;
/// let value = RwSignal::new(None::<OrbitalDateTime>);
/// view! {
///     <PickerPreviewExample data_testid="TF-02">
///         <TimeField bind=value appearance=TimeFieldAppearance::time24() />
///     </PickerPreviewExample>
/// }
/// ```
///
/// ## Bind readout
/// Completed segments update the bound value readout.
/// <!-- preview -->
/// ```rust
/// use orbital_base_components::{OrbitalDateTime, ToUnixSeconds};
/// use crate::preview::PickerPreviewExample;
/// let value = RwSignal::new(None::<OrbitalDateTime>);
/// view! {
///     <PickerPreviewExample data_testid="TF-03">
///         <TimeField bind=value />
///         <div data-testid="TF-03-VALUE">{move || value.get().map(|v| v.to_unix_seconds().to_string()).unwrap_or_else(|| "none".to_string())}</div>
///     </PickerPreviewExample>
/// }
/// ```
#[component_doc(
    category = "Calendar & Time",
    preview_slug = "time-field",
    preview_label = "Time Field",
    preview_icon = icondata::AiFieldTimeOutlined,
)]
#[component]
pub fn TimeField(
    /// Value binding for the segmented time input.
    #[prop(optional, into)]
    bind: TimeFieldBind,
    /// Format, reference day, and disabled state.
    #[prop(optional, into)]
    appearance: TimeFieldAppearance,
    /// Optional CSS class on the layout wrapper.
    #[prop(optional, into)]
    class: MaybeProp<String>,
) -> impl IntoView {
    let TimeFieldBind { value, id, name } = bind;
    let TimeFieldAppearance {
        format,
        reference_date,
        timezone,
        disabled,
        minute_step: _,
    } = appearance;

    let _locale = use_datetime_locale();
    let theme_options = use_theme_options();
    let resolved_format = Signal::derive(move || format.get());
    let resolved_timezone = Signal::derive(move || timezone.get());
    let resolved_reference = Signal::derive(move || reference_date.get().start_of_day());

    let root_class = move || {
        let mut parts = vec!["orb-picker-segmented-field-host".to_string()];
        if let Some(extra) = class.get() {
            if !extra.is_empty() {
                parts.push(extra);
            }
        }
        let _ = theme_options.get();
        parts.join(" ")
    };

    view! {
        <style>{picker_style_sheet()}</style>
        <div class=root_class data-orbital-picker="">
            <SegmentedDatetimeField
                value=value
                format=resolved_format
                timezone=resolved_timezone
                reference_date=resolved_reference
                disabled=disabled
                testid_prefix="time-field"
                is_time=true
                id=id
                name=name
            />
        </div>
    }
}