feat(ts/components/routePropertiesCard): pull section open state up i…

…nto `RoutePropertiesCard.WithSectionState`
mbta · May 23, 2024 · afd1f61 · afd1f61
1 parent 99eddb7
commit afd1f61
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 24 deletions.
diff --git a/assets/src/components/detours/detourRouteSelectionPanel.tsx b/assets/src/components/detours/detourRouteSelectionPanel.tsx
@@ -63,7 +63,7 @@ export const DetourRouteSelectionPanel = ({
         <section className="pb-3">
           <h2 className="c-diversion-panel__h2">Choose direction</h2>
           {selectedRouteInfo.selectedRoute ? (
-            <RoutePropertiesCard
+            <RoutePropertiesCard.WithSectionState
               routePatterns={selectedRouteInfo.routePatterns}
               selectedRoutePatternId={selectedRoutePatternFromInfo(
                 selectedRouteInfo

diff --git a/assets/src/components/mapPage.tsx b/assets/src/components/mapPage.tsx
@@ -121,7 +121,7 @@ const SelectedRoute = ({
   const routePatterns = usePatternsByIdForRoute(selectedRoutePattern.routeId)
 
   return routePatterns ? (
-    <RoutePropertiesCard
+    <RoutePropertiesCard.WithSectionState
       routePatterns={routePatterns}
       selectedRoutePatternId={selectedRoutePattern.routePatternId}
       selectRoutePattern={selectRoutePattern}

diff --git a/assets/src/components/mapPage/routePropertiesCard.tsx b/assets/src/components/mapPage/routePropertiesCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { ComponentPropsWithoutRef, useState } from "react"
 import { useRoute } from "../../contexts/routesContext"
 import { CircleCheckIcon } from "../../helpers/icon"
 import {
@@ -231,17 +231,19 @@ const RoutePropertiesCard = ({
   selectedRoutePatternId,
   selectRoutePattern,
   onClose,
-  defaultOpened = null,
+
+  openSection,
+  onChangeSection,
 }: {
   routePatterns: ByRoutePatternId<RoutePattern>
   selectedRoutePatternId: RoutePatternId
   selectRoutePattern: (routePattern: RoutePattern) => void
+
   onClose?: () => void
-  defaultOpened?: RoutePropertiesCardOpened
-}) => {
-  const [openedDetails, setOpenedDetails] =
-    useState<RoutePropertiesCardOpened>(defaultOpened)
 
+  openSection?: RoutePropertiesCardOpened
+  onChangeSection?: (newSection: RoutePropertiesCardOpened) => void
+}) => {
   const selectedRoutePattern = routePatterns[selectedRoutePatternId]
   const route: Route | null = useRoute(selectedRoutePattern?.routeId)
 
@@ -274,11 +276,9 @@ const RoutePropertiesCard = ({
       />
       <DetailSection
         title="variants"
-        isOpen={openedDetails === "variants"}
+        isOpen={openSection === "variants"}
         toggleOpen={() =>
-          setOpenedDetails((prevValue) =>
-            prevValue === "variants" ? null : "variants"
-          )
+          onChangeSection?.(openSection === "variants" ? null : "variants")
         }
         className="variant-picker"
         toggleClassName="c-route-properties-card__disclosure_toggle--variants"
@@ -291,7 +291,6 @@ const RoutePropertiesCard = ({
           selectedRoutePatternId={selectedRoutePattern.id}
           selectRoutePattern={(routePattern: RoutePattern) => {
             selectRoutePattern(routePattern)
-            setOpenedDetails(null)
           }}
         />
       </DetailSection>
@@ -300,11 +299,9 @@ const RoutePropertiesCard = ({
         title={`${(
           route.directionNames[selectedRoutePattern.directionId] || ""
         ).toLowerCase()} stops`}
-        isOpen={openedDetails === "stops"}
+        isOpen={openSection === "stops"}
         toggleOpen={() =>
-          setOpenedDetails((prevValue) =>
-            prevValue === "stops" ? null : "stops"
-          )
+          onChangeSection?.(openSection === "stops" ? null : "stops")
         }
         className="variant-stop-list"
       >
@@ -321,4 +318,19 @@ const RoutePropertiesCard = ({
   )
 }
 
+interface RPCSectionStateProps extends Omit<ComponentPropsWithoutRef<typeof RoutePropertiesCard>, "openSection" | "onChangeSection"> {
+  defaultOpenSection?: RoutePropertiesCardOpened
+}
+
+const RoutePropertiesCardWithSectionState = ({defaultOpenSection: openSectionDefault, ...props}: RPCSectionStateProps) => {
+  const [openSection, setOpenSection] = useState<RoutePropertiesCardOpened>(openSectionDefault ?? null)
+
+  return <RoutePropertiesCard
+    openSection={openSection}
+    onChangeSection={setOpenSection}
+    {...props}
+  />
+}
+RoutePropertiesCard.WithSectionState = RoutePropertiesCardWithSectionState
+
 export default RoutePropertiesCard
diff --git a/assets/stories/skate-components/routePropertiesCard.stories.tsx b/assets/stories/skate-components/routePropertiesCard.stories.tsx
@@ -66,7 +66,7 @@ const routePatterns = {
 const route = routeFactory.build({ id: "52" })
 
 const meta = {
-  component: RoutePropertiesCard,
+  component: RoutePropertiesCard.WithSectionState,
   args: {
     routePatterns: routePatterns,
     selectedRoutePatternId: routePattern0.id,
@@ -84,10 +84,10 @@ const meta = {
       </RoutesProvider>
     ),
   ],
-} satisfies Meta<typeof RoutePropertiesCard>
+} satisfies Meta<typeof RoutePropertiesCard.WithSectionState>
 export default meta
 
-type Story = StoryObj<typeof RoutePropertiesCard>
+type Story = StoryObj<typeof RoutePropertiesCard.WithSectionState>
 
 export const Default: Story = {}
 export const WithInboundSelected: Story = {
@@ -98,11 +98,11 @@ export const WithInboundSelected: Story = {
 
 export const WithVariantsOpenedByDefault: Story = {
   args: {
-    defaultOpened: "variants",
+    defaultOpenSection: "variants",
   },
 }
 export const WithStopsOpenedByDefault: Story = {
   args: {
-    defaultOpened: "stops",
+    defaultOpenSection: "stops",
   },
 }
diff --git a/assets/tests/components/mapPage/routePropertiesCard.test.tsx b/assets/tests/components/mapPage/routePropertiesCard.test.tsx
@@ -46,12 +46,12 @@ const RoutePropertiesCardWithDefaults = ({
 }) => {
   const thing = (
     <RoutesProvider routes={routes}>
-      <RoutePropertiesCard
+      <RoutePropertiesCard.WithSectionState
         routePatterns={routePatterns}
         selectedRoutePatternId={selectedRoutePatternId}
         selectRoutePattern={selectRoutePattern}
         onClose={onClose}
-        defaultOpened={defaultOpened}
+        defaultOpenSection={defaultOpened}
       />
     </RoutesProvider>
   )