react-spatial 1.12.0 → 1.12.1

package/components/ResizeHandler/ResizeHandler.js

@@ -1,7 +1,15 @@
-import { PureComponent, Component } from "react";
 import PropTypes from "prop-types";
+import { Component, PureComponent } from "react";
 import ResizeObserver from "resize-observer-polyfill";
 const propTypes = {
+  // This property is used to re-apply the classes, for example when the className of the observed node changes.
+  forceUpdate: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool
+  ]),
+  maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),
+  maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),
   observe: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node,
@@ -9,19 +17,12 @@ const propTypes = {
     PropTypes.shape({ current: PropTypes.node }),
     PropTypes.shape({ current: PropTypes.instanceOf(Component) })
   ]),
-  maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),
-  maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),
-  stylePropHeight: PropTypes.string,
   onResize: PropTypes.func,
-  // This property is used to re-apply the classes, for example when the className of the observed node changes.
-  forceUpdate: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool
-  ])
+  stylePropHeight: PropTypes.string
 };
 const defaultProps = {
-  observe: null,
+  forceUpdate: null,
+  /* eslint-disable perfectionist/sort-objects */
   maxHeightBrkpts: {
     xs: 576,
     s: 768,
@@ -36,11 +37,19 @@ const defaultProps = {
     l: 1200,
     xl: Infinity
   },
-  stylePropHeight: null,
+  /* eslint-enable perfectionist/sort-objects */
+  observe: null,
   onResize: null,
-  forceUpdate: null
+  stylePropHeight: null
 };
 class ResizeHandler extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.observer = new ResizeObserver((entries) => {
+      return this.onResize(entries);
+    });
+    this.nodes = [];
+  }
   static applyBreakpoints(entry, breakpoints, size, direction) {
     let found = false;
     let screenSize;
@@ -55,18 +64,11 @@ class ResizeHandler extends PureComponent {
     });
     return screenSize;
   }
