@mapcomponents/react-maplibre 0.1.63 → 0.1.64

package/src/ui_components/Dropzone.tsx

@@ -0,0 +1,104 @@
+import React, { useRef, useEffect, useState } from 'react';
+import Typography from '@mui/material/Typography';
+
+type Props = {
+	setData: (data: string) => void;
+};
+
+const stopDefault = (event: DragEvent) => {
+	event.preventDefault();
+	event.stopPropagation();
+};
+export default function Dropzone(props: Props) {
+	const [zIndex, setZIndex] = useState(0);
+	const dropZone = useRef<HTMLDivElement>(null);
+	const dropHandler = (event: DragEvent) => {
+		event.preventDefault();
+
+		if (event?.dataTransfer?.items) {
+			if (event.dataTransfer.items.length > 1) {
+				return false;
+			}
+			// If dropped items aren't files, reject them
+			if (event.dataTransfer.items[0].kind === 'file') {
+				const reader = new FileReader();
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				reader.onload = (payload: any) => {
+					if (!payload?.currentTarget?.result) return;
+
+					if (typeof props.setData === 'function') {
+						props.setData(payload.currentTarget.result);
+					}
+				};
+				const file = event.dataTransfer.items[0].getAsFile();
+				if (file) {
+					reader.readAsText(file);
+				}
+			}
+		} else {
+			// Use DataTransfer interface to access the file(s)
+		}
+		return;
+	};
+
+	useEffect(() => {
+		const _dropZone = dropZone.current;
+		const raiseDropZoneAndStopDefault = (event: DragEvent) => {
+			setZIndex(1000);
+			stopDefault(event);
+		};
+		const lowerDropZone = () => {
+			setZIndex(0);
+		};
+		const lowerDropZoneAndStopDefault = (event: DragEvent) => {
+			setZIndex(0);
+			stopDefault(event);
+		};
+
+		window.addEventListener('dragenter', raiseDropZoneAndStopDefault);
+		window.addEventListener('dragover', stopDefault);
+
+		_dropZone?.addEventListener('dragleave', lowerDropZone);
+
+		window.addEventListener('drop', lowerDropZoneAndStopDefault);
+
+		return () => {
+			window.removeEventListener('dragenter', raiseDropZoneAndStopDefault);
+			window.removeEventListener('dragover', stopDefault);
+			_dropZone?.removeEventListener('dragleave', lowerDropZone);
+			window.removeEventListener('drop', lowerDropZoneAndStopDefault);
+		};
+	}, []);
+
+	return (
+		<div
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			onDrop={dropHandler}
+			ref={dropZone}
+			style={{
+				position: 'absolute',
+				left: '0',
+				top: '0',
+				backgroundColor: 'rgba(255,255,255,0.5)',
+				width: '100%',
+				height: '100%',
+				zIndex: zIndex,
+			}}
+		>
+			<Typography
+				variant="h6"
+				style={{
+					top: '50%',
+					position: 'absolute',
+					left: '50%',
+					msTransform: 'translate(-50%, -50%)',
+					transform: ' translate(-50%, -50%)',
+				}}
+				noWrap
+			>
+				Datei ablegen
+			</Typography>
+		</div>
+	);
+}

package/src/ui_components/{ImageLoader.js → ImageLoader.tsx}

@@ -1,43 +1,47 @@
-
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-
 import ErrorIcon from '@mui/icons-material/Error';
