@mapcomponents/react-maplibre 0.1.69 → 0.1.70

package/src/ui_components/LayerList/util/LayerListItemVectorLayer.tsx

@@ -1,92 +0,0 @@
-import { ListItem, IconButton, ListItemIcon, Checkbox, ListItemText } from '@mui/material';
-import React, { useEffect, useState } from 'react';
-import LayerPropertyForm from './LayerPropertyForm';
-import TuneIcon from '@mui/icons-material/Tune';
-import { MlVectorTileLayerProps } from '../../../components/MlVectorTileLayer/MlVectorTileLayer';
-
-type Props = {
-	id: string;
-	configurable?: boolean;
-	vtProps: MlVectorTileLayerProps;
-	setVtProps: ((state: unknown) => void) | undefined;
-};
-
-export default function LayerListItemVectorLayer({ configurable, vtProps, setVtProps, id }: Props) {
-	const [paintPropsFormVisible, setPaintPropsFormVisible] = useState(false);
-	const [visible, setVisible] = useState(true);
-	const [paintProps, setPaintProps] = useState(vtProps.layers[id].paint);
-
-	useEffect(() => {
-		if (!setVtProps) return;
-
-		const _layers = [...vtProps.layers];
-		if (!_layers[id].layout) {
-			_layers[id].layout = { visibility: visible ? 'visible' : 'none' };
-		} else {
-			_layers[id].layout.visibility = visible ? 'visible' : 'none';
-		}
-
-		setVtProps({ ...vtProps, layers: _layers });
-	}, [visible, id, setVtProps, vtProps]);
-
-	useEffect(() => {
-		if (!setVtProps) return;
-
-		const _paintProps = { ...paintProps };
-		const _layers = [...vtProps.layers];
-		_layers[id].paint = _paintProps;
-
-		setVtProps({ ...vtProps, layers: _layers });
-	}, [paintProps, id, setVtProps, vtProps]);
-
-	return (
-		<>
-			<ListItem
-				key={id}
-				sx={{
-					paddingRight: configurable ? '56px' : 0,
-					paddingLeft: 0,
-					paddingTop: 0,
-					paddingBottom: '4px',
-				}}
-				secondaryAction={
-					configurable ? (
-						<IconButton
-							edge="end"
-							aria-label="comments"
-							onClick={() => {
-								setPaintPropsFormVisible((current) => {
-									return !current;
-								});
-							}}
-							sx={{ padding: '4px', marginTop: '-3px' }}
-						>
-							<TuneIcon />
-						</IconButton>
-					) : undefined
-				}
-			>
-				<ListItemIcon sx={{ minWidth: '30px' }}>
-					<Checkbox
-						checked={visible}
-						onClick={() => {
-							setVisible((val) => !val);
-						}}
-					/>
-				</ListItemIcon>
-				<ListItemText primary={vtProps.layers[id].id} />
-			</ListItem>
-			{configurable && paintPropsFormVisible && (
-				<LayerPropertyForm
-					paintProps={paintProps}
-					setPaintProps={setPaintProps}
-					layerType={vtProps.layers[id].type}
-				/>
-			)}
-		</>
-	);
-}
-
-LayerListItemVectorLayer.defaultProps = {
-	configurable: true,
-};

package/src/ui_components/LayerList/util/LayerPropertyForm.tsx

