verstka
This commit is contained in:
@@ -1,14 +1,197 @@
|
||||
import {Button, Text, View} from "react-native";
|
||||
import {Button, Text, View, StyleSheet, TouchableOpacity, Image, ScrollView} from "react-native";
|
||||
import {useAppDispatch} from "../../redux/store";
|
||||
import * as process from "process";
|
||||
import {responsiveFontSize, responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
|
||||
import {background, blue, gray} from "../../css/colors";
|
||||
import {RFPercentage} from "react-native-responsive-fontsize";
|
||||
import DText from "../../components/DText/DText";
|
||||
import DTitle from "../../components/DTitle/DTitle";
|
||||
import {ScreenStackHeaderLeftView} from "react-native-screens";
|
||||
import Separator from "../../components/Separator/Separator";
|
||||
import {BottomSheetModal} from "@gorhom/bottom-sheet";
|
||||
import {useMemo, useRef, useState} from "react";
|
||||
|
||||
function ProfileScreen() {
|
||||
|
||||
type SettingsElementProps = {
|
||||
icon: any;
|
||||
title: string;
|
||||
}
|
||||
const SettingsElement: React.FC<SettingsElementProps> = ({icon, title}) => {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{fontSize: 36}}>Profile</Text>
|
||||
<TouchableOpacity>
|
||||
|
||||
<View style={styles.actionsCarouselElementContainer}>
|
||||
<View style={styles.actionsCarouselImageWrapper}>
|
||||
<Image style={styles.actionsCarouselImage} source={icon}/>
|
||||
</View>
|
||||
<DText>{title}</DText>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
)
|
||||
}
|
||||
type HistoryElementProps = {
|
||||
cost: number;
|
||||
description: string;
|
||||
color: string;
|
||||
}
|
||||
const HistoryElement: React.FC<HistoryElementProps> = ({cost, description, color}) => {
|
||||
const formatNumber = (n: number): string => n >= 0 ? `+${n}` : `${n}`;
|
||||
return (
|
||||
<View style={styles.historyElementContainer}>
|
||||
<DText style={{
|
||||
fontSize: responsiveFontSize(2),
|
||||
color: color,
|
||||
fontWeight: "500"
|
||||
}}>{formatNumber(cost)} руб</DText>
|
||||
<DText style={{fontSize: responsiveFontSize(1.5), color: gray, fontWeight: "400"}}>{description}</DText>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function ProfileScreen() {
|
||||
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
|
||||
const snapPoints = useMemo(() => ['25%', '40%'], []);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<View style={styles.headerInfo}>
|
||||
<DTitle style={styles.headerText}>Ваш баланс: 228 руб</DTitle>
|
||||
<DTitle style={styles.headerText}>Собрано товаров: 1337 шт</DTitle>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
<View style={styles.content}>
|
||||
<View style={styles.actionsCarouselContainer}>
|
||||
<ScrollView horizontal={true}
|
||||
showsVerticalScrollIndicator={false}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.actionsCarousel}
|
||||
>
|
||||
<SettingsElement icon={require('assets/icons/settings/withdraw.png')} title={'Вывод'}/>
|
||||
<SettingsElement icon={require('assets/icons/settings/statistics.png')} title={'Статистика'}/>
|
||||
<SettingsElement icon={require('assets/icons/settings/printer.png')} title={'Принтеры'}/>
|
||||
</ScrollView>
|
||||
</View>
|
||||
<Separator/>
|
||||
<View style={styles.historyContainer}>
|
||||
<DTitle>История операций</DTitle>
|
||||
<ScrollView
|
||||
showsHorizontalScrollIndicator={false}
|
||||
showsVerticalScrollIndicator={false}
|
||||
style={styles.historyElements}
|
||||
contentContainerStyle={styles.historyElementsContainer}>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
<HistoryElement cost={25} description={"сбор товара №36243869"} color={"#2478F8"}/>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
<BottomSheetModal ref={bottomSheetModalRef}
|
||||
snapPoints={snapPoints}
|
||||
onDismiss={() => {
|
||||
setModalVisible(false);
|
||||
}}
|
||||
>
|
||||
<View style={{flex: 1}}>
|
||||
<DText>хуй</DText>
|
||||
</View>
|
||||
</BottomSheetModal>
|
||||
|
||||
<View style={[styles.overlay, {display: modalVisible ? 'flex' : 'none'}]}/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
// backgroundColor: "red",
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
overlay: {
|
||||
...StyleSheet.absoluteFillObject, // Это заполнит родительский элемент абсолютным позиционированием
|
||||
backgroundColor: 'rgba(104, 104, 104, 0.50)',
|
||||
zIndex: 2, // Значение zIndex больше, чем у content, поэтому overlay будет выше
|
||||
},
|
||||
historyElementContainer: {
|
||||
width: "100%",
|
||||
backgroundColor: "white",
|
||||
borderRadius: RFPercentage(2),
|
||||
padding: RFPercentage(2),
|
||||
elevation: 1
|
||||
},
|
||||
historyContainer: {
|
||||
paddingVertical: responsiveHeight(2),
|
||||
flex: 1,
|
||||
// backgroundColor: "red"
|
||||
},
|
||||
historyElements: {
|
||||
marginTop: responsiveHeight(3),
|
||||
},
|
||||
historyElementsContainer: {
|
||||
rowGap: responsiveHeight(2),
|
||||
},
|
||||
header: {
|
||||
backgroundColor: blue,
|
||||
borderBottomLeftRadius: RFPercentage(3),
|
||||
borderBottomRightRadius: RFPercentage(3),
|
||||
elevation: 10,
|
||||
paddingHorizontal: responsiveWidth(5),
|
||||
paddingVertical: responsiveHeight(3),
|
||||
color: "white",
|
||||
display: "flex",
|
||||
flexDirection: "row"
|
||||
},
|
||||
headerText: {
|
||||
color: "white"
|
||||
},
|
||||
headerInfo: {
|
||||
// backgroundColor: "red"
|
||||
},
|
||||
actionsCarousel: {
|
||||
flexDirection: "row",
|
||||
columnGap: responsiveWidth(3),
|
||||
},
|
||||
actionsCarouselContainer: {
|
||||
// backgroundColor: "red",
|
||||
paddingVertical: responsiveHeight(5)
|
||||
},
|
||||
actionsCarouselImage: {
|
||||
resizeMode: "contain",
|
||||
flex: 1,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
},
|
||||
actionsCarouselImageWrapper: {
|
||||
width: RFPercentage(10),
|
||||
height: RFPercentage(10),
|
||||
backgroundColor: "white",
|
||||
borderRadius: 100,
|
||||
borderWidth: RFPercentage(0.3),
|
||||
padding: RFPercentage(1),
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
|
||||
},
|
||||
actionsCarouselElementContainer: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
paddingHorizontal: responsiveWidth(5),
|
||||
},
|
||||
|
||||
})
|
||||
export default ProfileScreen;
|
||||
Reference in New Issue
Block a user