Open christinehesher opened 8 years ago
@crysfel awesome job. working very good with sliding. but facing same issue, its not mount with expanded: false .
please help me out.
I accomplished this by using .measure in componentDidMount().
Example: First set a timeout on componentDidMount():
componentDidMount() {
setTimeout( this._setToggleClosed.bind(this) );
}
Then in the _setToggleClosed function, set your min and max heights based on the refs of your two containers, and set the value of your animation to the min height:
_setToggleClosed() {
this.refs.textContainer.measure((ox, oy, width, height, px, py) => {
this.setState({
maxHeight: height
});
});
this.refs.labelContainer.measure((ox, oy, width, height, px, py) => {
this.setState({
minHeight: height
});
this.state.animation.setValue(height);
});
}
what is refs.textContainer.measure here?
@fostertime i have initgrated your code in my code but it is not working
initialy i need toggle to be closed
@prasann278 solution here: https://github.com/crysfel/Panels/issues/1#issuecomment-274549511
_setMaxHeight(event) {
if (!this.state.maxHeight) {
this.setState({
maxHeight: event.nativeEvent.layout.height,
});
}
}
_setMinHeight(event) {
if (!this.state.minHeight) {
this.setState({
minHeight: event.nativeEvent.layout.height,
animation: new Animated.Value(event.nativeEvent.layout.height),
});
}
}
and set expanded to false
Hey @hungdev , it is working but at the initial panels are showing as expanded and then slowly closing. Any workaround for this ?
@ShaikhKabeer Any findings here?
Hey @HotSpotNick ,used the same code mentioned by @hungdev and it's working fine.
Got a solution to having it work both ways..
Added accepting an initial
prop to set the default value.
state = {
title: this.props.title,
+ expanded: this.props.initial,
animation: new Animated.Value()
}
Modified methods further upon @hungdev's solution
_setMaxHeight(event) {
if (!this.props.initial && this.state.maxHeight) return
this.setState({
maxHeight: event.nativeEvent.layout.height
})
}
_setMinHeight(event) {
if (!this.props.initial && this.state.minHeight) return
this.setState({
minHeight: event.nativeEvent.layout.height,
animation: !this.props.initial ? new Animated.Value(event.nativeEvent.layout.height) : this.state.animation
})
}
Working Fine with example below.
<Panel title={'Title'} initial>
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
</Panel>
<Panel title={'Title'} initial={false}>
Hello there! I can't figure out how to make the body hidden when the component mounts. Please help me out, thanks in advance.