dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deduplicate Switch animations (#287)

Browse source
This commit is contained in:
xda 2024-09-29 21:21:56 +09:00 committed by GitHub
parent baa45173d1
commit e43cc48465
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 171 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

258
crates/ui/src/switch.rs
View file

@ -1,13 +1,13 @@
use std::time::Duration; use std::{cell::RefCell, rc::Rc, time::Duration};
use crate::{h_flex, theme::ActiveTheme, Disableable, Sizable, Size}; use crate::{h_flex, theme::ActiveTheme, Disableable, Sizable, Size};
use gpui::{ use gpui::{
div, prelude::FluentBuilder as _, px, Animation, AnimationExt as _, Div, ElementId, div, prelude::FluentBuilder as _, px, Animation, AnimationExt as _, AnyElement, Element,
InteractiveElement, IntoElement, ParentElement as _, RenderOnce, SharedString, Stateful, ElementId, GlobalElementId, InteractiveElement, IntoElement, LayoutId, ParentElement as _,
Styled as _, WindowContext, SharedString, Styled as _, WindowContext,
}; };
type OnClick = Box<dyn Fn(&bool, &mut WindowContext) + 'static>; type OnClick = Rc<dyn Fn(&bool, &mut WindowContext)>;
pub enum LabelSide { pub enum LabelSide {
Left, Left,
@ -20,10 +20,8 @@ impl LabelSide {
} }
} }
#[derive(IntoElement)]
pub struct Switch { pub struct Switch {
id: ElementId, id: ElementId,
base: Stateful<Div>,
checked: bool, checked: bool,
disabled: bool, disabled: bool,
label: Option<SharedString>, label: Option<SharedString>,
@ -37,7 +35,6 @@ impl Switch {
let id: ElementId = id.into(); let id: ElementId = id.into();
Self { Self {
id: id.clone(), id: id.clone(),
base: div().id(id),
checked: false, checked: false,
disabled: false, disabled: false,
label: None, label: None,
@ -57,8 +54,11 @@ impl Switch {
self self
} }
pub fn on_click(mut self, handler: impl Fn(&bool, &mut WindowContext) + 'static) -> Self { pub fn on_click<F>(mut self, handler: F) -> Self
self.on_click = Some(Box::new(handler)); where
F: Fn(&bool, &mut WindowContext) + 'static,
{
self.on_click = Some(Rc::new(handler));
self self
} }
@ -82,83 +82,167 @@ impl Disableable for Switch {
} }
} }
impl RenderOnce for Switch { impl IntoElement for Switch {
fn render(self, cx: &mut gpui::WindowContext) -> impl IntoElement { type Element = Self;
let theme = cx.theme();
let checked = self.checked;
let (bg, toggle_bg) = match self.checked { fn into_element(self) -> Self::Element {
true => (theme.primary, theme.background), self
false => (theme.input, theme.background), }
}; }
let (bg, toggle_bg) = match self.disabled { #[derive(Default)]
true => (bg.opacity(0.3), toggle_bg.opacity(0.8)), pub struct SwitchState {
false => (bg, toggle_bg), prev_checked: Rc<RefCell<Option<bool>>>,
}; }
let (bg_width, bg_height) = match self.size { impl Element for Switch {
Size::XSmall | Size::Small => (px(28.), px(16.)), type RequestLayoutState = AnyElement;
_ => (px(36.), px(20.)),
}; type PrepaintState = ();
let bar_width = match self.size {
Size::XSmall | Size::Small => px(12.), fn id(&self) -> Option<ElementId> {
_ => px(16.), Some(self.id.clone())
}; }
let inset = px(2.);
fn request_layout(
h_flex() &mut self,
.id(self.id) global_id: Option<&GlobalElementId>,
.items_center() cx: &mut WindowContext,
.gap_2() ) -> (LayoutId, Self::RequestLayoutState) {
.when(self.label_side.left(), |this| this.flex_row_reverse()) cx.with_element_state::<SwitchState, _>(global_id.unwrap(), move |state, cx| {
.child( let state = state.unwrap_or_default();
// Switch Bar
self.base let theme = cx.theme();
.w(bg_width) let checked = self.checked;
.h(bg_height) let on_click = self.on_click.clone();
.rounded(bg_height / 2.)
.flex() let (bg, toggle_bg) = match self.checked {
.items_center() true => (theme.primary, theme.background),
.border(inset) false => (theme.input, theme.background),
.border_color(theme.transparent) };
.bg(bg)
.when(!self.disabled, |this| this.cursor_pointer()) let (bg, toggle_bg) = match self.disabled {
.child( true => (bg.opacity(0.3), toggle_bg.opacity(0.8)),
// Switch Toggle false => (bg, toggle_bg),
div() };
.rounded_full()
.bg(toggle_bg) let (bg_width, bg_height) = match self.size {
.size(bar_width) Size::XSmall | Size::Small => (px(28.), px(16.)),
.with_animation( _ => (px(36.), px(20.)),
ElementId::NamedInteger("move".into(), checked as usize), };
Animation::new(Duration::from_secs_f64(0.15)), let bar_width = match self.size {
move |this, delta| { Size::XSmall | Size::Small => px(12.),
let max_x = bg_width - bar_width - inset * 2; _ => px(16.),
let x = if checked { };
max_x * delta let inset = px(2.);
} else {
max_x - max_x * delta let mut element = h_flex()
}; .id(self.id.clone())
this.left(x) .items_center()
}, .gap_2()
), .when(self.label_side.left(), |this| this.flex_row_reverse())
), .child(
) // Switch Bar
.when_some(self.label, |this, label| { div()
this.child(div().child(label).map(|this| match self.size { .id(self.id.clone())
Size::XSmall | Size::Small => this.text_sm(), .w(bg_width)
_ => this.text_base(), .h(bg_height)
})) .rounded(bg_height / 2.)
}) .flex()
.when_some( .items_center()
self.on_click.filter(|_| !self.disabled), .border(inset)
|this, on_click| { .border_color(theme.transparent)
this.on_mouse_down(gpui::MouseButton::Left, move |_, cx| { .bg(bg)
cx.stop_propagation(); .when(!self.disabled, |this| this.cursor_pointer())
on_click(&!self.checked, cx); .child(
}) // Switch Toggle
}, div()
) .rounded_full()
.bg(toggle_bg)
.size(bar_width)
.map(|this| {
let prev_checked = state.prev_checked.clone();
if !self.disabled
&& prev_checked
.borrow()
.map_or(false, |prev| prev != checked)
{
let dur = Duration::from_secs_f64(0.15);
cx.spawn(|cx| async move {
cx.background_executor().timer(dur).await;
*prev_checked.borrow_mut() = Some(checked);
})
.detach();
this.with_animation(
ElementId::NamedInteger(
"move".into(),
checked as usize,
),
Animation::new(dur),
move |this, delta| {
let max_x = bg_width - bar_width - inset * 2;
let x = if checked {
max_x * delta
} else {
max_x - max_x * delta
};
this.left(x)
},
)
.into_any_element()
} else {
let max_x = bg_width - bar_width - inset * 2;
let x = if checked { max_x } else { px(0.) };
this.left(x).into_any_element()
}
}),
),
)
.when_some(self.label.clone(), |this, label| {
this.child(div().child(label).map(|this| match self.size {
Size::XSmall | Size::Small => this.text_sm(),
_ => this.text_base(),
}))
})
.when_some(
on_click
.as_ref()
.map(|c| c.clone())
.filter(|_| !self.disabled),
|this, on_click| {
let prev_checked = state.prev_checked.clone();
this.on_mouse_down(gpui::MouseButton::Left, move |_, cx| {
cx.stop_propagation();
*prev_checked.borrow_mut() = Some(checked);
on_click(&!checked, cx);
})
},
)
.into_any_element();
((element.request_layout(cx), element), state)
})
}
fn prepaint(
&mut self,
_: Option<&gpui::GlobalElementId>,
_: gpui::Bounds<gpui::Pixels>,
element: &mut Self::RequestLayoutState,
cx: &mut WindowContext,
) {
element.prepaint(cx);
}
fn paint(
&mut self,
_: Option<&gpui::GlobalElementId>,
_: gpui::Bounds<gpui::Pixels>,
element: &mut Self::RequestLayoutState,
_: &mut Self::PrepaintState,
cx: &mut WindowContext,
) {
element.paint(cx)
} }
} }