Map MapDrawer.tsx

0% Statements 0/5

0% Branches 0/8

0% Functions 0/1

0% Lines 0/5

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { CSSProperties, ReactNode } from 'react';
 
import { Box, IconButton, useTheme } from '@mui/material';
 
import { useDeviceInfo } from '../../utils';
import Icon from '../Icon/Icon';
import './styles.scss';
 
export type MapDrawerSize = 'small' | 'medium';
 
export type MapDrawerProp = {
  children?: ReactNode;
  onClose?: () => void;
  open: boolean;
  size: MapDrawerSize;
  style?: CSSProperties;
  title: string;
};
 
const MapDrawer = (props: MapDrawerProp) => {
  const { children, onClose, open, size, style, title } = props;
  const theme = useTheme();
  const { isDesktop } = useDeviceInfo();
 
  return open ? (
    <Box
      className={`map-drawer map-drawer${isDesktop ? `--${size}` : '--mobile'}`}
      borderLeft={isDesktop ? `1px solid ${theme.palette.TwClrBrdrTertiary}` : undefined}
      borderRight={isDesktop ? `1px solid ${theme.palette.TwClrBrdrTertiary}` : undefined}
      style={style}
    >
      <Box className='map-drawer--header'>
        <p className='title'>{title}</p>
        <IconButton onClick={onClose} size='small'>
          <Icon name='close' className='icon-close' />
        </IconButton>
      </Box>
      <Box className={'map-drawer--body'}>{children}</Box>
    </Box>
  ) : null;
};
 
export default MapDrawer;