@@ -1,125 +0,0 @@
-import {
-	CircleLayerSpecification,
-	FillLayerSpecification,
-	LineLayerSpecification,
-} from 'maplibre-gl';
-import React, { useRef } from 'react';
-import ColorPicker from './input/ColorPicker';
-import { Box, ListItem, Paper, Slider, TextField, Typography } from '@mui/material';
-import {useCallback} from 'react';
-
-export type paintPropsType =
-	| CircleLayerSpecification['paint']
-	| FillLayerSpecification['paint']
-	| LineLayerSpecification['paint'];
-
-type Props = {
-	paintProps: paintPropsType;
-	setPaintProps: (
-		paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)
-	) => void;
-	layerType: string;
-};
-
-const mapPropKeyToFormInputType = {
-	'fill-color': 'colorpicker',
-	'line-color': 'colorpicker',
-	'line-width': 'slider',
-	'line-blur': 'slider',
-};
-const mapPropKeyToFormInputTypeKeys = Object.keys(mapPropKeyToFormInputType);
-
-const inputPropsByPropKey = {
-	'line-blur': {
-		step: 1,
-		min: 1,
-		max: 100,
-	},
-	'line-width': {
-		step: 1,
-		min: 1,
-		max: 100,
-	},
-};
-
-export default function LayerPropertyForm({ paintProps = {}, setPaintProps }: Props) {
-	const key = useRef(Math.round(Math.random() * 10000000000));
-	//const onChange = (event) => {};
-
-	const getFormInputByType = useCallback((key: string) => {
-		if (mapPropKeyToFormInputTypeKeys.indexOf(key) !== -1) {
-			const label = (
-				<Typography id={key + '_label'} gutterBottom>
-					{key}
-				</Typography>
-			);
-			switch (mapPropKeyToFormInputType[key]) {
-				case 'slider':
-					return (
-						<>
-							{label}
-							<Slider
-								{...inputPropsByPropKey[key]}
-								inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
-								value={paintProps[key]}
-								onChange={(_ev: Event, value: number) => {
-									if (value) {
-										setPaintProps((current) => ({ ...current, [key]: value }));
-									}
-								}}
-							/>
-						</>
-					);
-					break;
-				case 'numberfield':
-					return (
-						<>
-							{label}
-							<TextField
-								inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
-								value={paintProps[key]}
-								onChange={(ev: React.ChangeEvent<HTMLInputElement>) => {
-									if (ev?.target?.value) {
-										setPaintProps((current) => ({ ...current, [key]: parseInt(ev.target.value) }));
-									}
-								}}
-							/>
-						</>
-					);
-					break;
-				case 'colorpicker':
-					return (
-						<>
-							{label}
-							<Box sx={{ '& > div': { width: 'initial !important' } }}>
-								<ColorPicker
-									key={key}
-									value={paintProps[key]}
-									propKey={key}
-									setPaintProps={setPaintProps}
-								/>
-							</Box>
-						</>
-					);
-					break;
-			}
-		}
-		return null;
-	},[paintProps]);
-
-	return (
-		<>
-			<ListItem key={key + '_paintPropForm'}>
-				<Paper
-					sx={{
-						padding: '15px',
-						boxShadow: 'inset 0px 0px 10px rgb(50 50 50 / 10%)',
-						borderRadius: '5px',
-					}}
-				>
-					{Object.keys(paintProps).map((el: string) => getFormInputByType(el))}
-				</Paper>
-			</ListItem>
-		</>
-	);
-}

package/src/ui_components/LayerList/util/input/ColorPicker.tsx

@@ -1,44 +0,0 @@
-import { ColorObject, ColorPicker, ColorValue } from 'mui-color';
-import React from 'react'
-import { paintPropsType } from '../LayerPropertyForm';
-
-type Props = {
-key: string;
-value: string;
-propKey: string;
-setPaintProps: (
-		paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)
-	) => void;
-}
-
-export default function PaintPropsColorPicker({propKey, value, setPaintProps}: Props) {
-  
-  return (
-						<ColorPicker
-							value={value}
-							onChange={(value: (ColorObject & ColorValue)) => {
-								setPaintProps((current: paintPropsType): paintPropsType => {
-                  if(!value?.rgb?.[0]){
-                    return current;
-                  }
-
-                  const newProps = {
-										...current,
-										[propKey]:
-											'rgba(' +
-											value.rgb[0] +
-											',' +
-											value.rgb[1] +
-											',' +
-											value.rgb[2] +
-											',' +
-											value.alpha +
-											')',
-									};
-
-                  return newProps;
-								});
-							}}
-						/>
-  )
-}

package/src/ui_components/LoadingOverlay.css

@@ -1,9 +0,0 @@
-.loadingOverlay-fadein {
-  opacity: 1;
-  transition: all 150ms linear;
-}
-
-.loadingOverlay-fadeout {
-  opacity: 0;
-  transition: all 1700ms linear;
-}

package/src/ui_components/LoadingOverlayContext.tsx

