Merge pull request xgfe#76 from kathawthorne/animate-close

Add animation on datepicker dismiss

Author: feyy

index.js

@@ -52,10 +52,9 @@ class DatePicker extends Component {
   setModalVisible(visible) {
     const {height, duration} = this.props;
 
-    this.setState({modalVisible: visible});
-
     // slide animation
     if (visible) {
+      this.setState({modalVisible: visible});
       Animated.timing(
         this.state.animatedHeight,
         {
@@ -64,8 +63,14 @@ class DatePicker extends Component {
         }
       ).start();
     } else {
-      this.setState({
-        animatedHeight: new Animated.Value(0)
+      Animated.timing(
+        this.state.animatedHeight,
+        {
+          toValue: 0,
+          duration: duration
+        }
+      ).start(() => {
+        this.setState({modalVisible: visible});
       });
     }
   }

test/index.test.js

@@ -156,15 +156,19 @@ describe('DatePicker:', () => {
     const wrapper = shallow(<DatePicker />);
     const datePicker = wrapper.instance();
 
-    datePicker.setModalVisible(true);
-
-    expect(wrapper.state('modalVisible')).to.equal(true);
-    expect(wrapper.state('animatedHeight')._animation._toValue).to.above(200);
-
-    datePicker.setModalVisible(false);
-
-    expect(wrapper.state('modalVisible')).to.equal(false);
-    expect(wrapper.state('animatedHeight')).to.deep.equal(new Animated.Value(0));
+    new Promise(function(resolve, reject) {
+      datePicker.setModalVisible(true);
+    }).then((result) => {
+      expect(wrapper.state('modalVisible')).to.equal(true);
+      expect(wrapper.state('animatedHeight')._animation._toValue).to.above(200);
+    })
+
+    new Promise(function(resolve, reject) {
+      datePicker.setModalVisible(false);
+    }).then((result) => {
+      expect(wrapper.state('modalVisible')).to.equal(false);
+      expect(wrapper.state('animatedHeight')).to.deep.equal(new Animated.Value(0));
+    });
   });
 
   it('onPressCancel', () => {