76 lines
1.7 KiB
JavaScript
76 lines
1.7 KiB
JavaScript
import React, { useRef } from "react";
|
|
import { SafeAreaView, Animated, View, StyleSheet, Button, PanResponder } from "react-native";
|
|
import Theme from '../theme.style.js';
|
|
|
|
export default function SidePanel(props){
|
|
|
|
const pan = useRef(new Animated.ValueXY()).current;
|
|
|
|
const panResponder = useRef(
|
|
PanResponder.create({
|
|
onMoveShouldSetPanResponder: () => true,
|
|
onPanResponderGrant: () => {
|
|
pan.setOffset({
|
|
x: pan.x._value,
|
|
y: pan.y._value
|
|
});
|
|
},
|
|
onPanResponderMove: Animated.event(
|
|
[
|
|
null,
|
|
{ dx: pan.x, dy: pan.y }
|
|
]
|
|
),
|
|
onPanResponderRelease: () => {
|
|
pan.flattenOffset();
|
|
}
|
|
})
|
|
).current;
|
|
|
|
const defaultTransform = [{ translateY: pan.y.interpolate({
|
|
inputRange: [Theme.screen.h / 4, Theme.screen.h / 2.15],
|
|
outputRange: [Theme.screen.h / 4, Theme.screen.h / 2.15 ],
|
|
extrapolate: 'clamp'
|
|
}) }]
|
|
|
|
const activeTransform = [{ translateY: pan.y.interpolate({
|
|
inputRange: [Theme.screen.h / 4, Theme.screen.h / 2.15],
|
|
outputRange: [Theme.screen.h / 4, Theme.screen.h / 2.15],
|
|
extrapolate: 'clamp'
|
|
}) }]
|
|
|
|
return (
|
|
<Animated.View
|
|
style={{
|
|
position: 'absolute',
|
|
zIndex: 1,
|
|
bottom: 5,
|
|
transform: activeTransform
|
|
}}
|
|
{...panResponder.panHandlers}
|
|
>
|
|
<View style={styles.box}>
|
|
{props.content}
|
|
</View>
|
|
</Animated.View>)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
titleText: {
|
|
fontSize: 14,
|
|
lineHeight: 24,
|
|
fontWeight: "bold"
|
|
},
|
|
box: {
|
|
height: 400,
|
|
width: Theme.screen.w,
|
|
// backgroundColor: "blue",
|
|
borderRadius: 5
|
|
}
|
|
});
|