Development

src/components/inlineSVG.js

@@ -1,44 +1,22 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-const getIframeStyle = (src, fitToSize) => {
-  let style = { border: 'none', height: '100%', width: '100%' };
+const InlineSVG = ({ src, ...otherProps }) => {
+  const containerRef = useRef(null);
 
-  if (!fitToSize) return style;
+  useEffect(() => {
+    if (!containerRef.current || !src) return;
 
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(src, 'image/svg+xml');
-  const svg = doc.querySelector('svg');
+    containerRef.current.innerHTML = '';
+    const shadow = containerRef.current.attachShadow({ mode: 'open' });
+    shadow.innerHTML = src;
+  }, [src]);
 
-  if (!svg) return style;
-
-  const width = svg.getAttribute('width') || (svg.viewBox?.baseVal?.width ?? null);
-  const height = svg.getAttribute('height') || (svg.viewBox?.baseVal?.height ?? null);
-
-  if (!width || !height) return style;
-
-  style = { ...style, width: `${width}px`, height: `${height}px` };
-  return style;
-};
-
-const InlineSVG = ({ src, fitToSize = false, ...otherProps }) => {
-  const iframeStyle = getIframeStyle(src, fitToSize);
-  return (
-    <div
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{ __html: src }}
-      {...otherProps}
-    />
-  );
+  return <div ref={containerRef} {...otherProps} />;
 };
 
 InlineSVG.propTypes = {
   src: PropTypes.string.isRequired,
-  fitToSize: PropTypes.bool,
-};
-
-InlineSVG.defaultProps = {
-  fitToSize: false,
 };
 
 export default InlineSVG;

src/components/map/stopMap.js

@@ -51,7 +51,6 @@ const LocationSymbol = props => (
 
 const getSalesPointIcon = type => (
   <InlineSVG
-    fitToSize
     src={type.toLowerCase() === 'myyntipiste' ? ticketSalesPointIcon : ticketMachineIcon}
   />
 );

src/components/stopPoster/adContainer.js

@@ -66,7 +66,7 @@ class AdContainer extends Component {
           this.root = ref;
         }}>
         {ads.slice(0, this.state.spaces).map((src, i) => (
-          <InlineSVG key={i} style={iconStyle} src={src} fitToSize />
+          <InlineSVG key={i} style={iconStyle} src={src} />
         ))}
       </div>
     );

src/components/stopPoster/stopPoster.js

@@ -238,14 +238,7 @@ class StopPoster extends Component {
       }
 
       if (this.state.hasColumnTimetable) {
-        this.setState({
-          hasColumnTimetable: false,
-        });
-        return;
-      }
-
-      if (this.state.hasRoutes) {
-        this.setState({ hasRoutes: false });
+        this.setState({ hasColumnTimetable: false });
         return;
       }
 
@@ -276,6 +269,11 @@ class StopPoster extends Component {
         return;
       }
 
+      if (this.state.hasRoutes) {
+        this.setState({ hasRoutes: false });
+        return;
+      }
+
       this.onError('Failed to remove layout overflow');
       return;
     }