update 5 files

master
Your Name 2 years ago
parent 9b5d517a5c
commit b3c9751f09
  1. 4
      src/App.js
  2. 116
      src/components/LeafletMap/index.js
  3. 73
      src/components/TestComponentNew/index.js
  4. 34
      src/components/TestComponentNew/index.scss

@ -138,7 +138,7 @@ function App() {
{/* <DistributedData /> */}
{/* <CardDesign1 /> */}
{/* <CardDesign2 /> */}
{/* <LeafletMap /> */}
<LeafletMap />
{/* *************************************************** mini components *************************************************** */}
@ -171,7 +171,7 @@ function App() {
{/* <IndianaDragScroll /> */}
{/* <IconText /> */}
{/* <CustomToast /> */}
<DateRangePicker />
{/* <DateRangePicker /> */}
{/* <div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">

@ -1,4 +1,5 @@
import React, { useState, useRef, useMemo } from "react";
import {
MapContainer,
TileLayer,
@ -9,12 +10,126 @@ import {
ZoomControl,
ScaleControl,
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
import { EditControl } from "react-leaflet-draw";
import "leaflet-draw";
import "./index.scss";
import grid from "../../assets/images/grid.png";
import * as L from "leaflet";
L.drawLocal = {
draw: {
toolbar: {
actions: {
title: "کنسل کردن رسم",
text: "کنسل",
},
finish: {
title: "پایان رسم",
text: "پایان رسم",
},
undo: {
title: "پاک کردن آخرین نقطه رسم شده",
text: "پاک کردن آخرین نقطه رسم شده",
},
buttons: {
polyline: "موکب مورد نظر خود را رسم نمایید",
polygon: "رسم پولیگان",
rectangle: "رسم جای خواب",
circle: "رسم دایره",
marker: "رسم مارکر",
circlemarker: "رسم دایره مارکر",
},
},
handlers: {
circle: {
tooltip: {
start: "کلیک کنید و سپس درگ کنید تا یک دایره بکشید.",
},
radius: "ردیوس",
},
circlemarker: {
tooltip: {
start: "Click map to place circle marker.",
},
},
marker: {
tooltip: {
start: "Click map to place marker.",
},
},
polygon: {
tooltip: {
start: "Click to start drawing shape.",
cont: "Click to continue drawing shape.",
end: "Click first point to close this shape.",
},
},
polyline: {
error: "<strong>Error:</strong> shape edges cannot cross!",
tooltip: {
start: "Click to start drawing line.",
cont: "Click to continue drawing line.",
end: "Click last point to finish line.",
},
},
rectangle: {
tooltip: {
start: "با کلیک و درگ کردن یک جای خواب رسم کنید.",
},
},
simpleshape: {
tooltip: {
end: "ماوس را رها کنید تا رسم تمام شود.",
},
},
},
},
edit: {
toolbar: {
actions: {
save: {
title: "ذخیره تنظیمات",
text: "ذخیره",
},
cancel: {
title: "کنسل کردن، ویرایش تمام تغییرات نادیده گرفته خواهند شد",
text: "کنسل",
},
clearAll: {
title: "پاک کردن تمام لایه ها",
text: "پاک کردن لایه ها",
},
},
buttons: {
edit: "ویرایش لایه ها",
editDisabled: "لایه ای برای ویرایش وجود ندارد",
remove: "پاک کردن لایه ها",
removeDisabled: "لایه ای برای پاک کردن وجود ندارد",
},
},
handlers: {
edit: {
tooltip: {
text: "Drag handles or markers to edit features.",
subtext: "با کلیک بر روی کنسل تغییرات اعمال نخواهند شد.",
},
},
remove: {
tooltip: {
text: "Click on a feature to remove.",
},
},
},
},
};
const outerBounds = [
[50.505, -29.09],
[52.505, 29.09],
@ -22,6 +137,7 @@ const outerBounds = [
const LeafletMap = () => {
const leafEl = useRef(null);
const onCreated = (e) => {
const drawnItems = leafEl.current._layers;
console.log({ drawnItems });

@ -1,76 +1,7 @@
import React, { useState, useEffect } from "react";
import "./index.scss";
import { Calendar } from "react-multi-date-picker";
import DatePicker from "react-multi-date-picker";
import persian from "react-date-object/calendars/persian";
import persian_fa from "react-date-object/locales/persian_fa";
//بهتره که این آرایه خارج از کامپوننت اصلی قرار داده بشه.
// const weekDays = [
// "شنبه",
// "یکشنبه",
// "دوشنبه",
// "سشنبه",
// "چهارشنبه",
// "پنجشنبه",
// "جمعه",
// ];
function CustomRangeInput({ openCalendar, value }) {
useEffect(() => {
openCalendar();
}, []);
return (
<div className="flex flex-row items-center ">
<input
className="w-full py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
onFocus={openCalendar}
value={value[0]}
readOnly
/>
<p className="mx-2 text-sm">تا</p>
<input
className="w-full py-1 text-center text-sm rounded border border-gray-200 focus:outline-none focus:border-[#0074d9] focus:ring-[#0074d9] focus:ring-1"
onFocus={openCalendar}
value={value[1]}
readOnly
/>
</div>
);
}
import React from "react";
const TestComponentNew = () => {
return (
<div className="w-1/2 mx-auto" style={{ direction: "rtl" }}>
<Calendar calendar={persian} locale={persian_fa} />
<hr className="my-20" />
<DatePicker
range
calendar={persian}
locale={persian_fa}
fixMainPosition={true}
fixRelativePosition={true}
calendarPosition={`${"top"}-${"center"}`}
offsetY={"10"}
onClose={() => false}
arrow={false}
minDate={new Date()}
render={<CustomRangeInput />}
// weekDays={weekDays}
className="custom-calendar"
style={{
width: "100%",
height: "33px",
boxSizing: "border-box",
backgroundColor: "red",
}}
/>
</div>
);
return <div>TestComponentNew</div>;
};
export default TestComponentNew;

@ -1,34 +0,0 @@
.rmdp-arrow-container {
background-color: #0074d9;
border-radius: 2px !important;
height: 24px !important;
width: 24px !important;
}
.rmdp-arrow-container .rmdp-arrow {
border: solid #fff;
border-width: 0 2px 2px 0;
margin-top: 8px !important;
}
.rmdp-wrapper .start {
background: #0074d9 !important;
color: #fff !important;
border: none !important;
box-shadow: none !important;
}
.rmdp-wrapper .end {
background: #0074d9 !important;
color: #fff !important;
box-shadow: none !important;
border: none !important;
}
.rmdp-range {
background: #f7f7f7 !important;
color: #0074d9 !important;
border: none !important;
box-shadow: none !important;
}
Loading…
Cancel
Save