Improve dropdown disabled state (#192)

This commit is contained in:
Floyd Wang 2024-08-30 15:26:56 +08:00 committed by GitHub
parent 0da882349f
commit ef49753d32
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 24 additions and 9 deletions

View file

@ -138,7 +138,7 @@ impl DropdownStory {
disabled_dropdown: cx.new_view(|cx| { disabled_dropdown: cx.new_view(|cx| {
Dropdown::new("disabled-dropdown", Vec::<SharedString>::new(), None, cx) Dropdown::new("disabled-dropdown", Vec::<SharedString>::new(), None, cx)
.small() .small()
.disabled() .disabled(true)
}), }),
} }
}) })

View file

@ -12,7 +12,7 @@ use crate::{
input::ClearButton, input::ClearButton,
list::{self, List, ListDelegate, ListItem}, list::{self, List, ListDelegate, ListItem},
theme::{ActiveTheme, Colorize}, theme::{ActiveTheme, Colorize},
v_flex, Icon, IconName, Sizable, Size, StyleSized, StyledExt, v_flex, Disableable, Icon, IconName, Sizable, Size, StyleSized, StyledExt,
}; };
actions!(dropdown, [Up, Down, Enter, Escape]); actions!(dropdown, [Up, Down, Enter, Escape]);
@ -386,8 +386,8 @@ where
} }
/// Set the disable state for the dropdown. /// Set the disable state for the dropdown.
pub fn disabled(mut self) -> Self { pub fn disabled(mut self, disabled: bool) -> Self {
self.disabled = true; self.disabled = disabled;
self self
} }
@ -590,7 +590,13 @@ where
.border_color(cx.theme().input) .border_color(cx.theme().input)
.rounded(px(cx.theme().radius)) .rounded(px(cx.theme().radius))
.shadow_sm() .shadow_sm()
.cursor_pointer() .map(|this| {
if self.disabled {
this.cursor_not_allowed()
} else {
this.cursor_pointer()
}
})
.overflow_hidden() .overflow_hidden()
.input_text_size(self.size) .input_text_size(self.size)
.map(|this| match self.width { .map(|this| match self.width {
@ -615,7 +621,13 @@ where
.child(self.display_title(cx)), .child(self.display_title(cx)),
) )
.when(show_clean, |this| { .when(show_clean, |this| {
this.child(ClearButton::new(cx).on_click(cx.listener(Self::clean))) this.child(ClearButton::new(cx).map(|this| {
if self.disabled {
this.disabled(true)
} else {
this.on_click(cx.listener(Self::clean))
}
}))
}) })
.when(!show_clean, |this| { .when(!show_clean, |this| {
let icon = match self.icon.clone() { let icon = match self.icon.clone() {
@ -629,7 +641,11 @@ where
} }
}; };
this.child(Icon::new(icon).text_color(cx.theme().muted_foreground)) this.child(
Icon::new(icon)
.text_color(cx.theme().muted_foreground)
.when(self.disabled, |this| this.cursor_not_allowed()),
)
}), }),
) )
.child( .child(

View file

@ -1,4 +1,4 @@
use gpui::{px, Styled as _, WindowContext}; use gpui::{px, WindowContext};
use crate::{button::Button, IconName, Sizable as _}; use crate::{button::Button, IconName, Sizable as _};
@ -10,6 +10,5 @@ impl ClearButton {
.icon(IconName::CircleX) .icon(IconName::CircleX)
.ghost() .ghost()
.with_size(px(14.)) .with_size(px(14.))
.cursor_pointer()
} }
} }