You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.7 KiB
62 lines
1.7 KiB
import React, { useRef, useState } from "react";
|
|
import {
|
|
ScrollView,
|
|
Animated,
|
|
} from "react-native";
|
|
import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import Icons from '../themes/Icons';
|
|
import Colors from "../themes/Colors";
|
|
import Metrics from "../themes/Metrics";
|
|
import { styles } from "../screens/styles/AppStyles";
|
|
import Fade from "./Fade";
|
|
|
|
function ScrollingPicker(props) {
|
|
const scrollX = useRef(new Animated.Value(0)).current;
|
|
|
|
function onScroll(event){
|
|
if (event.nativeEvent.contentOffset.x === 0) {
|
|
props.modeSetter('square');
|
|
} else if (event.nativeEvent.contentOffset.x === (Metrics.icons.buttonIcon * 2)) {
|
|
props.modeSetter('addition');
|
|
}
|
|
Animated.event([
|
|
{
|
|
nativeEvent: {
|
|
contentOffset: {
|
|
x: scrollX
|
|
}
|
|
}
|
|
}
|
|
], {useNativeDriver: true})
|
|
}
|
|
|
|
return (
|
|
<ScrollView
|
|
horizontal={true}
|
|
pagingEnabled={true}
|
|
showsHorizontalScrollIndicator={false}
|
|
style={styles.modePicker}
|
|
onScroll={onScroll}
|
|
scrollEventThrottle={0}
|
|
>
|
|
<Fade faded={props.mode !== 'square'} duration={250}>
|
|
<MaterialIcon
|
|
name={Icons.squareIcons.square}
|
|
color={Colors.material.dark}
|
|
size={Metrics.icons.buttonIcon}
|
|
style={styles.modePickerMargin}
|
|
/>
|
|
</Fade>
|
|
<Fade faded={props.mode !== 'addition'} duration={250}>
|
|
<MaterialIcon
|
|
name={Icons.squareIcons.plus}
|
|
color={Colors.material.dark}
|
|
size={Metrics.icons.buttonIcon}
|
|
style={styles.modePickerMargin}
|
|
/>
|
|
</Fade>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
export default ScrollingPicker;
|