From b3c9751f0966397610c165342b12c4c6679a4d44 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 20 Apr 2022 11:49:29 +0430 Subject: [PATCH] update 5 files --- src/App.js | 4 +- src/components/LeafletMap/index.js | 116 +++++++++++++++++++++ src/components/TestComponentNew/index.js | 73 +------------ src/components/TestComponentNew/index.scss | 34 ------ 4 files changed, 120 insertions(+), 107 deletions(-) diff --git a/src/App.js b/src/App.js index 4843b65..2e6ff1b 100644 --- a/src/App.js +++ b/src/App.js @@ -138,7 +138,7 @@ function App() { {/* */} {/* */} {/* */} - {/* */} + {/* *************************************************** mini components *************************************************** */} @@ -171,7 +171,7 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/*
diff --git a/src/components/LeafletMap/index.js b/src/components/LeafletMap/index.js index c163895..c95ac0b 100644 --- a/src/components/LeafletMap/index.js +++ b/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: "Error: 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 }); diff --git a/src/components/TestComponentNew/index.js b/src/components/TestComponentNew/index.js index 7a31cc3..c4bee1c 100644 --- a/src/components/TestComponentNew/index.js +++ b/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 ( -
- -

تا

- -
- ); -} +import React from "react"; const TestComponentNew = () => { - return ( -
- -
- false} - arrow={false} - minDate={new Date()} - render={} - // weekDays={weekDays} - className="custom-calendar" - style={{ - width: "100%", - height: "33px", - boxSizing: "border-box", - backgroundColor: "red", - }} - /> -
- ); + return
TestComponentNew
; }; export default TestComponentNew; diff --git a/src/components/TestComponentNew/index.scss b/src/components/TestComponentNew/index.scss index d080051..e69de29 100644 --- a/src/components/TestComponentNew/index.scss +++ b/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; -}