From 9785481abadbe740f6e731c5bb26ac77eab5e0b1 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Mon, 18 Dec 2023 15:21:04 -0500 Subject: [PATCH] Make `Disclosure` accept an ID (#3701) This PR makes the `Disclosure` component accept an ID rather than using a static ID for all disclosures. Release Notes: - N/A --- crates/ui2/src/components/disclosure.rs | 6 +- crates/ui2/src/components/list/list_header.rs | 87 ++++++++++--------- crates/ui2/src/components/list/list_item.rs | 2 +- .../ui2/src/components/stories/disclosure.rs | 4 +- 4 files changed, 53 insertions(+), 46 deletions(-) diff --git a/crates/ui2/src/components/disclosure.rs b/crates/ui2/src/components/disclosure.rs index 7d0f911d9689372971585f6d76148ffa35ed1b59..729023986d2f1bda905c17850d2e209bc982071b 100644 --- a/crates/ui2/src/components/disclosure.rs +++ b/crates/ui2/src/components/disclosure.rs @@ -4,13 +4,15 @@ use crate::{prelude::*, Color, Icon, IconButton, IconSize}; #[derive(IntoElement)] pub struct Disclosure { + id: ElementId, is_open: bool, on_toggle: Option>, } impl Disclosure { - pub fn new(is_open: bool) -> Self { + pub fn new(id: impl Into, is_open: bool) -> Self { Self { + id: id.into(), is_open, on_toggle: None, } @@ -30,7 +32,7 @@ impl RenderOnce for Disclosure { fn render(self, _cx: &mut WindowContext) -> Self::Rendered { IconButton::new( - "toggle", + self.id, match self.is_open { true => Icon::ChevronDown, false => Icon::ChevronRight, diff --git a/crates/ui2/src/components/list/list_header.rs b/crates/ui2/src/components/list/list_header.rs index d082574a92fbdc36cc09d132c192b5f018920042..0c07867c6d08941258488349b67498b25e832d1b 100644 --- a/crates/ui2/src/components/list/list_header.rs +++ b/crates/ui2/src/components/list/list_header.rs @@ -1,5 +1,6 @@ +use gpui::{AnyElement, ClickEvent, Div, Stateful}; + use crate::{h_stack, prelude::*, Disclosure, Label}; -use gpui::{AnyElement, ClickEvent, Div}; #[derive(IntoElement)] pub struct ListHeader { @@ -75,48 +76,52 @@ impl Selectable for ListHeader { } impl RenderOnce for ListHeader { - type Rendered = Div; + type Rendered = Stateful
; fn render(self, cx: &mut WindowContext) -> Self::Rendered { - h_stack().w_full().relative().group("list_header").child( - div() - .h_7() - .when(self.inset, |this| this.px_2()) - .when(self.selected, |this| { - this.bg(cx.theme().colors().ghost_element_selected) - }) - .flex() - .flex_1() - .items_center() - .justify_between() - .w_full() - .gap_1() - .child( - h_stack() - .gap_1() - .children( - self.toggle - .map(|is_open| Disclosure::new(is_open).on_toggle(self.on_toggle)), - ) - .child( - div() - .flex() - .gap_1() - .items_center() - .children(self.start_slot) - .child(Label::new(self.label.clone()).color(Color::Muted)), - ), - ) - .child(h_stack().children(self.end_slot)) - .when_some(self.end_hover_slot, |this, end_hover_slot| { - this.child( - div() - .absolute() - .right_0() - .visible_on_hover("list_header") - .child(end_hover_slot), + h_stack() + .id(self.label.clone()) + .w_full() + .relative() + .group("list_header") + .child( + div() + .h_7() + .when(self.inset, |this| this.px_2()) + .when(self.selected, |this| { + this.bg(cx.theme().colors().ghost_element_selected) + }) + .flex() + .flex_1() + .items_center() + .justify_between() + .w_full() + .gap_1() + .child( + h_stack() + .gap_1() + .children(self.toggle.map(|is_open| { + Disclosure::new("toggle", is_open).on_toggle(self.on_toggle) + })) + .child( + div() + .flex() + .gap_1() + .items_center() + .children(self.start_slot) + .child(Label::new(self.label.clone()).color(Color::Muted)), + ), ) - }), - ) + .child(h_stack().children(self.end_slot)) + .when_some(self.end_hover_slot, |this, end_hover_slot| { + this.child( + div() + .absolute() + .right_0() + .visible_on_hover("list_header") + .child(end_hover_slot), + ) + }), + ) } } diff --git a/crates/ui2/src/components/list/list_item.rs b/crates/ui2/src/components/list/list_item.rs index a8ca45d1d7ae9ea123d7959392a9e9763a6e9080..bdb5c2b854f2cfb7a04cbd70334d81a4daab98c4 100644 --- a/crates/ui2/src/components/list/list_item.rs +++ b/crates/ui2/src/components/list/list_item.rs @@ -193,7 +193,7 @@ impl RenderOnce for ListItem { .absolute() .left(rems(-1.)) .when(is_open, |this| this.visible_on_hover("")) - .child(Disclosure::new(is_open).on_toggle(self.on_toggle)) + .child(Disclosure::new("toggle", is_open).on_toggle(self.on_toggle)) })) .child( h_stack() diff --git a/crates/ui2/src/components/stories/disclosure.rs b/crates/ui2/src/components/stories/disclosure.rs index 7a2c4194562b0696c0c303a70172b3bac96eedb4..cf2491b387c2e4bfba228a4fa4166ca5af9041c1 100644 --- a/crates/ui2/src/components/stories/disclosure.rs +++ b/crates/ui2/src/components/stories/disclosure.rs @@ -13,8 +13,8 @@ impl Render for DisclosureStory { Story::container() .child(Story::title_for::()) .child(Story::label("Toggled")) - .child(Disclosure::new(true)) + .child(Disclosure::new("toggled", true)) .child(Story::label("Not Toggled")) - .child(Disclosure::new(false)) + .child(Disclosure::new("not_toggled", false)) } }