RangePicker view

A calendar with two ends and a running account of what they add up to.

A view survives a frame. Hold it in an Entity with cx.new(..) and reach it with .update(..).

The verified date-range scene in studio-dark

use gpui_kit::datetime::RangePicker;

Reviewed in date-range touch-dates.

Construct

new(ident: impl Into<Ident>, adapter: SharedDateAdapter, window: &mut Window, cx: &mut Context<Self>) -> Self

Options

Chain onto the value.

range(range: DayRange) -> Self
invalid(invalid: bool) -> Self

Commands

Need a Context, so they need a view.

set_control_size(size: gpui_kit_theme::ControlSize, cx: &mut Context<Self>)
set_overlay(overlay: impl Fn(Day) -> Option<DayMark> + 'static, cx: &mut Context<Self>)
set_range(range: Option<DayRange>, cx: &mut Context<Self>)
set_disabled(disabled: bool, cx: &mut Context<Self>)
set_invalid(invalid: bool, cx: &mut Context<Self>)

Queries

Only answer; they change nothing.

is_disabled() -> bool
calendar() -> &Entity<Calendar>
current_range() -> Option<DayRange>
state() -> RangeState
blocked() -> BlockedReport

Reports

The variants of the event it emits. It never applies the change itself.

StartPicked
EndPicked

Example · date-range

fn date_range(window: &mut Window, cx: &mut App) -> AnyElement {
    ensure(window, cx);
    let theme = cx.theme().clone();
    let dates = cx.global::<SceneDates>();
    let (incomplete, preview, blocked) = (
        dates.incomplete.clone(),
        dates.preview.clone(),
        dates.blocked.clone(),
    );
    // The first two ranges report the same thing, because they are the same
    // range; what differs is that the pointer is over a day in the second, so
    // the caption has to say which picture is which.
    let column = |caption: &'static str, picker: AnyElement| {
        div()
            .column()
            .w(px(320.0))
            .gap(px(theme.space(Space::Xs)))
            .child(
                crate::foundation::text(&theme, TypeScale::Caption, caption)
                    .text_tone(&theme, TextTone::Muted),
            )
            .child(picker)
    };
    stack(&theme)
        .child(
            div()
                .row()
                .items_start()
                .gap(px(theme.space(Space::Lg)))
                .child(column(
                    "a start with no end yet",
                    incomplete.into_any_element(),
                ))
                .child(column(
                    "the same start, previewing the end under the pointer",
                    preview.into_any_element(),
                )),
        )
        // The third picker used to overhang the fixed review frame and looked
        // narrower only because its right edge was clipped. Give every state
        // the same full-width review column instead of squeezing three across.
        .child(column(
            "a finished range with a blocked day inside it",
            blocked.into_any_element(),
        ))
        .into_any_element()
}

Source: crates/gpui-kit/src/datetime/range.rs