Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | import React, { useCallback, useMemo } from 'react';
import { Box, useTheme } from '@mui/material';
import PopoverMenu from '../PopoverMenu';
import { DropdownItem } from '../types';
import { MapViewStyle, MapViewStyles } from './types';
type MapViewStyleControlProps = {
containerId?: string;
mapViewStyle: MapViewStyle;
mapViewStyleNames?: (style: MapViewStyle) => string;
setMapViewStyle: (style: MapViewStyle) => void;
};
const MapViewStyleControl = ({
containerId,
mapViewStyle,
mapViewStyleNames,
setMapViewStyle,
}: MapViewStyleControlProps): JSX.Element | undefined => {
const theme = useTheme();
const viewOptions = useMemo((): DropdownItem[] => {
return MapViewStyles.map((style) => ({
label: mapViewStyleNames?.(style) ?? style,
value: style,
}));
}, [mapViewStyleNames]);
const onSelectMapViewStyle = useCallback((item: DropdownItem) => {
setMapViewStyle(item.value as MapViewStyle);
}, []);
const container = useMemo(() => {
if (containerId) {
return document.getElementById(containerId);
}
}, [containerId]);
return (
<Box
sx={{
position: 'absolute',
top: '10px',
left: '45px',
zIndex: 10,
height: 28,
backgroundColor: `${theme.palette.TwClrBaseWhite}`,
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
'& .MuiButtonBase-root': {
padding: 0,
},
'& .MuiButtonBase-root.MuiMenuItem-root': {
fontSize: '12px',
},
'& svg': {
marginLeft: 0,
},
}}
>
<PopoverMenu
anchor={
<Box
component='span'
sx={{
fontSize: '12px',
paddingLeft: theme.spacing(0.5),
color: theme.palette.TwClrTxt,
}}
>
{mapViewStyleNames?.(mapViewStyle) ?? mapViewStyle}
</Box>
}
container={container}
menuSections={[viewOptions]}
onClick={onSelectMapViewStyle}
/>
</Box>
);
};
export default MapViewStyleControl;
|