feat(ts/components/RecenterControl): localize RecenterControl state…

… and styling (#2252) * feat(ts/components/RecenterControl): localize `RecenterControl` state and styling and refactor old control to use `CustomControl` * feat(ts/component/recenterControl): add stories
mbta · Oct 12, 2023 · c095d76 · c095d76
1 parent bb792ab
commit c095d76
Show file tree

Hide file tree

Showing 17 changed files with 264 additions and 366 deletions.
diff --git a/assets/css/_vehicle_map.scss b/assets/css/_vehicle_map.scss
@@ -181,24 +181,6 @@ $map-component-z-index: (
   border-top-color: $color-tooltip-background;
 }
 
-.c-vehicle-map__recenter-button {
-  path {
-    fill: none;
-    stroke: $color-button-secondary;
-    stroke-width: 2;
-  }
-
-  .c-vehicle-map-state--auto-centering + .c-vehicle-map & a {
-    background-color: $color-button-disabled;
-    color: $color-font-grey;
-    cursor: default;
-
-    path {
-      stroke: $color-font-grey;
-    }
-  }
-}
-
 .c-garage-icon__label {
   paint-order: stroke;
   stroke: white;

diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -82,6 +82,7 @@ $list-group-border-color: $color-gray-300;
 @import "location_card";
 @import "map_page";
 @import "map/controls/layers_control";
+@import "map/controls/recenter_control";
 @import "map/controls/street_view_switch";
 @import "map/controls/user_location_control";
 @import "map/markers/location_dot_icon";

diff --git a/assets/css/map/controls/_recenter_control.scss b/assets/css/map/controls/_recenter_control.scss
@@ -0,0 +1,17 @@
+.c-recenter-control {
+  path {
+    fill: none;
+    stroke: $color-button-secondary;
+    stroke-width: 2;
+  }
+
+  &[data-is-active="true"] {
+    background-color: $color-button-disabled;
+    color: $color-font-grey;
+    cursor: default;
+
+    path {
+      stroke: $color-font-grey;
+    }
+  }
+}
diff --git a/assets/src/components/map.tsx b/assets/src/components/map.tsx
@@ -237,22 +237,13 @@ export const vehicleToLeafletLatLng = ({
   longitude,
 }: Vehicle): Leaflet.LatLng => Leaflet.latLng(latitude, longitude)
 
-// TODO: replacing with react controlled component which self-contains
-// state and does not rely on setting a class on the map container
-export const FollowerStatusClasses = (
-  shouldFollow: boolean
-): string | undefined => {
-  return shouldFollow ? "c-vehicle-map-state--auto-centering" : undefined
-}
-
 export const MapFollowingPrimaryVehicles = (props: Props) => {
-  const state = useInteractiveFollowerState(),
-    { shouldFollow } = state
+  const state = useInteractiveFollowerState()
 
   const positions: LatLng[] = props.vehicles.map(vehicleToLeafletLatLng)
 
   return (
-    <Map {...props} stateClasses={FollowerStatusClasses(shouldFollow)}>
+    <Map {...props}>
       <>
         <RecenterControlWithInterruptibleFollower
           positions={positions}
@@ -269,14 +260,14 @@ export const MapFollowingSelectionKey = (
   props: Props & { selectionKey?: string }
 ) => {
   const state = useInteractiveFollowerState(),
-    { shouldFollow, setShouldFollow } = state
+    { setShouldFollow } = state
 
   const positions: LatLng[] = props.vehicles.map(vehicleToLeafletLatLng)
 
   useEffect(() => setShouldFollow(true), [props.selectionKey, setShouldFollow])
 
   return (
-    <Map {...props} stateClasses={FollowerStatusClasses(shouldFollow)}>
+    <Map {...props}>
       <>
         <RecenterControlWithInterruptibleFollower
           positions={positions}

diff --git a/assets/src/components/map/controls/recenterControl.tsx b/assets/src/components/map/controls/recenterControl.tsx
@@ -1,54 +1,56 @@
-import { Control, ControlOptions, DomUtil } from "leaflet"
-import { createControlComponent } from "@react-leaflet/core"
 import { fullStoryEvent } from "../../../helpers/fullStory"
+import { ControlOptions } from "leaflet"
+import React from "react"
 
-interface RecenterControlProps extends ControlOptions {
-  recenter: () => void
-}
-class LeafletRecenterControl extends Control {
-  private recenter: () => void
-  constructor(props: ControlOptions, recenter: () => void) {
-    super(props)
-    this.recenter = recenter
-  }
-
-  onAdd() {
-    const controlContainer = DomUtil.create(
-      "div",
-      "leaflet-control leaflet-bar c-vehicle-map__recenter-button"
-    )
-    controlContainer.onclick = (e) => {
-      e.stopPropagation()
-      e.preventDefault()
+import { CustomControl } from "./customControl"
 
-      fullStoryEvent("Recenter control clicked", {})
-
-      this.recenter()
-    }
-    controlContainer.innerHTML = `
-		<a
-		  href="#"
-		  title="Recenter Map"
-		  role="button"
-		  aria-label="Recenter Map"
-		    >
-		    <svg
-			height="26"
-			viewBox="-5 -5 32 32"
-			width="26"
-			xmlns="http://www.w3.org/2000/svg"
-			>
-			<path
-			     d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-			     transform="rotate(60, 12, 12)"
-			/>
-		    </svg>
-		</a>`
-    return controlContainer
+export interface RecenterButtonProps {
+  active?: boolean
+  onActivate?: () => void
+}
+export const RecenterButton = ({
+  active,
+  onActivate: onActivateProp,
+}: RecenterButtonProps) => {
+  const onActivate = () => {
+    fullStoryEvent("Recenter control clicked", {})
+    onActivateProp?.()
   }
+  return (
+    //eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <a
+      className="c-recenter-control"
+      title="Recenter Map"
+      role="button"
+      aria-label="Recenter Map"
+      onKeyDown={(e) => e.key === "Enter" && onActivate()}
+      tabIndex={-1}
+      onClick={onActivate}
+      data-is-active={active}
+    >
+      <svg
+        height="26"
+        width="26"
+        viewBox="-5 -5 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+          transform="rotate(60, 12, 12)"
+        />
+      </svg>
+    </a>
+  )
 }
 
-export const RecenterControl = createControlComponent(
-  ({ position: position, recenter: recenterFn }: RecenterControlProps) =>
-    new LeafletRecenterControl({ position: position }, recenterFn)
-)
+export const RecenterControl = ({
+  active = false,
+  onActivate: onClick,
+  ...props
+}: RecenterButtonProps & ControlOptions) => {
+  return (
+    <CustomControl position="topright" {...props} className="leaflet-bar">
+      <RecenterButton {...{ active, onActivate: onClick }} />
+    </CustomControl>
+  )
+}
diff --git a/assets/src/components/map/follower.tsx b/assets/src/components/map/follower.tsx
@@ -139,7 +139,8 @@ export const RecenterControlWithInterruptibleFollower = (
     <InterruptibleFollower {...props} />
     <RecenterControl
       position="topright"
-      recenter={() => props.setShouldFollow(true)}
+      active={props.shouldFollow}
+      onActivate={() => props.setShouldFollow(true)}
     />
   </>
 )