hamed
3 years ago
parent
19434004e0
commit
5169182cd8
30 changed files with 1010 additions and 50 deletions
|
After Width: | Height: | Size: 24 KiB |
@ -0,0 +1,23 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { View, StyleSheet, Dimensions } from "react-native"; |
||||||
|
import Identifier from "./Identifier"; |
||||||
|
|
||||||
|
function component2D({ list, flexDirection }) { |
||||||
|
return ( |
||||||
|
<View style={[styles.container, { flexDirection: flexDirection }]}> |
||||||
|
{list.map((item, i) => ( |
||||||
|
<Identifier {...item} key={i} /> |
||||||
|
))} |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const { width } = Dimensions.get("window"); |
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
// width,
|
||||||
|
borderRadius: 10, |
||||||
|
flex: 1 |
||||||
|
} |
||||||
|
}); |
||||||
|
export default component2D; |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { View, StyleSheet, Dimensions } from "react-native"; |
||||||
|
import Identifier from "./Identifier"; |
||||||
|
|
||||||
|
function component3D({ list }) { |
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
{list.map((item, i) => ( |
||||||
|
<Identifier {...item} key={i} /> |
||||||
|
))} |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const { width } = Dimensions.get("window"); |
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
// width,
|
||||||
|
borderRadius: 10, |
||||||
|
flex: 1, |
||||||
|
flexDirection: "row-reverse" |
||||||
|
} |
||||||
|
}); |
||||||
|
export default component3D; |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Carousel from "./carousel"; |
||||||
|
import Component2D from "./2d"; |
||||||
|
import Component3D from "./3d"; |
||||||
|
import FlexAround from "./flexAround"; |
||||||
|
import BackgroundTile from "./backgroundTile"; |
||||||
|
import Shop from "./shop.js"; |
||||||
|
|
||||||
|
const Identifier = (item) => { |
||||||
|
let component; |
||||||
|
switch (item.name) { |
||||||
|
case "carousel": |
||||||
|
component = <Carousel list={item.list} />; |
||||||
|
break; |
||||||
|
case "2d": |
||||||
|
component = ( |
||||||
|
<Component2D list={item.items} flexDirection={item.flexDirection} /> |
||||||
|
); |
||||||
|
break; |
||||||
|
case "3d": |
||||||
|
component = <Component3D list={item.items} />; |
||||||
|
break; |
||||||
|
case "flex-around": |
||||||
|
component = <FlexAround item={item} />; |
||||||
|
break; |
||||||
|
case "background-tile": |
||||||
|
component = <BackgroundTile item={item} />; |
||||||
|
break; |
||||||
|
case "shop": |
||||||
|
component = <Shop item={item} />; |
||||||
|
break; |
||||||
|
default: |
||||||
|
component = null; |
||||||
|
} |
||||||
|
return <>{component}</>; |
||||||
|
}; |
||||||
|
|
||||||
|
export default Identifier; |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { StyleSheet, View, Text, ImageBackground } from "react-native"; |
||||||
|
|
||||||
|
const backgroundTile = ({ item }) => { |
||||||
|
return ( |
||||||
|
<ImageBackground |
||||||
|
source={{ uri: item.imageUrl }} |
||||||
|
resizeMode="cover" |
||||||
|
style={[styles.container, { flex: item.flex }]} |
||||||
|
> |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
styles.cover, |
||||||
|
{ backgroundColor: item.backgroundColor, alignItems: item.alignItems } |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text style={styles.title}>{item.title}</Text> |
||||||
|
<Text style={styles.subTitle}>{item.subTitle}</Text> |
||||||
|
</View> |
||||||
|
</ImageBackground> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
margin: 5, |
||||||
|
borderRadius: 10 |
||||||
|
}, |
||||||
|
cover: { |
||||||
|
minHeight: "100%", |
||||||
|
minWidth: "100%", |
||||||
|
flexDirection: "column", |
||||||
|
justifyContent: "center", |
||||||
|
padding: 10, |
||||||
|
borderRadius: 10 |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: 21, |
||||||
|
fontWeight: 600, |
||||||
|
marginBottom: 5, |
||||||
|
color: "white" |
||||||
|
}, |
||||||
|
subTitle: { |
||||||
|
fontSize: 14, |
||||||
|
color: "white" |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
export default backgroundTile; |
||||||
@ -0,0 +1,50 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { ImageBackground, Dimensions, StyleSheet, View } from "react-native"; |
||||||
|
// import { SwiperFlatList } from "react-native-swiper-flatlist";
|
||||||
|
|
||||||
|
const Carousel = ({ list }) => { |
||||||
|
return ( |
||||||
|
<View style={styles.container}> |
||||||
|
{/*<SwiperFlatList*/} |
||||||
|
{/* autoplay*/} |
||||||
|
{/* autoplayDelay={2}*/} |
||||||
|
{/* autoplayLoop*/} |
||||||
|
{/* index={2}*/} |
||||||
|
{/* // showPagination*/} |
||||||
|
{/* data={list}*/} |
||||||
|
{/* renderItem={({ item }) => (*/} |
||||||
|
{/* <View style={[styles.child]}>*/} |
||||||
|
{/* <ImageBackground*/} |
||||||
|
{/* source={{ uri: item.imageUrl }}*/} |
||||||
|
{/* resizeMode="cover"*/} |
||||||
|
{/* style={styles.image}*/} |
||||||
|
{/* ></ImageBackground>*/} |
||||||
|
{/* </View>*/} |
||||||
|
{/* )}*/} |
||||||
|
{/*/>*/} |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const { width } = Dimensions.get("window"); |
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
minHeight: 300, |
||||||
|
borderRadius: 10, |
||||||
|
margin: 5 |
||||||
|
}, |
||||||
|
child: { |
||||||
|
width, |
||||||
|
justifyContent: "center", |
||||||
|
borderRadius: 10, |
||||||
|
alignItems: "center" |
||||||
|
}, |
||||||
|
image: { |
||||||
|
width, |
||||||
|
flex: 1, |
||||||
|
justifyContent: "center", |
||||||
|
borderRadius: 10 |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
export default Carousel; |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { StyleSheet, View, Text, Image } from "react-native"; |
||||||
|
|
||||||
|
const FlexAround = ({ item }) => { |
||||||
|
return ( |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
styles.container, |
||||||
|
{ flex: item.flex, backgroundColor: item.backgroundColor } |
||||||
|
]} |
||||||
|
> |
||||||
|
<View style={[styles.column]}> |
||||||
|
<Text style={styles.title}>{item.title}</Text> |
||||||
|
<Text style={styles.subTitle}>{item.subTitle}</Text> |
||||||
|
</View> |
||||||
|
<Image source={{ uri: item.imageUrl }} style={styles.image} /> |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
borderRadius: 10, |
||||||
|
flex: 1, |
||||||
|
paddingVertical: 30, |
||||||
|
flexDirection: "row-reverse", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "space-around", |
||||||
|
textAlign: "right", |
||||||
|
margin: 5 |
||||||
|
}, |
||||||
|
column: { |
||||||
|
display: "flex", |
||||||
|
flexDirection: "column" |
||||||
|
}, |
||||||
|
image: { |
||||||
|
width: 60, |
||||||
|
height: 60 |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: 21, |
||||||
|
fontWeight: 600, |
||||||
|
marginBottom: 5, |
||||||
|
color: "white" |
||||||
|
}, |
||||||
|
subTitle: { |
||||||
|
fontSize: 14, |
||||||
|
color: "white" |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
export default FlexAround; |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { StyleSheet, View, Text, Image } from "react-native"; |
||||||
|
|
||||||
|
const Shop = ({ item }) => { |
||||||
|
return ( |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
styles.container, |
||||||
|
{ flex: item.flex, backgroundColor: item.backgroundColor } |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text style={styles.title}>{item.title}</Text> |
||||||
|
|
||||||
|
<View style={[styles.list]}> |
||||||
|
{item.items.map((item1) => ( |
||||||
|
<View> |
||||||
|
<Image source={{ uri: item1.imageUrl }} style={styles.product} /> |
||||||
|
</View> |
||||||
|
))} |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
borderRadius: 10, |
||||||
|
flex: 1, |
||||||
|
paddingVertical: 5, |
||||||
|
paddingHorizontal: 10, |
||||||
|
flexDirection: "column", |
||||||
|
textAlign: "right", |
||||||
|
margin: 5 |
||||||
|
}, |
||||||
|
list: { |
||||||
|
display: "flex", |
||||||
|
flexDirection: "row", |
||||||
|
justifyContent: "space-around", |
||||||
|
marginTop: 10 |
||||||
|
}, |
||||||
|
product: { |
||||||
|
width: 50, |
||||||
|
height: 65, |
||||||
|
borderRadius: 10 |
||||||
|
}, |
||||||
|
title: { |
||||||
|
fontSize: 18, |
||||||
|
fontWeight: 600, |
||||||
|
marginBottom: 5, |
||||||
|
color: "white" |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
export default Shop; |
||||||
@ -0,0 +1,140 @@ |
|||||||
|
const data = [ |
||||||
|
{ |
||||||
|
name: "carousel", |
||||||
|
list: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/5299" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/6581" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/6586" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "2d", |
||||||
|
flexDirection: "row-reverse", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
name: "flex-around", |
||||||
|
title: "qr خوان", |
||||||
|
subTitle: "در صفحات کتاب هوشمند", |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1855", |
||||||
|
backgroundColor: "blue", |
||||||
|
flex: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "flex-around", |
||||||
|
title: "واقعیت افزوده", |
||||||
|
subTitle: "فعال شده و دیجیتال", |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1851", |
||||||
|
backgroundColor: "green", |
||||||
|
flex: 1 |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "2d", |
||||||
|
flexDirection: "row-reverse", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
name: "flex-around", |
||||||
|
title: "qr خوان", |
||||||
|
subTitle: "در صفحات کتاب هوشمند", |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1855", |
||||||
|
backgroundColor: "blue", |
||||||
|
flex: 1.6 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "background-tile", |
||||||
|
title: "کتاب های من", |
||||||
|
subTitle: "فعال شده و دیجیتال", |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1860", |
||||||
|
backgroundColor: "#ff00ff77", |
||||||
|
flex: 1, |
||||||
|
alignItems: "flex-end" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "2d", |
||||||
|
flexDirection: "row-reverse", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
name: "background-tile", |
||||||
|
title: "بلاگ", |
||||||
|
subTitle: "", |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1852", |
||||||
|
backgroundColor: "#00ff0066", |
||||||
|
flex: 1, |
||||||
|
alignItems: "center" |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "shop", |
||||||
|
title: "فروشگاه", |
||||||
|
backgroundColor: "#8888ff", |
||||||
|
flex: 1.6, |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
id: 0, |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1857" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1858" |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1859" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "3d", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
name: "2d", |
||||||
|
flexDirection: "column", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
name: "background-tile", |
||||||
|
title: "پیگیری سفارشات", |
||||||
|
subTitle: "", |
||||||
|
imageUrl: "", |
||||||
|
backgroundColor: "#ff5555", |
||||||
|
flex: 1, |
||||||
|
alignItems: "center" |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "background-tile", |
||||||
|
title: "پشتیبانی", |
||||||
|
subTitle: "", |
||||||
|
imageUrl: "", |
||||||
|
backgroundColor: "#ffaa00", |
||||||
|
flex: 1, |
||||||
|
alignItems: "center" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "background-tile", |
||||||
|
title: "بلاگ", |
||||||
|
subTitle: "", |
||||||
|
imageUrl: "https://dnvn.ir/api/v1/file/1853", |
||||||
|
backgroundColor: "#00ffff66", |
||||||
|
flex: 1, |
||||||
|
alignItems: "center" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
|
export default data; |
||||||
|
|
||||||
@ -1,13 +1,27 @@ |
|||||||
import React from 'react' |
import React from "react"; |
||||||
import { View, Text } from 'react-native'; |
import { View, StyleSheet, Dimensions, ScrollView } from "react-native"; |
||||||
import {connect} from 'react-redux'; |
import data from "./data"; |
||||||
|
import Identifier from "./components/Identifier"; |
||||||
|
|
||||||
function Home({}) { |
// Within your render function
|
||||||
|
function Home() { |
||||||
return ( |
return ( |
||||||
<View> |
<ScrollView style={styles.container}> |
||||||
<Text></Text> |
{data?.map((item, i) => ( |
||||||
</View> |
<Identifier {...item} key={i} /> |
||||||
) |
))} |
||||||
|
</ScrollView> |
||||||
|
); |
||||||
} |
} |
||||||
|
|
||||||
|
// Later on in your styles..
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
container: { |
||||||
|
width: Dimensions.get("window").width, |
||||||
|
backgroundColor: "white", |
||||||
|
flexDirection: "column", |
||||||
|
padding: 5 |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
export default Home; |
export default Home; |
||||||
|
|||||||
@ -0,0 +1,46 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import { Button, StyleSheet, Text, View, Dimensions } from "react-native"; |
||||||
|
|
||||||
|
function App() { |
||||||
|
return ( |
||||||
|
<View style={styles.navbar}> |
||||||
|
<View style={[styles.flex, styles.row, styles.alignCenter]}> |
||||||
|
<Text style={styles.head}>دانوین</Text> |
||||||
|
</View> |
||||||
|
<Button title="ورود" color="#6cbe44" /> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
navbar: { |
||||||
|
position: "fixed", |
||||||
|
display: "flex", |
||||||
|
paddingHorizontal: 10, |
||||||
|
flexDirection: "row-reverse", |
||||||
|
left: 0, |
||||||
|
top: 0, |
||||||
|
width: Dimensions.get("window").width, |
||||||
|
height: 60, |
||||||
|
backgroundColor: "#ccc", |
||||||
|
justifyContent: "space-between", |
||||||
|
alignItems: "center" |
||||||
|
}, |
||||||
|
head: { |
||||||
|
fontWeight: "bold", |
||||||
|
fontSize: 20, |
||||||
|
marginRight: 10 |
||||||
|
}, |
||||||
|
flex: { |
||||||
|
display: "flex" |
||||||
|
}, |
||||||
|
row: { |
||||||
|
flexDirection: "row-reverse" |
||||||
|
}, |
||||||
|
alignCenter: { |
||||||
|
alignItems: "center" |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
export default App; |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import {Image, Dimensions} from "react-native"; |
||||||
|
|
||||||
|
const {width} = Dimensions.get('window') |
||||||
|
|
||||||
|
function IranFlag() { |
||||||
|
return ( |
||||||
|
<Image source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAiBJREFUSEvtVkFrU0EQ/mb3vTRJ08bURAVFA4K0CIKCNw8WQQQPKqj/oN56qgePnv0Vnjy0YPAiItWLFw8VtWhF9BClGE3S5tnmxaR5u+PuPgIKSnlQ46UDww6zM/PtNztveTR3HwEIeQxRBHCS5irgIWI6KAKmd4GH0nXX6sWVO+6Ou9F3p2kvj0LmCD6uPcXB8VO/+X89lY2rbS4jnz6ErD/h4npGD4ydQOvHJ2z2aiiNTrqUQV1rV1vPUMxOzlC1/uKD4khJ8qRd7aa1NVQkID3rE+QJc0oaxLkBqX0TNDYOlcsozZG2OWyEjPwtZ5D/ZWN5lsIwTDTV4u076GIR/uMn6J8/B9FsQh+fSnpFpxMBU70B+XwJ+mgZqYUH6N6chf9oEWrqWFLwZMCWrah+hi4fjoFv34I/X3Fs+9evJGGdDNgxfv0G1AogV94jOnsG7ElwYc+/ZewotUN4Sy+RunvPAW9dvQTkRpOwtbGGcRB8hVJbkNI3a99VEDJFWndZihHrM4OqWcS2266uZtHeUBDCM4PVBbOxTY5ZWZBwcSQkBratzeal1DGObKzfoN58hanTAYUd6FLR3SGX9gIjKdBqzdm03gKUju3GGnhfMX5zbU4mbTDMs8+mslGdy5kdY7fbloDzW+H9JVC9abQBnijMEF+8luhzStrTP8YTT+8C70gnty3y31rN5g+EL1wuw/PK255ypwI0BfRw4dVPHMAgJ7WnxBQAAAAASUVORK5CYII='}} |
||||||
|
style={{ |
||||||
|
width: width / 8, |
||||||
|
height: width / 8 / 1.5, |
||||||
|
left: 5 |
||||||
|
}} /> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default IranFlag; |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import mocks from './mocks'; |
||||||
|
import mainServices from './services'; |
||||||
|
|
||||||
|
const mock = false; |
||||||
|
|
||||||
|
let services = {...mainServices}; |
||||||
|
if (mock) { |
||||||
|
services = mocks; |
||||||
|
} |
||||||
|
export default services; |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import { asyncAwesomeAlert, randomApiSleep } from '../../../utils/AsyncWrappers'; |
||||||
|
|
||||||
|
const data = { |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
const getSmsCode = async () => { |
||||||
|
await randomApiSleep(); |
||||||
|
return { |
||||||
|
ok: true, |
||||||
|
data: data |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const mocks = {getSmsCode}; |
||||||
|
export default mocks; |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import {nextFetchApi} from '../../../services/api'; |
||||||
|
const getSmsCode = async (obj) => { |
||||||
|
return await nextFetchApi('/public/sendOTP', { |
||||||
|
method: 'POST', |
||||||
|
payload: obj |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const mainServices = { |
||||||
|
getSmsCode, |
||||||
|
}; |
||||||
|
|
||||||
|
export default mainServices; |
||||||
@ -1,13 +1,203 @@ |
|||||||
import React from 'react' |
import React, {useEffect, useState} from 'react' |
||||||
import { View, Text } from 'react-native'; |
import {View, Text, Image, TextInput, TouchableHighlight, Dimensions, StyleSheet, TouchableOpacity} from 'react-native'; |
||||||
import {connect} from 'react-redux'; |
import {connect} from 'react-redux'; |
||||||
|
import Logo from "../../assets/images/logo.png"; |
||||||
|
import IranFlag from "../Login/components/IranFlag"; |
||||||
|
import {digitToEn, digitToPersian} from "../../utils"; |
||||||
|
import services from "./services"; |
||||||
|
|
||||||
|
const {width} = Dimensions.get('window') |
||||||
|
let ref1; |
||||||
|
let ref2; |
||||||
|
let ref3; |
||||||
|
let ref4; |
||||||
|
|
||||||
|
let timer = 60; |
||||||
|
function Otp(props) { |
||||||
|
let faNums = ['۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰'] |
||||||
|
|
||||||
|
const [firstCode, setFirstCode] = useState(''); |
||||||
|
const [secondCode, setSecondCode] = useState(''); |
||||||
|
const [thirdCode, setThirdCode] = useState(''); |
||||||
|
const [fourthCode, setFourthCode] = useState(''); |
||||||
|
const [time, setTime] = useState(60); |
||||||
|
|
||||||
|
const checkValue = (value) => { |
||||||
|
return faNums.includes(digitToPersian(value)); |
||||||
|
} |
||||||
|
|
||||||
|
const onChangeCode = (value, key) => { |
||||||
|
// if (!checkValue()) {
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
switch (key) { |
||||||
|
case '1': |
||||||
|
setFirstCode(digitToPersian(value)); |
||||||
|
ref2.focus(); |
||||||
|
break; |
||||||
|
case '2': |
||||||
|
setSecondCode(digitToPersian(value)); |
||||||
|
ref3.focus(); |
||||||
|
break; |
||||||
|
case '3': |
||||||
|
setThirdCode(digitToPersian(value)); |
||||||
|
ref4.focus(); |
||||||
|
break; |
||||||
|
case '4': |
||||||
|
setFourthCode(digitToPersian(value)) |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const getEnCode = () => { |
||||||
|
return Number(digitToEn(firstCode) + digitToEn(secondCode) + digitToEn(thirdCode) + digitToEn(fourthCode)) |
||||||
|
} |
||||||
|
|
||||||
|
const submit = async () => { |
||||||
|
let res = await services.sendOtpCode({ |
||||||
|
cellphone: props.route.params.phone, |
||||||
|
otp: getEnCode() |
||||||
|
}) |
||||||
|
if (res.ok) { |
||||||
|
console.log(res) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
let interval = setInterval(() => { |
||||||
|
if (time > 0) { |
||||||
|
setTime(timer - 1); |
||||||
|
timer -= 1; |
||||||
|
} |
||||||
|
}, 1000); |
||||||
|
let timeout = setTimeout(() => { |
||||||
|
clearInterval(interval) |
||||||
|
}, 60000) |
||||||
|
return () => { |
||||||
|
clearInterval(interval); |
||||||
|
clearTimeout(timeout) |
||||||
|
} |
||||||
|
}, []); |
||||||
|
|
||||||
function Otp({}) { |
|
||||||
return ( |
return ( |
||||||
<View> |
<View style={{ |
||||||
<Text></Text> |
flex: 1, |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center', |
||||||
|
backgroundColor: 'white' |
||||||
|
}}> |
||||||
|
<Image source={Logo} style={{ |
||||||
|
width: width * 0.7, |
||||||
|
height: width * 0.7 / 2.09, |
||||||
|
}} /> |
||||||
|
<Text style={{ |
||||||
|
width: width, |
||||||
|
paddingHorizontal: 10, |
||||||
|
marginTop: 20, |
||||||
|
fontSize: 20, |
||||||
|
textAlign: 'right', |
||||||
|
}}>{'دانوین'}</Text> |
||||||
|
<Text style={{ |
||||||
|
width: width, |
||||||
|
paddingHorizontal: 10, |
||||||
|
marginTop: 10, |
||||||
|
fontSize: 14, |
||||||
|
color: '#6f7074', |
||||||
|
textAlign: 'right', |
||||||
|
}}>{`یک کد تائیدیه به شماره ${props.route.params.phone} ارسال شد. آن را در قسمت زیر وارد کنید`}</Text> |
||||||
|
<View style={{ |
||||||
|
width: width - 10, |
||||||
|
height: width / 8, |
||||||
|
borderRadius: 8, |
||||||
|
flexDirection: 'row', |
||||||
|
marginTop: 10, |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'space-evenly' |
||||||
|
}}> |
||||||
|
<TextInput |
||||||
|
style={styles.input} |
||||||
|
underlineColorAndroid={'transparent'} |
||||||
|
value={firstCode} |
||||||
|
maxLength={1} |
||||||
|
ref={ref => ref1 = ref} |
||||||
|
onChangeText={text => onChangeCode(text, '1')} |
||||||
|
/> |
||||||
|
<TextInput |
||||||
|
style={styles.input} |
||||||
|
underlineColorAndroid={'transparent'} |
||||||
|
value={secondCode} |
||||||
|
maxLength={1} |
||||||
|
ref={ref => ref2 = ref} |
||||||
|
onChangeText={text => onChangeCode(text, '2')} |
||||||
|
/> |
||||||
|
<TextInput |
||||||
|
style={styles.input} |
||||||
|
underlineColorAndroid={'transparent'} |
||||||
|
value={thirdCode} |
||||||
|
maxLength={1} |
||||||
|
ref={ref => ref3 = ref} |
||||||
|
onChangeText={text => onChangeCode(text, '3')} |
||||||
|
/> |
||||||
|
<TextInput |
||||||
|
style={styles.input} |
||||||
|
underlineColorAndroid={'transparent'} |
||||||
|
value={fourthCode} |
||||||
|
maxLength={1} |
||||||
|
ref={ref => ref4 = ref} |
||||||
|
onChangeText={text => onChangeCode(text, '4')} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
<TouchableOpacity |
||||||
|
style={{ |
||||||
|
width: width - 10, |
||||||
|
height: width / 9, |
||||||
|
backgroundColor: '#6cbe44', |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'center', |
||||||
|
borderRadius: 10, |
||||||
|
marginTop: 15, |
||||||
|
}} |
||||||
|
onPress={() => submit()}> |
||||||
|
<Text style={{ |
||||||
|
color: 'white', |
||||||
|
fontSize: 18, |
||||||
|
}}> |
||||||
|
{'ثبت'} |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<View> |
||||||
|
<Text style={{marginTop: 30, textAlign: 'center'}}> |
||||||
|
{'زمان باقی مانده تا انقضای کد: ' + time} |
||||||
|
</Text> |
||||||
|
<TouchableOpacity |
||||||
|
style={{ |
||||||
|
marginTop: 20, |
||||||
|
}} |
||||||
|
onPress={() => { |
||||||
|
if (time !== 0) { |
||||||
|
return |
||||||
|
} |
||||||
|
props.navigation.goBack(); |
||||||
|
}}> |
||||||
|
<Text style={{textAlign: 'center'}}> |
||||||
|
{'بازگشت به مرحله قبل و اصلاح شماره'} |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
</View> |
</View> |
||||||
) |
) |
||||||
} |
} |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
input: { |
||||||
|
width: width / 13 * 2, |
||||||
|
height: width / 16 * 2, |
||||||
|
backgroundColor: '#a2a2a2', |
||||||
|
color: '#333', |
||||||
|
fontSize: 22, |
||||||
|
borderRadius: 8, |
||||||
|
textAlign: 'center' |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
export default Otp; |
export default Otp; |
||||||
|
|||||||
@ -0,0 +1,10 @@ |
|||||||
|
import mocks from './mocks'; |
||||||
|
import mainServices from './services'; |
||||||
|
|
||||||
|
const mock = false; |
||||||
|
|
||||||
|
let services = {...mainServices}; |
||||||
|
if (mock) { |
||||||
|
services = mocks; |
||||||
|
} |
||||||
|
export default services; |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import { asyncAwesomeAlert, randomApiSleep } from '../../../utils/AsyncWrappers'; |
||||||
|
|
||||||
|
const data = { |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
const sendOtpCode = async () => { |
||||||
|
await randomApiSleep(); |
||||||
|
return { |
||||||
|
ok: true, |
||||||
|
data: data |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const mocks = {sendOtpCode}; |
||||||
|
export default mocks; |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import {nextFetchApi} from '../../../services/api'; |
||||||
|
const sendOtpCode = async (obj) => { |
||||||
|
return await nextFetchApi('/user/otp/login', { |
||||||
|
method: 'POST', |
||||||
|
payload: obj |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const mainServices = { |
||||||
|
sendOtpCode, |
||||||
|
}; |
||||||
|
|
||||||
|
export default mainServices; |
||||||
@ -1,4 +1,3 @@ |
|||||||
export default { |
export default { |
||||||
dev: 'https://dnvn.ir/api/v1/', |
dev: 'https://dnvn.ir/api/v1', |
||||||
splash: 'https://topsito.ir/api/v1.1', |
|
||||||
}; |
}; |
||||||
|
|||||||
@ -0,0 +1,23 @@ |
|||||||
|
export const digitToPersian = (digit) => { |
||||||
|
let enNums = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'] |
||||||
|
let faNums = ['۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰'] |
||||||
|
let digitString = digit + ''; |
||||||
|
let digitArray = digitString.split(''); |
||||||
|
for (let i in digitArray) { |
||||||
|
if (enNums.includes(digitArray[i])) |
||||||
|
digitArray[i] = faNums[enNums.indexOf(digitArray[i])] |
||||||
|
} |
||||||
|
return digitArray.join('') |
||||||
|
} |
||||||
|
|
||||||
|
export const digitToEn = (digit) => { |
||||||
|
let enNums = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'] |
||||||
|
let faNums = ['۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰'] |
||||||
|
let digitString = digit + ''; |
||||||
|
let digitArray = digitString.split(''); |
||||||
|
for (let i in digitArray) { |
||||||
|
if (faNums.includes(digitArray[i])) |
||||||
|
digitArray[i] = enNums[faNums.indexOf(digitArray[i])] |
||||||
|
} |
||||||
|
return digitArray.join('') |
||||||
|
} |
||||||
Loading…
Reference in new issue