AB#67030 fix svgs not resizing correctly in the ad panel (#505)

* AB#67030 fix svgs not resizing correctly in the ad panel

* try with stateless approach using parser to get width and height before render

Author: avicarie

src/components/a3Timetable/a3TableHeader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { InlineSVG } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 import timeLogo from '../../icons/time.svg';
 
 import styles from './a3TableHeader.css';

src/components/a3stopPoster/a3header.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { chunk, cloneDeep, sortBy } from 'lodash';
-import { Row, Column, InlineSVG } from 'components/util';
+import { chunk, sortBy } from 'lodash';
+import { Row, Column } from 'components/util';
 import a3headerContainer from './a3headerContainer';
 import renderQueue from 'util/renderQueue';
 import { getColor } from 'util/domain';

src/components/inlineSVG.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const getIframeStyle = (src, fitToSize) => {
+  let style = { border: 'none', height: '100%', width: '100%' };
+
+  if (!fitToSize) return style;
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(src, 'image/svg+xml');
+  const svg = doc.querySelector('svg');
+
+  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}
+    />
+  );
+};
+
+InlineSVG.propTypes = {
+  src: PropTypes.string.isRequired,
+  fitToSize: PropTypes.bool,
+};
+
+InlineSVG.defaultProps = {
+  fitToSize: false,
+};
+
+export default InlineSVG;

src/components/map/customMap.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import Measure from 'react-measure';
 import StopMap from './stopMapContainer';
-import { InlineSVG } from '../util';
+import InlineSVG from 'components/inlineSVG';
 import renderQueue from '../../util/renderQueue';
 import { sizedSvg } from '../../util/sizedSvg';
 

src/components/map/stopMap.js

@@ -5,7 +5,8 @@ import find from 'lodash/find';
 import ItemContainer from 'components/labelPlacement/itemContainer';
 import ItemFixed from 'components/labelPlacement/itemFixed';
 import ItemPositioned from 'components/labelPlacement/itemPositioned';
-import { Row, InlineSVG } from 'components/util';
+import { Row } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 
 import locationIcon from 'icons/marker.svg';
 import subwayStationIcon from 'icons/icon-subway-station.svg';
@@ -50,6 +51,7 @@ const LocationSymbol = props => (
 
 const getSalesPointIcon = type => (
   <InlineSVG
+    fitToSize
     src={type.toLowerCase() === 'myyntipiste' ? ticketSalesPointIcon : ticketMachineIcon}
   />
 );
@@ -73,7 +75,7 @@ const getZoneIcon = zone => {
   }
 };
 
-const ZoneLabel = props => (
+const ZoneLabel = () => (
   <div className={styles.zoneHeading}>
     <span>
       <strong>Vyöhyke</strong> Zon/Zone

src/components/routeDiagram/routeDiagram.css

@@ -65,6 +65,7 @@
 
 .start .icon {
   width: 30px;
+  height: 36px;
   margin-left: -14px;
   margin-right: 5px;
 }

src/components/routeDiagram/routeDiagram.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { InlineSVG } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 import markerIcon from 'icons/marker.svg';
 
 import Path from './path';

src/components/routeDiagram/stop.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { iconsByMode, trimRouteId, routeGeneralizer, getColor } from 'util/domain';
-import { Column, InlineSVG } from 'components/util';
+import { Column } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 import styles from './stop.css';
 
 const metroRegexp = / ?\(M\)$/;
@@ -45,7 +46,7 @@ class Stop extends Component {
     this.props.transferModes.forEach(mode => modes.add(mode));
 
     const terminalAreaRouteList = this.getTerminalAreaRoutes(this.props);
-    const terminalAreaRoutes = terminalAreaRouteList.routes.map((route, index) => {
+    const terminalAreaRoutes = terminalAreaRouteList.routes.map(route => {
       return {
         text: route.text,
         trunkRoute: terminalAreaRouteList.trunkRoutes.includes(route.text),

src/components/stopPoster/adContainer.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { InlineSVG } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 import renderQueue from 'util/renderQueue';
 import styles from './stopPoster.css';
 
@@ -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} />
+          <InlineSVG key={i} style={iconStyle} src={src} fitToSize />
         ))}
       </div>
     );

src/components/stopPoster/footer.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import QrCode from 'components/qrCode';
-import { InlineSVG } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 import classnames from 'classnames';
 import get from 'lodash/get';
 import cheerio from 'cheerio';
@@ -25,7 +25,7 @@ function getSvgElementPosition($element, widthModifier = 0, heightModifier = 0)
   const height = isLine
     ? $element.attr('stroke-width')
       ? // The stroke-width can be defined either as an attribute or as a style.
-      parseAttr($element.attr('stroke-width'))
+        parseAttr($element.attr('stroke-width'))
       : parseAttr($element.css('stroke-width'))
     : parseAttr($element.attr('height'));
 
@@ -45,7 +45,7 @@ function getDynamicAreas(svg, widthModifier, heightModifier) {
   const dynamicAreas = $('.dynamic-area');
   const areas = [];
 
-  dynamicAreas.each((idx, element) => {
+  dynamicAreas.each((_, element) => {
     const area = $(element);
     const areaType = area.data('area-type');
     const areaData = area.data('area-data');