verstka

2023-10-15 06:37:46 +03:00
parent 67258c8114
commit 4f25112b5e
70 changed files with 482 additions and 64 deletions
--- a/src/screens/CommonPage/CommonPage.tsx
+++ b/src/screens/CommonPage/CommonPage.tsx
@@ -3,13 +3,17 @@ import LoginScreen from "../LoginScreen/LoginScreen";
 import MainScreen from "../MainScreen/MainScreen";
 import SearchBar from "../../components/SearchBar/SearchBar";
 import React from "react";
+import {background} from "../../css/colors";
+import {useSelector} from "react-redux";
+import {RootState} from "../../redux/store";

 function CommonPage() {
-
+    const dim = useSelector((state: RootState) => state.interface.dim);
    return (

        <View style={styles.main}>
            <MainScreen/>
+            <View style={[styles.overlay, {display: dim ? 'flex' : 'none'}]}/>
        </View>

    )
@@ -20,7 +24,13 @@ const styles = StyleSheet.create({
        display: "flex",
        flexDirection: "column",
        flexGrow: 1,
-        flex: 1
+        flex: 1,
+        backgroundColor: background
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 2,
    }
 });

--- a/src/screens/MainScreen/MainScreen.tsx
+++ b/src/screens/MainScreen/MainScreen.tsx
@@ -5,7 +5,7 @@ import BoxScreen from "../BoxScreen/BoxScreen";
 import BarcodeScreen from "../BarcodeScreen/BarcodeScreen";
 import MoneyScreen from "../MoneyScreen/MoneyScreen";
 import ProfileScreen from "../ProfileScreen/ProfileScreen";
-import {NavigationContainer} from "@react-navigation/native";
+import {DefaultTheme, NavigationContainer} from "@react-navigation/native";
 import moneyScreen from "../MoneyScreen/MoneyScreen";
 import profileScreen from "../ProfileScreen/ProfileScreen";
 import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
@@ -13,6 +13,7 @@ import {RFPercentage} from "react-native-responsive-fontsize";
 import LoginScreen from "../LoginScreen/LoginScreen";
 import OrderScreen from "../OrderScreen/OrderScreen";
 import OrdersScreen from "../OrdersScreen/OrdersScreen";
