Fix compatibility with React 16.4

React 16.4 included a change to the behavior of `getDerivedStateFromProps` which is now called after internal state updates in addition to received props. This change updates the comparison logic between current and incoming date values to ensure the local state is not overwritten with the prop value immediately following a state update.

Author: 10xjs

src/DateInputController.js

@@ -98,29 +98,22 @@ DateInputController.defaultProps = {
 };
 
 DateInputController.getDerivedStateFromProps = (props: Props, state: State) => {
-  const newValue = !areEqualDates(state.value, props.value);
-  const newMin = !areEqualDates(state.min, props.min);
-  const newMax = !areEqualDates(state.max, props.max);
-  const newUTC = state.utc !== props.utc;
+  const {value = new Date(0), min, max, utc} = props;
+
+  const newValue = !areEqualDates(state.props.value, value);
+  const newMin = !areEqualDates(state.props.min, min);
+  const newMax = !areEqualDates(state.props.max, max);
+  const newUTC = state.props.utc !== utc;
 
   // Check if any of the props that can affect state have changed.
   if (!newValue && !newMin && !newMax && !newUTC) {
     return null;
   }
 
-  let nextState = Object.assign({}, state);
-  nextState.utc = props.utc;
-
-  if (newMin) {
-    nextState.min = props.min;
-  }
-
-  if (newMax) {
-    nextState.max = props.max;
-  }
+  let nextState = Object.assign({}, state, {props: {value, min, max, utc}});
 
   const updaters = fieldKeys.map((_, i) =>
-    updateField(i, getDateField[i](props.value, props.utc)),
+    updateField(i, getDateField[i](newValue ? value : state.value, utc)),
   );
 
   // Calculate a new state from the incoming props.

src/types.js

@@ -33,10 +33,13 @@ export type FieldActions = {
 };
 
 export type State = {
+  props: {
+    value: Date,
+    min?: Date,
+    max?: Date,
+    utc: boolean,
+  },
   value: Date,
-  min?: Date,
-  max?: Date,
-  utc: boolean,
 
   setFields(fields: {
     year?: number | string,

src/util.js

@@ -40,7 +40,7 @@ export const fieldKeys = ['year', 'month', 'day', 'hour', 'minute', 'second'];
 
 export const dateValue = (state: State): Date => {
   const args = fieldKeys.map((_, i) => state[fieldKeys[i]]);
-  if (state.utc) {
+  if (state.props.utc) {
     return new Date(Date.UTC.apply(null, args));
   }
   // $ExpectError Flow doesn't like us touching Date.bind
@@ -53,11 +53,11 @@ const atMin = (state: State, index: number) => {
     return true;
   }
 
-  const min = state.min;
+  const min = state.props.min;
   return (
     min &&
     ((index === 0 ? true : atMin(state, index - 1)) &&
-      getDateField[index](min, state.utc) >= state[fieldKeys[index]])
+      getDateField[index](min, state.props.utc) >= state[fieldKeys[index]])
   );
 };
 
@@ -66,11 +66,11 @@ const atMax = (state: State, index: number) => {
     return true;
   }
 
-  const max = state.max;
+  const max = state.props.max;
   return (
     max &&
     ((index === 0 ? true : atMax(state, index - 1)) &&
-      getDateField[index](max, state.utc) <= state[fieldKeys[index]])
+      getDateField[index](max, state.props.utc) <= state[fieldKeys[index]])
   );
 };
 
@@ -84,21 +84,21 @@ const resolveDefaultMax = (state: State, index: number) => {
 };
 
 export const getMin = (state: State, index: number) => {
-  const min = state.min;
+  const min = state.props.min;
   // If min date is defined and the next-largest field is at its min value...
   return min && atMin(state, index - 1)
     ? // return the value of the min date at the current field...
-      getDateField[index](min, state.utc)
+      getDateField[index](min, state.props.utc)
     : // or return a default min value for the field.
       defaultMin[index];
 };
 
 export const getMax = (state: State, index: number) => {
-  const max = state.max;
+  const max = state.props.max;
   // If max date is defined and the next-largest field is at its max value...
   return max && atMax(state, index - 1)
     ? // return the value of the max date at the current field...
-      getDateField[index](max, state.utc)
+      getDateField[index](max, state.props.utc)
     : // or return a default max value for the field.
       resolveDefaultMax(state, index);
 };
@@ -144,16 +144,18 @@ export const getInitialState = (
 ): {state: State, actions: FieldActions} => {
   const updaters = [];
 
+  const {value = new Date(0), min, max, utc} = target.props;
+
   const actions: $Shape<FieldActions> = {};
   let state: $Shape<State> = {
-    value: target.props.value === undefined ? new Date(0) : target.props.value,
-    min: target.props.min,
-    max: target.props.max,
-    utc: target.props.utc,
+    value,
+    props: {value, min, max, utc},
   };
 
   fieldKeys.forEach((field, i) => {
-    updaters.push(updateField(i, getDateField[i](state.value, state.utc)));
+    updaters.push(
+      updateField(i, getDateField[i](state.value, state.props.utc)),
+    );
 
     const setter = (value) => {
       const fields = {};

test/DateInputController.test.js

@@ -79,6 +79,19 @@ describe('<DateInputController/>', () => {
         expect(state).toEqual(null);
       });
 
+      it('should default undefined value to date with value 0', () => {
+        const instance = getInstance({value: date});
+
+        const nextProps = {...instance.props, value: undefined};
+
+        const state = DateInputController.getDerivedStateFromProps(
+          nextProps,
+          instance.state,
+        );
+
+        expect(state.props.value.getTime()).toEqual(new Date(0).getTime());
+      });
+
       it('should return updated state if value prop has changed', () => {
         const instance = getInstance({value: date});
 
@@ -99,7 +112,7 @@ describe('<DateInputController/>', () => {
           // $ExpectError cast nullable state as any
         ): any);
 
-        const {value, day, second, ...rest} = state;
+        const {value, day, second, props: _props, ...rest} = state;
 
         expect(day).toEqual(nextDate.getDate());
 
@@ -132,11 +145,9 @@ describe('<DateInputController/>', () => {
           // $ExpectError cast nullable state as any
         ): any);
 
-        const {value, min, hour, hourMin, ...rest} = state;
-
-        expect(min).toBe(min);
+        const {value, hour, hourMin, props, ...rest} = state;
 
-        expect(value.getHours()).toBe(min.getHours());
+        expect(value.getHours()).toBe(props.min.getHours());
 
         expect(hour).toBe(nextMin.getHours());
 
@@ -166,11 +177,9 @@ describe('<DateInputController/>', () => {
           // $ExpectError cast nullable state as any
         ): any);
 
-        const {value, max, hour, hourMax, ...rest} = state;
+        const {value, hour, hourMax, props, ...rest} = state;
 
-        expect(max).toBe(max);
-
-        expect(value.getHours()).toBe(max.getHours());
+        expect(value.getHours()).toBe(props.max.getHours());
 
         expect(hour).toBe(nextMax.getHours());
 
@@ -192,28 +201,42 @@ describe('<DateInputController/>', () => {
         ): any);
 
         const {
-          max,
           yearMax,
           monthMax,
           dayMax,
           hourMax,
           minuteMax,
           secondMax,
+          props,
           ...rest
         } = state;
 
-        expect(max).toBe(date);
+        expect(props.max).toBe(date);
 
-        expect(yearMax).toBe(max.getFullYear());
-        expect(monthMax).toBe(max.getMonth());
-        expect(dayMax).toBe(max.getDate());
-        expect(hourMax).toBe(max.getHours());
-        expect(minuteMax).toBe(max.getMinutes());
-        expect(secondMax).toBe(max.getSeconds());
+        expect(yearMax).toBe(props.max.getFullYear());
+        expect(monthMax).toBe(props.max.getMonth());
+        expect(dayMax).toBe(props.max.getDate());
+        expect(hourMax).toBe(props.max.getHours());
+        expect(minuteMax).toBe(props.max.getMinutes());
+        expect(secondMax).toBe(props.max.getSeconds());
 
         // it should leave remaining state value unchanged
         expect(shallowIntersect(rest, instance.state)).toBe(true);
       });
+
+      it('should not overwrite state change with props', () => {
+        const instance = getInstance({value: date});
+
+        // Update internal state.
+        instance.setFields({year: date.getFullYear() + 1});
+
+        const state = DateInputController.getDerivedStateFromProps(
+          instance.props,
+          instance.state,
+        );
+
+        expect(state).toEqual(null);
+      });
     });
   });
 

test/util.test.js

@@ -208,7 +208,7 @@ describe('utils', () => {
       });
 
       it('should return a Date representation of the state in UTC', () => {
-        state.utc = true;
+        state.props.utc = true;
 
         expect(dateValue(state).getTime()).toEqual(
           Date.UTC(