ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-11-28 01:52:56 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Revert "fixed posts not showing in profile screen"

Browse Source 
This reverts commit 9ae24649b1.
This commit is contained in:
noumantahir 2022-11-05 18:52:25 +05:00
parent 9ae24649b1
commit 0094704efc
1 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/collapsibleCard/view/collapsibleCardView.js
View File

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { View, TouchableHighlight } from 'react-native'; import { View, TouchableHighlight } from 'react-native';
import { View as AnimatedView } from 'react-native-animatable'; import Animated, { EasingNode } from 'react-native-reanimated';
// Constants // Constants
// Components // Components
@ -16,38 +17,55 @@ class CollapsibleCardView extends PureComponent {
* @prop { type } title - Collapsible title. * @prop { type } title - Collapsible title.
* *
*/ */
anime = {
height: new Animated.Value(-1),
expanded: false,
contentHeight: 0,
};
constructor(props) { constructor(props) {
super(props); super(props);
this.anime.expanded = props.expanded;
this.state = { this.state = {
expanded: props.expanded || false, expanded: props.expanded || false,
}; };
this.animatedContainerRef = React.createRef(null);
} }
// Component Functions
_initContentHeight = (event) => {
if (this.anime.contentHeight > 0) {
return;
}
this.anime.contentHeight = event.nativeEvent.layout.height;
this.anime.height.setValue(this.anime.expanded ? this._getMaxValue() : this._getMinValue());
};
_getMaxValue = () => this.anime.contentHeight;
_getMinValue = () => 0;
_toggleOnPress = () => { _toggleOnPress = () => {
const { expanded } = this.state; const { handleOnExpanded, moreHeight } = this.props;
if (this.animatedContainerRef.current) { Animated.timing(this.anime.height, {
this.animatedContainerRef.current.animate({ toValue: this.anime.expanded ? this._getMinValue() : this._getMaxValue() + (moreHeight || 0),
0: { height: expanded ? 0 : 200, opacity: expanded ? 0 : 1 }, duration: 200,
1: { height: expanded ? 200 : 0, opacity: expanded ? 1 : 0 }, easing: EasingNode.inOut(EasingNode.ease),
}); }).start();
} this.anime.expanded = !this.anime.expanded;
const { handleOnExpanded } = this.props;
this.setState({ this.setState({
expanded: !expanded, expanded: this.anime.expanded,
}); });
if (handleOnExpanded && expanded) { if (handleOnExpanded && this.anime.expanded) {
handleOnExpanded(); handleOnExpanded();
} }
}; };
UNSAFE_componentWillReceiveProps(nextProps) { UNSAFE_componentWillReceiveProps(nextProps) {
const { isExpanded, locked } = this.props; const { isExpanded, moreHeight, locked } = this.props;
const { expanded } = this.state; const { expanded } = this.state;
if ( if (
@ -57,6 +75,10 @@ class CollapsibleCardView extends PureComponent {
) { ) {
this._toggleOnPress(); this._toggleOnPress();
} }
if (moreHeight !== nextProps.moreHeight) {
this.anime.height.setValue(this._getMaxValue() + nextProps.moreHeight);
}
} }
render() { render() {
@ -96,11 +118,12 @@ class CollapsibleCardView extends PureComponent {
)} )}
</TouchableHighlight> </TouchableHighlight>
<AnimatedView ref={this.animatedContainerRef} duration={500}> <Animated.View
<View style={styles.content}> style={[styles.content, { height: this.anime.height, opacity: expanded ? 1 : 0 }]}
onLayout={(e) => this._initContentHeight(e)}
>
<View style={[!fitContent && !noContainer && styles.contentBody]}>{children}</View> <View style={[!fitContent && !noContainer && styles.contentBody]}>{children}</View>
</View> </Animated.View>
</AnimatedView>
</View> </View>
); );
} }