gpui-component/crates/story/src/radio_story.rs

use gpui::{
    div, px, App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render,
    Styled, Window,
};

use gpui_component::{
    h_flex,
    radio::{Radio, RadioGroup},
    v_flex, ActiveTheme,
};

use crate::section;

pub struct RadioStory {
    focus_handle: gpui::FocusHandle,
    radio_check1: bool,
    radio_check2: bool,
    radio_group_checked: Option<usize>,
}

impl super::Story for RadioStory {
    fn title() -> &'static str {
        "Radio"
    }

    fn description() -> &'static str {
        "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time."
    }

    fn new_view(window: &mut Window, cx: &mut App) -> Entity<impl Render + Focusable> {
        Self::view(window, cx)
    }
}

impl RadioStory {
    pub fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
        cx.new(|cx| Self::new(window, cx))
    }

    fn new(_: &mut Window, cx: &mut Context<Self>) -> Self {
        Self {
            focus_handle: cx.focus_handle(),
            radio_check1: false,
            radio_check2: true,
            radio_group_checked: Some(1),
        }
    }
}

impl Focusable for RadioStory {
    fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {
        self.focus_handle.clone()
    }
}

impl Render for RadioStory {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        v_flex()
            .gap_6()
            .child(
                section("Radio").max_w_md().child(
                    h_flex()
                        .w_full()
                        .gap_4()
                        .items_start()
                        .child(Radio::new("radio1").checked(self.radio_check1).on_click(
                            cx.listener(|this, v, _, _| {
                                this.radio_check1 = *v;
                            }),
                        ))
                        .child(
                            Radio::new("radio2")
                                .label("Radio")
                                .checked(self.radio_check2)
                                .on_click(cx.listener(|this, v, _, _| {
                                    this.radio_check2 = *v;
                                })),
                        ),
                ),
            )
            .child(
                section("Disabled")
                    .child(Radio::new("radio3").label("Disabled").disabled(true))
                    .child(
                        Radio::new("radio3")
                            .label("Disabled with Checked")
                            .checked(true)
                            .disabled(true),
                    ),
            )
            .child(
                section("Multi-line Label").child(
                    Radio::new("radio3")
                        .label("The long long label text.")
                        .child(
                            div()
                                .text_color(cx.theme().muted_foreground)
                                .child("This line should wrap when the text is too long."),
                        )
                        .w(px(300.))
                        .checked(true)
                        .disabled(true),
                ),
            )
            .child(
                section("Radio Group").max_w_md().child(
                    RadioGroup::horizontal("radio_group_1")
                        .children(["One", "Two", "Three"])
                        .selected_index(self.radio_group_checked)
                        .on_change(cx.listener(|this, selected_ix: &usize, _, cx| {
                            this.radio_group_checked = Some(*selected_ix);
                            cx.notify();
                        })),
                ),
            )
            .child(
                section("Radio Group Vertical (With container style)")
                    .max_w_md()
                    .child(
                        RadioGroup::vertical("radio_group_2")
                            .w(px(220.))
                            .p_2()
                            .border_1()
                            .border_color(cx.theme().border)
                            .rounded_md()
                            .disabled(true)
                            .child(Radio::new("one1").label("United States"))
                            .child(Radio::new("one2").label("Canada"))
                            .child(Radio::new("one3").label("Mexico"))
                            .selected_index(Some(1)),
                    ),
            )
    }
}