ebanutsya

src/components/OrderCard/OrderCard.tsx

@@ -5,42 +5,36 @@ import DText from "../DText/DText";
 import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
 import DTitle from "../DTitle/DTitle";
 import {Order} from "../../types/order";
+import OrderProductsList from "./OrderProductsList";
 
 type Props = {
     onPress?: (event: GestureResponderEvent) => void
+    onSelect: (order: Order) => void
     order: Order
 
 }
-const OrderCard: FC<Props> = React.memo(({onPress, order}) => {
-
+const OrderCard: FC<Props> = React.memo(({onPress, onSelect, order}) => {
 
     return (
         <TouchableOpacity onPress={() => {
-            console.log("pressed11")
+            onSelect(order);
         }}>
-            <View style={styles.container}>
-                <View style={styles.imageWrapper}>
-                    <Image style={styles.image} source={{uri: order.imageUrl}}/>
-                </View>
-                <View style={styles.description}>
-                    <View style={styles.descriptionContent}>
-                        <View style={styles.title}>
+            <View style={styles.container}><View style={styles.description}>
+                <View style={styles.descriptionContent}>
+                    <View style={styles.title}>
 
-                            <DTitle>{order.orderNumber}</DTitle>
-                            <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
-                        </View>
-                        <DText>Количество: 5</DText>
-                        <DText>Поставщик: {order.supplierName}</DText>
-                        <DText>Селлер: {order.sellerName}</DText>
-                        <DText>Цвет: ГОЛУБОЙ</DText>
-                    </View>
-
-                    <View style={styles.descriptionStatus}>
-                        <DText>
-                            Ожидает сборки
-                        </DText>
+                        <DTitle>{order.orderNumber}</DTitle>
+                        <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
                     </View>
+                    <DText>Селлер: {order.sellerName}</DText>
+                    <DText>Маркетплейс: {order.marketplaceName}</DText>
                 </View>
+                <View style={styles.descriptionStatus}>
+                    <DText>
+                        Ожидает сборки
+                    </DText>
+                </View>
+            </View>
 
             </View>
         </TouchableOpacity>
@@ -52,7 +46,7 @@ const styles = StyleSheet.create({
         backgroundColor: "white",
         display: "flex",
         borderRadius: RFPercentage(3),
-        height: responsiveHeight(20),
+        height: responsiveHeight(15),
         flexDirection: "row",
         padding: RFPercentage(2),
         flex: 1

src/components/OrderCard/OrderProductsList.tsx

@@ -0,0 +1,68 @@
+import {FC} from "react";
+import {FlatList, StyleSheet, View, Image, TouchableOpacity} from "react-native";
+import {OrderProduct} from "../../types/order";
+import DTitle from "../DTitle/DTitle";
+import DText from "../DText/DText";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import {background} from "../../css/colors";
+
+type ListProps = {
+    products: OrderProduct[];
+    onSelected: (product: OrderProduct) => void;
+}
+type CardProps = {
+    product: OrderProduct;
+    onPress: (product: OrderProduct) => void;
+    id: number;
+}
+const OrderProductCard: FC<CardProps> = ({product, onPress, id}) => {
+    return (
+        <TouchableOpacity onPress={() => onPress(product)}>
+            <View style={cardStyles.container}>
+                <View style={cardStyles.content}>
+                    <DText>{id + 1}) {product.productName}</DText>
+                </View>
+            </View>
+        </TouchableOpacity>
+
+    )
+}
+const cardStyles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        backgroundColor: background,
+        borderRadius: RFPercentage(1),
+        padding: RFPercentage(1)
+    },
+    content:{
+
+    }
+})
+const OrderProductsList: FC<ListProps> = ({products, onSelected}) => {
+    return (
+
+        <View style={listStyles.container}>
+            <DTitle style={listStyles.title}>Товары</DTitle>
+            <FlatList data={products}
+                      contentContainerStyle={{rowGap: responsiveHeight(1)}}
+                      renderItem={(item) => <OrderProductCard id={item.index} product={item.item}
+                                                              onPress={onSelected}/>}/>
+        </View>
+
+    )
+}
+
+
+const listStyles = StyleSheet.create({
+    container: {
+        backgroundColor: "white",
+        flex: 1
+    },
+    title: {
+        marginBottom: responsiveHeight(2),
+        textAlign: "center"
+    }
+})
+
+export default OrderProductsList;