Move code from cwrp to cdu

gpbl · Apr 15, 2018 · 8699670 · 8699670
1 parent 410f663
commit 8699670
Showing 1 changed file with 29 additions and 26 deletions.
diff --git a/src/DayPickerInput.js b/src/DayPickerInput.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import DayPicker from './DayPicker';
+import { isSameMonth, isDate } from './DateUtils';
 import { getModifiersForDay } from './ModifiersUtils';
 import { ESC, TAB } from './keys';
 
@@ -134,37 +135,39 @@ export default class DayPickerInput extends React.Component {
     this.handleOverlayBlur = this.handleOverlayBlur.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    const monthFromProps = this.props.dayPickerProps.month;
-    const nextMonthFromProps = nextProps.dayPickerProps.month;
+  componentDidUpdate(prevProps) {
+    const newState = {};
 
-    const selectedDaysFromProps = this.props.dayPickerProps.selectedDays;
-    const nextSelectedDaysFromProps = nextProps.dayPickerProps.selectedDays;
+    // Current props
+    const { value, formatDate, format, dayPickerProps } = this.props;
 
-    let nextValue = nextProps.value;
-    const currentValue = this.props.value;
-
-    const monthChanged =
-      (nextMonthFromProps && !monthFromProps) ||
-      (nextMonthFromProps &&
-        (nextMonthFromProps.getFullYear() !== monthFromProps.getFullYear() ||
-          nextMonthFromProps.getMonth() !== monthFromProps.getMonth()));
-
-    if (nextValue !== currentValue) {
-      if (isDate(nextValue)) {
-        nextValue = this.props.formatDate(
-          nextValue,
-          this.props.format,
-          this.props.dayPickerProps.locale
-        );
+    // Update the input value if the `value` prop has changed
+    if (value !== prevProps.value) {
+      if (isDate(value)) {
+        newState.value = formatDate(value, format, dayPickerProps.locale);
+      } else {
+        newState.value = value;
       }
-      this.setState({ value: nextValue });
     }
-    if (monthChanged) {
-      this.setState({ month: nextMonthFromProps });
+
+    // Update the month if the months from props changed
+    const prevMonth = prevProps.dayPickerProps.month;
+    if (
+      dayPickerProps.month &&
+      dayPickerProps.month !== prevMonth &&
+      !isSameMonth(dayPickerProps.month, prevMonth)
+    ) {
+      newState.month = dayPickerProps.month;
+    }
+
+    // Updated the selected days from props if they changed
+    if (prevProps.dayPickerProps.selectedDays !== dayPickerProps.selectedDays) {
+      newState.selectedDays = dayPickerProps.selectedDays;
     }
-    if (selectedDaysFromProps !== nextSelectedDaysFromProps) {
-      this.setState({ selectedDays: nextSelectedDaysFromProps });
+
+    if (Object.keys(newState).length > 0) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState(newState);
     }
   }