Add react-transition-group for mobile screens

opentripplanner · Jun 14, 2024 · 5eef8ff · 5eef8ff
1 parent 55a26dc
commit 5eef8ff
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 105 deletions.
diff --git a/lib/components/app/batch-routing-panel.tsx b/lib/components/app/batch-routing-panel.tsx
@@ -10,9 +10,13 @@ import InvisibleA11yLabel from '../util/invisible-a11y-label'
 import LocationField from '../form/connected-location-field'
 import NarrativeItineraries from '../narrative/narrative-itineraries'
 import React, { Component, FormEvent } from 'react'
-import styled, { css } from 'styled-components'
 
-import { prefersReducedMotion } from '../util/prefersReducedMotion'
+import {
+  advancedPanelClassName,
+  mainPanelClassName,
+  transitionDuration,
+  TransitionStyles
+} from '../form/styled'
 import SwitchButton from '../form/switch-button'
 import UserSettings from '../form/user-settings'
 import ViewerContainer from '../viewers/viewer-container'
@@ -25,61 +29,6 @@ interface Props {
   showUserSettings: boolean
 }
 
-const advancedPanelClassName = 'advanced-panel'
-const mainPanelClassName = 'main-panel'
-const wipeOffset = 7
-const transitionDuration = prefersReducedMotion ? 0 : 200
-
-const transitionMixin = css`
-  transition: all ${transitionDuration}ms ease-in;
-`
-
-const wipeOutMixin = (offset: number) => css`
-  transform: translateX(${offset}px);
-  opacity: 0;
-`
-const wipeInMixin = css`
-  transform: translateX(0px);
-  opacity: 1;
-`
-
-const TransitionStyles = styled.div`
-  display: contents;
-  .${advancedPanelClassName}-enter {
-    ${wipeOutMixin(wipeOffset)}
-  }
-  .${advancedPanelClassName}-enter-done {
-    ${wipeInMixin}
-    ${transitionMixin}
-  }
-
-  .${advancedPanelClassName}-exit {
-    ${wipeInMixin}
-  }
-
-  .${advancedPanelClassName}-exit-active {
-    ${wipeOutMixin(wipeOffset)}
-    ${transitionMixin}
-  }
-
-  .${mainPanelClassName}-enter {
-    ${wipeOutMixin(-wipeOffset)}
-  }
-  .${mainPanelClassName}-enter-done {
-    ${wipeInMixin}
-    ${transitionMixin}
-  }
-
-  .${mainPanelClassName}-exit {
-    ${wipeInMixin}
-  }
-
-  .${mainPanelClassName}-exit-active {
-    ${wipeOutMixin(-wipeOffset)}
-    ${transitionMixin}
-  }
-`
-
 /**
  * Main panel for the batch/trip comparison form.
  */

diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
@@ -14,7 +14,9 @@ import React, { RefObject } from 'react'
 import styled from 'styled-components'
 
 const PanelOverlay = styled.div`
+  background-color: #fff;
   height: 100vh;
+  left: 0;
   padding: 1.5em;
   position: absolute;
   top: 0;

diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts
@@ -5,6 +5,7 @@ import {
   Styled as TripFormClasses
 } from '@opentripplanner/trip-form'
 import { Input, MenuItemLi } from '@opentripplanner/location-field/lib/styled'
+import { prefersReducedMotion } from '../util/prefersReducedMotion'
 import LocationField from '@opentripplanner/location-field'
 import styled, { css } from 'styled-components'
 
@@ -230,3 +231,59 @@ export const StyledLocationField = styled(LocationField)`
     }
   }
 `
+
+export const advancedPanelClassName = 'advanced-panel'
+export const mainPanelClassName = 'main-panel'
+export const transitionDuration = prefersReducedMotion ? 0 : 200
+
+const wipeOffset = 7
+
+const transitionMixin = css`
+  transition: all ${transitionDuration}ms ease-in;
+`
+
+const wipeOutMixin = (offset: number) => css`
+  transform: translateX(${offset}px);
+  opacity: 0;
+`
+const wipeInMixin = css`
+  transform: translateX(0px);
+  opacity: 1;
+`
+
+export const TransitionStyles = styled.div`
+  display: contents;
+  .${advancedPanelClassName}-enter {
+    ${wipeOutMixin(wipeOffset)}
+  }
+  .${advancedPanelClassName}-enter-done {
+    ${wipeInMixin}
+    ${transitionMixin}
+  }
+
+  .${advancedPanelClassName}-exit {
+    ${wipeInMixin}
+  }
+
+  .${advancedPanelClassName}-exit-active {
+    ${wipeOutMixin(wipeOffset)}
+    ${transitionMixin}
+  }
+
+  .${mainPanelClassName}-enter {
+    ${wipeOutMixin(-wipeOffset)}
+  }
+  .${mainPanelClassName}-enter-done {
+    ${wipeInMixin}
+    ${transitionMixin}
+  }
+
+  .${mainPanelClassName}-exit {
+    ${wipeInMixin}
+  }
+
+  .${mainPanelClassName}-exit-active {
+    ${wipeOutMixin(-wipeOffset)}
+    ${transitionMixin}
+  }
+`
diff --git a/lib/components/mobile/batch-search-screen.tsx b/lib/components/mobile/batch-search-screen.tsx
@@ -3,8 +3,15 @@ import { injectIntl, IntlShape } from 'react-intl'
 import React, { Component } from 'react'
 
 import * as uiActions from '../../actions/ui'
+import {
+  advancedPanelClassName,
+  mainPanelClassName,
+  transitionDuration,
+  TransitionStyles
+} from '../form/styled'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+
 import { MobileScreens } from '../../actions/ui-constants'
-import { PANEL_ANIMATION_TIMING } from '../form/styled'
 import AdvancedSettingsPanel from '../form/advanced-settings-panel'
 import BatchSettings from '../form/batch-settings'
 import DefaultMap from '../map/default-map'
@@ -24,7 +31,6 @@ interface Props {
 
 class BatchSearchScreen extends Component<Props> {
   state = {
-    fade: false,
     planTripClicked: false,
     showAdvancedModeSettings: false
   }
@@ -33,24 +39,19 @@ class BatchSearchScreen extends Component<Props> {
 
   _toFieldClicked = () => this.props.setMobileScreen(SET_TO_LOCATION)
 
+  _mainPanelContentRef = React.createRef<HTMLDivElement>()
+  _advancedSettingRef = React.createRef<HTMLDivElement>()
+
   handlePlanTripClick = () => {
     this.setState({ planTripClicked: true })
   }
 
   handleOpenAdvanceSettings = () => {
     this.setState({ showAdvancedModeSettings: true })
-    // Allow Advanced Settings panel to finish animation before removing form from DOM
-    setTimeout(() => {
-      this.setState({ fade: true })
-    }, PANEL_ANIMATION_TIMING)
   }
 
   handleCloseAdvanceSettings = () => {
-    this.setState({ fade: false })
-    // Allow Advanced Settings panel to finish animation before removing from DOM
-    setTimeout(() => {
-      this.setState({ showAdvancedModeSettings: false })
-    }, PANEL_ANIMATION_TIMING)
+    this.setState({ showAdvancedModeSettings: false })
   }
 
   render() {
@@ -65,43 +66,62 @@ class BatchSearchScreen extends Component<Props> {
         />
         <main tabIndex={-1}>
           <div className="batch-search-settings mobile-padding">
-            {!this.state.fade && (
-              <>
-                <LocationField
-                  inputPlaceholder={intl.formatMessage({
-                    id: 'components.LocationSearch.setOrigin'
-                  })}
-                  isRequired
-                  locationType="from"
-                  onTextInputClick={this._fromFieldClicked}
-                  selfValidate={planTripClicked}
-                  showClearButton={false}
-                />
-                <LocationField
-                  inputPlaceholder={intl.formatMessage({
-                    id: 'components.LocationSearch.setDestination'
-                  })}
-                  isRequired
-                  locationType="to"
-                  onTextInputClick={this._toFieldClicked}
-                  selfValidate={planTripClicked}
-                  showClearButton={false}
-                />
-                <div className="switch-button-container-mobile">
-                  <SwitchButton />
-                </div>
-                <BatchSettings
-                  onPlanTripClick={this.handlePlanTripClick}
-                  openAdvancedSettings={this.handleOpenAdvanceSettings}
-                />
-              </>
-            )}
-
-            {this.state.showAdvancedModeSettings && (
-              <AdvancedSettingsPanel
-                closeAdvancedSettings={this.handleCloseAdvanceSettings}
-              />
-            )}
+            <TransitionStyles>
+              <TransitionGroup style={{ display: 'content' }}>
+                {!this.state.showAdvancedModeSettings && (
+                  <CSSTransition
+                    classNames={mainPanelClassName}
+                    nodeRef={this._mainPanelContentRef}
+                    timeout={transitionDuration}
+                  >
+                    <div
+                      ref={this._mainPanelContentRef}
+                      style={{ display: 'content' }}
+                    >
+                      <LocationField
+                        inputPlaceholder={intl.formatMessage({
+                          id: 'components.LocationSearch.setOrigin'
+                        })}
+                        isRequired
+                        locationType="from"
+                        onTextInputClick={this._fromFieldClicked}
+                        selfValidate={planTripClicked}
+                        showClearButton={false}
+                      />
+                      <LocationField
+                        inputPlaceholder={intl.formatMessage({
+                          id: 'components.LocationSearch.setDestination'
+                        })}
+                        isRequired
+                        locationType="to"
+                        onTextInputClick={this._toFieldClicked}
+                        selfValidate={planTripClicked}
+                        showClearButton={false}
+                      />
+                      <div className="switch-button-container-mobile">
+                        <SwitchButton />
+                      </div>
+                      <BatchSettings
+                        onPlanTripClick={this.handlePlanTripClick}
+                        openAdvancedSettings={this.handleOpenAdvanceSettings}
+                      />
+                    </div>
+                  </CSSTransition>
+                )}
+                {this.state.showAdvancedModeSettings && (
+                  <CSSTransition
+                    classNames={advancedPanelClassName}
+                    nodeRef={this._advancedSettingRef}
+                    timeout={transitionDuration}
+                  >
+                    <AdvancedSettingsPanel
+                      closeAdvancedSettings={this.handleCloseAdvanceSettings}
+                      innerRef={this._advancedSettingRef}
+                    />
+                  </CSSTransition>
+                )}
+              </TransitionGroup>
+            </TransitionStyles>
           </div>
           <div className="batch-search-map">
             <DefaultMap />