Merge pull request #21 from mapcomponents/Add-MultiTab

Add multi tab

Author: JannikBrack

multi_tab/package.json

@@ -1,8 +1,9 @@
 {
-  "name": "app_title",
+  "name": "multi_tab",
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "homepage": ".",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

webGis/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mapcomponents/react-maplibre": "^0.1.85",

webGis/src/AppContext.js

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 const AppContext = createContext({});
 

webGis/src/components/BottomSidebar.js

@@ -1,14 +1,12 @@
 import * as React from "react";
 import { Global } from "@emotion/react";
-import { styled, useTheme } from "@mui/material/styles";
+import { styled,  } from "@mui/material/styles";
 import {
   Box,
   Typography,
-  CssBaseline,
   SwipeableDrawer,
-  autocompleteClasses,
-} from "@mui/material/";
-import { grey } from "@mui/material/colors";
+  } from "@mui/material/";
+
 
 const drawerBleeding = 56;
 

webGis/src/components/CustomDraggableFrame.js

@@ -4,7 +4,6 @@ import theme from "../theme";
 import StraightenOutlinedIcon from "@mui/icons-material/StraightenOutlined";
 import SquareFootOutlinedIcon from "@mui/icons-material/SquareFootOutlined";
 import makeStyles from "@mui/styles/makeStyles";
-import useMediaQuery from "@mui/material/useMediaQuery";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 import DraggableFrame from "./DraggableFrame";
@@ -17,9 +16,9 @@ import GeoJSONLoader from "../components/Frames/GeoJSONLoader";
 import LineGeoJSONIntersectionFeatureInfo from "../components/Frames/LineGeoJSONIntersectionFeatureInfo";
 
 
-import { ExampleConfig } from "../components/MlIconLayerstories";
+import { ExampleConfig } from "./MlIconLayerstories";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -36,7 +35,6 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function CustomDraggableFrame(props) {
-  const mediaIsMobile = useMediaQuery("(max-width:900px)");
   const classes = useStyles(theme);
 
   const entry = [

webGis/src/components/DraggableFrame.js

@@ -12,7 +12,7 @@ import { useMediaQuery } from "@mui/material";
 
 import BottomSidebar from "./BottomSidebar";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "30px",
     margin: "10px",
@@ -34,10 +34,10 @@ function DraggableFrame(props) {
   var startPos;
 
   useEffect(() => {
-    if (props.componentId == "toolbar") {
+    if (props.componentId === "toolbar") {
       window.addEventListener(
         "resize",
-        function (event) {
+        function () {
           setPos({ ...pos, x: window.innerWidth - 100 });
         },
         true
@@ -91,7 +91,7 @@ function DraggableFrame(props) {
     if (index > -1) {
       newState.splice(index, 1);
 
-      if (props.componentId == "featureInfo") {
+      if (props.componentId === "featureInfo") {
         appContext.setFeatureInfoEnabled(false);
       }
     }

webGis/src/components/Frames/FeatureInfo.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useContext } from "react";
+import { useEffect, useContext } from "react";
 
 import Grid from "@mui/material/Grid";
 
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function FeatureInfo(props) {
+function FeatureInfo() {
   const classes = useStyles(theme);
 
   const appContext = useContext(AppContext);

webGis/src/components/Frames/GeoJSONLoader.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useContext, useRef } from "react";
+import {  useContext, useRef } from "react";
 
 import Grid from "@mui/material/Grid";
 
@@ -10,10 +10,10 @@ import { Button } from "@mui/material";
 
 import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
 
-import TextField from "@mui/material/TextField";
+
 import AppContext from "../../AppContext.js";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function GeoJSONLoader(props) {
+function GeoJSONLoader() {
   const classes = useStyles(theme);
 
   const inputRef = useRef(null);

webGis/src/components/Frames/LayerTree.js

@@ -1,7 +1,3 @@
-import { useEffect, useState } from "react";
-
-import IconButton from "@mui/material/IconButton";
-
 import makeStyles from "@mui/styles/makeStyles";
 import theme from "../../theme.js";
 import Grid from "@mui/material/Grid";
@@ -26,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function LayerTree(props) {
+function LayerTree() {
   const classes = useStyles(theme);
 
   return (

webGis/src/components/Frames/LineGeoJSONIntersectionFeatureInfo.js

@@ -2,10 +2,6 @@ import { useEffect, useState, useContext } from "react";
 
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
-import Card from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -25,7 +21,7 @@ import { MlFeatureEditor } from "@mapcomponents/react-maplibre";
 
 import * as turf from "@turf/turf";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   icon: {
     width: "40px",
     margin: "10px",
@@ -41,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function LineGeoJSONIntersectionFeatureInfo(props) {
+function LineGeoJSONIntersectionFeatureInfo() {
   const classes = useStyles(theme);
 
   const appContext = useContext(AppContext);