140 lines
4.2 KiB
JavaScript
140 lines
4.2 KiB
JavaScript
import React, { useRef } from "react";
|
|
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
StatusBar,
|
|
ImageBackground,
|
|
Text,
|
|
TouchableOpacity,
|
|
Animated,
|
|
PanResponder,
|
|
} from "react-native";
|
|
import EntypoIcon from "react-native-vector-icons/Entypo";
|
|
import Svg, { G, Polyline, Line, Circle, Rect, Text as SvgText } from 'react-native-svg';
|
|
|
|
|
|
|
|
let AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
|
let AnimatedG = Animated.createAnimatedComponent(G);
|
|
|
|
function SliderDraftView(props) {
|
|
const pan = useRef(new Animated.ValueXY()).current;
|
|
|
|
/*
|
|
const panResponder = useRef(
|
|
PanResponder.create({
|
|
onPanResponderTerminationRequest: () => { console.log("p1"); return false; },
|
|
onStartShouldSetPanResponder: () => { console.log("p2"); return true; },
|
|
onMoveShouldSetPanResponder: () => { console.log("p3"); return true; },
|
|
//onPanResponderMove: Animated.event([
|
|
// null,
|
|
// { dx: pan.x, dy: pan.y }
|
|
//]),
|
|
onPanResponderMove: (e, gesture) => {
|
|
console.log(gesture);
|
|
},
|
|
onPanResponderRelease: () => {
|
|
console.log("release");
|
|
Animated.spring(pan, { toValue: { x: 0, y: 0 } }).start();
|
|
}
|
|
})
|
|
);//.current;
|
|
*/
|
|
const panResponder = useRef(PanResponder.create({
|
|
onStartShouldSetPanResponder: () => true,
|
|
onMoveShouldSetPanResponderCapture: () => true,
|
|
onPanResponderMove: (_, { dx, dy }) => {
|
|
console.log("bla", dx, dy);
|
|
cx.setValue(dx);
|
|
cy.setValue(dy);
|
|
setCurrentPoint({ x: dx, y: dy });
|
|
},
|
|
onPanResponderRelease: (e, { dx, dy }) => {
|
|
console.log("release", dx, dy);
|
|
cx.extractOffset();
|
|
cy.extractOffset();
|
|
offsetX = offsetX + dx;
|
|
offsetY = offsetY + dy;
|
|
}
|
|
})).current;
|
|
|
|
|
|
console.log({ ...panResponder.panHandlers });
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
|
|
<StatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0.4)" translucent={true} />
|
|
<ImageBackground
|
|
source={require("../assets/pool_sky_background_blurred.jpg")}
|
|
resizeMode="cover"
|
|
style={{ flex: 1 }}
|
|
>
|
|
<View style={setupViewStyles.container}>
|
|
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
|
{props.backButton &&
|
|
<TouchableOpacity onPress={() => props.navigation.goBack()}>
|
|
<EntypoIcon name="chevron-left" style={setupViewStyles.backButton}></EntypoIcon>
|
|
</TouchableOpacity>
|
|
}
|
|
<Text style={setupViewStyles.headerText}>
|
|
Slider Draft
|
|
</Text>
|
|
</View>
|
|
<View style={{ flex: 1, justifyContent: "center" }}>
|
|
<Svg height="100%" width="100%" viewBox="0 0 200 200" {...panResponder.panHandler}>
|
|
<Rect x="10" y="10" rx="15" width="160" height="40" fill="rgba(255, 255, 255, 0.7)" />
|
|
<SvgText x="85" y="34" fill="rgba(80, 80, 80, 1)">42</SvgText>
|
|
|
|
|
|
<AnimatedCircle
|
|
x={pan.x} y={pan.y} r="20"
|
|
></AnimatedCircle>
|
|
|
|
<G >
|
|
<Line x1="25" y1="20" x2="25" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
|
|
<Line x1="45" y1="20" x2="45" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
|
|
<Line x1="65" y1="20" x2="65" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
|
|
<Line x1="85" y1="20" x2="85" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
|
|
<Line x1="105" y1="20" x2="105" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
|
|
<Line x1="125" y1="20" x2="125" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
|
|
<Line x1="145" y1="20" x2="145" y2="40" stroke="rgba(80, 80, 80, 0.7)" />
|
|
</G>
|
|
</Svg>
|
|
</View>
|
|
</View>
|
|
</ImageBackground>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
|
|
const setupViewStyles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: "space-between",
|
|
width: "80%",
|
|
marginLeft: 40,
|
|
marginTop: 60,
|
|
},
|
|
headerText: {
|
|
color: "rgba(255,255,255,1)",
|
|
fontSize: 25,
|
|
},
|
|
subtext: {
|
|
color: "rgba(255,255,255,1)",
|
|
textAlign: "left",
|
|
fontSize: 18,
|
|
lineHeight: 25,
|
|
width: "80%",
|
|
marginBottom: 50,
|
|
},
|
|
backButton: {
|
|
color: "rgba(255,255,255,1)",
|
|
fontSize: 40
|
|
},
|
|
});
|
|
|
|
export default SliderDraftView;
|