Reza_ashrafi
3 years ago
parent
133361b9e0
commit
32a2a7e0c9
21 changed files with 556 additions and 148 deletions
@ -0,0 +1,49 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
export const Dialog = ({ dialog }) => { |
||||||
|
const { text, type, setOpen, accept, bg, color } = dialog; |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="z-50 w-screen h-full fixed top-0 right-0 backdrop-filter blur-sm flex justify-center items-center" |
||||||
|
onClick={() => setOpen(false)} |
||||||
|
> |
||||||
|
<div className={`flex flex-col items-center ${bg} backdrop-filter backdrop-blur-xl rounded-md p-5 shadow-2xl`} style={{minWidth: 300}}> |
||||||
|
{/* {type === "confirm" && ( |
||||||
|
<div className="w-full flex justify-end text-sm text-bla">exit</div> |
||||||
|
)} */} |
||||||
|
<p className={`text-tiny ${color} w-full mb-8 leading-7`}>{text}</p> |
||||||
|
{type === "confirm" && ( |
||||||
|
<div className="flex flex-row gap-4 w-full"> |
||||||
|
<button |
||||||
|
className="py-2.5 w-1/2 shadow-md rounded-sm bg-blueC0 text-white" |
||||||
|
onClick={() => accept()} |
||||||
|
> |
||||||
|
باشه |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className="py-2.5 w-1/2 shadow-md rounded-sm bg-redFF1 text-white" |
||||||
|
onClick={() => setOpen(false)} |
||||||
|
> |
||||||
|
بیخیال |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{type === "alert" && ( |
||||||
|
<div className="flex flex-row gap-4 w-full"> |
||||||
|
<button |
||||||
|
className="py-2.5 w-full shadow-md rounded-sm bg-blueC0 text-white" |
||||||
|
onClick={() => setOpen(false)} |
||||||
|
> |
||||||
|
باشه |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(Dialog); |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
function Loading({ size, color }) { |
||||||
|
const [dots, setDots] = useState({}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setTimeout(() => { |
||||||
|
setDots({ ...dots, one: true }); |
||||||
|
}, 50); |
||||||
|
setTimeout(() => { |
||||||
|
setDots({ ...dots, one : true, two: true }); |
||||||
|
}, 500); |
||||||
|
setTimeout(() => { |
||||||
|
setDots({ ...dots, one : true, two: true, three: true }); |
||||||
|
}, 950); |
||||||
|
}, []); |
||||||
|
return ( |
||||||
|
<div className="flex items-center gap-0.5"> |
||||||
|
<span |
||||||
|
className={`w-${size} h-${size} rounded-full ${color} ${ |
||||||
|
dots?.one ? "loading-animation" : "" |
||||||
|
}`}
|
||||||
|
></span> |
||||||
|
<span |
||||||
|
className={`w-${size} h-${size} rounded-full ${color} ${ |
||||||
|
dots?.two ? "loading-animation" : "" |
||||||
|
}`}
|
||||||
|
></span> |
||||||
|
<span |
||||||
|
className={`w-${size} h-${size} rounded-full ${color} ${ |
||||||
|
dots?.three ? "loading-animation" : "" |
||||||
|
}`}
|
||||||
|
></span> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Loading; |
||||||
|
|
||||||
|
Loading.defaultProps = { |
||||||
|
size: 2, |
||||||
|
}; |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
.loading-animation{ |
||||||
|
animation: loading 0.6s infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes loading{ |
||||||
|
0%{ |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
100%{ |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import Mapir from "mapir-react-component"; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const X_API_KEY = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIn0.eyJhdWQiOiIxNjk2MSIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIiwiaWF0IjoxNjQ0MzE3MDA5LCJuYmYiOjE2NDQzMTcwMDksImV4cCI6MTY0NjgyMjYwOSwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.Gckmd77Vw-wmsaztsmVmjYmfp4zXRSy2f0tXS-1p7IY8VJmvCCrk64y7WvCLbH0YfGZI9rG9ZUi5hRJDDGXu70l1ZafCYq2-EkMzcbx-PGTTq2bHGNZujF4ur1xtGoXd2kwGuldiR_6SJdqYLHcupbscFI7hHaQnkN1xWJ-L8476ZOKzUgiBvwH9uElGZXwD6SwfXoGW_R38_isrnfTXKfW9PPixyLaN3404tcjOU1r02HIurrplXlIKRKG9CVXxKsESfJJ8trwtZw6O4erxrnisxfL0VwAR7l69P6KcFb57vvM4j4hKFqxUDr4YvSq1qOTt3urYbAKehhvoiLhZxw"; |
||||||
|
|
||||||
|
|
||||||
|
const Map = Mapir.setToken({ |
||||||
|
transformRequest: (url) => { |
||||||
|
return { |
||||||
|
url: url, |
||||||
|
headers: { |
||||||
|
"x-api-key":X_API_KEY, |
||||||
|
"Mapir-SDK": "reactjs", |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
const ReverseMap = ({ setAddress }) => { |
||||||
|
const [markerArray, setMarkerArray] = useState([]); |
||||||
|
const [coord, setCoord] = useState([51.42, 35.72]); |
||||||
|
function reverseFunction(map, e) { |
||||||
|
let url = `https://map.ir/reverse/no?lat=${e.lngLat.lat}&lon=${e.lngLat.lng}`; |
||||||
|
fetch(url, { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
"x-api-key": X_API_KEY, |
||||||
|
}, |
||||||
|
}) |
||||||
|
.then((response) => response.json()) |
||||||
|
.then((data) => setAddress(data.address)); |
||||||
|
const array = []; |
||||||
|
array.push( |
||||||
|
<Mapir.Marker |
||||||
|
coordinates={[e.lngLat.lng, e.lngLat.lat]} |
||||||
|
anchor="bottom" |
||||||
|
/> |
||||||
|
); |
||||||
|
setMarkerArray(array); |
||||||
|
} |
||||||
|
return ( |
||||||
|
<Mapir center={coord} Map={Map} onClick={reverseFunction}> |
||||||
|
{markerArray} |
||||||
|
</Mapir> |
||||||
|
); |
||||||
|
}; |
||||||
|
export default ReverseMap; |
||||||
Loading…
Reference in new issue