Files
Assemblr/src/screens/ProfileScreen/SettingsView.tsx

95 lines
3.2 KiB
TypeScript

import {GestureResponderEvent, Image, ScrollView, StyleSheet, TouchableOpacity, View} from "react-native";
import DText from "../../components/DText/DText";
import {RFPercentage} from "react-native-responsive-fontsize";
import {FC} from "react";
import assemblyApi from "../../api/assemblyApi";
import Toast from "react-native-toast-message";
import {reset} from "../../features/assembly/assemblySlice";
import {useDispatch} from "react-redux";
import {responsiveWidth} from "react-native-responsive-dimensions";
type SettingsElementProps = {
icon: any;
title: string;
onPress?: (event: GestureResponderEvent) => void
}
const SettingsElement: FC<SettingsElementProps> = ({icon, title, onPress}) => {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.actionsCarouselElementContainer}>
<View style={styles.actionsCarouselImageWrapper}>
<Image style={styles.actionsCarouselImage} source={icon}/>
</View>
<DText style={{textAlign: "center"}}>{title}</DText>
</View>
</TouchableOpacity>
)
}
const SettingsView: FC = () => {
const dispatch = useDispatch();
return (
<ScrollView horizontal={true}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.actionsCarousel}
>
<SettingsElement onPress={() => {
assemblyApi.cancel().then(response => {
Toast.show({
type: response.ok ? "success" : "error",
text1: "Отмена сборки",
text2: response.message,
});
dispatch(reset());
})
}} icon={require('assets/icons/settings/close.png')} title={'Отменить сборку'}/>
<SettingsElement onPress={() => {
assemblyApi.confirmCurrent().then(response => {
Toast.show({
type: response.ok ? "success" : "error",
text1: "Закрытие сборки",
text2: response.message,
});
dispatch(reset());
})
}} icon={require('assets/icons/settings/check.png')} title={'Закрыть сборку'}/>
</ScrollView>
)
}
const styles = StyleSheet.create({
actionsCarouselElementContainer: {
display: "flex",
alignItems: "center",
maxWidth: RFPercentage(10),
},
actionsCarouselImageWrapper: {
width: RFPercentage(10),
height: RFPercentage(10),
backgroundColor: "white",
borderRadius: 100,
borderWidth: RFPercentage(0.3),
padding: RFPercentage(1.5),
justifyContent: "center",
alignItems: "center"
},
actionsCarouselImage: {
resizeMode: "contain",
flex: 1,
width: "100%",
height: "100%",
},
actionsCarousel: {
flexDirection: "row",
columnGap: responsiveWidth(3),
},
});
export default SettingsView;