React 18 Type changes

.vscode/extensions.json

@@ -5,6 +5,6 @@
     "editorconfig.editorconfig",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "jpoissonnier.vscode-styled-components",
+    "styled-components.vscode-styled-components"
   ]
 }

src/apps/Gastro/components/FileUpload.tsx

@@ -68,7 +68,7 @@ type Props = ConnectedProps<typeof connector> & {
   isSubmitting: boolean;
   name: string;
   values: any;
-  children: React.ReactNode; // shouldn't be necessary but it is
+  children: React.ReactNode;
 };
 
 const FileUploadRaw: React.FC<Props> = ({

src/components/MapLegend/CadastreLegendGrid.tsx → src/apps/Map/components/MapLegend/CadastreLegendGrid.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
-
+import ConstructionLegendImage from './assets/construction.png';
+import DividersLegendImage from './assets/dividers.png';
+import FootwaysLegendImage from './assets/footways.png';
+import GuardrailLegendImage from './assets/guardrail-legend.png';
 import {
   CadastreLegendItemColor,
   CadastreLegendItemImage,
+  CadastreLegendItemLine,
   CadastreLegendItemPoint,
   CadastreLegendItemPointSmall,
-  CadastreLegendItemLine,
   Header,
   LegendCol,
   LegendItem,
   LegendWrapper,
-  ConstructionLegendImage,
-  DividersLegendImage,
-  FootwaysLegendImage,
-  GuardrailLegendImage,
-} from './index';
+} from './Styles';
 
 export const CadastreLegendGrid = () => (
   <LegendWrapper>

src/components/MapLegend/IncidentLegendGrid.tsx → src/apps/Map/components/MapLegend/IncidentLegendGrid.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-
 import {
   CadastreLegendItemPoint,
   HeaderCol,
   LegendCol,
   LegendItem,
   LegendWrapper,
-} from './index';
+} from './Styles';
 
 export const IncidentLegendGrid = () => (
   <LegendWrapper>

src/apps/Map/components/MapLegend/Legend.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import { AnchorLink } from '~/components2/Link';
+import {
+  FloatingLegend,
+  FloatingLegendProps,
+} from '~/components2/FloatingLegend';
+import config from '~/config';
+import { CadastreLegendGrid, IncidentLegendGrid } from '.';
+
+const Header = styled.h1`
+  font-size: 1.2em;
+  font-weight: 400;
+  margin-top: 1rem;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  padding-bottom: 0.5em;
+  border-bottom: solid 1px #e0e0e0;
+`;
+
+export const MutedText = styled.div`
+  color: ${config.colors.midgrey};
+  font-size: 0.9rem;
+  margin: 0.5rem 0 1.5rem 0;
+`;
+
+const FooterWrapper = styled.div`
+  margin-top: 1rem;
+`;
+
+type Props = Pick<FloatingLegendProps, 'visible' | 'closeLegend'>;
+
+export const Legend: React.FC<Props> = ({ visible, closeLegend }) => {
+  return (
+    <FloatingLegend visible={visible} closeLegend={closeLegend}>
+      <Header>Legende Katasterdaten</Header>
+      <CadastreLegendGrid />
+      <MutedText>Quellen: Fis-Broker Berlin 2014</MutedText>
+
+      <Header>Legende Unfälle</Header>
+      <IncidentLegendGrid />
+
+      <FooterWrapper>
+        <AnchorLink href="https://de.wikipedia.org/wiki/Unfalltyp">
+          Erläuterungen der Unfallkategorien
+        </AnchorLink>
+      </FooterWrapper>
+    </FloatingLegend>
+  );
+};

src/apps/Map/components/MapLegend/index.ts

@@ -0,0 +1,3 @@
+export * from './Legend';
+export * from './IncidentLegendGrid';
+export * from './CadastreLegendGrid';

src/apps/Map/index.tsx

@@ -7,28 +7,29 @@ import {
   withRouter,
 } from 'react-router-dom';
 import styled from 'styled-components';
-import ErrorMessage from '~/components/ErrorMessage';
+import { Legend } from './components/MapLegend';
+import { ErrorMessage } from '~/components2/ErrorMessage';
+import { FloatingLegendIcon } from '~/components2/FloatingLegend';
 import { Logo as FMBLogo } from '~/components2/Logo';
-import Legend from '~/components/MapLegend/Legend';
+import {
+  LocatorButton,
+  MapControl,
+  StyledMapButton,
+} from '~/components2/MapsControls';
 import config from '~/config';
-import MapLegendButtonIcon from '~/images/map-legend-icon.svg';
-import MapLegendButtonActivatedIcon from '~/images/map-legend-icon-activated.svg';
-import ZoomInButtonIcon from '~/images/plus-circle-icon.svg';
-import ZoomOutButtonIcon from '~/images/minus-circle-icon.svg';
 import Store, { RootState } from '~/store';
-import { matchMediaSize, breakpoints, media } from '~/styles/utils';
-
-import * as MapActions from './MapState';
+import { breakpoints, matchMediaSize, media } from '~/styles/utils';
+import ZoomOutButtonIcon from './assets/minus-circle-icon.svg';
+import ZoomInButtonIcon from './assets/plus-circle-icon.svg';
 import { DetailPanel } from './components/DetailView';
 import ProjectDetail from './components/DetailView/ProjectDetail';
 import { SectionDetail } from './components/DetailView/SectionDetail';
 import FMBCredits from './components/FMBCredits';
-import LocatorControl from './components/LocatorControl';
 import MapContent from './components/MapContent';
-import MapControl from './components/MapControl';
 import { MapPopup } from './components/MapPopup';
 import SearchBar from './components/SearchBar';
 import { WebglMap } from './components/WebglMap';
+import * as MapActions from './MapState';
 
 const Wrapper = styled.div`
   height: 100%;
@@ -54,26 +55,6 @@ const StyledFMBLogo = styled(FMBLogo)`
   `}
 `;
 
-const StyledMapLegendButton = styled(MapLegendButtonIcon)`
-  cursor: pointer;
-`;
-
-const StyledMapLegendButtonActivated = styled(MapLegendButtonActivatedIcon)`
-  cursor: pointer;
-`;
-
-const StyledZoomInButton = styled(ZoomInButtonIcon)`
-  cursor: pointer;
-`;
-
-const StyledZoomOutButton = styled(ZoomOutButtonIcon)`
-  cursor: pointer;
-`;
-
-const StyledMapControl = styled(MapControl)`
-  margin-bottom: 45px;
-`;
-
 const connector = connect(
   ({ MapState, UserState }: RootState) => ({
     activeLayer: MapState.activeView,
@@ -145,50 +126,41 @@ const MapView = ({
   return (
     <Wrapper>
       {error != null && (
-        <ErrorMessage message={error} onDismiss={dismissErrorMessage} />
+        <ErrorMessage onDismiss={dismissErrorMessage}>{error}</ErrorMessage>
       )}
 
       <MapWrapper>
         <SearchBar />
-        {showLegend && <Legend closeLegend={() => setShowLegend(false)} />}
+        <Legend visible={showLegend} closeLegend={() => setShowLegend(false)} />
         <WebglMap
           key="MapComponent"
           calculatePopupPosition={calculatePopupPosition}
         >
-          {!displayPopup && (
-            <LocatorControl
-              key="Map__LocatorControl"
-              onChange={handleLocationChange}
-              position="bottom-right"
-            />
-          )}
-          <StyledMapControl position="bottom-right" role="button">
-            <div>
-              <div>
-                <StyledZoomInButton onClick={() => changeZoom(1)} />
-              </div>
-              <div>
-                <StyledZoomOutButton onClick={() => changeZoom(-1)} />
-              </div>
-              <div>
-                {!showLegend && (
-                  <StyledMapLegendButton
-                    onClick={() => setShowLegend(!showLegend)}
-                  />
-                )}
-                {showLegend && (
-                  <StyledMapLegendButtonActivated
-                    onClick={() => setShowLegend(!showLegend)}
-                  />
-                )}
-              </div>
-            </div>
-          </StyledMapControl>
           {!isEmbedMode && (
-            <MapControl position="top-right">
+            <MapControl top right>
               <StyledFMBLogo width={67} />
             </MapControl>
           )}
+
+          <MapControl
+            visible={!isDesktopView && !showLegend}
+            style={{ right: '16px', bottom: '25px' }}
+          >
+            <StyledMapButton
+              as={ZoomInButtonIcon}
+              onClick={() => changeZoom(1)}
+            />
+            <StyledMapButton
+              as={ZoomOutButtonIcon}
+              onClick={() => changeZoom(-1)}
+            />
+            <FloatingLegendIcon
+              showLegend={showLegend}
+              setShowLegend={setShowLegend}
+            />
+            {!displayPopup && <LocatorButton onChange={handleLocationChange} />}
+          </MapControl>
+
           {isEmbedMode && <FMBCredits />}
         </WebglMap>