-  constructor(props) {
-    super(props);
-    this.observer = new ResizeObserver((entries) => {
-      return this.onResize(entries);
-    });
-    this.nodes = [];
-  }
   componentDidMount() {
     this.observe();
   }
   componentDidUpdate(prevProps) {
-    const { observe, forceUpdate } = this.props;
+    const { forceUpdate, observe } = this.props;
     if (observe !== prevProps.observe || forceUpdate !== prevProps.forceUpdate) {
       this.observe();
     }
@@ -74,8 +76,35 @@ class ResizeHandler extends PureComponent {
   componentWillUnmount() {
     this.observer.disconnect();
   }
+  observe() {
+    this.observer.disconnect();
+    const { observe } = this.props;
+    if (!observe) {
+      return;
+    }
+    if (typeof observe === "string" || observe instanceof String) {
+      this.nodes = document.querySelectorAll(observe);
+    } else if (observe instanceof Component) {
+      console.warn(
+        "observe attribute as a Component is deprecated: Please use React.createRef() or React.useRef() instead of a React component."
+      );
+    } else if (observe instanceof Element) {
+      this.nodes.push(observe);
+    } else if (observe.current instanceof Element) {
+      this.nodes.push(observe.current);
+    } else if (observe.current instanceof Component) {
+      console.warn(
+        "observe attribute as a ref to Component is deprecated: Please use React.createRef() or React.useRef() instead of a React component."
+      );
+    }
+    if (this.nodes.length) {
+      this.nodes.forEach((node) => {
+        return this.observer.observe(node);
+      });
+    }
+  }
   onResize(entries) {
-    const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } = this.props;
+    const { maxHeightBrkpts, maxWidthBrkpts, onResize, stylePropHeight } = this.props;
     if (stylePropHeight) {
       const vh = window.innerHeight * 0.01;
       document.documentElement.style.setProperty(stylePropHeight, `${vh}px`);
@@ -111,33 +140,6 @@ class ResizeHandler extends PureComponent {
       onResize(entries, newScreenWidth, newScreenHeight);
     }
   }
-  observe() {
-    this.observer.disconnect();
-    const { observe } = this.props;
-    if (!observe) {
-      return;
-    }
-    if (typeof observe === "string" || observe instanceof String) {
-      this.nodes = document.querySelectorAll(observe);
-    } else if (observe instanceof Component) {
-      console.warn(
-        "observe attribute as a Component is deprecated: Please use React.createRef() or React.useRef() instead of a React component."
-      );
-    } else if (observe instanceof Element) {
-      this.nodes.push(observe);
-    } else if (observe.current instanceof Element) {
-      this.nodes.push(observe.current);
-    } else if (observe.current instanceof Component) {
-      console.warn(
-        "observe attribute as a ref to Component is deprecated: Please use React.createRef() or React.useRef() instead of a React component."
-      );
-    }
-    if (this.nodes.length) {
-      this.nodes.forEach((node) => {
-        return this.observer.observe(node);
-      });
-    }
-  }
   render() {
     return null;
   }

package/components/ResizeHandler/ResizeHandler.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/ResizeHandler/ResizeHandler.js"],
-  "sourcesContent": ["import { PureComponent, Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\nconst propTypes = {\n  observe: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.instanceOf(Component),\n    PropTypes.shape({ current: PropTypes.node }),\n    PropTypes.shape({ current: PropTypes.instanceOf(Component) }),\n  ]),\n  maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),\n  maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),\n  stylePropHeight: PropTypes.string,\n  onResize: PropTypes.func,\n\n  // This property is used to re-apply the classes, for example when the className of the observed node changes.\n  forceUpdate: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n};\n\n// Same as bootstrap\nconst defaultProps = {\n  observe: null,\n  maxHeightBrkpts: {\n    xs: 576,\n    s: 768,\n    m: 992,\n    l: 1200,\n    xl: Infinity,\n  },\n  maxWidthBrkpts: {\n    xs: 576,\n    s: 768,\n    m: 992,\n    l: 1200,\n    xl: Infinity,\n  },\n  stylePropHeight: null,\n  onResize: null,\n  forceUpdate: null,\n};\n/**\n * This component adds css class to an element depending on his size.\n */\nclass ResizeHandler extends PureComponent {\n  static applyBreakpoints(entry, breakpoints, size, direction) {\n    let found = false;\n    let screenSize;\n    Object.entries(breakpoints).forEach((brkpt) => {\n      const cssClass = `rs-${direction}-${brkpt[0]}`;\n      entry.target.classList.remove(cssClass);\n      if (!found && size <= brkpt[1]) {\n        found = true;\n        [screenSize] = brkpt;\n        entry.target.classList.add(cssClass);\n      }\n    });\n    return screenSize;\n  }\n\n  constructor(props) {\n    super(props);\n    this.observer = new ResizeObserver((entries) => {\n      return this.onResize(entries);\n    });\n    this.nodes = [];\n  }\n\n  componentDidMount() {\n    this.observe();\n  }\n\n  componentDidUpdate(prevProps) {\n    const { observe, forceUpdate } = this.props;\n\n    if (\n      observe !== prevProps.observe ||\n      forceUpdate !== prevProps.forceUpdate\n    ) {\n      this.observe();\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer.disconnect();\n  }\n\n  onResize(entries) {\n    const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } =\n      this.props;\n\n    if (stylePropHeight) {\n      const vh = window.innerHeight * 0.01;\n      document.documentElement.style.setProperty(stylePropHeight, `${vh}px`);\n    }\n\n    if (!maxWidthBrkpts && !maxHeightBrkpts) {\n      onResize(entries);\n      return;\n    }\n\n    let newScreenWidth;\n    let newScreenHeight;\n\n    for (let i = 0; i < entries.length; i += 1) {\n      const entry = entries[i];\n      const rect = entry.contentRect;\n      const { height, width } = rect;\n\n      if (maxWidthBrkpts) {\n        newScreenWidth = ResizeHandler.applyBreakpoints(\n          entry,\n          maxWidthBrkpts,\n          width,\n          \"w\",\n        );\n      }\n      if (maxHeightBrkpts) {\n        newScreenHeight = ResizeHandler.applyBreakpoints(\n          entry,\n          maxHeightBrkpts,\n          height,\n          \"h\",\n        );\n      }\n    }\n\n    if (onResize) {\n      onResize(entries, newScreenWidth, newScreenHeight);\n    }\n  }\n\n  observe() {\n    this.observer.disconnect();\n    const { observe } = this.props;\n\n    if (!observe) {\n      return;\n    }\n\n    if (typeof observe === \"string\" || observe instanceof String) {\n      this.nodes = document.querySelectorAll(observe);\n    } else if (observe instanceof Component) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"observe attribute as a Component is deprecated: Please use React.createRef() or React.useRef() instead of a React component.\",\n      );\n      // eslint-disable-next-line react/no-find-dom-node\n      // this.nodes.push(ReactDOM.findDOMNode(observe));\n    } else if (observe instanceof Element) {\n      this.nodes.push(observe);\n    } else if (observe.current instanceof Element) {\n      // observe value created with React.createRef() on a html node.\n      this.nodes.push(observe.current);\n    } else if (observe.current instanceof Component) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"observe attribute as a ref to Component is deprecated: Please use React.createRef() or React.useRef() instead of a React component.\",\n      );\n      // observe value created with React.createRef() on a React component.\n      // eslint-disable-next-line react/no-find-dom-node\n      // this.nodes.push(ReactDOM.findDOMNode(observe.current));\n    }\n\n    if (this.nodes.length) {\n      this.nodes.forEach((node) => {\n        return this.observer.observe(node);\n      });\n    }\n  }\n\n  render() {\n    return null;\n  }\n}\n\nResizeHandler.propTypes = propTypes;\nResizeHandler.defaultProps = defaultProps;\n\nexport default ResizeHandler;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import PropTypes from \"prop-types\";\nimport { Component, PureComponent } from \"react\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\nconst propTypes = {\n  // This property is used to re-apply the classes, for example when the className of the observed node changes.\n  forceUpdate: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.bool,\n  ]),\n  maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),\n  maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),\n  observe: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.node,\n    PropTypes.instanceOf(Component),\n    PropTypes.shape({ current: PropTypes.node }),\n    PropTypes.shape({ current: PropTypes.instanceOf(Component) }),\n  ]),\n  onResize: PropTypes.func,\n\n  stylePropHeight: PropTypes.string,\n};\n\n// Same as bootstrap\nconst defaultProps = {\n  forceUpdate: null,\n  /* eslint-disable perfectionist/sort-objects */\n  maxHeightBrkpts: {\n    xs: 576,\n    s: 768,\n    m: 992,\n    l: 1200,\n    xl: Infinity,\n  },\n  maxWidthBrkpts: {\n    xs: 576,\n    s: 768,\n    m: 992,\n    l: 1200,\n    xl: Infinity,\n  },\n  /* eslint-enable perfectionist/sort-objects */\n  observe: null,\n  onResize: null,\n  stylePropHeight: null,\n};\n/**\n * This component adds css class to an element depending on his size.\n */\nclass ResizeHandler extends PureComponent {\n  constructor(props) {\n    super(props);\n    this.observer = new ResizeObserver((entries) => {\n      return this.onResize(entries);\n    });\n    this.nodes = [];\n  }\n\n  static applyBreakpoints(entry, breakpoints, size, direction) {\n    let found = false;\n    let screenSize;\n    Object.entries(breakpoints).forEach((brkpt) => {\n      const cssClass = `rs-${direction}-${brkpt[0]}`;\n      entry.target.classList.remove(cssClass);\n      if (!found && size <= brkpt[1]) {\n        found = true;\n        [screenSize] = brkpt;\n        entry.target.classList.add(cssClass);\n      }\n    });\n    return screenSize;\n  }\n\n  componentDidMount() {\n    this.observe();\n  }\n\n  componentDidUpdate(prevProps) {\n    const { forceUpdate, observe } = this.props;\n\n    if (\n      observe !== prevProps.observe ||\n      forceUpdate !== prevProps.forceUpdate\n    ) {\n      this.observe();\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer.disconnect();\n  }\n\n  observe() {\n    this.observer.disconnect();\n    const { observe } = this.props;\n\n    if (!observe) {\n      return;\n    }\n\n    if (typeof observe === \"string\" || observe instanceof String) {\n      this.nodes = document.querySelectorAll(observe);\n    } else if (observe instanceof Component) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"observe attribute as a Component is deprecated: Please use React.createRef() or React.useRef() instead of a React component.\",\n      );\n      // eslint-disable-next-line react/no-find-dom-node\n      // this.nodes.push(ReactDOM.findDOMNode(observe));\n    } else if (observe instanceof Element) {\n      this.nodes.push(observe);\n    } else if (observe.current instanceof Element) {\n      // observe value created with React.createRef() on a html node.\n      this.nodes.push(observe.current);\n    } else if (observe.current instanceof Component) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"observe attribute as a ref to Component is deprecated: Please use React.createRef() or React.useRef() instead of a React component.\",\n      );\n      // observe value created with React.createRef() on a React component.\n      // eslint-disable-next-line react/no-find-dom-node\n      // this.nodes.push(ReactDOM.findDOMNode(observe.current));\n    }\n\n    if (this.nodes.length) {\n      this.nodes.forEach((node) => {\n        return this.observer.observe(node);\n      });\n    }\n  }\n\n  onResize(entries) {\n    const { maxHeightBrkpts, maxWidthBrkpts, onResize, stylePropHeight } =\n      this.props;\n\n    if (stylePropHeight) {\n      const vh = window.innerHeight * 0.01;\n      document.documentElement.style.setProperty(stylePropHeight, `${vh}px`);\n    }\n\n    if (!maxWidthBrkpts && !maxHeightBrkpts) {\n      onResize(entries);\n      return;\n    }\n\n    let newScreenWidth;\n    let newScreenHeight;\n\n    for (let i = 0; i < entries.length; i += 1) {\n      const entry = entries[i];\n      const rect = entry.contentRect;\n      const { height, width } = rect;\n\n      if (maxWidthBrkpts) {\n        newScreenWidth = ResizeHandler.applyBreakpoints(\n          entry,\n          maxWidthBrkpts,\n          width,\n          \"w\",\n        );\n      }\n      if (maxHeightBrkpts) {\n        newScreenHeight = ResizeHandler.applyBreakpoints(\n          entry,\n          maxHeightBrkpts,\n          height,\n          \"h\",\n        );\n      }\n    }\n\n    if (onResize) {\n      onResize(entries, newScreenWidth, newScreenHeight);\n    }\n  }\n\n  render() {\n    return null;\n  }\n}\n\nResizeHandler.propTypes = propTypes;\nResizeHandler.defaultProps = defaultProps;\n\nexport default ResizeHandler;\n"],
+  "mappings": "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",
   "names": []
 }

package/components/RouteSchedule/RouteSchedule.js

@@ -1,34 +1,34 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import {
-  RealtimeLayer as TrackerLayer,
-  realtimeConfig
+  realtimeConfig,
+  RealtimeLayer as TrackerLayer
 } from "mobility-toolbox-js/ol";
-import {
-  getHoursAndMinutes,
-  getDelayString as defaultGetDelayString
-} from "../../utils/timeUtils";
-import ReactTransitPropTypes from "../../propTypes";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
 import firstStation from "../../images/RouteSchedule/firstStation.png";
-import station from "../../images/RouteSchedule/station.png";
 import lastStation from "../../images/RouteSchedule/lastStation.png";
 import line from "../../images/RouteSchedule/line.png";
+import station from "../../images/RouteSchedule/station.png";
+import ReactTransitPropTypes from "../../propTypes";
+import {
+  getDelayString as defaultGetDelayString,
+  getHoursAndMinutes
+} from "../../utils/timeUtils";
 const { getBgColor } = realtimeConfig;
-const getDelayColor = (time) => {
+const defaultGetDelayColor = (time) => {
   const secs = Math.round(time / 1800 / 2 * 3600 / 1e3);
   if (secs >= 3600) {
-    return "dark-red";
+    return "rgb(237 0 76)";
   }
   if (secs >= 500) {
-    return "middle-red";
+    return "rgb(232 0 0)";
   }
   if (secs >= 300) {
-    return "light-red";
+    return "rgb(255 74 0)";
   }
   if (secs >= 180) {
-    return "orange";
+    return "rgb(247 191 0)";
   }
-  return "green";
+  return "rgb(0 160 12)";
 };
 const isNotStop = (stop) => {
   return !stop.arrivalTime && !stop.departureTime;
@@ -57,30 +57,36 @@ const defaultRenderStationImg = (stations, index, isStationPassed, isNotStation)
   } else if (isNotStation) {
     src = line.src || line;
   }
-  return /* @__PURE__ */ React.createElement("img", { src, alt: "routeScheduleLine", className: "rt-route-icon" });
+  return /* @__PURE__ */ React.createElement("img", { alt: "routeScheduleLine", className: "rt-route-icon", src });
 };
 const defaultRenderStationName = (stations, index, cancelled) => {
   const { stationName } = stations[index];
   return /* @__PURE__ */ React.createElement("div", { className: cancelled ? "rt-route-cancelled" : "" }, stationName);
 };
+const defaultRenderDelay = (delay, stop, getDelayString, getDelayColor) => {
+  return /* @__PURE__ */ React.createElement("span", { style: { color: getDelayColor?.(delay, stop) || "inherit" } }, `${getDelayString?.(delay, stop) || ""}`);
+};
 const emptyFunc = () => {
 };
 function RouteStop({
+  getDelayColor = defaultGetDelayColor,
+  getDelayString = defaultGetDelayString,
+  idx,
   lineInfos,
   onStationClick = emptyFunc,
-  trackerLayer,
+  renderArrivalDelay = defaultRenderDelay,
+  renderDepartureDelay = defaultRenderDelay,
   renderStationImg = defaultRenderStationImg,
   renderStationName = defaultRenderStationName,
-  getDelayString = defaultGetDelayString,
   stop,
-  idx
+  trackerLayer
 }) {
   const {
+    aimedArrivalTime,
+    aimedDepartureTime,
     arrivalDelay,
     departureDelay,
-    state,
-    aimedArrivalTime,
-    aimedDepartureTime
+    state
   } = stop;
   const cancelled = state === "JOURNEY_CANCELLED" || state === "STOP_CANCELLED";
   const { stations } = lineInfos;
@@ -104,7 +110,6 @@ function RouteStop({
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      role: "button",
       className: [
         "rt-route-station",
         isStationPassed ? " rt-passed" : "",
@@ -113,27 +118,22 @@ function RouteStop({
       onClick: (e) => {
         return onStationClick(stop, e);
       },
-      tabIndex: 0,
       onKeyPress: (e) => {
         return e.which === 13 && onStationClick(stop, e);
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "rt-route-delay" }, arrivalDelay === void 0 || arrivalDelay === null || isFirstStation || cancelled ? "" : /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: `rt-route-delay-arrival${` ${getDelayColor(
-          arrivalDelay
-        )}`}`
       },
-      `+${getDelayString(arrivalDelay)}`
-    ), departureDelay === void 0 || departureDelay === null || isLastStation || cancelled ? "" : /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: `rt-route-delay-departure${` ${getDelayColor(
-          departureDelay
-        )}`}`
-      },
-      `+${getDelayString(departureDelay)}`
+      role: "button",
+      tabIndex: 0
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "rt-route-delay" }, arrivalDelay === void 0 || arrivalDelay === null || isFirstStation || cancelled ? "" : renderArrivalDelay(
+      arrivalDelay,
+      stop,
+      getDelayString,
+      getDelayColor
+    ), departureDelay === void 0 || departureDelay === null || isLastStation || cancelled ? "" : renderDepartureDelay(
+      departureDelay,
+      stop,
+      getDelayString,
+      getDelayColor
     )),
     /* @__PURE__ */ React.createElement("div", { className: "rt-route-times" }, /* @__PURE__ */ React.createElement(
       "span",
@@ -153,7 +153,7 @@ function RouteStop({
   );
 }
 const defaultRenderStation = (props) => {
-  const { stationId, arrivalTime, departureTime, stationName } = props.stop;
+  const { arrivalTime, departureTime, stationId, stationName } = props.stop;
   return /* @__PURE__ */ React.createElement(
     RouteStop,
     {
@@ -162,7 +162,7 @@ const defaultRenderStation = (props) => {
     }
   );
 };
-const defaultRenderRouteIdentifier = ({ routeIdentifier, longName }) => {
+const defaultRenderRouteIdentifier = ({ longName, routeIdentifier }) => {
   if (routeIdentifier) {
     const id = parseInt(routeIdentifier.split(".")[0], 10);
     if (!longName.includes(id) && !Number.isNaN(id)) {
@@ -180,14 +180,14 @@ const defaultRenderHeader = ({
   renderRouteIdentifier = defaultRenderRouteIdentifier
 }) => {
   const {
-    type,
-    vehicleType,
-    shortName,
-    longName,
-    stroke,
     destination,
+    longName,
     routeIdentifier,
-    text_color: textColor
+    shortName,
+    stroke,
+    text_color: textColor,
+    type,
+    vehicleType
   } = lineInfos;
   return /* @__PURE__ */ React.createElement("div", { className: "rt-route-header" }, /* @__PURE__ */ React.createElement(
     "span",
@@ -203,7 +203,7 @@ const defaultRenderHeader = ({
   ), /* @__PURE__ */ React.createElement("div", { className: "rt-route-title" }, /* @__PURE__ */ React.createElement("span", { className: "rt-route-name" }, destination), /* @__PURE__ */ React.createElement("span", null, longName, renderRouteIdentifier(lineInfos))), /* @__PURE__ */ React.createElement("div", { className: "rt-route-buttons" }, renderHeaderButtons(routeIdentifier)));
 };
 const defaultRenderLink = (text, url) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "rt-route-copyright-link" }, url ? /* @__PURE__ */ React.createElement("a", { href: url, target: "_blank", rel: "noreferrer" }, text) : text);
+  return /* @__PURE__ */ React.createElement("div", { className: "rt-route-copyright-link" }, url ? /* @__PURE__ */ React.createElement("a", { href: url, rel: "noreferrer", target: "_blank" }, text) : text);
 };
 const defaultRenderCopyright = ({ lineInfos }) => {
   return /* @__PURE__ */ React.createElement("span", { className: "rt-route-copyright" }, lineInfos.operator && defaultRenderLink(lineInfos.operator, lineInfos.operatorUrl), lineInfos.operator && lineInfos.publisher && /* @__PURE__ */ React.createElement("span", null, "\xA0-\xA0"), lineInfos.publisher && defaultRenderLink(lineInfos.publisher, lineInfos.publisherUrl), lineInfos.license && /* @__PURE__ */ React.createElement("span", null, "\xA0("), lineInfos.license && defaultRenderLink(lineInfos.license, lineInfos.licenseUrl), lineInfos.license && ")");
@@ -220,60 +220,72 @@ const propTypes = {
    * CSS class of the route schedule wrapper.
    */
   className: PropTypes.string,
+  /**
+   * Function to get the delay color.
+   */
+  getDelayColor: PropTypes.func,
+  /**
+   * Function to get the delay string for stations.
+   */
+  getDelayString: PropTypes.func,
   /**
    * Trajectory stations informations.
    */
   lineInfos: ReactTransitPropTypes.lineInfos,
   /**
-   * Trackerlayer.
+   * Function triggered on station's click event.
    */
-  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,
+  onStationClick: PropTypes.func,
   /**
-   * Render Header of the route scheduler.
+   * Render delay for arrival.
    */
-  renderHeader: PropTypes.func,
+  renderArrivalDelay: PropTypes.func,
+  /**
+   * Render Copyright of the route scheduler.
+   */
+  renderCopyright: PropTypes.func,
+  /**
+   * Render delay for departure.
+   */
+  renderDepartureDelay: PropTypes.func,
   /**
    * Render Footer of the route scheduler.
    */
   renderFooter: PropTypes.func,
   /**
-   * Render Copyright of the route scheduler.
+   * Render Header of the route scheduler.
    */
-  renderCopyright: PropTypes.func,
+  renderHeader: PropTypes.func,
   /**
-   * Render the route identifier in the header
+   * Function to render header buttons.
    */
-  renderRouteIdentifier: PropTypes.func,
+  renderHeaderButtons: PropTypes.func,
   /**
-   * Render the status of the station image.
+   * Render the route identifier in the header
    */
-  renderStationImg: PropTypes.func,
+  renderRouteIdentifier: PropTypes.func,
   /**
    * Render a station.
    */
   renderStation: PropTypes.func,
   /**
-   * Render a station name.
-   */
-  renderStationName: PropTypes.func,
-  /**
-   * Function triggered on station's click event.
+   * Render the status of the station image.
    */
-  onStationClick: PropTypes.func,
+  renderStationImg: PropTypes.func,
   /**
-   * Function to render header buttons.
+   * Render a station name.
    */
-  renderHeaderButtons: PropTypes.func,
+  renderStationName: PropTypes.func,
   /**
-   * Function to get the delay string for stations.
+   * Trackerlayer.
    */
-  getDelayString: PropTypes.func
+  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired
 };
 function RouteSchedule({
   className = "rt-route-schedule",
-  renderStation = defaultRenderStation,
-  renderHeader = defaultRenderHeader,
   renderFooter = defaultRenderFooter,
+  renderHeader = defaultRenderHeader,
+  renderStation = defaultRenderStation,
   ...props
 }) {
   const { lineInfos } = props;
@@ -281,7 +293,7 @@ function RouteSchedule({
     return null;
   }
   return /* @__PURE__ */ React.createElement("div", { className }, renderHeader({ ...props }), /* @__PURE__ */ React.createElement("div", { className: "rt-route-body" }, lineInfos.stations.map((stop, idx) => {
-    return renderStation({ ...props, stop, idx });
+    return renderStation({ ...props, idx, stop });
   })), renderFooter({ ...props }));
 }
 RouteSchedule.propTypes = propTypes;

package/components/RouteSchedule/RouteSchedule.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/RouteSchedule/RouteSchedule.js"],
-  "sourcesContent": ["/* eslint-disable react/no-unused-prop-types */\n/* eslint-disable react/prop-types */\nimport React, { useEffect, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport {\n  RealtimeLayer as TrackerLayer,\n  realtimeConfig,\n} from \"mobility-toolbox-js/ol\";\nimport {\n  getHoursAndMinutes,\n  getDelayString as defaultGetDelayString,\n} from \"../../utils/timeUtils\";\nimport ReactTransitPropTypes from \"../../propTypes\";\nimport firstStation from \"../../images/RouteSchedule/firstStation.png\";\nimport station from \"../../images/RouteSchedule/station.png\";\nimport lastStation from \"../../images/RouteSchedule/lastStation.png\";\nimport line from \"../../images/RouteSchedule/line.png\";\n\nconst { getBgColor } = realtimeConfig;\n\n/**\n * Returns a color class to display the delay.\n * @param {Number} time Delay time in milliseconds.\n */\nconst getDelayColor = (time) => {\n  const secs = Math.round(((time / 1800 / 2) * 3600) / 1000);\n  if (secs >= 3600) {\n    return \"dark-red\";\n  }\n  if (secs >= 500) {\n    return \"middle-red\";\n  }\n  if (secs >= 300) {\n    return \"light-red\";\n  }\n  if (secs >= 180) {\n    return \"orange\";\n  }\n  return \"green\";\n};\n\n/**\n * Returns true if the train doesn't stop to the station.\n * @param {Object} stop Station information.\n */\nconst isNotStop = (stop) => {\n  return !stop.arrivalTime && !stop.departureTime;\n};\n\n/**\n * Returns if the station has already been passed by the vehicule.\n * @param {Object} stop Station information.\n * @param {number} time The current time to test in ms.\n * @param {Array<Object>} stops the list of all stops of the train.\n * @param {idx} idx The index of the stop object in the stops array.\n */\nconst isPassed = (stop, time, stops, idx) => {\n  // If the train doesn't stop to the stop object, we test if the stop just before has been passed or not.\n  // if yes the current stop is considered as passed.\n  if (isNotStop(stop)) {\n    if (stops[idx - 1] && idx > 0) {\n      return isPassed(stops[idx - 1], time, stops, idx);\n    }\n    return true;\n  }\n\n  // Sometimes stop.departureDelay is undefined.\n  const timeToCompare = stop.aimedDepartureTime || stop.aimedArrivalTime || 0;\n  let delayToCompare = stop.departureDelay || stop.arrivalDelay || 0;\n\n  // It could happens that the delay is negative we simply ignores it.\n  if (delayToCompare < 0) {\n    delayToCompare = 0;\n  }\n\n  return timeToCompare + delayToCompare <= time;\n};\n\n/**\n * Returns an image for first, middle or last stations.\n * @param {Number} stations The stations list.\n * @param {Number} index Index of the station in the list.\n * @param {Boolean} isStationPassed If the train is already passed at this station.\n * @param {Boolean} isNotStation If the train doesn't stop to this station.\n */\nconst defaultRenderStationImg = (\n  stations,\n  index,\n  isStationPassed,\n  isNotStation,\n) => {\n  const { length } = stations;\n  let src = station.src || station;\n  if (index === 0) {\n    src = firstStation.src || firstStation;\n  } else if (index === length - 1) {\n    src = lastStation.src || lastStation;\n  } else if (isNotStation) {\n    src = line.src || line;\n  }\n  return <img src={src} alt=\"routeScheduleLine\" className=\"rt-route-icon\" />;\n};\n\n/**\n * Returns an text.\n * @param {Number} stations The stations list.\n * @param {Number} index Index of the station in the list.\n * @param {Boolean} cancelled If the station is cancelled\n */\nconst defaultRenderStationName = (stations, index, cancelled) => {\n  const { stationName } = stations[index];\n  return (\n    <div className={cancelled ? \"rt-route-cancelled\" : \"\"}>{stationName}</div>\n  );\n};\nconst emptyFunc = () => {};\n\nfunction RouteStop({\n  lineInfos,\n  onStationClick = emptyFunc,\n  trackerLayer,\n  renderStationImg = defaultRenderStationImg,\n  renderStationName = defaultRenderStationName,\n  getDelayString = defaultGetDelayString,\n  stop,\n  idx,\n}) {\n  const {\n    arrivalDelay,\n    departureDelay,\n    state,\n    aimedArrivalTime,\n    aimedDepartureTime,\n  } = stop;\n  const cancelled = state === \"JOURNEY_CANCELLED\" || state === \"STOP_CANCELLED\";\n  const { stations } = lineInfos;\n  const isFirstStation = idx === 0;\n  const isLastStation = idx === stations.length - 1;\n  const isNotStation = isNotStop(stop);\n  const [isStationPassed, setIsStationPassed] = useState(false);\n\n  useEffect(() => {\n    let timeout = null;\n\n    const isStopPassed = isPassed(stop, trackerLayer.time, stations, idx);\n    setIsStationPassed(isStopPassed);\n\n    // We have to refresh the stop when the state it's time_based\n    if (stop.state === \"TIME_BASED\" && !isStopPassed) {\n      timeout = setInterval(() => {\n        setIsStationPassed(isPassed(stop, trackerLayer.time, stations, idx));\n      }, 20000);\n    }\n    return () => {\n      clearInterval(timeout);\n    };\n  }, [stop, trackerLayer, stations, idx]);\n\n  return (\n    <div\n      role=\"button\"\n      className={[\n        \"rt-route-station\",\n        isStationPassed ? \" rt-passed\" : \"\",\n        isNotStation ? \" rt-no-stop\" : \"\",\n      ].join(\"\")}\n      onClick={(e) => {\n        return onStationClick(stop, e);\n      }}\n      tabIndex={0}\n      onKeyPress={(e) => {\n        return e.which === 13 && onStationClick(stop, e);\n      }}\n    >\n      <div className=\"rt-route-delay\">\n        {arrivalDelay === undefined ||\n        arrivalDelay === null ||\n        isFirstStation ||\n        cancelled ? (\n          \"\"\n        ) : (\n          <span\n            className={`rt-route-delay-arrival${` ${getDelayColor(\n              arrivalDelay,\n            )}`}`}\n          >\n            {`+${getDelayString(arrivalDelay)}`}\n          </span>\n        )}\n        {departureDelay === undefined ||\n        departureDelay === null ||\n        isLastStation ||\n        cancelled ? (\n          \"\"\n        ) : (\n          <span\n            className={`rt-route-delay-departure${` ${getDelayColor(\n              departureDelay,\n            )}`}`}\n          >\n            {`+${getDelayString(departureDelay)}`}\n          </span>\n        )}\n      </div>\n      <div className=\"rt-route-times\">\n        <span\n          className={`rt-route-time-arrival ${\n            cancelled ? \"rt-route-cancelled\" : \"\"\n          }`}\n        >\n          {getHoursAndMinutes(aimedArrivalTime)}\n        </span>\n        <span\n          className={`rt-route-time-departure ${\n            cancelled ? \"rt-route-cancelled\" : \"\"\n          }`}\n        >\n          {getHoursAndMinutes(aimedDepartureTime)}\n        </span>\n      </div>\n      {renderStationImg(stations, idx, isStationPassed, isNotStation)}\n      {renderStationName(stations, idx, cancelled)}\n    </div>\n  );\n}\n\nconst defaultRenderStation = (props) => {\n  const { stationId, arrivalTime, departureTime, stationName } = props.stop;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return (\n    <RouteStop\n      // Train line can go in circle so begin and end have the same id,\n      // using the time in the key should fix the issue.\n      key={(stationId || stationName) + arrivalTime + departureTime}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    />\n  );\n};\n\nconst defaultRenderRouteIdentifier = ({ routeIdentifier, longName }) => {\n  if (routeIdentifier) {\n    // first part of the id, without leading zeros.\n    const id = parseInt(routeIdentifier.split(\".\")[0], 10);\n    if (!longName.includes(id) && !Number.isNaN(id)) {\n      return ` (${id})`;\n    }\n  }\n  return null;\n};\nconst defaultRenderHeaderButtons = () => {\n  return null;\n};\n\nconst defaultRenderHeader = ({\n  lineInfos,\n  renderHeaderButtons = defaultRenderHeaderButtons,\n  renderRouteIdentifier = defaultRenderRouteIdentifier,\n}) => {\n  const {\n    type,\n    vehicleType,\n    shortName,\n    longName,\n    stroke,\n    destination,\n    routeIdentifier,\n    text_color: textColor,\n  } = lineInfos;\n  return (\n    <div className=\"rt-route-header\">\n      <span\n        className=\"rt-route-icon\"\n        style={{\n          /* stylelint-disable-next-line value-keyword-case */\n          backgroundColor: stroke || getBgColor(type || vehicleType),\n          color: textColor || \"black\",\n        }}\n      >\n        {shortName}\n      </span>\n      <div className=\"rt-route-title\">\n        <span className=\"rt-route-name\">{destination}</span>\n        <span>\n          {longName}\n          {renderRouteIdentifier(lineInfos)}\n        </span>\n      </div>\n      <div className=\"rt-route-buttons\">\n        {renderHeaderButtons(routeIdentifier)}\n      </div>\n    </div>\n  );\n};\n\nconst defaultRenderLink = (text, url) => {\n  return (\n    <div className=\"rt-route-copyright-link\">\n      {url ? (\n        <a href={url} target=\"_blank\" rel=\"noreferrer\">\n          {text}\n        </a>\n      ) : (\n        text\n      )}\n    </div>\n  );\n};\n\nconst defaultRenderCopyright = ({ lineInfos }) => {\n  return (\n    <span className=\"rt-route-copyright\">\n      {lineInfos.operator &&\n        defaultRenderLink(lineInfos.operator, lineInfos.operatorUrl)}\n      {lineInfos.operator && lineInfos.publisher && <span>&nbsp;-&nbsp;</span>}\n      {lineInfos.publisher &&\n        defaultRenderLink(lineInfos.publisher, lineInfos.publisherUrl)}\n      {lineInfos.license && <span>&nbsp;(</span>}\n      {lineInfos.license &&\n        defaultRenderLink(lineInfos.license, lineInfos.licenseUrl)}\n      {lineInfos.license && \")\"}\n    </span>\n  );\n};\n\nconst defaultRenderFooter = (props) => {\n  const { lineInfos, renderCopyright = defaultRenderCopyright } = props;\n  if (!lineInfos.operator && !lineInfos.publisher) {\n    return null;\n  }\n  return <div className=\"rt-route-footer\">{renderCopyright({ ...props })}</div>;\n};\n\nconst propTypes = {\n  /**\n   * CSS class of the route schedule wrapper.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Trajectory stations informations.\n   */\n  lineInfos: ReactTransitPropTypes.lineInfos,\n\n  /**\n   * Trackerlayer.\n   */\n  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,\n\n  /**\n   * Render Header of the route scheduler.\n   */\n  renderHeader: PropTypes.func,\n\n  /**\n   * Render Footer of the route scheduler.\n   */\n  renderFooter: PropTypes.func,\n\n  /**\n   * Render Copyright of the route scheduler.\n   */\n  renderCopyright: PropTypes.func,\n\n  /**\n   * Render the route identifier in the header\n   */\n  renderRouteIdentifier: PropTypes.func,\n\n  /**\n   * Render the status of the station image.\n   */\n  renderStationImg: PropTypes.func,\n\n  /**\n   * Render a station.\n   */\n  renderStation: PropTypes.func,\n\n  /**\n   * Render a station name.\n   */\n  renderStationName: PropTypes.func,\n\n  /**\n   * Function triggered on station's click event.\n   */\n  onStationClick: PropTypes.func,\n\n  /**\n   * Function to render header buttons.\n   */\n  renderHeaderButtons: PropTypes.func,\n\n  /**\n   * Function to get the delay string for stations.\n   */\n  getDelayString: PropTypes.func,\n};\n\n/**\n * RouteSchedule displays information, stops and punctuality about the clicked route.\n */\nfunction RouteSchedule({\n  className = \"rt-route-schedule\",\n  renderStation = defaultRenderStation,\n  renderHeader = defaultRenderHeader,\n  renderFooter = defaultRenderFooter,\n  ...props\n}) {\n  const { lineInfos } = props;\n\n  if (!lineInfos) {\n    return null;\n  }\n\n  return (\n    <div className={className}>\n      {renderHeader({ ...props })}\n      <div className=\"rt-route-body\">\n        {lineInfos.stations.map((stop, idx) => {\n          return renderStation({ ...props, stop, idx });\n        })}\n      </div>\n      {renderFooter({ ...props })}\n    </div>\n  );\n}\n\nRouteSchedule.propTypes = propTypes;\n\nexport default React.memo(RouteSchedule);\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/no-unused-prop-types */\nimport {\n  realtimeConfig,\n  RealtimeLayer as TrackerLayer,\n} from \"mobility-toolbox-js/ol\";\nimport PropTypes from \"prop-types\";\n/* eslint-disable react/prop-types */\nimport React, { useEffect, useState } from \"react\";\n\nimport firstStation from \"../../images/RouteSchedule/firstStation.png\";\nimport lastStation from \"../../images/RouteSchedule/lastStation.png\";\nimport line from \"../../images/RouteSchedule/line.png\";\nimport station from \"../../images/RouteSchedule/station.png\";\nimport ReactTransitPropTypes from \"../../propTypes\";\nimport {\n  getDelayString as defaultGetDelayString,\n  getHoursAndMinutes,\n} from \"../../utils/timeUtils\";\n\nconst { getBgColor } = realtimeConfig;\n\n/**\n * Returns a color class to display the delay.\n * @param {Number} time Delay time in milliseconds.\n */\nconst defaultGetDelayColor = (time) => {\n  const secs = Math.round(((time / 1800 / 2) * 3600) / 1000);\n  if (secs >= 3600) {\n    return \"rgb(237 0 76)\";\n  }\n  if (secs >= 500) {\n    return \"rgb(232 0 0)\";\n  }\n  if (secs >= 300) {\n    return \"rgb(255 74 0)\";\n  }\n  if (secs >= 180) {\n    return \"rgb(247 191 0)\";\n  }\n  return \"rgb(0 160 12)\";\n};\n\n/**\n * Returns true if the train doesn't stop to the station.\n * @param {Object} stop Station information.\n */\nconst isNotStop = (stop) => {\n  return !stop.arrivalTime && !stop.departureTime;\n};\n\n/**\n * Returns if the station has already been passed by the vehicule.\n * @param {Object} stop Station information.\n * @param {number} time The current time to test in ms.\n * @param {Array<Object>} stops the list of all stops of the train.\n * @param {idx} idx The index of the stop object in the stops array.\n */\nconst isPassed = (stop, time, stops, idx) => {\n  // If the train doesn't stop to the stop object, we test if the stop just before has been passed or not.\n  // if yes the current stop is considered as passed.\n  if (isNotStop(stop)) {\n    if (stops[idx - 1] && idx > 0) {\n      return isPassed(stops[idx - 1], time, stops, idx);\n    }\n    return true;\n  }\n\n  // Sometimes stop.departureDelay is undefined.\n  const timeToCompare = stop.aimedDepartureTime || stop.aimedArrivalTime || 0;\n  let delayToCompare = stop.departureDelay || stop.arrivalDelay || 0;\n\n  // It could happens that the delay is negative we simply ignores it.\n  if (delayToCompare < 0) {\n    delayToCompare = 0;\n  }\n\n  return timeToCompare + delayToCompare <= time;\n};\n\n/**\n * Returns an image for first, middle or last stations.\n * @param {Number} stations The stations list.\n * @param {Number} index Index of the station in the list.\n * @param {Boolean} isStationPassed If the train is already passed at this station.\n * @param {Boolean} isNotStation If the train doesn't stop to this station.\n */\nconst defaultRenderStationImg = (\n  stations,\n  index,\n  isStationPassed,\n  isNotStation,\n) => {\n  const { length } = stations;\n  let src = station.src || station;\n  if (index === 0) {\n    src = firstStation.src || firstStation;\n  } else if (index === length - 1) {\n    src = lastStation.src || lastStation;\n  } else if (isNotStation) {\n    src = line.src || line;\n  }\n  return <img alt=\"routeScheduleLine\" className=\"rt-route-icon\" src={src} />;\n};\n\n/**\n * Returns an text.\n * @param {Number} stations The stations list.\n * @param {Number} index Index of the station in the list.\n * @param {Boolean} cancelled If the station is cancelled\n */\nconst defaultRenderStationName = (stations, index, cancelled) => {\n  const { stationName } = stations[index];\n  return (\n    <div className={cancelled ? \"rt-route-cancelled\" : \"\"}>{stationName}</div>\n  );\n};\n\n/**\n * Render a delay string.\n * @param {Number} delay  The delay in ms to display.\n * @param {Boolean} stop The current stop object.\n * @param {Function} getDelayString Function to get string to display.\n * @param {Function} getColor Define the css color to use.\n *\n */\nconst defaultRenderDelay = (delay, stop, getDelayString, getDelayColor) => {\n  return (\n    <span style={{ color: getDelayColor?.(delay, stop) || \"inherit\" }}>\n      {`${getDelayString?.(delay, stop) || \"\"}`}\n    </span>\n  );\n};\n\nconst emptyFunc = () => {};\n\nfunction RouteStop({\n  getDelayColor = defaultGetDelayColor,\n  getDelayString = defaultGetDelayString,\n  idx,\n  lineInfos,\n  onStationClick = emptyFunc,\n  renderArrivalDelay = defaultRenderDelay,\n  renderDepartureDelay = defaultRenderDelay,\n  renderStationImg = defaultRenderStationImg,\n  renderStationName = defaultRenderStationName,\n  stop,\n  trackerLayer,\n}) {\n  const {\n    aimedArrivalTime,\n    aimedDepartureTime,\n    arrivalDelay,\n    departureDelay,\n    state,\n  } = stop;\n  const cancelled = state === \"JOURNEY_CANCELLED\" || state === \"STOP_CANCELLED\";\n  const { stations } = lineInfos;\n  const isFirstStation = idx === 0;\n  const isLastStation = idx === stations.length - 1;\n  const isNotStation = isNotStop(stop);\n  const [isStationPassed, setIsStationPassed] = useState(false);\n\n  useEffect(() => {\n    let timeout = null;\n\n    const isStopPassed = isPassed(stop, trackerLayer.time, stations, idx);\n    setIsStationPassed(isStopPassed);\n\n    // We have to refresh the stop when the state it's time_based\n    if (stop.state === \"TIME_BASED\" && !isStopPassed) {\n      timeout = setInterval(() => {\n        setIsStationPassed(isPassed(stop, trackerLayer.time, stations, idx));\n      }, 20000);\n    }\n    return () => {\n      clearInterval(timeout);\n    };\n  }, [stop, trackerLayer, stations, idx]);\n\n  return (\n    <div\n      className={[\n        \"rt-route-station\",\n        isStationPassed ? \" rt-passed\" : \"\",\n        isNotStation ? \" rt-no-stop\" : \"\",\n      ].join(\"\")}\n      onClick={(e) => {\n        return onStationClick(stop, e);\n      }}\n      onKeyPress={(e) => {\n        return e.which === 13 && onStationClick(stop, e);\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className=\"rt-route-delay\">\n        {arrivalDelay === undefined ||\n        arrivalDelay === null ||\n        isFirstStation ||\n        cancelled\n          ? \"\"\n          : renderArrivalDelay(\n              arrivalDelay,\n              stop,\n              getDelayString,\n              getDelayColor,\n            )}\n        {departureDelay === undefined ||\n        departureDelay === null ||\n        isLastStation ||\n        cancelled\n          ? \"\"\n          : renderDepartureDelay(\n              departureDelay,\n              stop,\n              getDelayString,\n              getDelayColor,\n            )}\n      </div>\n      <div className=\"rt-route-times\">\n        <span\n          className={`rt-route-time-arrival ${\n            cancelled ? \"rt-route-cancelled\" : \"\"\n          }`}\n        >\n          {getHoursAndMinutes(aimedArrivalTime)}\n        </span>\n        <span\n          className={`rt-route-time-departure ${\n            cancelled ? \"rt-route-cancelled\" : \"\"\n          }`}\n        >\n          {getHoursAndMinutes(aimedDepartureTime)}\n        </span>\n      </div>\n      {renderStationImg(stations, idx, isStationPassed, isNotStation)}\n      {renderStationName(stations, idx, cancelled)}\n    </div>\n  );\n}\n\nconst defaultRenderStation = (props) => {\n  const { arrivalTime, departureTime, stationId, stationName } = props.stop;\n  // eslint-disable-next-line react/jsx-props-no-spreading\n  return (\n    <RouteStop\n      // Train line can go in circle so begin and end have the same id,\n      // using the time in the key should fix the issue.\n      key={(stationId || stationName) + arrivalTime + departureTime}\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n    />\n  );\n};\n\nconst defaultRenderRouteIdentifier = ({ longName, routeIdentifier }) => {\n  if (routeIdentifier) {\n    // first part of the id, without leading zeros.\n    const id = parseInt(routeIdentifier.split(\".\")[0], 10);\n    if (!longName.includes(id) && !Number.isNaN(id)) {\n      return ` (${id})`;\n    }\n  }\n  return null;\n};\nconst defaultRenderHeaderButtons = () => {\n  return null;\n};\n\nconst defaultRenderHeader = ({\n  lineInfos,\n  renderHeaderButtons = defaultRenderHeaderButtons,\n  renderRouteIdentifier = defaultRenderRouteIdentifier,\n}) => {\n  const {\n    destination,\n    longName,\n    routeIdentifier,\n    shortName,\n    stroke,\n    text_color: textColor,\n    type,\n    vehicleType,\n  } = lineInfos;\n  return (\n    <div className=\"rt-route-header\">\n      <span\n        className=\"rt-route-icon\"\n        style={{\n          /* stylelint-disable-next-line value-keyword-case */\n          backgroundColor: stroke || getBgColor(type || vehicleType),\n          color: textColor || \"black\",\n        }}\n      >\n        {shortName}\n      </span>\n      <div className=\"rt-route-title\">\n        <span className=\"rt-route-name\">{destination}</span>\n        <span>\n          {longName}\n          {renderRouteIdentifier(lineInfos)}\n        </span>\n      </div>\n      <div className=\"rt-route-buttons\">\n        {renderHeaderButtons(routeIdentifier)}\n      </div>\n    </div>\n  );\n};\n\nconst defaultRenderLink = (text, url) => {\n  return (\n    <div className=\"rt-route-copyright-link\">\n      {url ? (\n        <a href={url} rel=\"noreferrer\" target=\"_blank\">\n          {text}\n        </a>\n      ) : (\n        text\n      )}\n    </div>\n  );\n};\n\nconst defaultRenderCopyright = ({ lineInfos }) => {\n  return (\n    <span className=\"rt-route-copyright\">\n      {lineInfos.operator &&\n        defaultRenderLink(lineInfos.operator, lineInfos.operatorUrl)}\n      {lineInfos.operator && lineInfos.publisher && <span>&nbsp;-&nbsp;</span>}\n      {lineInfos.publisher &&\n        defaultRenderLink(lineInfos.publisher, lineInfos.publisherUrl)}\n      {lineInfos.license && <span>&nbsp;(</span>}\n      {lineInfos.license &&\n        defaultRenderLink(lineInfos.license, lineInfos.licenseUrl)}\n      {lineInfos.license && \")\"}\n    </span>\n  );\n};\n\nconst defaultRenderFooter = (props) => {\n  const { lineInfos, renderCopyright = defaultRenderCopyright } = props;\n  if (!lineInfos.operator && !lineInfos.publisher) {\n    return null;\n  }\n  return <div className=\"rt-route-footer\">{renderCopyright({ ...props })}</div>;\n};\n\nconst propTypes = {\n  /**\n   * CSS class of the route schedule wrapper.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Function to get the delay color.\n   */\n  getDelayColor: PropTypes.func,\n\n  /**\n   * Function to get the delay string for stations.\n   */\n  getDelayString: PropTypes.func,\n\n  /**\n   * Trajectory stations informations.\n   */\n  lineInfos: ReactTransitPropTypes.lineInfos,\n\n  /**\n   * Function triggered on station's click event.\n   */\n  onStationClick: PropTypes.func,\n\n  /**\n   * Render delay for arrival.\n   */\n  renderArrivalDelay: PropTypes.func,\n\n  /**\n   * Render Copyright of the route scheduler.\n   */\n  renderCopyright: PropTypes.func,\n\n  /**\n   * Render delay for departure.\n   */\n  renderDepartureDelay: PropTypes.func,\n\n  /**\n   * Render Footer of the route scheduler.\n   */\n  renderFooter: PropTypes.func,\n\n  /**\n   * Render Header of the route scheduler.\n   */\n  renderHeader: PropTypes.func,\n\n  /**\n   * Function to render header buttons.\n   */\n  renderHeaderButtons: PropTypes.func,\n\n  /**\n   * Render the route identifier in the header\n   */\n  renderRouteIdentifier: PropTypes.func,\n\n  /**\n   * Render a station.\n   */\n  renderStation: PropTypes.func,\n\n  /**\n   * Render the status of the station image.\n   */\n  renderStationImg: PropTypes.func,\n\n  /**\n   * Render a station name.\n   */\n  renderStationName: PropTypes.func,\n\n  /**\n   * Trackerlayer.\n   */\n  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,\n};\n\n/**\n * RouteSchedule displays information, stops and punctuality about the clicked route.\n */\nfunction RouteSchedule({\n  className = \"rt-route-schedule\",\n  renderFooter = defaultRenderFooter,\n  renderHeader = defaultRenderHeader,\n  renderStation = defaultRenderStation,\n  ...props\n}) {\n  const { lineInfos } = props;\n\n  if (!lineInfos) {\n    return null;\n  }\n\n  return (\n    <div className={className}>\n      {renderHeader({ ...props })}\n      <div className=\"rt-route-body\">\n        {lineInfos.stations.map((stop, idx) => {\n          return renderStation({ ...props, idx, stop });\n        })}\n      </div>\n      {renderFooter({ ...props })}\n    </div>\n  );\n}\n\nRouteSchedule.propTypes = propTypes;\n\nexport default React.memo(RouteSchedule);\n"],
+  "mappings": "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",
   "names": []
 }

package/components/RouteSchedule/RouteSchedule.scss

@@ -85,26 +85,6 @@
         width: 40px;
         min-width: 40px;
         padding: 0 3px;
-
-        .green {
-          color: rgb(0 160 12);
-        }
-
-        .orange {
-          color: rgb(247 191 0);
-        }
-
-        .light-red {
-          color: rgb(255 74 0);
-        }
-
-        .middle-red {
-          color: rgb(232 0 0);
-        }
-
-        .dark-red {
-          color: rgb(237 0 76);
-        }
       }
     }
 

package/components/ScaleLine/ScaleLine.js

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect } from "react";
-import PropTypes from "prop-types";
 import OLScaleLine from "ol/control/ScaleLine";
 import OLMap from "ol/Map";
+import PropTypes from "prop-types";
+import React, { useEffect, useRef } from "react";
 const propTypes = {
   /**
    * ol/map.