import React from 'react'; import { Animated, Dimensions, View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; import { primaryTextColor, foregroundColor, borderColor, brandColor } from '../../commonColors'; const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window'); const WRAPPER_HEIGHT = Platform.OS === 'ios' && WINDOW_HEIGHT < 800 ? 224 : 234; const BOTTOM_OFFSET = Platform.OS === 'ios' ? WRAPPER_HEIGHT : WRAPPER_HEIGHT + 24; const styles = { background: { position: 'absolute', width: WINDOW_WIDTH, height: WINDOW_HEIGHT, zIndex: 99, }, gridWrapper: { width: WINDOW_WIDTH, height: WRAPPER_HEIGHT, borderTopLeftRadius: 8, borderTopRightRadius: 8, paddingTop: 26, backgroundColor: foregroundColor, }, menuTitle: { color: primaryTextColor, fontSize: 15, fontWeight: 'bold', textAlign: 'center', }, iconGrid: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginVertical: 25, }, buttonWrapper: { borderTopWidth: 1, borderColor, paddingVertical: 16, alignItems: 'center', justifyContent: 'center', }, buttonText: { fontSize: 15, color: brandColor, fontWeight: 'bold', textAlign: 'center', }, }; class PanelViewBase extends React.Component { componentDidMount() { this.handleHideGrid(); } componentDidUpdate(prevProps) { const { isShowingPanel } = this.props; if (isShowingPanel && !prevProps.isShowingPanel) { this.handleShowGrid(); } if (!isShowingPanel && prevProps.isShowingPanel) { this.handleHideGrid(); } } fadeAction = new Animated.Value(0); slideAction = new Animated.Value(0); handleShowGrid = () => { Animated.timing(this.fadeAction, { toValue: 1, duration: 50, }).start(() => { Animated.timing(this.slideAction, { toValue: 1, duration: 100, }).start(); }); } handleHideGrid = () => { Animated.timing(this.slideAction, { toValue: 0, duration: 100, }).start(() => { Animated.timing(this.fadeAction, { toValue: 0, duration: 50, }).start(() => { this.props.hidePanel(); }); }); } render() { const { isShowingPanel, title, children } = this.props; if (!isShowingPanel) { return null; } return ( <TouchableWithoutFeedback onPress={this.handleHideGrid}> <Animated.View style={[ styles.background, { backgroundColor: this.fadeAction.interpolate({ inputRange: [0, 1], outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.4)'], }), }, ]} > <Animated.View style={[ styles.gridWrapper, { top: this.slideAction.interpolate({ inputRange: [0, 1], outputRange: [WINDOW_HEIGHT, WINDOW_HEIGHT - BOTTOM_OFFSET], }), }, ]} > <Text style={styles.menuTitle}>{title}</Text> <View style={styles.iconGrid}> {children} </View> <TouchableWithoutFeedback onPress={this.handleHideGrid}> <View style={styles.buttonWrapper}> <Text style={styles.buttonText}>Cancel</Text> </View> </TouchableWithoutFeedback> </Animated.View> </Animated.View> </TouchableWithoutFeedback> ); } } export default PanelViewBase;