kdxcxs
4 years ago
4 changed files with 149 additions and 13 deletions
@ -0,0 +1,14 @@ |
|||||
|
import React, {Component} from 'react'; |
||||
|
import YooForumTopicUI from '../ui/YooForumTopicUI'; |
||||
|
|
||||
|
export default class YooForumTopic extends Component { |
||||
|
render() { |
||||
|
return ( |
||||
|
<YooForumTopicUI |
||||
|
topic={this.props.topic} |
||||
|
showDetail={this.props.showDetail} |
||||
|
hideDetail={this.props.hideDetail} |
||||
|
/> |
||||
|
); |
||||
|
} |
||||
|
} |
@ -1,25 +1,69 @@ |
|||||
import React, {Component} from 'react'; |
import React, {Component, createRef} from 'react'; |
||||
import {View, Text, StyleSheet} from 'react-native'; |
import { |
||||
|
Animated, |
||||
|
View, |
||||
|
Text, |
||||
|
StyleSheet, |
||||
|
Pressable, |
||||
|
Dimensions, |
||||
|
} from 'react-native'; |
||||
|
|
||||
|
const screenWidth = Dimensions.get('window').width; |
||||
const styles = StyleSheet.create({ |
const styles = StyleSheet.create({ |
||||
container: { |
container: { |
||||
borderWidth: 1, |
backgroundColor: 'mintcream', |
||||
|
borderRadius: 8, |
||||
|
padding: 16, |
||||
|
margin: 8, |
||||
|
width: screenWidth - 16, |
||||
}, |
}, |
||||
title: { |
title: { |
||||
fontSize: 36, |
fontSize: 24, |
||||
}, |
}, |
||||
owner: { |
owner: { |
||||
fontSize: 24, |
fontSize: 16, |
||||
}, |
}, |
||||
}); |
}); |
||||
|
const AnimatedPressable = Animated.createAnimatedComponent(Pressable); |
||||
|
|
||||
export default class YooForumTopicUI extends Component { |
export default class YooForumTopicUI extends Component { |
||||
|
constructor(props) { |
||||
|
super(props); |
||||
|
this.state = { |
||||
|
detailShowing: false, |
||||
|
layoutY: 0, |
||||
|
translate: new Animated.ValueXY({x: 0, y: 0}), |
||||
|
}; |
||||
|
this.topicHeaderRef = createRef(); |
||||
|
this.onPress = this.onPress.bind(this); |
||||
|
} |
||||
|
|
||||
|
onPress() { |
||||
|
if (!this.state.detailShowing) { |
||||
|
this.setState({detailShowing: true}); |
||||
|
this.props.showDetail(this); |
||||
|
} else { |
||||
|
this.setState({detailShowing: false}); |
||||
|
this.props.hideDetail(this); |
||||
|
} |
||||
|
} |
||||
|
|
||||
render() { |
render() { |
||||
return ( |
return ( |
||||
<View style={styles.container}> |
<AnimatedPressable |
||||
<Text style={styles.title}>{this.props.topic.title}</Text> |
style={[ |
||||
<Text style={styles.owner}>{this.props.topic.owner}</Text> |
styles.container, |
||||
</View> |
{transform: this.state.translate.getTranslateTransform()}, |
||||
|
]} |
||||
|
onPress={this.onPress} |
||||
|
onLayout={(event) => { |
||||
|
this.setState({layoutY: event.nativeEvent.layout.y}); |
||||
|
}}> |
||||
|
<View ref={this.topicHeaderRef}> |
||||
|
<Text style={styles.owner}>{this.props.topic.owner}</Text> |
||||
|
<Text style={styles.title}>{this.props.topic.title}</Text> |
||||
|
</View> |
||||
|
</AnimatedPressable> |
||||
); |
); |
||||
} |
} |
||||
} |
} |
||||
|
Loading…
Reference in new issue