Adjust map transition timing when switching tasks.

Author: nrotstan

src/components/HOCs/WithMapBounds/WithMapBounds.js

@@ -86,7 +86,7 @@ const mapDispatchToProps = dispatch => {
       }
     },
 
-    setTaskMapBounds: (bounds, zoom, fromUserAction=false) => {
+    setTaskMapBounds: (task, bounds, zoom, fromUserAction=false) => {
       dispatch(setTaskMapBounds(bounds, zoom, fromUserAction))
     },
   }

src/components/TaskPane/TaskMap/TaskMap.js

@@ -47,6 +47,10 @@ export default class TaskMap extends Component {
     return false
   }
 
+  updateTaskBounds = (bounds, zoom) => {
+    this.props.setTaskMapBounds(this.props.task, bounds, zoom, false)
+  }
+
   render() {
     if (!this.props.task || !_isObject(this.props.task.parent)) {
       return null
@@ -67,7 +71,7 @@ export default class TaskMap extends Component {
                      center={this.props.centerPoint} zoom={zoom} zoomControl={false}
                      minZoom={minZoom} maxZoom={maxZoom}
                      features={_get(this.props.task, 'geometries.features')}
-                     onBoundsChange={this.props.setTaskMapBounds}
+                     onBoundsChange={this.updateTaskBounds}
         >
           <ZoomControl position='topright' />
           <VisibleTileLayer maxZoom={maxZoom} />

src/components/TaskPane/TaskPane.js

@@ -65,7 +65,7 @@ export default class TaskPane extends Component {
         <MapPane>
           <TransitionGroup>
             {this.state.completingTask !== this.props.task.id &&
-              <CSSTransition key={this.props.task.id} timeout={1500}
+              <CSSTransition key={this.props.task.id} timeout={{enter: 1500, exit: 500}}
                              classNames="animate-slide">
                 <DetailMap task={this.props.task} {...this.props} />
               </CSSTransition>