update 5 files

src/App.js

@@ -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 ">

src/components/LeafletMap/index.js

@@ -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 });

src/components/TestComponentNew/index.js

@@ -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;

src/components/TestComponentNew/index.scss

@@ -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;
-}