mirror of
https://github.com/yewprint/yewprint
synced 2025-02-16 12:08:25 +00:00
WIP: Collapse fix keep_children_mounted and clean-up
This commit is contained in:
parent
1fe1a32ff2
commit
0307fbea11
1 changed files with 6 additions and 13 deletions
|
@ -6,7 +6,6 @@ use yew::services::*;
|
||||||
pub struct Collapse {
|
pub struct Collapse {
|
||||||
height: Height,
|
height: Height,
|
||||||
translated: bool,
|
translated: bool,
|
||||||
disable_transition: bool,
|
|
||||||
overflow_visible: bool,
|
overflow_visible: bool,
|
||||||
render_children: bool,
|
render_children: bool,
|
||||||
height_when_open: Option<String>,
|
height_when_open: Option<String>,
|
||||||
|
@ -58,7 +57,6 @@ impl Component for Collapse {
|
||||||
} else {
|
} else {
|
||||||
Height::Zero
|
Height::Zero
|
||||||
},
|
},
|
||||||
disable_transition: false,
|
|
||||||
overflow_visible: false,
|
overflow_visible: false,
|
||||||
translated: false,
|
translated: false,
|
||||||
render_children: props.is_open || props.keep_children_mounted,
|
render_children: props.is_open || props.keep_children_mounted,
|
||||||
|
@ -132,7 +130,9 @@ impl Component for Collapse {
|
||||||
}
|
}
|
||||||
AnimationState::Closing => {
|
AnimationState::Closing => {
|
||||||
self.animation_state = AnimationState::Closed;
|
self.animation_state = AnimationState::Closed;
|
||||||
self.render_children = false;
|
if !self.props.keep_children_mounted {
|
||||||
|
self.render_children = false;
|
||||||
|
}
|
||||||
true
|
true
|
||||||
}
|
}
|
||||||
_ => false,
|
_ => false,
|
||||||
|
@ -140,9 +140,8 @@ impl Component for Collapse {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn rendered(&mut self, _first_render: bool) {
|
fn rendered(&mut self, _first_render: bool) {
|
||||||
let client_height = self.contents_ref.cast::<Element>().unwrap().client_height();
|
|
||||||
|
|
||||||
if self.render_children {
|
if self.render_children {
|
||||||
|
let client_height = self.contents_ref.cast::<Element>().unwrap().client_height();
|
||||||
self.height_when_open = Some(format!("{}px", client_height));
|
self.height_when_open = Some(format!("{}px", client_height));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -153,7 +152,7 @@ impl Component for Collapse {
|
||||||
}
|
}
|
||||||
|
|
||||||
fn view(&self) -> Html {
|
fn view(&self) -> Html {
|
||||||
let mut container_style = String::with_capacity(15);
|
let mut container_style = String::with_capacity(30);
|
||||||
match (self.height, self.height_when_open.as_ref()) {
|
match (self.height, self.height_when_open.as_ref()) {
|
||||||
(Height::Zero, _) => container_style.push_str("height: 0px; "),
|
(Height::Zero, _) => container_style.push_str("height: 0px; "),
|
||||||
(Height::Auto, _) => container_style.push_str("height: auto; "),
|
(Height::Auto, _) => container_style.push_str("height: auto; "),
|
||||||
|
@ -167,11 +166,8 @@ impl Component for Collapse {
|
||||||
if self.overflow_visible {
|
if self.overflow_visible {
|
||||||
container_style.push_str("overflow-y: visible; ");
|
container_style.push_str("overflow-y: visible; ");
|
||||||
}
|
}
|
||||||
if self.disable_transition {
|
|
||||||
container_style.push_str("transition: none 0s ease 0s; ");
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut content_style = String::with_capacity(31);
|
let mut content_style = String::with_capacity(40);
|
||||||
if !self.translated {
|
if !self.translated {
|
||||||
content_style.push_str("transform: translateY(0px); ");
|
content_style.push_str("transform: translateY(0px); ");
|
||||||
} else if let Some(ref height_when_open) = self.height_when_open {
|
} else if let Some(ref height_when_open) = self.height_when_open {
|
||||||
|
@ -179,9 +175,6 @@ impl Component for Collapse {
|
||||||
} else {
|
} else {
|
||||||
unreachable!("height_when_open was undefined while translated is set");
|
unreachable!("height_when_open was undefined while translated is set");
|
||||||
}
|
}
|
||||||
if self.disable_transition {
|
|
||||||
content_style.push_str("transition: none 0s ease 0s; ");
|
|
||||||
}
|
|
||||||
|
|
||||||
html! {
|
html! {
|
||||||
<div class="bp3-collapse" style={container_style}>
|
<div class="bp3-collapse" style={container_style}>
|
||||||
|
|
Loading…
Add table
Reference in a new issue