update 6 files

package.json

@@ -20,10 +20,10 @@
     "date-fns": "^2.28.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "react": "^18.0.0",
+    "react": "17",
     "react-apexcharts": "^1.3.9",
     "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^18.0.0",
+    "react-dom": "17",
     "react-icons": "^4.3.1",
     "react-indiana-drag-scroll": "^2.1.0",
     "react-input-range": "^1.3.0",

src/App.js

@@ -85,6 +85,7 @@ import CardDesign2 from "./components/CardDesign2";
 import ButtonDivTag from "./components/ButtonDivTag";
 import Button from "./components/Button";
 import LeafLet from "./components/LeafLet";
+import CssCountdown from "./components/CssCountdown";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -170,6 +171,7 @@ function App() {
         {/* <IndianaDragScroll /> */}
         {/* <IconText /> */}
         {/* <CustomToast /> */}
+        <CssCountdown />
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/CssCountdown/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+import "./index.scss";
+
+const CssCountdown = () => {
+  return (
+    <div className="wrapper">
+      <span className="box third-number"></span>
+      <span className="box second-number"></span>
+      <span className="box first-number"></span>
+    </div>
+  );
+};
+
+export default CssCountdown;

src/components/CssCountdown/index.scss

@@ -0,0 +1,32 @@
+body {
+  background: #262626;
+}
+
+.wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.wrapper span {
+  color: #fff;
+  border: 5px solid #ddd;
+  padding: 0 30px;
+  border-radius: 25px;
+  margin: 0 10px;
+}
+
+.box {
+  display: inline-block;
+  overflow: hidden;
+  height: 1em;
+  font-weight: bold;
+  font-size: 16em;
+}
+
+.box::after {
+  position: relative;
+  white-space: pre;
+  content: "";
+}

src/components/TestComponentNew/Grid.js

@@ -0,0 +1,31 @@
+import L from "leaflet";
+import { GridLayer, withLeaflet } from "react-leaflet";
+
+class Grid extends GridLayer {
+  createLeafletElement() {
+    const Grid = L.GridLayer.extend({
+      createTile: () => {
+        const tile = document.createElement("div");
+        tile.style.outline = "1px solid black";
+        return tile;
+      },
+    });
+    return new Grid({ tileSize: 100 });
+  }
+
+  componentDidMount() {
+    const { map } = this.props.leaflet;
+    if (this.props.showGrid) this.leafletElement.addTo(map);
+  }
+
+  updateLeafletElement(fromProps, toProps) {
+    const { map } = this.props.leaflet;
+    if (toProps.showGrid !== fromProps.showGrid) {
+      toProps.showGrid
+        ? this.leafletElement.addTo(map)
+        : this.leafletElement.removeFrom(map);
+    }
+  }
+}
+
+export default withLeaflet(Grid);

src/components/TestComponentNew/index.js

@@ -1,51 +1,76 @@
-import React, { useState } from "react";
-import { MapContainer, TileLayer, FeatureGroup } from "react-leaflet";
+import React, { useState, useRef, useMemo } from "react";
+import {
+  MapContainer,
+  TileLayer,
+  FeatureGroup,
+  Rectangle,
+  useMap,
+  LayerGroup,
+  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 Grid from "./Grid";
+const outerBounds = [
+  [50.505, -29.09],
+  [52.505, 29.09],
+];
 
 const TestComponentNew = () => {
-  const [editableFG, setEditableFG] = useState(null);
-
+  const leafEl = useRef(null);
   const onCreated = (e) => {
-    console.log(e);
-    console.log(editableFG);
-
-    const drawnItems = editableFG.leafletElement._layers;
-    console.log(drawnItems);
-    if (Object.keys(drawnItems).length > 1) {
-      Object.keys(drawnItems).forEach((layerid, index) => {
-        if (index > 0) return;
-        const layer = drawnItems[layerid];
-        editableFG.leafletElement.removeLayer(layer);
-      });
-      console.log(drawnItems);
-    }
-  };
-
-  const onFeatureGroupReady = (reactFGref) => {
-    // store the ref for future access to content
-    setEditableFG(reactFGref);
+    const drawnItems = leafEl.current._layers;
+    console.log({ drawnItems });
+    // if (Object.keys(drawnItems).length > 1) {
+    //   Object.keys(drawnItems).forEach((layerid, index) => {
+    //     if (index > 0) return;
+    //     const layer = drawnItems[layerid];
+    //     leafEl.current.removeLayer(layer);
+    //   });
+    //   console.log(drawnItems);
+    // }
   };
 
   return (
     <MapContainer
-      center={[37.8189, -122.4786]}
-      zoom={13}
+      center={[49.505, -2.09]}
+      zoom={24}
+      maxZoom={24}
+      maxNativeZoom={22}
       style={{ height: "100vh" }}
+      zoomControl={false}
+      bounds={outerBounds}
     >
       <TileLayer
         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-        url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
+        url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
+        apikey="db5ae1f5778a448ca662554581f283c5"
+        maxZoom={24}
+        maxNativeZoom={22}
+        opacity={0.8}
+      />
+      <TileLayer
+        url={grid}
+        apikey="db5ae1f5778a448ca662554581f283c5"
+        maxZoom={24}
+        maxNativeZoom={24}
+        opacity={0.5}
       />
-      <FeatureGroup
-        ref={(featureGroupRef) => {
-          onFeatureGroupReady(featureGroupRef);
-        }}
-      >
-        <EditControl position="topright" onCreated={onCreated} />
+      <FeatureGroup ref={leafEl}>
+        <EditControl
+          position="topright"
+          onCreated={onCreated}
+          allowIntersection={false}
+        />
       </FeatureGroup>
+      <LayerGroup></LayerGroup>
+      <ScaleControl position="topleft" />
+      <ZoomControl position="topleft" />
     </MapContainer>
   );
 };

src/components/TestComponentNew/index.scss

@@ -2,3 +2,11 @@
   width: 100%;
   height: 100vh;
 }
+.leaflet-control-scale-line:not(:first-child) {
+  display: none !important;
+}
+.leaflet-tile {
+  border: 1px solid gray;
+
+  box-sizing: content-box;
+}

src/index.css

@@ -20,4 +20,7 @@ body {
   padding-right: 4px;
   border-radius: 50%;
 }
-/*# sourceMappingURL=index.css.map */
+/*# sourceMappingURL=index.css.map */
+.leaflet-control-scale-line:not(:first-child) {
+  display: none !important;
+}

yarn.lock

@@ -7670,13 +7670,14 @@ react-dev-utils@^12.0.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@^18.0.0:
-  version "18.0.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz"
-  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
+react-dom@17:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.21.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
 
 react-error-overlay@^6.0.10:
   version "6.0.10"
@@ -7858,12 +7859,13 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^18.0.0:
-  version "18.0.0"
-  resolved "https://registry.npmjs.org/react/-/react-18.0.0.tgz"
-  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
+react@17:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
+    object-assign "^4.1.1"
 
 readable-stream@^2.0.1:
   version "2.3.7"
@@ -8202,12 +8204,13 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
   dependencies:
     loose-envify "^1.1.0"
+    object-assign "^4.1.1"
 
 schema-utils@2.7.0:
   version "2.7.0"