reza added new home and products

master
Reza_ashrafi 3 years ago
parent 5e8a976514
commit b9f4596117
  1. 57
      package-lock.json
  2. BIN
      src/assets/icons/search.png
  3. 55
      src/components/Search.js
  4. 35
      src/components/Select.js
  5. 84
      src/screens/Products/Card/index.js
  6. BIN
      src/screens/Products/assets/poster.png
  7. 43
      src/screens/Products/components/Book.js
  8. 77
      src/screens/Products/components/Video.js
  9. 107
      src/screens/Products/index.js
  10. 42
      yarn.lock

57
package-lock.json generated

@ -10,9 +10,12 @@
"dependencies": {
"@react-native-async-storage/async-storage": "^1.15.9",
"@react-native-community/async-storage": "^1.12.1",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.4",
"i18next": "^21.5.3",
"react": "17.0.2",
"react-i18next": "^11.14.3",
"react-native": "0.66.0",
"react-native-awesome-alerts": "^1.5.2",
"react-native-camera": "^4.2.1",
@ -2097,6 +2100,23 @@
"resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
"integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
},
"node_modules/@react-navigation/bottom-tabs": {
"version": "6.0.9",
"resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.9.tgz",
"integrity": "sha512-uRoq6Zd7lPNnLqNQkKC28eR62tpqcDeuakZU1sO8N46FtvrcTuNLoIlssrGty3GF7ALBIxCypn4A93t3nbmMrQ==",
"dependencies": {
"@react-navigation/elements": "^1.2.1",
"color": "^3.1.3",
"warn-once": "^0.1.0"
},
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
"react-native": "*",
"react-native-safe-area-context": ">= 3.0.0",
"react-native-screens": ">= 3.0.0"
}
},
"node_modules/@react-navigation/core": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.1.0.tgz",
@ -5875,6 +5895,14 @@
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
"dev": true
},
"node_modules/html-parse-stringify": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
"dependencies": {
"void-elements": "3.1.0"
}
},
"node_modules/html-tags": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
@ -5934,6 +5962,14 @@
"node": ">=10.17.0"
}
},
"node_modules/i18next": {
"version": "21.5.3",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-21.5.3.tgz",
"integrity": "sha512-9R8127a0/N5okiD7eeo6XBPQsHgHsLr1GdQEa35Pcw305ArC9KZDLs9kbgdn3xuVUNYlVu8+gWzz73eVkna0gA==",
"dependencies": {
"@babel/runtime": "^7.12.0"
}
},
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -10035,6 +10071,19 @@
}
}
},
"node_modules/react-i18next": {
"version": "11.14.3",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.14.3.tgz",
"integrity": "sha512-Hf2aanbKgYxPjG8ZdKr+PBz9sY6sxXuZWizxCYyJD2YzvJ0W9JTQcddVEjDaKyBoCyd3+5HTerdhc9ehFugc6g==",
"dependencies": {
"@babel/runtime": "^7.14.5",
"html-parse-stringify": "^3.0.1"
},
"peerDependencies": {
"i18next": ">= 19.0.0",
"react": ">= 16.8.0"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -12401,6 +12450,14 @@
"resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
"integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
},
"node_modules/void-elements": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
"integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

@ -0,0 +1,55 @@
import React, {useState} from 'react';
import {
TextInput,
View,
Dimensions,
StyleSheet,
Pressable,
Image,
} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import searchIcon from '../assets/icons/search.png';
const width = Dimensions.get('window').width;
const Search = ({
placeholder,
textAlign,
direction,
onChange,
value,
}) => {
const styles = StyleSheet.create({
inputStyle: {
fontSize: width / 30,
color: '#000',
borderWidth: 0.5,
borderColor: '#DBDBDB',
paddingVertical: 10,
paddingHorizontal: 10,
direction: direction,
textAlign: textAlign,
backgroundColor: '#F9F9F9',
},
});
return (
<View style={[{marginTop: 18}, tw.style('w-full relative')]}>
<TextInput
style={[styles.inputStyle, tw.style('rounded-md')]}
onChangeText={text => onChange(text)}
placeholder={placeholder}
placeholderTextColor={'#cccccc'}
value={value}
/>
<Pressable style={tw.style('absolute left-3 top-0 transform inset-y-2')}>
<Image source={searchIcon} style={[{width: 20, height: 20}]} />
</Pressable>
</View>
);
};
export default Search;
Search.defaultProps = {
direction: 'rtl',
textAlign: 'right',
};

@ -1,36 +1,39 @@
import React from 'react';
import {Image} from 'react-native';
import {Image, Dimensions} from 'react-native';
import SelectDropdown from 'react-native-select-dropdown';
import dropdownIcon from '../assets/icons/dropdown.png';
import tw from 'tailwind-react-native-classnames';
function Select({iconPosition, options, onChange, value, name}) {
function Select({iconPosition, options, onChange, value, width, defaultValue}) {
return (
<SelectDropdown
data={options}
buttonStyle={{
width: '100%',
width: width,
borderWidth: 1,
borderColor: 'grey',
borderColor: '#DBDBDB',
borderRadius: 6,
backgroundColor : 'white'
height: 36,
backgroundColor: '#F9F9F9',
}}
defaultButtonText="انتخاب کنید"
rowTextStyle={{fontSize: Dimensions.get('window').width / 30}}
defaultButtonText={defaultValue}
statusBarTranslucent={true}
buttonTextStyle={{
textAlign: 'center',
justifyContent: 'flex-end',
textAlign: 'right',
flex: 0,
fontSize: 14,
color : '#555',
fontSize: Dimensions.get('window').width / 30,
color: '#707070',
// display: 'inline'
}}
dropdownIconPosition={iconPosition}
onSelect={(selectedItem, index) => {
onChange(name, selectedItem);
onSelect={selectedItem => {
onChange(selectedItem);
}}
renderDropdownIcon={() => (
<Image source={dropdownIcon} style={{width: 15, height: 10}} />
<Image source={dropdownIcon} style={{width: 12, height: 8}} />
)}
/>
);
@ -39,10 +42,6 @@ function Select({iconPosition, options, onChange, value, name}) {
export default Select;
Select.defaultProps = {
options : [
"1",
"2",
"3"
],
iconPosition : "left"
}
options: ['1', '2', '3'],
iconPosition: 'left',
};

@ -1,84 +0,0 @@
import React from 'react';
import {View, Image, Text, StyleSheet, Pressable, Dimensions} from 'react-native';
function Product({
item = {
name: 'ریاضی',
price: '145.000 تومان',
imageUrl: 'https://dnvn.ir/api/v1/file/2105',
},
}) {
return (
<View style={styles.product}>
<Image source={{uri: item.imageUrl}} style={styles.productImage} />
<Text style={styles.productName}>{item.name}</Text>
<View style={styles.productInfo}>
<View style={styles.productPrice}>
<Text>قیمت</Text>
<Text>{item.price}</Text>
</View>
{/* <Pressable style={styles.addToCart}>
<Text style={styles.text}>اضافه کردن به سبد خرید</Text>
</Pressable> */}
</View>
</View>
);
}
const fullWidth = Dimensions.get('window').width;
var styles = StyleSheet.create({
product: {
display: 'flex',
width: fullWidth / 2 - 25,
flexDirection: 'column',
alignItems: 'flex-end',
padding: 10,
marginBottom: 20,
borderRadius: 10,
// shadowColor: '#000',
// shadowOffset: {
// width: 0,
// height: 2,
// },
// shadowOpacity: 0.25,
// shadowRadius: 3.84,
// elevation: 5,
borderWidth : 1,
borderColor: '#ccc'
},
productImage: {
width: '100%',
height: 200,
borderRadius: 10,
},
productInfo: {
flex: 1,
flexDirection: 'row-reverse',
justifyContent: 'space-between',
alignItems: 'center',
minWidth: '100%',
marginTop: 5,
},
productPrice: {
flexDirection: 'column',
alignItems: 'flex-end',
// flex: 1,
},
addToCart: {
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'gray',
color: 'gray',
paddingVertical: 10,
paddingHorizontal: 10,
borderRadius: 10,
},
productName: {
marginTop: 10,
fontSize: 20,
fontWeight: '600',
},
});
export default Product;

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

@ -0,0 +1,43 @@
import React from 'react';
import {View, Image, Text, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
function Book({
item = {
name: 'ریاضی',
price: '145.000 تومان',
grade : '4',
imageUrl: 'https://dnvn.ir/api/v1/file/2105',
},
}) {
return (
<View
style={[
{
width: width / 2 - 20,
// shadowColor : "#000",
// shadowOffset : {width : 0, height : 2},
// shadowRadius : 20,
// shadowOpacity : 1,
marginBottom: 15,
borderWidth: 1,
borderColor: '#ddd',
},
tw.style('flex flex-col items-end p-2 rounded-md'),
]}>
<Image
source={{uri: item.imageUrl}}
style={[tw.style('w-full rounded-md'), {height: height / 3.8}]}
/>
<Text style={{fontSize: width / 22, marginTop: 5, color: '#05335F'}}>
{item.name}
</Text>
<Text style={{ color : "#196EC0", fontSize : width / 32, marginTop : 5}}>{'پایه' + ' ' + item.grade }</Text>
<Text style={[tw.style('w-full text-center font-semibold'), {marginTop : 10, color : "#132F52"}]}>{item.price}</Text>
</View>
);
}
export default Book;

@ -0,0 +1,77 @@
import React from 'react';
import {View, Image, Text, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import posterImage from '../assets/poster.png';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
function Video({
item = {
name: 'ریاضی',
price: '145.000 تومان',
grade: '4',
imageUrl: 'https://dnvn.ir/api/v1/file/2105',
poster: posterImage,
},
}) {
return (
<View
style={[
{
// shadowColor : "#000",
// shadowOffset : {width : 0, height : 2},
// shadowRadius : 20,
// shadowOpacity : 1,
marginBottom: 15,
borderWidth: 1,
borderColor: '#ddd',
},
tw.style('w-full flex flex-col items-end p-2 rounded-md'),
]}>
<View
style={[
tw.style(
'w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden',
),
{height: height / 3.8},
]}>
{/* <View
style={[
tw.style('rounded-full bg-black bg-opacity-20 z-50'),
{width: 50, height: 50},
]}></View> */}
<Image
source={item.poster}
style={tw.style('w-full h-full absolute left-0 top-0')}
/>
<Image
source={{uri: item.imageUrl}}
style={[
tw.style('rounded-md h-full absolute left-2 bottom-2 rounded-md'),
{width: width / 5, height: height / 7},
]}
/>
</View>
<Text style={{fontSize: width / 22, marginTop: 5, color: '#05335F'}}>
{item.name}
</Text>
<View
style={tw.style('w-full flex flex-row justify-between items-center')}>
<Text
style={[
tw.style('font-semibold'),
{marginTop: 10, color: '#132F52'},
]}>
{item.price}
</Text>
<Text style={{color: '#196EC0', fontSize: width / 32, marginTop: 5}}>
{'پایه' + ' ' + item.grade}
</Text>
</View>
</View>
);
}
export default Video;

@ -1,37 +1,90 @@
import React from 'react';
import {
View,
Text,
ScrollView,
StyleSheet,
SafeAreaView,
Dimensions,
} from 'react-native';
import React, {useState} from 'react';
import {View, ScrollView, StyleSheet, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import {connect} from 'react-redux';
import Card from './Card';
import Book from './components/Book';
import Video from './components/Video';
import Search from '../../components/Search';
import Select from '../../components/Select';
function Products({}) {
function Products({grades, productTypes}) {
const [productType, setProductType] = useState('');
const [grade, setGrade] = useState('');
const [search, setSearch] = useState('');
const onChange = (name, value) => {};
return (
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
{[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) => (
<Card />
))}
</View>
</ScrollView>
</SafeAreaView>
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}>
<Search
value={search}
onChange={setSearch}
placeholder={'نام کتاب یا دوره را جستجو کنید'}
/>
<View
style={[
tw.style('flex flex-1 flex-row justify-between items-center'),
{marginTop: 10, width: '100%'},
]}>
<Select
defaultValue={'کتاب فیزیکی'}
value={productType}
onChange={setProductType}
options={productTypes}
width={'48%'}
/>
<Select
defaultValue={'همه پایه'}
value={grade}
onChange={setGrade}
options={grades}
width={'48%'}
/>
</View>
<View
style={tw.style(
'flex flex-1 w-full py-5 flex-row flex-wrap justify-between bg-white',
)}>
{[0, 1, 2, 3, 4, 5, 6, 7].map((item, i) =>
productType === 'ویدئوها' ? <Video /> : <Book />,
)}
</View>
</ScrollView>
);
}
export default Products;
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
},
container: {
flex: 1,
paddingHorizontal: 20,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between'
width: Dimensions.get('window').width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal: 10,
},
});
export default Products;
Products.defaultProps = {
grades: [
'پیش دبستان',
'اول',
'دوم',
'سوم',
'چهارم',
'پنجم',
'ششم',
'هفتم',
'هشتم',
'نهم',
'دهم',
'یازدهم',
'دوازدهم',
],
productTypes: ['کتاب فیزیکی', 'کتاب دیجیتال', 'ویدئوها', 'اشتراک'],
};

@ -694,7 +694,7 @@
"pirates" "^4.0.0"
"source-map-support" "^0.5.16"
"@babel/runtime@^7.12.1", "@babel/runtime@^7.15.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"integrity" "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw=="
"resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz"
"version" "7.15.4"
@ -1211,6 +1211,15 @@
"resolved" "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz"
"version" "2.0.0"
"@react-navigation/bottom-tabs@^6.0.9":
"integrity" "sha512-uRoq6Zd7lPNnLqNQkKC28eR62tpqcDeuakZU1sO8N46FtvrcTuNLoIlssrGty3GF7ALBIxCypn4A93t3nbmMrQ=="
"resolved" "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.9.tgz"
"version" "6.0.9"
dependencies:
"@react-navigation/elements" "^1.2.1"
"color" "^3.1.3"
"warn-once" "^0.1.0"
"@react-navigation/core@^6.1.0":
"integrity" "sha512-LyZqD/ZCXSK9+ES8KiH+0tU+7aL84jUw1N9OxZfEuns/OcnSXKC3sOO+9NQ9XRowB1wLUfJhmqZ8G8rUlg33fQ=="
"resolved" "https://registry.npmjs.org/@react-navigation/core/-/core-6.1.0.tgz"
@ -2316,7 +2325,7 @@
"color-name" "^1.0.0"
"simple-swizzle" "^0.2.2"
"color@^3.1.2":
"color@^3.1.2", "color@^3.1.3":
"integrity" "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA=="
"resolved" "https://registry.npmjs.org/color/-/color-3.2.1.tgz"
"version" "3.2.1"
@ -3625,6 +3634,13 @@
"resolved" "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz"
"version" "2.0.2"
"html-parse-stringify@^3.0.1":
"integrity" "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg=="
"resolved" "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz"
"version" "3.0.1"
dependencies:
"void-elements" "3.1.0"
"html-tags@^3.1.0":
"integrity" "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg=="
"resolved" "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz"
@ -3663,6 +3679,13 @@
"resolved" "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
"version" "2.1.0"
"i18next@^21.5.3", "i18next@>= 19.0.0":
"integrity" "sha512-9R8127a0/N5okiD7eeo6XBPQsHgHsLr1GdQEa35Pcw305ArC9KZDLs9kbgdn3xuVUNYlVu8+gWzz73eVkna0gA=="
"resolved" "https://registry.npmjs.org/i18next/-/i18next-21.5.3.tgz"
"version" "21.5.3"
dependencies:
"@babel/runtime" "^7.12.0"
"iconv-lite@0.4.24":
"integrity" "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="
"resolved" "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@ -6060,6 +6083,14 @@
"shell-quote" "^1.6.1"
"ws" "^7"
"react-i18next@^11.14.3":
"integrity" "sha512-Hf2aanbKgYxPjG8ZdKr+PBz9sY6sxXuZWizxCYyJD2YzvJ0W9JTQcddVEjDaKyBoCyd3+5HTerdhc9ehFugc6g=="
"resolved" "https://registry.npmjs.org/react-i18next/-/react-i18next-11.14.3.tgz"
"version" "11.14.3"
dependencies:
"@babel/runtime" "^7.14.5"
"html-parse-stringify" "^3.0.1"
"react-is@^16.12.0 || ^17.0.0", "react-is@^17.0.1", "react-is@^17.0.2":
"integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
"resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
@ -6259,7 +6290,7 @@
"react-shallow-renderer" "^16.13.1"
"scheduler" "^0.20.2"
"react@*", "react@^16.0.0 || ^17.0.0", "react@^16.3.0", "react@^16.8", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@>=16.13.1", "react@>=16.8.6", "react@17.0.2":
"react@*", "react@^16.0.0 || ^17.0.0", "react@^16.3.0", "react@^16.8", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@>= 16.8.0", "react@>=16.13.1", "react@>=16.8.6", "react@17.0.2":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2"
@ -7433,6 +7464,11 @@
"resolved" "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz"
"version" "1.0.1"
"void-elements@3.1.0":
"integrity" "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
"resolved" "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz"
"version" "3.1.0"
"w3c-hr-time@^1.0.2":
"integrity" "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ=="
"resolved" "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"

Loading…
Cancel
Save