ebanutsya

src/components/Modals/SelectProductModal/SelectProductModal.tsx

@@ -0,0 +1,59 @@
+import {FC} from "react";
+import {FlatList, StyleSheet, View} from "react-native";
+import Modal from "react-native-modal";
+import {FlashList} from "@shopify/flash-list";
+import SelectProductElement from "./SelectProductElement";
+import {SupplierProduct} from "../../../types/supplierProduct";
+import FlashListSeparator from "../../FlashListSeparator/FlashListSeparator";
+import DTitle from "../../DTitle/DTitle";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {background} from "../../../css/colors";
+
+type Props = {
+    visible: boolean;
+    products: SupplierProduct[];
+    onSelected: (product: SupplierProduct) => void
+}
+
+
+const SelectProductModal: FC<Props> = ({visible, products, onSelected}) => {
+    return (
+        <Modal isVisible={visible}>
+            <View style={styles.container}>
+                <DTitle style={styles.title}>К штрихкоду привязано несколько
+                    товаров, выберите конкретный</DTitle>
+                <FlatList
+                    keyboardShouldPersistTaps={"never"}
+                    data={products}
+                    showsHorizontalScrollIndicator={false}
+                    showsVerticalScrollIndicator={false}
+                    keyExtractor={(product) => product.supplierProductId.toString()}
+                    renderItem={(product) => <SelectProductElement product={product.item} onPress={onSelected}/>}
+                    ItemSeparatorComponent={FlashListSeparator}
+                >
+
+                </FlatList>
+            </View>
+
+        </Modal>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: background,
+        borderRadius: responsiveWidth(1),
+        paddingHorizontal: responsiveWidth(5),
+        paddingVertical: responsiveHeight(5),
+        rowGap: responsiveHeight(3),
+        marginVertical:responsiveHeight(10)
+    },
+    title: {
+        textAlign: "center"
+    },
+    listContainer: {
+        flex: 1
+    }
+})
+
+export default SelectProductModal;