From 179ca9cc567e00e227eb829dd29e601bb2c0b004 Mon Sep 17 00:00:00 2001
From: Trevor Gerhardt <trevorgerhardt@gmail.com>
Date: Mon, 2 Apr 2018 22:17:33 +0800
Subject: [PATCH] feat(timecutoff): Animate the time cutoff

---
 src/components/form.js | 23 +++++++++++++++++++++--
 src/index.css          |  5 +++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/form.js b/src/components/form.js
index 2608de3..e5eff73 100644
--- a/src/components/form.js
+++ b/src/components/form.js
@@ -1,4 +1,5 @@
 // @flow
+import Icon from '@conveyal/woonerf/components/icon'
 import message from '@conveyal/woonerf/message'
 import React from 'react'
 
@@ -26,6 +27,20 @@ type Props = {
 export default class Form extends React.PureComponent {
   props: Props
 
+  state = {
+    animating: false
+  }
+
+  _animateTimeCutoff = () => {
+    this.setState({animating: true})
+    this._animateTo(0)
+  }
+
+  _animateTo (cutoff: number) {
+    this.props.onTimeCutoffChange({currentTarget: {value: cutoff}})
+    if (cutoff < 120) setTimeout(() => this._animateTo(cutoff + 1), 50)
+  }
+
   render () {
     const {
       end,
@@ -70,18 +85,22 @@ export default class Form extends React.PureComponent {
             </div>
             <div className='heading'>
               {message('Strings.HighlightAreaAccessibleWithin')}
+              <a className='pull-right' onClick={this._animateTimeCutoff}>
+                <Icon type='play' />
+              </a>
             </div>
             <div className='TimeCutoff'>
               <div className='Time'>
                 {selectedTimeCutoff} {message('Units.Minutes')}
               </div>
               <input
-                defaultValue={selectedTimeCutoff}
+                disabled={this.state.animating}
                 onChange={onTimeCutoffChange}
                 type='range'
                 min={10}
                 max={120}
-                step={5}
+                step={1}
+                value={selectedTimeCutoff}
               />
             </div>
           </div>}
diff --git a/src/index.css b/src/index.css
index d9ca27b..df048c2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -46,6 +46,11 @@ body {
   font-weight: 700;
 }
 
+.Taui-Dock-content .heading a {
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+}
+
 .Taui-Dock-content .title {
   color: rgba(255, 255, 255, 0.95);
   font-size: 1.5rem;