Add animated auto transition from hours to minutes in TimePicker

Author: javivelasco

components/animations/index.js

@@ -1,2 +1,4 @@
 export SlideLeft from './slide-left';
 export SlideRight from './slide-right';
+export ZoomIn from './zoom-in';
+export ZoomOut from './zoom-out';

components/animations/slide-left.scss

@@ -1,5 +1,3 @@
-@import "../base";
-
 .enter, .leave {
   position: absolute;
   transition-timing-function: ease-in-out;

components/animations/slide-right.scss

@@ -1,28 +1,29 @@
-@import "../base";
-
 .enter, .leave {
   position: absolute;
+}
+
+.enterActive, .leaveActive {
   transition-timing-function: ease-in-out;
-  transition-duration: .35s;
+  transition-duration: 350ms;
   transition-property: transform, opacity;
 }
 
 .enter {
   opacity: 0;
-  transform: translate3d(100%, 0, 0);
+  transform: translateX(100%);
 
   &.enterActive {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    transform: translateX(0);
   }
 }
 
 .leave {
   opacity: 1;
-  transform: translate3d(0, 0, 0);
+  transform: translateX(0);
 
   &.leaveActive {
     opacity: 0;
-    transform: translate3d(-100%, 0, 0);
+    transform: translateX(-100%);
   }
 }

components/animations/zoom-in.scss

@@ -0,0 +1,31 @@
+@import "../base";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(0.85);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(1.25);
+  }
+}

components/animations/zoom-out.scss

@@ -0,0 +1,31 @@
+@import "../base";
+
+.enter, .leave {
+  position: absolute;
+}
+
+.enterActive, .leaveActive {
+  transition-timing-function: $animation-curve-fast-out-slow-in;
+  transition-duration: 500ms;
+  transition-property: transform, opacity;
+}
+
+.enter {
+  opacity: 0;
+  transform: scale(1.25);
+
+  &.enterActive {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.leave {
+  opacity: 1;
+  transform: scale(1);
+
+  &.leaveActive {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}

components/time_picker/Clock.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import CssTransitionGroup from 'react-addons-css-transition-group';
+import { ZoomIn, ZoomOut } from '../animations';
 import style from './style.clock';
 import time from '../utils/time';
 import Hours from './ClockHours';
@@ -10,6 +12,7 @@ class Clock extends React.Component {
     display: React.PropTypes.oneOf(['hours', 'minutes']),
     format: React.PropTypes.oneOf(['24hr', 'ampm']),
     onChange: React.PropTypes.func,
+    onHandMoved: React.PropTypes.func,
     time: React.PropTypes.object
   };
 
@@ -47,7 +50,7 @@ class Clock extends React.Component {
   };
 
   handleCalculateShape = () => {
-    const { top, left, width } = this.refs.wrapper.getBoundingClientRect();
+    const { top, left, width } = this.refs.placeholder.getBoundingClientRect();
     this.setState({
       center: { x: left + width / 2, y: top + width / 2 },
       radius: width / 2
@@ -75,6 +78,7 @@ class Clock extends React.Component {
         radius={this.state.radius}
         selected={this.props.time.getHours()}
         spacing={this.state.radius * 0.18}
+        onHandMoved={this.props.onHandMoved}
       />
     );
   }
@@ -87,16 +91,22 @@ class Clock extends React.Component {
         radius={this.state.radius}
         selected={this.props.time.getMinutes()}
         spacing={this.state.radius * 0.18}
+        onHandMoved={this.props.onHandMoved}
       />
     );
   }
 
   render () {
+    const animation = this.props.display === 'hours' ? ZoomOut : ZoomIn;
     return (
       <div data-react-toolbox='clock' className={style.root}>
-        <div ref='wrapper' className={style.wrapper} style={{height: this.state.radius * 2}}>
-          {this.props.display === 'hours' ? this.renderHours() : null}
-          {this.props.display === 'minutes' ? this.renderMinutes() : null}
+        <div ref='placeholder' className={style.placeholder} style={{height: this.state.radius * 2}}>
+          <CssTransitionGroup transitionName={animation} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
+            <div key={this.props.display} className={style.wrapper} style={{height: this.state.radius * 2}}>
+              {this.props.display === 'hours' ? this.renderHours() : null}
+              {this.props.display === 'minutes' ? this.renderMinutes() : null}
+            </div>
+          </CssTransitionGroup>
         </div>
       </div>
     );

components/time_picker/TimePickerDialog.jsx

@@ -42,6 +42,10 @@ class TimePickerDialog extends React.Component {
     this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)});
   };
 
+  handleHandMoved = () => {
+    if (this.state.display === 'hours') this.setState({display: 'minutes'});
+  };
+
   switchDisplay = (display) => {
     this.setState({display});
   };
@@ -90,8 +94,9 @@ class TimePickerDialog extends React.Component {
           ref='clock'
           display={this.state.display}
           format={this.props.format}
-          time={this.state.displayTime}
           onChange={this.handleClockChange}
+          onHandMoved={this.handleHandMoved}
+          time={this.state.displayTime}
         />
       </Dialog>
     );

components/time_picker/style.clock.scss

@@ -5,9 +5,14 @@
   padding: $clock-padding;
 }
 
-.wrapper {
+.placeholder {
   position: relative;
   z-index: $z-index-high;
+}
+
+.wrapper {
+  position: absolute;
+  width: 100%;
   background-color: $color-divider;
   border-radius: 50%;
 }

components/time_picker/style.scss

@@ -48,6 +48,7 @@
   width: $timepicker-dialog-width;
   > [role="body"] {
     padding: 0;
+    overflow-y: visible;
   }
   > [role="navigation"] > .button {
     color: $timepicker-primary-color;