-import { Box } from "@mui/system";
-const ImageLoader = (props) => {
-	const [state, setState] = useState("loading");
+import { Box } from '@mui/system';
+import { SxProps } from '@mui/material';
+
+interface ImageLoaderProps {
+	src: string;
+	alt?: string;
+	sx?: SxProps;
+	className?: string;
+}
+
+const ImageLoader = (props: ImageLoaderProps) => {
+	const [state, setState] = useState('loading');
 
 	useEffect(() => {
 		if (!props.src) {
-			setState("error");
+			setState('error');
 			return;
 		}
 		fetch(props.src)
 			.then(({ ok }) => {
 				if (ok) {
-					setState("ready");
+					setState('ready');
 				} else {
-					setState("error");
+					setState('error');
 				}
 			})
 			.catch((e) => {
 				console.error(e);
-				setState("error");
+				setState('error');
 			});
 	}, [props.src]);
 
 	const boxStyle = {
-		width: "100%",
-		height: "100%",
 		border: 2,
-		borderRadius: "8px",
-		textAlign: "center",
-		display: "flex",
+		borderRadius: '8px',
+		display: 'flex',
 	};
 
 	const LoadingImage = () => {
 		return (
-			<Box className={props.className} sx={{ ...boxStyle, ...props.style }}>
+			<Box className={props.className} sx={{ ...boxStyle, ...props.sx }}>
 				<CircularProgress />
 			</Box>
 		);
@@ -45,27 +49,28 @@ const ImageLoader = (props) => {
 
 	const ReadyImage = () => {
 		return (
-			<img
+			<Box
+				component={'img'}
 				className={props.className}
-				style={{ ...boxStyle, ...props.style }}
+				sx={{ ...boxStyle, ...props.sx }}
 				src={props.src}
-				alt={props.alt || ""}
+				alt={props.alt || ''}
 			/>
 		);
 	};
 	const ErrorImage = () => {
 		return (
-			<Box className={props.className} sx={{ boxStyle, ...props.style }}>
-				<ErrorIcon sx={{ display: "block", margin: "auto" }} />
+			<Box className={props.className} sx={{ ...boxStyle, ...props.sx }}>
+				<ErrorIcon sx={{ display: 'block', margin: 'auto' }} />
 			</Box>
 		);
 	};
 
-	const renderImage = (state) => {
+	const renderImage = (state: string) => {
 		switch (state) {
-			case "ready":
+			case 'ready':
 				return <ReadyImage />;
-			case "error":
+			case 'error':
 				return <ErrorImage />;
 			default:
 				return <LoadingImage />;
@@ -75,4 +80,4 @@ const ImageLoader = (props) => {
 	return <>{renderImage(state)}</>;
 };
 
-export default ImageLoader
+export default ImageLoader;

package/src/ui_components/{LoadingOverlayContext.js → LoadingOverlayContext.tsx}

@@ -1,11 +1,12 @@
-import React, { useState, useEffect, useContext, useRef } from "react";
-import PropTypes from "prop-types";
-import { MapContext } from "../index";
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { MapContext } from '../index';
+import { JsxChildren } from 'typedoc/dist/lib/utils/jsx.elements';
 
 const LoadingOverlayContext = React.createContext({});
 const LoadingOverlayContextProvider = LoadingOverlayContext.Provider;
 
-const LoadingOverlayProvider = ({ children }) => {
+const LoadingOverlayProvider = (children: JsxChildren) => {
 	const mapContext = useContext(MapContext);
 
 	const [controlled, setControlled] = useState(false);
@@ -15,7 +16,7 @@ const LoadingOverlayProvider = ({ children }) => {
 	const mapJobsRef = useRef({});
 	const [checkIdleTrigger, setCheckIdleTrigger] = useState(0);
 
-	const createOnMapIdleFunction = (mapId) => () => {
+	const createOnMapIdleFunction = (mapId: string) => () => {
 		mapJobsRef.current[mapId] = true;
 		setCheckIdleTrigger(Math.random());
 	};
@@ -33,7 +34,7 @@ const LoadingOverlayProvider = ({ children }) => {
 	useEffect(() => {
 		if (!mapContext.map || controlled) return;
 
-		for (var key in mapJobsRef.current) {
+		for (const key in mapJobsRef.current) {
 			if (!mapJobsRef.current[key]) return;
 		}
 
@@ -41,14 +42,14 @@ const LoadingOverlayProvider = ({ children }) => {
 	}, [checkIdleTrigger, controlled, mapContext]);
 
 	useEffect(() => {
-		for (var i = 0, len = mapContext.mapIds.length; i < len; i++) {
-			if (Object.keys(mapJobsRef.current).indexOf(mapContext.mapIds[i]) === -1) {
-				let mapId = mapContext.mapIds[i] + "";
+		for (let i = 0, len = mapContext.mapIds.length; i < len; i++) {
+			if (Object.keys(mapJobsRef.current).indexOf(mapContext.mapIds[i] as string) === -1) {
+				const mapId = mapContext.mapIds[i] + '';
 
 				if (mapContext.getMap(mapId)) {
 					mapJobsRef.current[mapId] = false;
 
-					mapContext.getMap(mapId).on("idle", createOnMapIdleFunction(mapId));
+					mapContext.getMap(mapId).on('idle', createOnMapIdleFunction(mapId));
 				}
 			}
 		}
@@ -68,11 +69,7 @@ const LoadingOverlayProvider = ({ children }) => {
 		setLoadingDone,
 	};
 
-	return (
-		<LoadingOverlayContextProvider value={value}>
-			{children}
-		</LoadingOverlayContextProvider>
-	);
+	return <LoadingOverlayContextProvider value={value}>{children}</LoadingOverlayContextProvider>;
 };
 
 LoadingOverlayProvider.propTypes = {

package/src/ui_components/Sidebar.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
-import Drawer from '@mui/material/Drawer';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import MenuIcon from '@mui/icons-material/Menu';
-import { IconButton, PaperProps } from '@mui/material';
+import { Drawer, IconButton, PaperProps, SxProps, DrawerProps} from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import Box from '@mui/material/Box';
-import { JsxChildren } from 'typedoc/dist/lib/utils/jsx.elements';
+
+
 
 const DrawerHeader = styled('div')(() => ({
 	display: 'flex',
@@ -14,12 +14,13 @@ const DrawerHeader = styled('div')(() => ({
 }));
 
 interface SidebarProps {
-	drawerPaperProps: PaperProps;
-	drawerHeaderProps: Headers;
-	children: JsxChildren;
+	drawerPaperProps?: PaperProps;
+	drawerHeaderProps?: Headers;
+	drawerButtonStyle?: SxProps | undefined;
+	children?: React.ReactNode;
 }
 
-export default function Sidebar({ drawerPaperProps, drawerHeaderProps, ...props }: SidebarProps) {
+export default function Sidebar({ drawerPaperProps, drawerHeaderProps, drawerButtonStyle, ...props }: SidebarProps & DrawerProps) {
 	const mediaIsMobile = useMediaQuery('(max-width:900px)');
 
 	const [drawerOpen, setDrawerOpen] = useState(true);
@@ -35,11 +36,12 @@ export default function Sidebar({ drawerPaperProps, drawerHeaderProps, ...props
 		<>
 			<IconButton
 				onClick={handleDrawerOpen}
-				style={{
+				sx={{
 					zIndex: 101,
 					position: 'relative',
 					padding: '20px',
-				}}
+					...drawerButtonStyle
+				}}				
 			>
 				<MenuIcon />
 			</IconButton>
@@ -51,7 +53,7 @@ export default function Sidebar({ drawerPaperProps, drawerHeaderProps, ...props
 				PaperProps={{
 					sx: {
 						maxWidth: '20%',
-						padding: '40px',
+						padding: '40px'						
 					},
 					...drawerPaperProps,
 				}}

package/src/ui_components/Tooltip.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+
+const useStyles = makeStyles(() => ({
+	tooltip: {
+		position: 'fixed',
+		top: '100px',
+		left: '100px',
+		zIndex: 100000,
+	},
+}));
+
+export default function Legend() {
+	const classes = useStyles();
+
+	return <div className={classes.tooltip}>tooltip</div>;
+}

package/src/ui_components/TopToolbar.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import AppBar from '@mui/material/AppBar';
-import { Toolbar, AppBarProps, ToolbarProps } from '@mui/material';
+import { Toolbar, AppBarProps, ToolbarProps, SxProps } from '@mui/material';
 
 interface TopToolbarProps extends AppBarProps {
-	toolbarProps: ToolbarProps;
+	toolbarProps?: ToolbarProps;
+	appBarStyle?: SxProps
 }
-export default function TopToolbar({ toolbarProps, ...props }: TopToolbarProps) {
+export default function TopToolbar({ toolbarProps, appBarStyle, ...props }: TopToolbarProps) {
 	return (
 		<AppBar
 			sx={{
@@ -13,6 +14,7 @@ export default function TopToolbar({ toolbarProps, ...props }: TopToolbarProps)
 				backgroundColor: '#f1f1f1',
 				position: 'absolute',
 				zIndex: 120,
+				...appBarStyle
 			}}
 			color="primary"
 			position="static"

package/src/ui_components/UploadButton.tsx

@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import FileCopy from '@mui/icons-material/FileCopy';
+import { Button } from '@mui/material';
+
+type Props = {
+	setData: (data: string) => void;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	buttonComponent: any;
+};
+
+export default function UploadButton(props: Props) {
+	const fileupload = useRef<HTMLInputElement>(null);
+	const fileUploadOnChange = () => {
+		if (!fileupload.current) return false;
+
+		const file = fileupload.current?.files?.[0];
+		if (!file) return false;
+		const reader = new FileReader();
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		reader.onload = (payload: any) => {
+			if (!payload) return;
+
+			if (typeof props.setData === 'function') {
+				props.setData(payload.currentTarget?.result);
+			}
+		};
+
+		reader.readAsText(file);
+
+		return;
+	};
+
+	const upload = () => {
+		if (!fileupload.current) return;
+
+		fileupload.current.click();
+	};
+	return (
+		<>
+			{props.buttonComponent ? (
+				React.cloneElement(props.buttonComponent, { onClick: upload })
+			) : (
+				<Button onClick={upload}>
+					<FileCopy />
+				</Button>
+			)}
+			<input
+				ref={fileupload}
+				onChange={fileUploadOnChange}
+				type="file"
+				id="input"
+				multiple
+				style={{ display: 'none' }}
+			></input>
+		</>
+	);
+}

package/src/util/BubbleForInstructions.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import ReplyAllIcon from '@mui/icons-material/ReplyAll';
+
+function BubbleForInstruction(props) {
+	return (
+		<>
+			<div
+				style={{
+					width: '475px',
+					height: '475px',
+					position: 'fixed',
+					display: 'block',
+					borderRadius: '360px',
+					backgroundColor: 'steelblue',
+					right: props.bubbleRight,
+					bottom: props.bubbleBottom,
+					left: props.bubbleLeft,
+					top: props.bubbleTop,
+					zIndex: props.zIndex
+				}}
+			>
+				<h2
+					style={{
+						marginTop: props.textMarginTop,
+						marginLeft: props.textMarginLeft,
+						color: 'white',
+						textAlign: 'left',
+					}}
+				>
+					{props.children}
+				</h2>
+				<ReplyAllIcon
+					style={{
+						color: 'white',
+						fontSize: '80px',
+						position: 'absolute',
+						transform: props.iconTransform,
+						marginTop: props.iconMarginTop,
+						marginLeft: props.iconMarginLeft,
+					}}
+				/>
+			</div>
+		</>
+	);
+}
+export default BubbleForInstruction;

package/src/util/Instructions.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState, useRef } from 'react';
+import {Fade, SxProps} from '@mui/material';
+import BubbleStyle from './BubbleForInstructions';
+
+interface StepObject {
+	duration: number;
+	props: SxProps;
+	content: JSX.Element;
+}
+
+interface InstructionProps {
+	steps: Array<StepObject>;
+	open: boolean;
+	callback?: () => void;
+}
+
+const Instructions = (props: InstructionProps) => {
+	const [activeStep, setActiveStep] = useState<number>();
+	const initializedRef = useRef(false);
+
+	const activateStep = (stepId?: number | undefined) => {
+		let _nextStep: number | undefined = typeof stepId === 'undefined' ? 0 : stepId + 1;
+		if (typeof _nextStep !== 'undefined') {
+			if (_nextStep > props.steps.length + 1) {
+				_nextStep = undefined;
+			} else {
+				setTimeout(() => {
+					activateStep(_nextStep);
+				}, props.steps[_nextStep].duration);
+			}
+		}
+		setActiveStep(_nextStep);
+	};
+	useEffect(() => {
+		if (props.open && !initializedRef.current) {
+			initializedRef.current = true;
+			activateStep();
+		}
+		if (!props.open) {
+			initializedRef.current = false;
+			setActiveStep(undefined);
+		}
+	}, [props.open]);
+
+	return (
+		<>
+			{typeof activeStep !== 'undefined' && (
+				<Fade in={true} timeout={150}>
+					<div>
+						<BubbleStyle {...props.steps[activeStep].props}>
+							{props.steps[activeStep].content}
+						</BubbleStyle>
+					</div>
+				</Fade>
+			)}
+		</>
+	);
+};
+
+export default Instructions;

package/tsconfig.json

@@ -8,7 +8,7 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": false,
-		"types": ["node", "jest", "geojson", "cypress", "./support"],
+		"types": ["node", "jest", "geojson", "cypress"],
 		"outDir": "build/esm",
 		"module": "esnext",
 		"target": "es5",