142 lines
3.8 KiB
JavaScript
142 lines
3.8 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
var React = require('react');
|
|
var ReactNative = require('react-native');
|
|
var {Animated, PanResponder, StyleSheet, Text, View} = ReactNative;
|
|
|
|
var AnExBobble = require('./AnExBobble');
|
|
var AnExChained = require('./AnExChained');
|
|
var AnExScroll = require('./AnExScroll');
|
|
var AnExTilt = require('./AnExTilt');
|
|
|
|
class AnExSet extends React.Component<Object, any> {
|
|
constructor(props: Object) {
|
|
super(props);
|
|
function randColor() {
|
|
var colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
|
|
return 'rgb(' + colors.join(',') + ')';
|
|
}
|
|
this.state = {
|
|
closeColor: randColor(),
|
|
openColor: randColor(),
|
|
};
|
|
}
|
|
render(): React.Node {
|
|
var backgroundColor = this.props.openVal
|
|
? this.props.openVal.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [
|
|
this.state.closeColor, // interpolates color strings
|
|
this.state.openColor,
|
|
],
|
|
})
|
|
: this.state.closeColor;
|
|
var panelWidth =
|
|
(this.props.containerLayout && this.props.containerLayout.width) || 320;
|
|
return (
|
|
<View style={styles.container}>
|
|
<Animated.View
|
|
style={[styles.header, {backgroundColor}]}
|
|
{...this.state.dismissResponder.panHandlers}>
|
|
<Text style={[styles.text, styles.headerText]}>{this.props.id}</Text>
|
|
</Animated.View>
|
|
{this.props.isActive && (
|
|
<View style={styles.stream}>
|
|
<View style={styles.card}>
|
|
<Text style={styles.text}>July 2nd</Text>
|
|
<AnExTilt isActive={this.props.isActive} />
|
|
<AnExBobble />
|
|
</View>
|
|
<AnExScroll panelWidth={panelWidth} />
|
|
<AnExChained />
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
UNSAFE_componentWillMount() {
|
|
this.state.dismissY = new Animated.Value(0);
|
|
this.state.dismissResponder = PanResponder.create({
|
|
onStartShouldSetPanResponder: () => this.props.isActive,
|
|
onPanResponderGrant: () => {
|
|
Animated.spring(this.props.openVal, {
|
|
// Animated value passed in.
|
|
toValue: this.state.dismissY.interpolate({
|
|
// Track dismiss gesture
|
|
inputRange: [0, 300], // and interpolate pixel distance
|
|
outputRange: [1, 0], // to a fraction.
|
|
}),
|
|
useNativeDriver: true,
|
|
}).start();
|
|
},
|
|
onPanResponderMove: Animated.event(
|
|
[null, {dy: this.state.dismissY}], // track pan gesture
|
|
{useNativeDriver: true},
|
|
),
|
|
onPanResponderRelease: (e, gestureState) => {
|
|
if (gestureState.dy > 100) {
|
|
this.props.onDismiss(gestureState.vy); // delegates dismiss action to parent
|
|
} else {
|
|
Animated.spring(this.props.openVal, {
|
|
toValue: 1, // animate back open if released early
|
|
useNativeDriver: true,
|
|
}).start();
|
|
}
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
var styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
alignItems: 'center',
|
|
paddingTop: 18,
|
|
height: 90,
|
|
},
|
|
stream: {
|
|
flex: 1,
|
|
backgroundColor: 'rgb(230, 230, 230)',
|
|
},
|
|
card: {
|
|
margin: 8,
|
|
padding: 8,
|
|
borderRadius: 6,
|
|
backgroundColor: 'white',
|
|
shadowRadius: 2,
|
|
shadowColor: 'black',
|
|
shadowOpacity: 0.2,
|
|
shadowOffset: {height: 0.5},
|
|
},
|
|
text: {
|
|
padding: 4,
|
|
paddingBottom: 10,
|
|
fontWeight: 'bold',
|
|
fontSize: 18,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
headerText: {
|
|
fontSize: 25,
|
|
color: 'white',
|
|
shadowRadius: 3,
|
|
shadowColor: 'black',
|
|
shadowOpacity: 1,
|
|
shadowOffset: {height: 1},
|
|
},
|
|
});
|
|
|
|
module.exports = AnExSet;
|