@@ -1,79 +0,0 @@
-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: JsxChildren) => {
-	const mapContext = useContext(MapContext);
-
-	const [controlled, setControlled] = useState(false);
-	const [loadingDone, setLoadingDone] = useState(false);
-	const [visible, setVisible] = useState(true);
-	const [fadeoutAnimation, setFadeoutAnimation] = useState(false);
-	const mapJobsRef = useRef({});
-	const [checkIdleTrigger, setCheckIdleTrigger] = useState(0);
-
-	const createOnMapIdleFunction = (mapId: string) => () => {
-		mapJobsRef.current[mapId] = true;
-		setCheckIdleTrigger(Math.random());
-	};
-
-	const fadeOut = () => {
-		// add another setTimeout as MapLibre appear to fire idle before all tiles have rendered
-		setTimeout(() => {
-			setFadeoutAnimation(true);
-			setTimeout(() => {
-				setVisible(false);
-			}, 1700);
-		}, 900);
-	};
-
-	useEffect(() => {
-		if (!mapContext.map || controlled) return;
-
-		for (const key in mapJobsRef.current) {
-			if (!mapJobsRef.current[key]) return;
-		}
-
-		fadeOut();
-	}, [checkIdleTrigger, controlled, mapContext]);
-
-	useEffect(() => {
-		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, mapContext.mapIds]);
-
-	useEffect(() => {
-		if (loadingDone) {
-			fadeOut();
-		}
-	}, [loadingDone]);
-
-	const value = {
-		setControlled,
-		controlled,
-		visible,
-		fadeoutAnimation,
-		setLoadingDone,
-	};
-
-	return <LoadingOverlayContextProvider value={value}>{children}</LoadingOverlayContextProvider>;
-};
-
-LoadingOverlayProvider.propTypes = {
-	children: PropTypes.node.isRequired,
-};
-
-export { LoadingOverlayContext, LoadingOverlayProvider };

package/src/ui_components/MapcomponentsTheme.tsx

@@ -1,133 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-import { Theme } from '@mui/system';
-
-declare module '@mui/material/Button' {
-	interface ButtonPropsVariantOverrides {
-		navtools: true;
-	}
-}
-
-const lightDefault = createTheme({
-	palette: {
-		mode: 'light',
-	},
-});
-const darkDefault = createTheme({
-	palette: {
-		mode: 'dark',
-	},
-});
-
-const getDesignTokens = (mode: 'light' | 'dark') => ({
-	...(mode === 'light' ? lightDefault : darkDefault),
-	palette: {
-		mode,
-		...(mode === 'dark'
-			? {
-					primary: {
-						main: '#009FE3',
-					},
-					background: {
-						default: '#121212',
-						paper: '#323232',
-						icon: '#525252',
-					},
-					text: {
-						secondary: '#fff',
-						contrast: '#121212',
-					},
-			  }
-			: {
-					primary: {
-						main: '#009FE3',
-					},
-
-					background: {
-						default: '#fff',
-						paper: '#fdfdfd',
-						icon: '#bdbdbd',
-					},
-					text: {
-						primary: '#111',
-						secondary: '#121212',
-						contrast: '#fff',
-					},
-			  }),
-	},
-});
-const getTheme = (mode: 'light' | 'dark') => {
-	const theme: Theme = getDesignTokens(mode);
-
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	return createTheme(theme, {
-		components: {
-			MuiTypography: {
-				styleOverrides: {
-					root: {
-					},
-				},
-			},
-			MuiAppBar: {
-				styleOverrides: {
-					root: {
-						backgroundColor: theme.palette.background.default,
-					},
-				},
-			},
-			MuiIconButton: {
-				styleOverrides: {
-					root: {
-						color: theme.palette.text.primary,
-						backgroundColor: theme.palette.background.icon,
-						':hover': {
-							backgroundColor: theme.palette.background.icon,
-							color: theme.palette.primary.main,
-						},
-					},
-				},
-			},
-			MuiButton: {
-				styleOverrides: {
-					backgroundColor: theme.palette.background.paper,
-					':hover': {
-						backgroundColor: theme.palette.primary.main,
-					},
-				},
-				variants: [
-					{
-						props: { variant: 'navtools' },
-						style: {
-							minWidth: '20px',
-							minHeight: '20px',
-							fontWeight: 600,
-							[theme.breakpoints.down('md')]: {
-								width: '50px',
-								height: '50px',
-								fontSize: '1.4em',
-							},
-							[theme.breakpoints.up('md')]: {
-								width: '30px',
-								height: '30px',
-								fontSize: '1.2em',
-							},
-							backgroundColor: theme.palette.background.icon,
-							borderRadius: '23%',
-							//border: "1px solid #bbb",
-							//boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
-							margin: '0.15px',
-							marginTop: '4px',
-							':hover': {
-								color: theme.palette.primary.main,
-								backgroundColor: theme.palette.background.icon,
-							},
-							color: theme.palette.text.secondary,
-						},
-					},
-				],
-			},
-		},
-	});
-};
-
-export default getTheme;

