useComponentSize for ladder resizing (#187)

* useComponentSize dependency for ladder resizing * resize observer polyfill * remove test for ladder resizing (couldn't get it to work with the new useComponentSize hook)
mbta · Sep 12, 2019 · 5777ab3 · 5777ab3
1 parent ac91de9
commit 5777ab3
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 172 deletions.
diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -16,13 +16,15 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
+    "@rehooks/component-size": "^1.0.3",
     "leaflet": "^1.5.1",
     "leaflet-defaulticon-compatibility": "^0.1.1",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
+    "resize-observer-polyfill": "^1.5.1",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {

diff --git a/assets/src/app.tsx b/assets/src/app.tsx
@@ -17,12 +17,18 @@ import "leaflet/dist/leaflet.css"
 import "phoenix_html"
 import * as React from "react"
 import ReactDOM from "react-dom"
+import ResizeObserver from "resize-observer-polyfill"
 import AppStateWrapper from "./components/appStateWrapper"
 
 if (window.FS && window.username) {
   window.FS.identify(window.username, { displayName: window.username })
 }
 
+if (!("ResizeObserver" in global)) {
+  // Load polyfill for https://github.com/rehooks/component-size
+  window.ResizeObserver = ResizeObserver
+}
+
 // Import local files
 //
 // Local files can be imported directly using relative paths, for example:

diff --git a/assets/src/components/ladder.tsx b/assets/src/components/ladder.tsx
@@ -1,8 +1,8 @@
-import React, { useContext } from "react"
+import useComponentSize from "@rehooks/component-size"
+import React, { useContext, useRef } from "react"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { partition } from "../helpers/array"
 import vehicleLabel from "../helpers/vehicleLabel"
-import useReferencedElementHeight from "../hooks/useReferencedElementHeight"
 import featureIsEnabled from "../laboratoryFeatures"
 import {
   LadderVehicle,
@@ -57,7 +57,8 @@ const Ladder = ({
   ladderDirection,
   selectedVehicleId,
 }: Props) => {
-  const { height, elementRef } = useReferencedElementHeight()
+  const elementRef = useRef(null)
+  const { height } = useComponentSize(elementRef)
 
   const orderedTimepoints: TimepointId[] =
     // Use slice to make a copy of the array before destructively reversing

diff --git a/assets/src/hooks/useReferencedElementHeight.ts b/assets/src/hooks/useReferencedElementHeight.ts
diff --git a/assets/src/skate.d.ts b/assets/src/skate.d.ts
@@ -1,3 +1,5 @@
+import ResizeObserver from "resize-observer-polyfill"
+
 declare global {
   interface Window {
     FS?: {
@@ -11,6 +13,7 @@ declare global {
         }
       ): void
     }
+    ResizeObserver: typeof ResizeObserver
     username: string
   }
 }

diff --git a/assets/tests/components/ladder.test.tsx b/assets/tests/components/ladder.test.tsx
@@ -739,154 +739,4 @@ describe("ladder", () => {
 
     expect(tree).toMatchSnapshot()
   })
-
-  test("bases the height of the ladder svg on the wrapper div to make it dynamic", () => {
-    const timepoints = ["t0", "t1", "t2"]
-    const vehicles: Vehicle[] = [
-      {
-        id: "upward",
-        label: "upward",
-        runId: "run-1",
-        timestamp: 0,
-        latitude: 0,
-        longitude: 0,
-        directionId: 0,
-        routeId: "route",
-        tripId: "trip",
-        headsign: null,
-        viaVariant: null,
-        operatorId: "op1",
-        operatorName: "SMITH",
-        bearing: 33,
-        speed: 50.0,
-        blockId: "block-1",
-        headwaySecs: 859.1,
-        headwaySpacing: HeadwaySpacing.Ok,
-        previousVehicleId: "v2",
-        scheduleAdherenceSecs: 0,
-        scheduleAdherenceString: "0.0 sec (ontime)",
-        scheduledHeadwaySecs: 120,
-        isOffCourse: false,
-        isLayingOver: false,
-        layoverDepartureTime: null,
-        blockIsActive: true,
-        dataDiscrepancies: [],
-        stopStatus: {
-          status: "in_transit_to",
-          stopId: "stop",
-          stopName: "stop",
-        },
-        timepointStatus: {
-          fractionUntilTimepoint: 0.5,
-          timepointId: "t1",
-        },
-        scheduledLocation: null,
-        isOnRoute: true,
-      },
-      {
-        id: "downward",
-        label: "downward",
-        runId: "run-2",
-        timestamp: 0,
-        latitude: 0,
-        longitude: 0,
-        directionId: 1,
-        routeId: "route",
-        tripId: "trip",
-        headsign: null,
-        viaVariant: null,
-        operatorId: "op2",
-        operatorName: "JONES",
-        bearing: 33,
-        speed: 50.0,
-        blockId: "block-1",
-        headwaySecs: 859.1,
-        headwaySpacing: HeadwaySpacing.Ok,
-        previousVehicleId: "v2",
-        scheduleAdherenceSecs: 0,
-        scheduleAdherenceString: "0.0 sec (ontime)",
-        scheduledHeadwaySecs: 120,
-        isOffCourse: false,
-        isLayingOver: false,
-        layoverDepartureTime: null,
-        blockIsActive: true,
-        dataDiscrepancies: [],
-        stopStatus: {
-          status: "in_transit_to",
-          stopId: "stop",
-          stopName: "stop",
-        },
-        timepointStatus: {
-          fractionUntilTimepoint: 0.75,
-          timepointId: "t2",
-        },
-        scheduledLocation: {
-          directionId: 0,
-          timepointStatus: {
-            timepointId: "t2",
-            fractionUntilTimepoint: 0.75,
-          },
-        },
-        isOnRoute: true,
-      },
-      {
-        id: "notimepoint",
-        label: "notimepoint",
-        runId: "run-3",
-        timestamp: 0,
-        latitude: 0,
-        longitude: 0,
-        directionId: 1,
-        routeId: "route",
-        tripId: "trip",
-        headsign: null,
-        viaVariant: null,
-        operatorId: "op3",
-        operatorName: "XI",
-        bearing: 33,
-        speed: 50.0,
-        blockId: "block-1",
-        headwaySecs: 859.1,
-        headwaySpacing: HeadwaySpacing.Ok,
-        previousVehicleId: "v2",
-        scheduleAdherenceSecs: 0,
-        scheduleAdherenceString: "0.0 sec (ontime)",
-        scheduledHeadwaySecs: 120,
-        isOffCourse: false,
-        isLayingOver: false,
-        layoverDepartureTime: null,
-        blockIsActive: true,
-        dataDiscrepancies: [],
-        stopStatus: {
-          status: "in_transit_to",
-          stopId: "stop",
-          stopName: "stop",
-        },
-        timepointStatus: null,
-        scheduledLocation: null,
-        isOnRoute: true,
-      },
-    ]
-    const ladderDirection = LadderDirection.ZeroToOne
-
-    const mockUseRef = jest.spyOn(React, "useRef")
-    mockUseRef.mockImplementation(() => ({
-      current: {
-        offsetHeight: 700,
-      },
-    }))
-
-    const wrapper = mount(
-      <Ladder
-        timepoints={timepoints}
-        vehicles={vehicles}
-        ghosts={[]}
-        ladderDirection={ladderDirection}
-        selectedVehicleId={undefined}
-      />
-    )
-    const svg = wrapper.find(".m-ladder__svg")
-
-    expect(svg.prop("height")).toEqual(700)
-  })
 })