60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
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";
|
||
import {Product} from "../../../types/product";
|
||
|
||
type Props = {
|
||
visible: boolean;
|
||
products: Product[];
|
||
onSelected: (product: Product) => 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.productId.toString()}
|
||
renderItem={(product) => <SelectProductElement product={product.item} onPress={onSelected}/>}
|
||
ItemSeparatorComponent={FlashListSeparator}
|
||
>
|
||
|
||
</FlatList>
|
||
</View>
|
||
|
||
</Modal>
|
||
)
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
backgroundColor: background,
|
||
borderRadius: responsiveWidth(2),
|
||
paddingHorizontal: responsiveWidth(5),
|
||
paddingVertical: responsiveHeight(5),
|
||
rowGap: responsiveHeight(3),
|
||
marginVertical:responsiveHeight(10)
|
||
},
|
||
title: {
|
||
textAlign: "center"
|
||
},
|
||
listContainer: {
|
||
flex: 1
|
||
}
|
||
})
|
||
|
||
export default SelectProductModal; |