Migrated to new lifecycle method for datepiceker (#10309)

…picker

First of all, thank you for your contribution! :-)

Please makes sure that these checkboxes are checked before submitting your PR, thank you!

* [x] Make sure that you propose PR to right branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
* [x] Make sure that you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
* [x] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
* [x] Rebase before creating a PR to keep commit history clear.
* [x] Add some descriptions and refer relative issues for you PR.

Extra checklist:

**if** *isBugFix* **:**

no
**elif** *isNewFeature* **:**

#9792

components/date-picker/RangePicker.tsx

@@ -1,6 +1,7 @@
 /* tslint:disable jsx-no-multiline-js */
 import * as React from 'react';
 import * as moment from 'moment';
+import { polyfill } from 'react-lifecycles-compat';
 import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
@@ -63,13 +64,31 @@ function fixLocale(value: RangePickerValue | undefined, localeCode: string) {
   }
 }
 
-export default class RangePicker extends React.Component<any, RangePickerState> {
+class RangePicker extends React.Component<any, RangePickerState> {
   static defaultProps = {
     prefixCls: 'ant-calendar',
     allowClear: true,
     showToday: false,
   };
 
+  static getDerivedStateFromProps(nextProps: any, prevState: any) {
+    let state = null;
+    if ('value' in nextProps) {
+      const value = nextProps.value || [];
+      state = {
+        value,
+        showDate: getShowDateFromValue(value) || prevState.showDate,
+      };
+    }
+    if (('open' in nextProps) && prevState.open !== nextProps.open) {
+      state = {
+        ...state,
+        open: nextProps.open,
+      };
+    }
+    return state;
+  }
+
   private picker: HTMLSpanElement;
 
   constructor(props: any) {
@@ -93,22 +112,6 @@ export default class RangePicker extends React.Component<any, RangePickerState>
     };
   }
 
-  componentWillReceiveProps(nextProps: any) {
-    if ('value' in nextProps) {
-      const state = this.state;
-      const value = nextProps.value || [];
-      this.setState({
-        value,
-        showDate: getShowDateFromValue(value) || state.showDate,
-      });
-    }
-    if ('open' in nextProps) {
-      this.setState({
-        open: nextProps.open,
-      });
-    }
-  }
-
   clearSelection = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -366,3 +369,7 @@ export default class RangePicker extends React.Component<any, RangePickerState>
     );
   }
 }
+
+polyfill(RangePicker);
+
+export default RangePicker;

components/date-picker/WeekPicker.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as moment from 'moment';
+import { polyfill } from 'react-lifecycles-compat';
 import Calendar from 'rc-calendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
@@ -10,12 +11,19 @@ function formatValue(value: moment.Moment | null, format: string): string {
   return (value && value.format(format)) || '';
 }
 
-export default class WeekPicker extends React.Component<any, any> {
+class WeekPicker extends React.Component<any, any> {
   static defaultProps = {
     format: 'gggg-wo',
     allowClear: true,
   };
 
+  static getDerivedStateFromProps(nextProps: any) {
+    if ('value' in nextProps) {
+      return { value: nextProps.value };
+    }
+    return null;
+  }
+
   private input: any;
 
   constructor(props: any) {
@@ -31,11 +39,6 @@ export default class WeekPicker extends React.Component<any, any> {
       value,
     };
   }
-  componentWillReceiveProps(nextProps: any) {
-    if ('value' in nextProps) {
-      this.setState({ value: nextProps.value });
-    }
-  }
   weekDateRender = (current: any) => {
     const selectedValue = this.state.value;
     const { prefixCls } = this.props;
@@ -149,3 +152,7 @@ export default class WeekPicker extends React.Component<any, any> {
     );
   }
 }
+
+polyfill(WeekPicker);
+
+export default WeekPicker;

components/date-picker/createPicker.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as moment from 'moment';
+import { polyfill } from 'react-lifecycles-compat';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
@@ -15,13 +16,22 @@ export interface PickerProps {
 }
 
 export default function createPicker(TheCalendar: React.ComponentClass): any {
-  return class CalenderWrapper extends React.Component<any, any> {
+  class CalenderWrapper extends React.Component<any, any> {
     static defaultProps = {
       prefixCls: 'ant-calendar',
       allowClear: true,
       showToday: true,
     };
 
+    static getDerivedStateFromProps(nextProps: PickerProps) {
+      if ('value' in nextProps) {
+        return {
+          value: nextProps.value,
+          showDate: nextProps.value,
+        };
+      }
+    }
+
     private input: any;
 
     constructor(props: any) {
@@ -39,15 +49,6 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
       };
     }
 
-    componentWillReceiveProps(nextProps: PickerProps) {
-      if ('value' in nextProps) {
-        this.setState({
-          value: nextProps.value,
-          showDate: nextProps.value,
-        });
-      }
-    }
-
     renderFooter = (...args: any[]) => {
       const { prefixCls, renderExtraFooter } = this.props;
       return renderExtraFooter ? (
@@ -195,5 +196,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
         </span>
       );
     }
-  };
+  }
+  polyfill(CalenderWrapper);
+  return CalenderWrapper;
 }

package.json

@@ -83,7 +83,7 @@
     "rc-upload": "~2.5.0",
     "rc-util": "^4.0.4",
     "react-lazy-load": "^3.0.12",
-    "react-lifecycles-compat": "^3.0.4",
+    "react-lifecycles-compat": "^3.0.2",
     "react-slick": "~0.23.1",
     "shallowequal": "^1.0.1",
     "warning": "~4.0.1"