Add increment back arrow to time player (apache#6062)

* Working on CSS

* Will fix CSS later

* Simplify PR

(cherry picked from commit 3cc6fb6)

superset/assets/src/visualizations/PlaySlider.jsx

@@ -47,7 +47,8 @@ export default class PlaySlider extends React.PureComponent {
     this.onChange = this.onChange.bind(this);
     this.play = this.play.bind(this);
     this.pause = this.pause.bind(this);
-    this.step = this.step.bind(this);
+    this.stepBackward = this.stepBackward.bind(this);
+    this.stepForward = this.stepForward.bind(this);
     this.getPlayClass = this.getPlayClass.bind(this);
     this.formatter = this.formatter.bind(this);
   }
@@ -76,15 +77,15 @@ export default class PlaySlider extends React.PureComponent {
     if (this.state.intervalId != null) {
       this.pause();
     } else {
-      const id = setInterval(this.step, this.intervalMilliseconds);
+      const id = setInterval(this.stepForward, this.intervalMilliseconds);
       this.setState({ intervalId: id });
     }
   }
   pause() {
     clearInterval(this.state.intervalId);
     this.setState({ intervalId: null });
   }
-  step() {
+  stepForward() {
     const { start, end, step, values, disabled } = this.props;
 
     if (disabled) {
@@ -97,6 +98,19 @@ export default class PlaySlider extends React.PureComponent {
 
     this.props.onChange(nextValues.map(value => value - carriageReturn));
   }
+  stepBackward() {
+    const { start, end, step, values, disabled } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
+    const currentValues = Array.isArray(values) ? values : [values, values + step];
+    const nextValues = currentValues.map(value => value - this.increment);
+    const carriageReturn = (nextValues[0] < start) ? (end - nextValues[1]) : 0;
+
+    this.props.onChange(nextValues.map(value => value + carriageReturn));
+  }
   formatter(values) {
     if (this.props.disabled) {
       return t('Data has no time steps');
@@ -115,8 +129,9 @@ export default class PlaySlider extends React.PureComponent {
     return (
       <Row className="play-slider">
         <Col md={1} className="padded">
+          <i className="fa fa-step-backward fa-lg slider-button " onClick={this.stepBackward} />
           <i className={this.getPlayClass()} onClick={this.play} />
-          <i className="fa fa-step-forward fa-lg slider-button " onClick={this.step} />
+          <i className="fa fa-step-forward fa-lg slider-button " onClick={this.stepForward} />
         </Col>
         <Col md={11} className="padded">
           <BootrapSliderWrapper