Mirrors/yewprint
2
0
Fork 0
mirror of https://github.com/yewprint/yewprint synced 2025-02-16 12:08:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

WIP: collapse: cleanup and fix when started opened

Browse source
This commit is contained in:
Cecile Tonglet 2020-09-12 12:08:26 +02:00
parent 3524115ab4
commit 2a77e33f77
1 changed files with 47 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/collapse.rs
View file

@ -39,17 +39,17 @@ enum AnimationState {
Closed,
}
pub enum Message {
DelayedStateChange,
}
impl Component for Collapse {
type Message = Message;
type Message = ();
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
Collapse {
height: None,
height: if props.is_open {
Some("auto".to_string())
} else {
None
},
disable_transition: false,
overflow_visible: false,
translated: false,
@ -61,16 +61,44 @@ impl Component for Collapse {
AnimationState::Closed
},
contents_ref: NodeRef::default(),
callback_delayed_state_change: link.callback(|_| Message::DelayedStateChange),
callback_delayed_state_change: link.callback(|_| ()),
handle_delayed_state_change: None,
props,
link,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Message::DelayedStateChange => match self.animation_state {
fn change(&mut self, props: Self::Properties) -> ShouldRender {
if self.props != props {
if props.is_open {
match self.animation_state {
AnimationState::Open | AnimationState::Opening => {}
_ => {
self.animation_state = AnimationState::OpenStart;
self.render_children = true;
self.translated = false;
}
}
} else {
match self.animation_state {
AnimationState::Closed | AnimationState::Closing => {}
_ => {
self.animation_state = AnimationState::ClosingStart;
self.height = self.height_when_open.as_ref().map(|x| format!("{}px", x));
self.translated = true;
}
}
}
self.props = props;
true
} else {
false
}
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
match self.animation_state {
AnimationState::OpenStart => {
self.animation_state = AnimationState::Opening;
self.height = self.height_when_open.as_ref().map(|x| format!("{}px", x));
@ -90,62 +118,28 @@ impl Component for Collapse {
true
}
AnimationState::Opening => {
crate::log!("open");
self.animation_state = AnimationState::Open;
self.height = Some("auto".to_string());
true
}
AnimationState::Closing => {
crate::log!("closed");
self.animation_state = AnimationState::Closed;
self.render_children = false;
true
}
_ => false,
},
}
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
if self.props != props {
if props.is_open {
match self.animation_state {
AnimationState::Open | AnimationState::Opening => {}
_ => {
crate::log!("openstart");
self.animation_state = AnimationState::OpenStart;
self.render_children = true;
self.translated = false;
}
}
} else {
match self.animation_state {
AnimationState::Closed | AnimationState::Closing => {}
_ => {
crate::log!("closingstart");
self.animation_state = AnimationState::ClosingStart;
self.height = self.height_when_open.as_ref().map(|x| format!("{}px", x));
self.translated = true;
}
}
}
self.props = props;
true
} else {
false
}
}
fn rendered(&mut self, _first_render: bool) {
let client_height = self.contents_ref.cast::<Element>().unwrap().client_height();
match self.animation_state {
AnimationState::OpenStart | AnimationState::ClosingStart => {
crate::log!("openstart -> opening {}", client_height);
if self.render_children {
self.height_when_open = Some(client_height);
self.link.send_message(Message::DelayedStateChange);
}
match self.animation_state {
AnimationState::OpenStart | AnimationState::ClosingStart => self.link.send_message(()),
_ => {}
}
}
@ -171,7 +165,7 @@ impl Component for Collapse {
} else if let Some(ref height_when_open) = self.height_when_open {
content_style.push_str(&format!("transform: translateY(-{}px); ", height_when_open));
} else {
crate::log!("translated but height unknown");
unreachable!();
}
if self.disable_transition {
content_style.push_str("transition: none 0s ease 0s; ");