package/src/ui_components/Sidebar.tsx

@@ -1,87 +0,0 @@
-import React, { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import MenuIcon from '@mui/icons-material/Menu';
-import { Drawer, IconButton, PaperProps, SxProps, DrawerProps } from '@mui/material';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Box from '@mui/material/Box';
-
-const DrawerHeader = styled('div')(() => ({
-	display: 'flex',
-	alignItems: 'center',
-}));
-
-interface SidebarProps {
-	drawerPaperProps?: PaperProps;
-	drawerHeaderProps?: Headers;
-	drawerButtonStyle?: SxProps | undefined;
-	children?: React.ReactNode;
-}
-
-export default function Sidebar({
-	drawerPaperProps,
-	drawerHeaderProps,
-	drawerButtonStyle,
-	...props
-}: SidebarProps & DrawerProps) {
-	const mediaIsMobile = useMediaQuery('(max-width:900px)');
-
-	const [drawerOpen, setDrawerOpen] = useState(true);
-
-	const handleDrawerOpen = () => {
-		setDrawerOpen(true);
-	};
-	const handleDrawerClose = () => {
-		setDrawerOpen(false);
-	};
-
-	return (
-		<>
-			<IconButton
-				onClick={handleDrawerOpen}
-				sx={{
-					zIndex: 101,
-					position: 'relative',
-					margin: { lg: '20px', md: '20px', sm: '20px', xs: '10px' },
-					...drawerButtonStyle,
-				}}
-			>
-				<MenuIcon />
-			</IconButton>
-			<Drawer
-				transitionDuration={0}
-				variant="persistent"
-				anchor="left"
-				open={drawerOpen}
-				PaperProps={{
-					...drawerPaperProps,
-					sx: {
-						maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' },
-						padding: { lg: '20px', md: '20px', sm: '20px', xs: '10px' },
-						...drawerPaperProps?.sx,
-					},
-				}}
-				sx={{
-					flexGrow: 1,
-					zIndex: 105,
-					position: 'absolute',
-					top: 0,
-					bottom: 0,
-					backgroundColor: '#fafafa',
-					display: 'flex',
-					flexDirection: 'column',
-					maxWidth: { lg: '30%', md: '40%', sm: '50%', xs: '78%' },
-					...(drawerOpen ? {} : { left: mediaIsMobile ? '-90vw' : '-20vw' }),
-				}}
-				{...props}
-			>
-				<DrawerHeader {...drawerHeaderProps}>
-					<IconButton onClick={handleDrawerClose}>
-						<ChevronLeftIcon />
-					</IconButton>
-				</DrawerHeader>
-				<Box>{props.children}</Box>
-			</Drawer>
-		</>
-	);
-}

package/src/ui_components/Tooltip.tsx

@@ -1,17 +0,0 @@
-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,24 +0,0 @@
-import React from 'react';
-import AppBar from '@mui/material/AppBar';
-import { Toolbar, AppBarProps, ToolbarProps, SxProps } from '@mui/material';
-
-interface TopToolbarProps extends AppBarProps {
-	toolbarProps?: ToolbarProps;
-	appBarStyle?: SxProps
-}
-export default function TopToolbar({ toolbarProps, appBarStyle, ...props }: TopToolbarProps) {
-	return (
-		<AppBar
-			sx={{
-				minHeight: '62px',
-				position: 'absolute',
-				zIndex: 120,
-				...appBarStyle,
-			}}
-			position="static"
-			{...props}
-		>
-			<Toolbar {...toolbarProps}>{props.children}</Toolbar>
-		</AppBar>
-	);
-}

package/src/ui_components/UploadButton.tsx

@@ -1,57 +0,0 @@
-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>
-		</>
-	);
-}