You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							100 lines
						
					
					
						
							2.9 KiB
						
					
					
				
			
		
		
	
	
							100 lines
						
					
					
						
							2.9 KiB
						
					
					
				| import React, { useState, useEffect } from "react"; | |
| 
 | |
| import { | |
|   View, | |
|   ScrollView, | |
|   StyleSheet, | |
|   Dimensions, | |
|   SafeAreaView, | |
|   StatusBar, | |
|   LayoutAnimation, | |
| } from "react-native"; | |
| import { connect } from "react-redux"; | |
| import { book } from "../../redux/actions"; | |
| import tw from "tailwind-rn"; | |
| import Book from "./components/Book"; | |
| import Search from "../../components/Search"; | |
| import Select from "../../components/Select"; | |
| import Drawer from "../../components/Drawer"; | |
| 
 | |
| function Products({ grades, productTypes, books }) { | |
|   const [position, setPosition] = useState("100%"); | |
|   const [productType, setProductType] = useState("کتاب فیزیکی"); | |
|   const [grade, setGrade] = useState(""); | |
|   const [search, setSearch] = useState(""); | |
| 
 | |
|   useEffect(() => {}, []); | |
|   const setBoxPosition = () => { | |
|     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); | |
|     setPosition(position === "100%" ? "0%" : "100%"); | |
|   }; | |
|   const onChange = (name, value) => {}; | |
|   return ( | |
|     <SafeAreaView | |
|       style={{ | |
|         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, | |
|         position: "relative", | |
|       }} | |
|     > | |
|       <Drawer setBoxPosition={setBoxPosition} position={position} /> | |
|       <View style={tw("flex flex-col px-4 h-28 bg-white")}> | |
|         <Search | |
|           value={search} | |
|           onChange={setSearch} | |
|           placeholder={"نام کتاب یا دوره را جستجو کنید"} | |
|         /> | |
|         <View | |
|           style={[ | |
|             tw("flex flex-1 flex-row justify-between items-center my-2"), | |
|           ]} | |
|         > | |
|           <Select | |
|             defaultValue={"کتاب فیزیکی"} | |
|             value={productType} | |
|             onChange={setProductType} | |
|             options={productTypes} | |
|             width={"48%"} | |
|           /> | |
|           <Select | |
|             defaultValue={"همه پایه"} | |
|             value={grade} | |
|             onChange={setGrade} | |
|             options={Object.values(grades)} | |
|             width={"48%"} | |
|           /> | |
|         </View> | |
|       </View> | |
|       <ScrollView contentContainerStyle={{ paddingBottom: 100 }}> | |
|         <View | |
|           style={tw( | |
|             "flex w-full px-4 flex-row flex-wrap justify-between bg-white" | |
|           )} | |
|         > | |
|           {productType === "کتاب فیزیکی" && | |
|             books.map((book, index) => ( | |
|               <Book book={book} key={index} grades={grades} type={1} /> | |
|             ))} | |
|           {productType === "کتاب دیجیتال" && | |
|             books.map((book, index) => ( | |
|               <Book book={book} key={index} grades={grades} type={0} /> | |
|             ))} | |
|         </View> | |
|       </ScrollView> | |
|     </SafeAreaView> | |
|   ); | |
| } | |
| 
 | |
| const mapStateToProps = (state) => ({ | |
|   grades: state.publicApi.grades, | |
|   books: state.book.list, | |
| }); | |
| 
 | |
| const mapDispatchToProps = { | |
|   getBooks: book.list, | |
| }; | |
| 
 | |
| export default connect(mapStateToProps, mapDispatchToProps)(Products); | |
| 
 | |
| Products.defaultProps = { | |
|   productTypes: ["کتاب فیزیکی", "کتاب دیجیتال", "ویدئوها", "اشتراک"], | |
| };
 | |
| 
 |