From 2fb102b601a929be74eb9042745a1bb63ed7bc6a Mon Sep 17 00:00:00 2001
From: alessandro <alessandro.fan@welld.ch>
Date: Wed, 25 Aug 2021 13:07:41 -0700
Subject: [PATCH] refactor: remove DefeaultProps from the DatePickerIOS
 component (#32064)

Summary:
Closes issue  https://github.com/facebook/react-native/issues/31605.
This is part of a bigger issue that plans to remove defaultProps from class components in order to provide a smoother transition to functional components.

## Changelog

[General] [Changed] - Remove defaultProps from the DatePickerIOS Component.
[General] [Test] - Added snapshot test for the new component

Pull Request resolved: https://github.com/facebook/react-native/pull/32064

Test Plan: Compiled the rn-tester folder to check if the behavior is consistent with the previous versions.

Reviewed By: lunaleaps

Differential Revision: D30492515

Pulled By: yungsters

fbshipit-source-id: ed2c5f3211742d528ff3f8e406a53cd7ea43d7e7
---
 .../DatePicker/DatePickerIOS.ios.js           |  9 ++--
 .../__tests__/DatePickerIOS-test.js           | 14 ++++++
 .../__snapshots__/DatePickerIOS-test.js.snap  | 48 +++++++++++++++++++
 3 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/Libraries/Components/DatePicker/DatePickerIOS.ios.js b/Libraries/Components/DatePicker/DatePickerIOS.ios.js
index 30cc13ad55f..8295e3aeded 100644
--- a/Libraries/Components/DatePicker/DatePickerIOS.ios.js
+++ b/Libraries/Components/DatePicker/DatePickerIOS.ios.js
@@ -117,10 +117,6 @@ type Props = $ReadOnly<{|
  * source of truth.
  */
 class DatePickerIOS extends React.Component<Props> {
-  static DefaultProps: {|mode: $TEMPORARY$string<'datetime'>|} = {
-    mode: 'datetime',
-  };
-
   _picker: ?React.ElementRef<typeof RCTDatePickerNativeComponent> = null;
 
   componentDidUpdate() {
@@ -142,6 +138,7 @@ class DatePickerIOS extends React.Component<Props> {
 
   render(): React.Node {
     const props = this.props;
+    const mode = props.mode ?? 'datetime';
     invariant(
       props.date || props.initialDate,
       'A selected date or initial date should be specified.',
@@ -153,7 +150,7 @@ class DatePickerIOS extends React.Component<Props> {
           ref={picker => {
             this._picker = picker;
           }}
-          style={getHeight(props.pickerStyle, props.mode)}
+          style={getHeight(props.pickerStyle, mode)}
           date={
             props.date
               ? props.date.getTime()
@@ -172,7 +169,7 @@ class DatePickerIOS extends React.Component<Props> {
           minimumDate={
             props.minimumDate ? props.minimumDate.getTime() : undefined
           }
-          mode={props.mode}
+          mode={mode}
           minuteInterval={props.minuteInterval}
           timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
           onChange={this._onChange}
diff --git a/Libraries/Components/DatePicker/__tests__/DatePickerIOS-test.js b/Libraries/Components/DatePicker/__tests__/DatePickerIOS-test.js
index bcc029c4768..79579b82ee5 100644
--- a/Libraries/Components/DatePicker/__tests__/DatePickerIOS-test.js
+++ b/Libraries/Components/DatePicker/__tests__/DatePickerIOS-test.js
@@ -32,4 +32,18 @@ describe('DatePickerIOS', () => {
       },
     );
   });
+  it('should render DatePicker with the datetime mode if no mode is passed inside the props', () => {
+    ReactNativeTestTools.expectRendersMatchingSnapshot(
+      'DatePickerIOS',
+      () => (
+        <DatePickerIOS
+          date={new Date(1555883690956)}
+          onDateChange={jest.fn()}
+        />
+      ),
+      () => {
+        jest.dontMock('../DatePickerIOS');
+      },
+    );
+  });
 });
diff --git a/Libraries/Components/DatePicker/__tests__/__snapshots__/DatePickerIOS-test.js.snap b/Libraries/Components/DatePicker/__tests__/__snapshots__/DatePickerIOS-test.js.snap
index e463f981914..55ce6c20671 100644
--- a/Libraries/Components/DatePicker/__tests__/__snapshots__/DatePickerIOS-test.js.snap
+++ b/Libraries/Components/DatePicker/__tests__/__snapshots__/DatePickerIOS-test.js.snap
@@ -1,5 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DatePickerIOS should render DatePicker with the datetime mode if no mode is passed inside the props: should deep render when mocked (please verify output manually) 1`] = `
+<View>
+  <RCTDatePicker
+    date={1555883690956}
+    mode="datetime"
+    onChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "height": 216,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`DatePickerIOS should render DatePicker with the datetime mode if no mode is passed inside the props: should deep render when not mocked (please verify output manually) 1`] = `
+<View>
+  <RCTDatePicker
+    date={1555883690956}
+    mode="datetime"
+    onChange={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "height": 216,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`DatePickerIOS should render DatePicker with the datetime mode if no mode is passed inside the props: should shallow render as <DatePickerIOS /> when mocked 1`] = `
+<DatePickerIOS
+  date={2019-04-21T21:54:50.956Z}
+  onDateChange={[MockFunction]}
+/>
+`;
+
+exports[`DatePickerIOS should render DatePicker with the datetime mode if no mode is passed inside the props: should shallow render as <DatePickerIOS /> when not mocked 1`] = `
+<DatePickerIOS
+  date={2019-04-21T21:54:50.956Z}
+  onDateChange={[MockFunction]}
+/>
+`;
+
 exports[`DatePickerIOS should render as expected: should deep render when mocked (please verify output manually) 1`] = `
 <View>
   <RCTDatePicker