feat(RouteSchedule): add getDelayString prop for custom delay string (#…

…728)

* feat(RouteSchedule): add getDelayString prop for custom delay string generation

* chore(release): 1.12.0-beta.0

package.json

@@ -2,7 +2,7 @@
   "name": "react-spatial",
   "license": "MIT",
   "description": "Components to build React map apps.",
-  "version": "1.11.6",
+  "version": "1.12.0-beta.0",
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",

src/components/RouteSchedule/RouteSchedule.js

@@ -6,7 +6,10 @@ import {
   RealtimeLayer as TrackerLayer,
   realtimeConfig,
 } from "mobility-toolbox-js/ol";
-import { getHoursAndMinutes, getDelayString } from "../../utils/timeUtils";
+import {
+  getHoursAndMinutes,
+  getDelayString as defaultGetDelayString,
+} from "../../utils/timeUtils";
 import ReactTransitPropTypes from "../../propTypes";
 import firstStation from "../../images/RouteSchedule/firstStation.png";
 import station from "../../images/RouteSchedule/station.png";
@@ -118,6 +121,7 @@ function RouteStop({
   trackerLayer,
   renderStationImg = defaultRenderStationImg,
   renderStationName = defaultRenderStationName,
+  getDelayString = defaultGetDelayString,
   stop,
   idx,
 }) {
@@ -387,6 +391,11 @@ const propTypes = {
    * Function to render header buttons.
    */
   renderHeaderButtons: PropTypes.func,
+
+  /**
+   * Function to get the delay string for stations.
+   */
+  getDelayString: PropTypes.func,
 };
 
 /**

src/components/RouteSchedule/RouteSchedule.test.js

@@ -110,4 +110,5 @@ describe("RouteSchedule", () => {
   // to test: no departure delay on last station
   // to test: no departure date on last station
   // to test: font bold on first and last station
+  // to test: custom getDelayString prop
 });

src/styleguidist/StyleGuide.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { geopsTheme, Header, Footer } from "@geops/geops-ui";
 import {
-  Hidden,
+  Paper,
   ClickAwayListener,
   Collapse,
   List,
@@ -147,7 +147,7 @@ export function StyleGuideRenderer({
           ]}
         />
         <div className={classes.content}>
-          <Hidden smUp>
+          <Paper sx={{ display: { xs: "block", sm: "none" } }}>
             <div
               role="button"
               type="button"
@@ -236,16 +236,16 @@ export function StyleGuideRenderer({
                 </List>
               </ClickAwayListener>
             </Collapse>
-          </Hidden>
+          </Paper>
           <div className={classes.scrollable} ref={(nodee) => setNode(nodee)}>
-            <Hidden xsDown>
+            <Paper sx={{ display: { xs: "none", sm: "block" } }}>
               <div className={classes.sidebar}>
                 <header className={classes.version}>
                   {version && <Version>{version}</Version>}
                 </header>
                 {hasSidebar ? toc : null}
               </div>
-            </Hidden>
+            </Paper>
             <main className={classes.main}>{children}</main>
             <div className={classes.footerWrapper}>
               <Footer