+import {background} from "../../css/colors";


 interface CustomTabProps {
@@ -31,7 +32,7 @@ const CustomTab = ({name, component, icon}: CustomTabProps) => ({
                style={{
                    width: RFPercentage(4),
                    height: RFPercentage(4),
-                    tintColor: color
+                    tintColor: color,
                }}
            />
        ),
@@ -71,11 +72,18 @@ function MainScreen() {
    ];

    return (
-        <NavigationContainer>
+        <NavigationContainer theme={{
+            ...DefaultTheme,
+            colors: {
+                ...DefaultTheme.colors,
+                background: background,
+                card: background
+            },
+        }}>

            <Tab.Navigator screenOptions={{
                tabBarStyle: styles.tabBarStyle,
-                headerTitle: ""
+                headerTitle: "",
            }}>
                {tabScreens.map(tabScreen =>
                    <Tab.Screen key={tabScreen.name} {...CustomTab({
@@ -92,18 +100,21 @@ function MainScreen() {

 const styles = StyleSheet.create({
    container: {
-        flex: 1
+        flex: 1,
+
+
    },
    tabBarStyle: {
        position: 'absolute',
        left: responsiveWidth(10),
        right: responsiveWidth(10),
        bottom: 0,
-        borderTopLeftRadius: 18,
-        borderTopRightRadius: 18,
+        borderTopLeftRadius: RFPercentage(3),
+        borderTopRightRadius: RFPercentage(3),
        elevation: 10,
        height: responsiveHeight(8),
-        paddingHorizontal: responsiveWidth(5)
+        paddingHorizontal: responsiveWidth(5),
+        backgroundColor: "white"
    }

 })
--- a/src/screens/OrderScreen/OrderScreen.tsx
+++ b/src/screens/OrderScreen/OrderScreen.tsx
@@ -65,42 +65,44 @@ function OrderScreen() {

 const styles = StyleSheet.create({
    container: {
-        padding: 30,
        width: "100%",
        height: "100%",
-        overflow: "hidden",
        display: "flex",
        flex: 1,
+        paddingHorizontal: responsiveWidth(5)
+
    },
    dataContainer: {
-        backgroundColor: "black",
+        // backgroundColor: "black",
        display: "flex",
        flexDirection: "row",
+        columnGap: responsiveWidth(3)
    },
    buttonsContainer: {
-        backgroundColor: "blue",
+        // backgroundColor: "blue",
        flex: 1,
        display: "flex",
        justifyContent: "center",
        paddingHorizontal: responsiveWidth(10)
    },
    buttonsWrapper: {
-        backgroundColor: "red",
+        // backgroundColor: "red",
        rowGap: responsiveHeight(3)
    },
    imageWrapper: {
        width: responsiveWidth(40),
+        height: responsiveHeight(40),
        // height: responsiveHeight(40),
-        backgroundColor: "red",
-        padding: RFPercentage(1)
+        // backgroundColor: "red",
    },
    image: {
        flex: 1,
        borderRadius: RFPercentage(3)
    },
    contentContainer: {
-        padding: RFPercentage(1),
-        backgroundColor: "pink",
+        padding: RFPercentage(2),
+        backgroundColor: "white",
+        borderRadius: RFPercentage(3),
        flex: 1

    },
--- a/src/screens/OrdersScreen/OrdersScreen.tsx
+++ b/src/screens/OrdersScreen/OrdersScreen.tsx
@@ -2,28 +2,99 @@ import {ScrollView, StyleSheet, View} from "react-native";
 import SearchBar from "../../components/SearchBar/SearchBar";
 import OrderCard from "../../components/OrderCard/OrderCard";
 import {RFPercentage} from "react-native-responsive-fontsize";
-import {responsiveHeight} from "react-native-responsive-dimensions";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import SortingButton from "../../components/SortingButton/SortingButton";
+import {useDispatch} from "react-redux";
+import {enableDim, disableDim} from "../../features/interface/interfaceSlice";
+import {BottomSheetModal} from "@gorhom/bottom-sheet";
+import {useMemo, useRef, useState} from "react";
+import {RadioButton, Button} from "react-native-paper";
+import DText from "../../components/DText/DText";
+import {blue} from "../../css/colors";
+import DTitle from "../../components/DTitle/DTitle";
+import BasicButton from "../../components/BasicButton/BasicButton";
+import authSlice from "../../features/auth/authSlice";

 function OrdersScreen() {
+
+    const dispatch = useDispatch();
+    const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+    const snapPoints = useMemo(() => ['30%', '30%'], []);
+    const [sortingValue, setSortingValue] = useState("createdOn");
    return (
        <View style={styles.container}>
            <SearchBar onSearch={() => {
            }}/>
+            <View style={styles.sortingButtonWrapper}>
+                <SortingButton onPress={() => {
+                    dispatch(enableDim());
+                    bottomSheetModalRef.current?.present();
+
+                }}/>
+            </View>
            <View style={styles.content}>
                <ScrollView keyboardShouldPersistTaps={"never"} showsHorizontalScrollIndicator={false}
                            showsVerticalScrollIndicator={false}
                            contentContainerStyle={styles.scrollContainer}>

-                    <OrderCard />
                    <OrderCard/>
                    <OrderCard/>
                    <OrderCard/>
                    <OrderCard/>
                    <OrderCard/>
                    <OrderCard/>
+                    <OrderCard/>
+
                </ScrollView>

            </View>
+            <BottomSheetModal
+                ref={bottomSheetModalRef}
+                snapPoints={snapPoints}
+                onDismiss={() => {
+                    dispatch(disableDim());
+                }}>
+                <View style={styles.sortingModalContainer}>
+                    <View style={styles.radioButtonContainer}>
+                        <RadioButton
+                            color={blue}
+                            uncheckedColor={'black'}
+                            value={'createdOn'}
+                            status={sortingValue == 'createdOn' ? 'checked' : 'unchecked'}
+                            onPress={() => setSortingValue('createdOn')}
+
+                        />
+                        <DText>По дате создания</DText>
+                    </View>
+                    <View style={styles.radioButtonContainer}>
+                        <RadioButton
+                            color={blue}
+                            uncheckedColor={'black'}
+                            value={'shipmentDate'}
+                            status={sortingValue == 'shipmentDate' ? 'checked' : 'unchecked'}
+                            onPress={() => setSortingValue('shipmentDate')}
+                        />
+                        <DText>По дате отгрузки</DText>
+                    </View>
+                    <View style={styles.radioButtonContainer}>
+                        <RadioButton
+                            color={blue}
+                            uncheckedColor={'black'}
+                            value={'shipmentDatee'}
+                            status={sortingValue == 'shipmentDatee' ? 'checked' : 'unchecked'}
+                            onPress={() => setSortingValue('shipmentDatee')}
+                        />
+                        <DText>По дате дрочки</DText>
+                    </View>
+                    <View style={styles.sortingModalButton}>
+                        <BasicButton onPress={() => {
+                            bottomSheetModalRef.current?.dismiss();
+                        }} label={'Применть'}/>
+
+                    </View>
+
+                </View>
+            </BottomSheetModal>
        </View>
    )
 }
@@ -33,15 +104,32 @@ const styles = StyleSheet.create({
        width: "100%",
        height: "100%",
        display: "flex",
+        paddingHorizontal: responsiveWidth(5),
+        rowGap: responsiveHeight(2),
+        fontWeight: '500'
    },
    content: {
        flex: 1,
-        paddingHorizontal: RFPercentage(3),
-        paddingTop: RFPercentage(3)
    },
    scrollContainer: {
        rowGap: responsiveHeight(2)

+    },
+    radioButtonContainer: {
+        flexDirection: "row",
+        alignItems: 'center',
+    },
+    sortingButtonWrapper: {},
+    sortingModalContainer: {
+        width: "100%",
+        height: "100%",
+        flex: 1,
+        padding: RFPercentage(3),
+        flexDirection: "column",
+    },
+    sortingModalButton: {
+        paddingHorizontal: responsiveWidth(30),
+        marginTop: "auto"
    }
 });

--- a/src/screens/ProfileScreen/ProfileScreen.tsx
+++ b/src/screens/ProfileScreen/ProfileScreen.tsx
@@ -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;