DateTimePicker - turn to controlled component (issue #972) (#989)

Author: Inbal-Tish

src/components/dateTimePicker/index.js

@@ -1,18 +1,19 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import React from 'react';
+import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
 import RNDateTimePicker from '@react-native-community/datetimepicker';
 import {Constants} from '../../helpers';
 import {Colors} from '../../style';
 import Assets from '../../assets';
-import {BaseComponent} from '../../commons';
+import {asBaseComponent} from '../../commons';
 import {TextField} from '../inputs';
 import Dialog from '../dialog';
 import View from '../view';
 import Button from '../button';
 
+
 const MODES = {
   DATE: 'date',
   TIME: 'time'
@@ -28,8 +29,9 @@ const MODES = {
  */
 /*eslint-enable*/
 
-class DateTimePicker extends BaseComponent {
+class DateTimePicker extends Component {
   static displayName = 'DateTimePicker';
+
   static propTypes = {
     ...TextField.propTypes,
     /**
@@ -98,17 +100,23 @@ class DateTimePicker extends BaseComponent {
   constructor(props) {
     super(props);
 
-    const initialValue = props.value;
-    this.chosenDate = initialValue;
+    this.chosenDate = props.value;
 
     this.state = {
       showExpandableOverlay: false,
-      value: initialValue
+      prevValue: props.value,
+      value: props.value
     };
   }
 
-  generateStyles() {
-    this.styles = createStyles(this.props);
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.value !== prevState.prevValue) {
+      return {
+        prevValue: prevState.value,
+        value: nextProps.value
+      };
+    }
+    return null;
   }
 
   handleChange = (event = {}, date) => {
@@ -141,14 +149,14 @@ class DateTimePicker extends BaseComponent {
         // since handleChange() is not called on iOS when there is no actual change
         this.chosenDate = new Date();
       }
-      
+
       _.invoke(this.props, 'onChange', this.chosenDate);
       this.setState({value: this.chosenDate});
     });
 
   getStringValue = () => {
     const {value} = this.state;
-    const {mode, dateFormat, timeFormat, dateFormatter, timeFormatter} = this.getThemeProps();
+    const {mode, dateFormat, timeFormat, dateFormatter, timeFormatter} = this.props;
     if (value) {
       switch (mode) {
         case MODES.DATE:
@@ -168,7 +176,7 @@ class DateTimePicker extends BaseComponent {
   };
 
   renderExpandableOverlay = () => {
-    const {testID, dialogProps} = this.getThemeProps();
+    const {testID, dialogProps} = this.props;
     const {showExpandableOverlay} = this.state;
 
     return (
@@ -180,7 +188,7 @@ class DateTimePicker extends BaseComponent {
         bottom
         centerH
         onDismiss={this.toggleExpandableOverlay}
-        containerStyle={this.styles.dialog}
+        containerStyle={styles.dialog}
         testID={`${testID}.dialog`}
         supportedOrientations={['portrait', 'landscape', 'landscape-left', 'landscape-right']} // iOS only
         {...dialogProps}
@@ -197,7 +205,7 @@ class DateTimePicker extends BaseComponent {
     const {useCustomTheme} = this.props;
 
     return (
-      <View row spread bg-white paddingH-20 style={this.styles.header}>
+      <View row spread bg-white paddingH-20 style={styles.header}>
         <Button
           link
           iconSource={Assets.icons.x}
@@ -235,7 +243,7 @@ class DateTimePicker extends BaseComponent {
   };
 
   render() {
-    const textInputProps = TextField.extractOwnProps(this.getThemeProps());
+    const textInputProps = TextField.extractOwnProps(this.props);
 
     return (
       <TextField
@@ -249,23 +257,19 @@ class DateTimePicker extends BaseComponent {
   }
 }
 
-export default DateTimePicker;
+export {DateTimePicker}; // For tests
+export default asBaseComponent(DateTimePicker);
 
-function createStyles(props) {
-  const borderRadius = 12;
 
-  const styles = StyleSheet.create({
-    header: {
-      height: 56,
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.dark80
-    },
-    dialog: {
-      backgroundColor: Colors.white,
-      borderTopLeftRadius: borderRadius,
-      borderTopRightRadius: borderRadius
-    }
-  });
-
-  return styles;
-}
+const styles = StyleSheet.create({
+  header: {
+    height: 56,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.dark80
+  },
+  dialog: {
+    backgroundColor: Colors.white,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12
+  }
+});