1.1.5 release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hsl-map-publisher",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "HSL Map Publisher",
   "main": "index.js",
   "scripts": {

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');

src/components/stopPoster/routes.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import chunk from 'lodash/chunk';
 import sortBy from 'lodash/sortBy';
-import { Row, Column, InlineSVG, PlatformSymbol } from 'components/util';
+import { Row, Column, PlatformSymbol } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 import routesContainer from './routesContainer';
 import renderQueue from 'util/renderQueue';
 import { getColor, getIcon } from 'util/domain';

src/components/stopPoster/terminalRoutes.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import chunk from 'lodash/chunk';
 import sortBy from 'lodash/sortBy';
-import { Row, Column, InlineSVG, PlatformSymbol } from 'components/util';
+import { Row, Column, PlatformSymbol } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 import terminalRoutesContainer from './terminalRoutesContainer';
 import renderQueue from 'util/renderQueue';
 import { getColor, getIcon } from 'util/domain';

src/components/tramDiagram/tramDiagram.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { InlineSVG } from 'components/util';
+import InlineSVG from 'components/inlineSVG';
 
 import styles from './tramDiagram.css';
 

src/components/util.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 
 import styles from './util.css';
 
@@ -114,24 +113,6 @@ Spacer.propTypes = {
 
 const FlexSpacer = () => <div style={{ flex: '2' }} />;
 
-const InlineSVG = props => {
-  return (
-    <div
-      {...omit(props, 'src')}
-    >
-      <iframe
-        title="SVG"
-        srcDoc={`<html><body>${props.src}</body></html>`}
-        style={{ border: 'none', width: '100%', height: '100%' }}
-      />
-    </div>
-  );
-}
-
-InlineSVG.propTypes = {
-  src: PropTypes.string.isRequired,
-};
-
 const PrintButton = lang => {
   const PRINT_TEXT = {
     fi: 'TULOSTA AIKATAULU',
@@ -235,7 +216,6 @@ export {
   JustifiedColumn,
   Spacer,
   FlexSpacer,
-  InlineSVG,
   PlatformSymbol,
   getWeekdayName,
   PrintButton,